milo

ไมโล

เบราว์เซอร์/NodeJS การเขียนโปรแกรมปฏิกิริยาและการจัดการ DOM ที่ขับเคลื่อนด้วยข้อมูลด้วยส่วนประกอบแบบแยกส่วน

เอกสาร: http://milojs.github.io/milo/

เริ่มต้นอย่างรวดเร็ว

ติดตั้ง

 npm install milojs

หรือ

 bower install milo

ทดสอบ

 npm install
npm install -g grunt-cli
grunt test

เพื่อเรียกใช้การทดสอบทั้งหมดรวมถึงการทดสอบเบราว์เซอร์:

 grunt tests

พยายาม

index.html

 < html >
< head >
    < title > Binding example </ title >
    < script src =" milo.bundle.js " > </ script >
    < script src =" index.js " > </ script >
</ head >
< body >
    < input type =" text " ml-bind =" [Data]:myField " >
    < div ml-bind =" [Data]:myCurrentValue " > </ div >
    < button ml-bind =" [Events]:myTestButton " >
    	Test
    </ button >
    < div >
    	< span ml-bind =" :myTestValue " > </ span >
    </ div >
    < div >
      < h2 > I am connected: </ h2 >
      < span ml-bind =" [Data]:myTestValue2 " > </ span >
    </ div >
</ body >
</ html >

index.js

 // run when DOM is ready
milo ( function ( ) {
    // create and bind components with milo.binder
    var scope = milo . binder ( ) ;

    // attach subscriber to data change event via data facet
    // of myField component
    scope . myField . data . on ( '' , function ( msg , data ) {
    	scope . myCurrentValue . data . set ( data . newValue ) ;
      // alternatively:
      // scope.myCurrentValue.el.innerHTML = data.newValue;
    } ) ;

    // attach subscriber to click event via events facet
    // of myTestButton component
    scope . myTestButton . events . on ( 'click' , function ( msg , event ) {
    	scope . myTestValue . el . innerHTML = scope . myField . data . value ( ) ;
    } ) ;

    // connect two components directly via their data facets
    // using milo.minder
    milo . minder ( scope . myField . data , '->' , scope . myTestValue2 . data ) ;
} ) ;

หมายเหตุเกี่ยวกับการตรวจสอบประเภทพารามิเตอร์รันไทม์

Milo ใช้โมดูลตรวจสอบ ( milo.util.check - แยกจากแพ็คเกจตรวจสอบของ Meteor Framework) สำหรับการตรวจสอบรันไทม์ของประเภทพารามิเตอร์ ขอแนะนำอย่างยิ่งให้ปิดการตรวจสอบในการผลิตโดยใช้: milo.config({ check: false })

ขึ้นอยู่กับแอปพลิเคชันของคุณสามารถปรับปรุงประสิทธิภาพได้มากกว่าสองครั้ง

ตัวอย่าง/บทช่วยสอน

เริ่มต้น

รู้เบื้องต้นเกี่ยวกับการผูกมัด

ข้อมูลเบื้องต้นเกี่ยวกับข้อมูล

บทนำสู่ผู้ส่งสาร

เบื้องต้นเกี่ยวกับนางแบบ

บทนำสู่ Minder

รู้เบื้องต้นเกี่ยวกับรายการ

บทความเกี่ยวกับการสร้าง Milo Rolling Framework ของคุณเองบน Tuts+

TODOMVC

ตัวอย่างขั้นสูงคือแอพ Todos ในโฟลเดอร์ TODOMVC

มีส่วนช่วย

 cd $MILO_FOLDER
npm link

cd $MY_PROJECT
rm -R -f -d node_modules/milojs
npm link milojs # link milo to your current project to use with browserify

cd $MILO_FOLDER
grunt # rebuild milo bundle every time you change any .js file

นอกจากนี้คุณสามารถตั้งค่าคำรามในโครงการของคุณเพื่อสร้างใหม่เมื่อใดก็ตามที่ Milo Bundle เปลี่ยนไป

