ดาวน์โหลด ToolKit JS - ดาวน์โหลดซอร์สโค้ด ToolKit JS

ToolKit JS

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

ชุดเครื่องมือV3

โอเค ดังนั้นฉันจึงทิ้งเวอร์ชัน 1 และเวอร์ชัน 2 ทิ้งไป เพียงเพราะเป้าหมายสูงสุดเบื้องหลัง ToolKitMin คือการนำเสนอชุดเครื่องมือ ซึ่งไม่จำเป็นต้องเป็นเฟรมเวิร์กต่อการพูด แต่เป็นไลบรารีของ คุณสามารถมอง ToolKitMin เป็นไลบรารีที่ช่วยในการพัฒนาแอปพลิเคชันส่วนหน้าได้ ToolKitMin เป็นเครื่องมืออันทรงพลังสำหรับผู้เริ่มต้นในการเรียนรู้ เนื่องจากมีดังต่อไปนี้:

ส่วนประกอบ
- เอ็นจิ้นเทมเพลตที่เรียบง่าย
- รัฐ
แบบสอบถาม
- ในความทรงจำ
บริการ (หรือที่เรียกว่า AJAX)
ตัวควบคุมการจัดเก็บข้อมูล
ฯลฯ

นี่คือตัวอย่างโค้ดบางส่วน...

 var app = ToolKit ;
app . DOM . ready ( function ( ) {
  console . log ( app ) ;
  app . Session . set ( 'user_id' , { user_id : 1 } ) ;
  console . log ( app . Session . get ( 'user_id' ) ) ;

  // Query demo.
  var queryString = "age GTE 20" ;
  var queryCols = [ "age" , "name" ] ;
  var queryData = [ { "age" : "30" , "name" : "Jack" } , { "age" : "20" , "name" : "Jay" } , { "age" : "12" , "name" : "Stacy" } ] ;

  app . Query . setColumns ( queryCols ) ;
  app . Query . setTable ( queryData ) ;
  app . Query . select ( queryString ) ;

  app . Query . onComplete ( function ( records ) {
    console . log ( 'Complete query' ) ;
    console . log ( records ) ;
  } ) ;

  // AJAX demo.
  app . Service ( {
    url : window . location . href ,
    method : "GET" ,
    success : function ( data ) {
      console . log ( data ) ;
      app . Query . exe ( ) ;
    }
  } ) ;

  // Component demo.
  window . appState = {
    name : 'Will I Am'
  } ;

  var component = {
    name : 'demo' ,
    state : window . appState ,
    root : app . Utils . $one ( "body" ) ,
    template : '<h1><% data.name %></h1>' ,
    onStateChange : function ( ) {
      console . log ( "State changed!" ) ;
    } ,
    onRender : function ( ) {
      console . log ( "Rendered!" ) ;
    }
  } ;

  app . Component . registerComponent ( component ) ;

  app . Router . add ( / home / , function ( ) {
    console . log ( 'Home page.' ) ;
  } ) ;
  app . Router . add ( / about / , function ( ) {
    console . log ( 'About page' ) ;
  } ) ;
  app . Router . add ( function ( ) {
    console . log ( '404 Error?!' ) ;
  } ) ;
} ) ;

// Wait 2 seconds to see the component update.
setTimeout ( function ( ) {
  window . appState . name = "Will Smith" ;
} , 2000 ) ;

// Test the router.
setTimeout ( function ( ) {
  app . Router . navigate ( 'home' ) ;
} , 1000 ) ;

setTimeout ( function ( ) {
  app . Router . navigate ( 'about' ) ;
} , 2000 ) ;

setTimeout ( function ( ) {
  app . Router . navigate ( '404test' ) ;
} , 3000 ) ;

ToolKitMin คือสิ่งที่ชื่ออาจบอกเป็นนัย เป็นชุดเครื่องมือที่รวบรวมไว้ด้วยกัน มีเพียงเครื่องมือจำนวนมากเท่านั้นที่ถูกแยกออกจากแกนหลัก เพื่อให้แน่ใจว่า ToolKitMin-JS ยังคงมีน้ำหนักเบาที่สุดเท่าที่จะเป็นไปได้ ในขณะที่ส่งมอบได้มากมาย ของฟังก์ชันการทำงาน

สิ่งที่ต้องทำ

อัปเดตเอกสาร & อะไรอีก!

คุณสมบัติ

บริการ
ส่วนประกอบ
ยูทิลิตี้
แบบสอบถาม
เราเตอร์
เครื่องยนต์เทมเพลต
คนอื่น
- ดอม
- บันทึก
- การประชุม
- เก็บ

บริการ

วิธีการบริการเป็นเพียงการนำ Ajax ของ ToolKit ไปใช้

ส่วนประกอบ

สิ่งนี้ใช้เทมเพลตที่จัดการเทมเพลต DHTML บางตัวผ่านกลไกเทมเพลต และยังจัดการสถานะของตัวเองซึ่งสามารถจัดการภายนอกส่วนประกอบได้เหมือนในตัวอย่าง ในที่สุดมันก็สามารถส่งคอนโทรลเลอร์ของตัวเองผ่านการใช้คุณสมบัติ / ฟังก์ชัน 'onRender'

ยูทิลิตี้

นี่เป็นเพียงพื้นที่ชื่อสำหรับวิธีการที่มีประโยชน์/เรียบง่าย ไม่มีอะไรมากไปกว่านั้น

แบบสอบถาม

สิ่งนี้ช่วยให้คุณสามารถดำเนินการ 'แบบสอบถาม' บนอาร์เรย์ของออบเจ็กต์ โดยจะทำงานผ่านการใช้การเรียกกลับเพื่อให้แน่ใจว่าเธรดการดำเนินการหลักจะไม่ถูกบล็อกโดยการวนซ้ำชุดข้อมูลขนาดใหญ่

เราเตอร์

ช่วยให้คุณมี URL ที่แตกต่างกันภายในส่วนหน้า อนุญาตสำหรับ SPA ปัจจุบันอนุญาตเฉพาะ URL ที่ใช้แฮชเท่านั้น และไม่ตรวจสอบการเปลี่ยนแปลง URL ตามค่าเริ่มต้น กล่าวคือ ผู้ใช้พยายามนำทางไปยัง URL อื่น แม้ว่าฟีเจอร์ดังกล่าวจะเรียบง่ายมากจนฉันเชื่อว่าอาจขึ้นอยู่กับการตัดสินใจของนักพัฒนาว่าจะใช้งานฟีเจอร์ดังกล่าวหรือไม่ แต่ท้ายที่สุดแล้วมันก็หมายความว่าจะต้องมีน้ำหนักเบา