โปรด grunt tests ก่อนที่จะกระทำ (ไม่ใช่แค่ grunt test ที่ดำเนินการโดย Travisci โดยอัตโนมัติ) - มันจะเรียกใช้การทดสอบทั้งหมดรวมถึงการทดสอบเบราว์เซอร์

แนวคิด

การออกแบบแบบแยกส่วน

แม้ว่า ไมโล จะได้รับการบรรจุเป็นชุดเดียว แต่ก็มีโครงสร้างแบบแยกส่วนมาก ประกอบด้วยโมดูลอิสระหลายอย่างที่สามารถใช้ร่วมกันหรือแยกกันและถูกออกแบบมาเพื่อทำให้งานแอปพลิเคชันทั่วไปง่ายขึ้นแทนที่จะสร้างโครงสร้างแอปพลิเคชันใด ๆ

โมดูลบางอย่างใน Milo สามารถใช้ได้เฉพาะในเบราว์เซอร์ (Component, ComponentFacet, Milo.binder), บางอย่างในเบราว์เซอร์และใน NodeJS (Messenger และคลาสที่เกี่ยวข้อง, โมเดล, ตัวเชื่อมต่อ, milo.minder)

Milo ใช้เบราว์เซอร์เพื่อทำแพ็คเกจ แต่ระบบโมดูลใด ๆ สามารถใช้ในแอพที่ใช้ Milo - Milo ไม่แนะนำโครงสร้างแอปพลิเคชันใด ๆ

ส่วนประกอบ

ส่วนประกอบได้รับการออกแบบมาเพื่อลดความซับซ้อนของการจัดการของ DOM ส่วนประกอบติดอยู่กับองค์ประกอบ DOM ที่แน่นอน การแนบองค์ประกอบหลายอย่างเข้ากับองค์ประกอบ DOM เดียวกันมักจะเป็นข้อผิดพลาดในการออกแบบแอปพลิเคชัน (หรือไมโล) ดังนั้นหากเกิดข้อผิดพลาดจะถูกบันทึกไว้ในคอนโซล

ส่วนประกอบช่วยให้การสร้างคลาสย่อยที่ง่ายมากที่กำหนดเป็นคอลเลกชันของ "facets" ที่กำหนดค่าไว้ ตัวอย่างเช่นดูคำจำกัดความของส่วนประกอบ UI MLSelect

มีเทมเพลตส่วนประกอบเพื่อทำให้การสร้างส่วนประกอบของคุณง่ายขึ้น

ดูเอกสารประกอบ

ส่วนประกอบ

ComponentFacet เป็นคลาสพื้นฐานคลาสย่อยของวิธีการกลุ่มที่เกี่ยวข้องกับพฤติกรรมของส่วนประกอบ

คุณไม่ค่อยจำเป็นต้องยกตัวอย่าง facet - เมื่อส่วนประกอบถูกสร้างขึ้นมันจะสร้างแง่มุมทั้งหมดของมัน

มีแง่มุมต่อไปนี้ที่กำหนดไว้ใน ไมโล :

• คอนเทนเนอร์ - แง่มุมพิเศษที่สร้างขอบเขตของส่วนประกอบ
• DOM - คอลเลกชันของวิธีการช่วยลดความซับซ้อนของการจัดการ DOM ขององค์ประกอบส่วนประกอบ
• กิจกรรม - ให้ API ที่สะดวกในการสมัครสมาชิก DOM
• ข้อมูล - API เพื่อจัดการกับทรี DOM ภายในองค์ประกอบส่วนประกอบเป็นข้อมูลช่วยให้ทั้งการรับ/การตั้งค่าข้อมูลที่มีโครงสร้างจาก/ไปยังองค์ประกอบ DOM จำนวนมากในครั้งเดียวและสร้างการเชื่อมต่อข้อมูลปฏิกิริยาของโมเดล (ดูด้านล่าง) ถึง DOM
• รายการและรายการ - อนุญาตให้สร้างรายการใน DOM จาก arays ในข้อมูลของคุณ คลาสคอมโพเนนต์โดยใช้แง่มุมใด ๆ เหล่านี้ต้องการข้อมูลด้านข้อมูล (จะถูกเพิ่มโดยอัตโนมัติ) ที่ควรใช้เพื่อรับ/ตั้งค่าข้อมูลรายการและเพื่อสร้างการเชื่อมต่อข้อมูลปฏิกิริยา
• เทมเพลต - ลดความซับซ้อนขององค์ประกอบ DOM ส่วนประกอบจากเทมเพลต
• CSS - ช่วยให้คุณสามารถผูกข้อมูล DOM หรือโมเดลกับคลาส CSS โดยใช้กฎ declaritive ในการกำหนดค่า facet
• เฟรม - จัดการการส่ง/รับข้อความไปที่/จาก iframe
• Drag - ช่วยให้การจัดการองค์ประกอบ DOM แบบ draggable ได้ง่าย
• Drop - ช่วยสร้างเป้าหมายดร็อป
• โมเดล - Wrapper Simple สำหรับ Milo Model (ดูด้านล่าง) ช่วยจัดเก็บข้อมูลบนส่วนประกอบ

มีแม่แบบ facet ส่วนประกอบเพื่อทำให้การสร้างแง่มุมของคุณง่ายขึ้น ทุกแง่มุมของส่วนประกอบควรเป็นคลาสย่อยของ ComponentFacet

การเชื่อมโยง DOM และการสร้างอินสแตนซ์ส่วนประกอบ

อินสแตนซ์ของส่วนประกอบของคุณมักจะถูกสร้างขึ้นโดยอัตโนมัติเมื่อคุณเรียก Milo.binder ตามข้อมูลเกี่ยวกับคลาสส่วนประกอบแง่มุมและชื่อส่วนประกอบในแอตทริบิวต์ ml-bind (สามารถเปลี่ยนแปลงได้ผ่าน Milo.Config)

เพื่อให้ส่วนประกอบของคุณพร้อมใช้ งาน ในชั้นเรียนของพวกเขาควรลงทะเบียนในส่วนประกอบรีจิสทรี (milo.registry.components) หากคุณกำหนดแง่มุมใหม่ชั้นเรียนของพวกเขาควรลงทะเบียน (ใน milo.registry.facets)

เนื่องจากการลงทะเบียนส่วนประกอบและคลาส Facets มักจะเกิดขึ้นในโมดูลเดียวกัน (ไฟล์) ที่กำหนดคลาสคุณต้องดำเนินการโมดูลนี้ หากคุณใช้ Broserify สำหรับการจัดการโมดูลก็เพียงพอที่จะใช้:

 require('my_component');

ในโมดูลอื่น ๆ ที่ดำเนินการหรือจำเป็น

ผู้ส่งสาร

ไมโล จัดหาคลาสการส่งข้อความภายในที่สามารถใช้สำหรับความต้องการแอปพลิเคชัน ทุกแง่มุมใน ไมโล มีอินสแตนซ์ของผู้ส่งสารที่แนบมากับพวกเขาที่กำหนด API การส่งข้อความเฉพาะกับ facet ในกรณีส่วนใหญ่ที่เชื่อมต่อกับแหล่งภายนอกบางแห่ง (โดยปกติเหตุการณ์ DOM)

อินสแตนซ์ของ Messenger ใช้อินสแตนซ์ของคลาสย่อย MessageSource เพื่อเชื่อมต่อกับแหล่งข้อมูลภายนอกและอินสแตนซ์ของคลาสย่อย MessengerAPI เพื่อสร้างข้อความภายในระดับสูงขึ้นและแปลงข้อมูลข้อความ สถาปัตยกรรมนี้อนุญาตให้สร้างฟังก์ชันการทำงานขั้นสูงในรหัสเพียงไม่กี่บรรทัด

ดูเอกสาร Messenger

แบบอย่าง

ไมโล กำหนดโมเดลเพื่อให้สามารถเข้าถึงข้อมูลได้อย่างปลอดภัยโดยไม่จำเป็นต้องกังวลว่าข้อมูลถูกตั้งค่าหรือไม่ (ไม่เคยเกิดขึ้นเมื่อคุณเข้าถึงข้อมูลเมื่อคุณได้รับคุณสมบัติของวัตถุที่ไม่ได้กำหนด) และเพื่อเปิดใช้งานความเป็นไปได้ในการสมัครรับข้อมูลการเปลี่ยนแปลงข้อมูลคล้ายกับวัตถุทดลอง

การใช้โมเดลไม่จำเป็นต้องใช้ API เหล่านี้และไม่เหมือนกับ API เหล่านี้ที่อนุญาตให้สมัครรับการเปลี่ยนแปลงคุณสมบัติของโมเดลของคุณไปสู่ความลึกใด ๆ

ดูโมเดลตัวอย่างและเอกสารประกอบโมเดล

ตัวเชื่อมต่อ

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

คุณสามารถสร้างการเชื่อมต่อหนึ่งหรือสองทางกำหนดความลึกของโครงสร้างข้อมูลของคุณที่คุณต้องการสังเกตปิดการเชื่อมต่อเหล่านี้เช่นเมื่อคุณต้องการเปลี่ยนแปลงรูปแบบจำนวนมากโดยไม่ทำให้เกิดการอัปเดต DOM

การเชื่อมต่อเหล่านี้ไม่มีค่าใช้จ่ายในการเปรียบเทียบข้อมูลในลูปอย่าง angularjs และไม่ทำให้ประสิทธิภาพการเสื่อมสภาพใด ๆ เมื่อมีวัตถุที่เชื่อมต่อจำนวนมาก

ในไม่ช้าอินสแตนซ์ของตัวเชื่อมต่อจะรองรับการแปลโครงสร้างช่วยให้สร้างการเชื่อมต่อปฏิกิริยาระหว่างแบบจำลองที่มีโครงสร้างคงที่และต้นไม้ DOM ที่มีโครงสร้างที่ยืดหยุ่น

การเชื่อมต่อปฏิกิริยาหนึ่งหรือหลายครั้งสามารถสร้างขึ้นด้วย milo.minder

ดูเอกสารเชื่อมต่อ

มุมมองและการจัดการแอปพลิเคชัน

• milo.loader - การโหลด subiews ลงในหน้า
• MILO.MAIL - Messenger ระดับแอปพลิเคชันที่กำหนดเหตุการณ์ domready และลดความซับซ้อนของการกำหนดเส้นทางของข้อความระหว่าง iframes (ดู frame facet)
• MILO.CONFIG - การกำหนดค่าการตั้งค่า MILO

ระบบสาธารณูปโภค

• ตรวจสอบ - ตรวจสอบประเภทพารามิเตอร์ (ฟอร์ดจากแพ็คเกจตรวจสอบของ Meteor Framework)
• Logger - Logger ที่กำหนดค่าได้พร้อมระดับบันทึก
• คำขอ - HTTP Requests Library
• DOM - ห้องสมุดเพื่อจัดการองค์ประกอบ DOM

ทำไมไมโล?

ชื่อ ไมโล ได้รับเลือกเนื่องจาก Milo Minderbinder สงคราม Profiteer จาก Catch 22 หลังจากเริ่มต้นจากการจัดการการดำเนินงานที่ยุ่งเหยิงเขาได้ขยายพวกเขาไปสู่องค์กรการค้าที่ทำกำไรได้ซึ่งเชื่อมโยงทุกคนกับทุกสิ่งและในไมโลและคนอื่น ๆ

Milo The Framework มี ตัวยึด โมดูลที่ผูกองค์ประกอบ DOM เข้ากับส่วนประกอบ (ผ่านแอตทริบิวต์ ML-bind พิเศษ) และ Module Minder ที่อนุญาตให้สร้างการเชื่อมต่อปฏิกิริยาสดระหว่างแหล่งข้อมูลที่แตกต่างกัน (รูปแบบและข้อมูลด้านข้อมูลของส่วนประกอบเป็นแหล่งข้อมูลดังกล่าว)

โดยบังเอิญ ไมโล สามารถอ่านเป็นตัวย่อของ Mail Online

ไม่มีเฟรมเวิร์กเบราว์เซอร์เพียงพอหรือ?

เฟรมเวิร์กทั้งหมดที่เราสามารถวางมือของเรานั้นเป็นแบบดั้งเดิมที่ปล่อยให้เราเขียนรหัสมากเกินไปของเราเอง (jQuery, backbone) หรือ จำกัด เกินไปมีเวทมนตร์เพียงพอที่จะสร้างแอปพลิเคชันที่เรียบง่ายอย่างรวดเร็ว แต่มีการควบคุมที่ จำกัด การทำงานของเฟรมเวิร์ก (Angular, Ext)

สิ่งที่เราต้องการเสมอคือกรอบที่อนุญาต

• การพัฒนาแอพพลิเคชั่นในลักษณะ ที่ประกาศ ด้วยการผูก ปฏิกิริยา ของแบบจำลองเพื่อดู
• การสร้างการเชื่อมโยงข้อมูลปฏิกิริยาระหว่างโมเดลที่แตกต่างกันในแอปพลิเคชันเพื่อจัดการการแพร่กระจายข้อมูลในการประกาศมากกว่าในรูปแบบที่จำเป็น
• การแทรก ตัวตรวจสอบ และ นักแปล ในการผูกเหล่านี้ดังนั้นเราจึงสามารถเชื่อมโยงมุมมองกับโมเดลข้อมูลแทนที่จะดูแบบจำลองเช่นใน AngularJS
• การควบคุมที่แม่นยำ เกี่ยวกับส่วนประกอบที่เชื่อมโยงกับองค์ประกอบ DOM
• ความยืดหยุ่นของการจัดการมุมมองช่วยให้ทั้งคู่สามารถ จัดการกับ DOM โดยอัตโนมัติในการเปลี่ยนแปลงของโมเดลและเพื่อแสดงผลบางส่วนโดยใช้ __ templating engine __ ในกรณีที่การเรนเดอร์มีประสิทธิภาพมากกว่าการจัดการ DOM
• ความสามารถใน การสร้าง UI แบบไดนามิก
• ความสามารถใน การเชื่อมต่อกับ กลไกที่อยู่เบื้องหลังการเกิดปฏิกิริยาของข้อมูลและเพื่อควบคุมการอัปเดตมุมมองและการไหลของข้อมูลได้อย่างแม่นยำ
• ความสามารถใน การขยายการทำงาน ของส่วนประกอบที่จัดทำโดยเฟรมเวิร์กและเพื่อสร้างส่วนประกอบใหม่

เราไม่สามารถหากรอบดังกล่าวได้ดังนั้นเราจึงเริ่มพัฒนา ไมโล ควบคู่ไปกับแอปพลิเคชันที่ใช้

สถาปัตยกรรม

### การสืบทอดตามต้นแบบ

ไมโล อาศัยต้นแบบ JavaScript เพื่อสร้างบล็อกเฟรมเวิร์ก

JavaScript เป็นภาษาที่มีพลังมาก ช่วยให้สามารถเขียนฟังก์ชั่นที่สร้างคลาส ( Component.createComponentClass ) ซึ่งอนุญาตให้ใช้รูปแบบการจัดองค์ประกอบที่แต่ละคลาสส่วนประกอบถูกสร้างขึ้นเป็นคอลเลกชันของบล็อกที่กำหนดไว้ล่วงหน้า (facets) ด้วยการกำหนดค่าของ facet ที่เฉพาะเจาะจงกับคลาสที่สร้างขึ้น

รหัสรันไทม์ "Generation"

JavaScript ยังอนุญาตให้สร้างฟังก์ชั่นตัวสร้างที่สร้างฟังก์ชั่นที่ทำให้เกิดไวยากรณ์ที่แสดงออกได้มากสำหรับวัตถุโมเดลและยังใช้เวลา "การรวบรวม" ของเส้นทางการเข้าถึงแบบจำลองลงในฟังก์ชั่น

วัตถุที่ถูกต้อง

คลาสส่วนประกอบขึ้นอยู่กับคลาส FacetedObject นามธรรมที่สามารถนำไปใช้กับโดเมนใด ๆ ที่วัตถุสามารถแสดงผ่านการรวบรวม facets (facet เป็นวัตถุของคลาสที่แน่นอนมันถือการกำหนดค่าข้อมูลและวิธีการของตัวเอง)

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

ในเวลาเดียวกันไมโลสนับสนุนกลไกการสืบทอดเมื่อคลาสย่อยสามารถเพิ่มแง่มุมลงในสิ่งที่อยู่ในซูเปอร์คลาสแล้วและเพื่อกำหนดค่าการกำหนดค่าของแง่มุมที่สืบทอดมา

มิกซ์

นอกจากนี้เรายังใช้รูปแบบ Mixin แต่ Mixin ใน Milo ถูกนำไปใช้เป็นวัตถุแยกต่างหากที่เก็บไว้ในคุณสมบัติของวัตถุโฮสต์และสามารถสร้างวิธีพร็อกซีบนวัตถุโฮสต์หากจำเป็น คลาส Messenger, MessageSource และ DataSource เป็นคลาสย่อยของคลาสนามธรรม Mixin

การลงทะเบียน: การผกผันของการพึ่งพา

ส่วนประกอบและ facets ลงทะเบียนตัวเองในการลงทะเบียนที่อนุญาตให้หลีกเลี่ยงการต้องการพวกเขาจากโมดูลหนึ่ง ป้องกันการพึ่งพาแบบวงกลมระหว่างโมดูล

การพึ่งพาอาศัยกัน

การพึ่งพาของไมโลคือ โปรโต ห้องสมุดการจัดการวัตถุและ DOT ซึ่งเป็นเครื่องยนต์เทมเพลต (ทั้งสองรวมอยู่ใน Milo Bundle)

ไม่มี jQuery, zepto ฯลฯ

เราไม่ได้ใช้ห้องสมุด Dom Traversal ใด ๆ เพราะ:

• DOM API เร็วกว่ามาก (ในบางกรณีเร็วขึ้น 30 เท่า)
• เราไม่ต้องการให้รหัสความเข้ากันได้ของเบราว์เซอร์เป็นส่วนหนึ่งของเฟรมเวิร์ก หากจำเป็นสำหรับแอปพลิเคชันบางอย่างสามารถนำไปใช้กับ polyfills เราอาจพัฒนาพวกเขาสำหรับไมโลถ้าเราต้องการพวกเขา แต่อย่าลังเลที่จะมีส่วนร่วม
• เวลาเริ่มต้นแอปพลิเคชันเร็วขึ้นอย่างเห็นได้ชัด

แต่ส่วนประกอบของไมโลอาจมีแง่มุม DOM ที่มีฟังก์ชั่นความสะดวกสบายหลายอย่างในการจัดการองค์ประกอบ DOM และมี milo.util.dom - คอลเลกชันของฟังก์ชั่นที่คล้ายกันที่สามารถใช้งานได้โดยไม่ต้องใช้ส่วนประกอบ

ไม่มีขีดล่าง lo-dash ฯลฯ

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

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

ใบอนุญาต

http://opensource.org/licenses/bsd-2-clause

เปลี่ยนบันทึก

ดูรุ่น