el.js

el.js

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

---

การแนะนำ

el.js เป็นเฟรมเวิร์กที่สร้างขึ้นบนเทมเพลต Riot.js สำหรับการสร้างไมโครแอป

ไมโครแอป คืออะไร?

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

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

ตัวอย่างแบบฟอร์มง่ายๆ

HTML: index.html

el.js Library --> <script src="https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js"></script> <script src="my-script.js"></script> </body> </html>">

 < html >
	< head >
	<!-- Head Content -->
	< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
	</ head >
	< body >
		< my-form >
			< div >
				< label > Type Your Name </ label >
				<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
				< my-input bind =' name ' />
			</ div >
			< div >
				< span > Your Name Is </ span >
				< span > { data.name } </ span >
			</ div
		</ my-form >
		<!-- el.js Library -->
		< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
		< script src =" my-script.js " > </ script >
	</ body >
</ html >

JS: my-script.js

 // window.El is the global value

// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
	constuctor ( ) {
		// data contains your state
		this . data = { 
			name : '?' , 
		}
		// your custom tag name
		this . tag = 'my-form'

		super ( )
	}
}

Form . register ( )

// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
	constructor ( ) {
		// your custom tag name
		this . tag = 'my-input'
		// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
		this . html = '<input onkeydown="{ change }" />'

		super ( )
	}
}

Input . register ( )

El . mount ( '*' ) 

การติดตั้ง

HTML

เพิ่มแท็กนี้ที่ด้านล่างของสคริปต์ที่กำหนดเองและ deps และหน้าต่างอ้างอิงEl

 < script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >

โหนด:

ติดตั้งผ่าน NPM

 npm install el . js -- save

รองรับ CommonJS

 var El = require ' el.js '

หรือการนำเข้า ES6

 import El from ' el.js '

เอพีไอ

ประเภท

ประเภทอินพุต

El.Form อ้างอิงประเภทนี้เพื่อจัดเก็บข้อมูลที่ใช้ในการตรวจสอบความถูกต้องของฟิลด์ที่เกี่ยวข้องกับ name

คุณสมบัติ

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
กำหนดค่า	MiddlewareFunction หรือ [ MiddlewareFunction ]	ไม่ได้กำหนด	ประเภทนี้จัดเก็บ MiddlewareFunction หรือ MiddlewareFunctions ดั้งเดิมที่ใช้ในการสร้าง validate()
ชื่อ	เชือก	-	นี่คือชื่อของเขตข้อมูลในคุณสมบัติ ข้อมูล ของ El.Form ที่ส่วนอื่นๆ ของประเภทนี้อ้างอิงถึง
อ้างอิง	ต้นไม้อ้างอิง	ไม่ได้กำหนด	นี่คือลิงก์ไปยังแผนผังข้อมูลที่ไม่แน่นอนซึ่งสามารถดึงค่าของ ชื่อ ได้โดยการเรียก this.ref.get( name )

วิธีการ

ชื่อ	พิมพ์	คำอธิบาย
ตรวจสอบความถูกต้อง	(แผนผังอ้างอิง, สตริง) => สัญญา	เมธอดนี้เรียก MiddlwareFunctions ทั้งหมดในซีเรียลโดยใช้สัญญา

มิดเดิลแวร์ฟังก์ชัน

• type: (ค่า: ใด ๆ ) => สัญญาหรือใด ๆ

ประเภทนี้ใช้สำหรับกำหนดมิดเดิลแวร์สำหรับ El.Form ทำการตรวจสอบและฆ่าเชื้ออินพุตด้วยฟังก์ชันเหล่านี้ เช่น:

 function isRequired ( value ) {
  value = value . trim ( )
  if ( value && value != '' ) {
    return value
  }
  
  throw new Error ( 'Required' )
} 

สัญญาอ้างอิง

• ประเภท: { p: สัญญา }

ประเภทนี้ใช้ภายในในสถานที่เพื่ออำนวยความสะดวกในการคืนสัญญาโดยการอ้างอิง

ชั้นเรียน

เอล.วิว

นี่คือคลาสพื้นฐานสำหรับคลาส El ทั้งหมด El.View แต่ละรายการสอดคล้องกับแท็กที่กำหนดเอง ขยายคลาสนี้เพื่อสร้างแท็กที่คุณกำหนดเอง

คุณสมบัติ

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

วิธีการ

ชื่อ	พิมพ์	คำอธิบาย
ก่อนเริ่มต้น	-	โค้ดที่นี่ทำงานก่อนที่จะเริ่มต้นแท็ก
เริ่มต้น	-	โค้ดที่นี่จะดำเนินการเมื่อมีการเตรียมใช้งานแท็กแต่ก่อนที่จะเมานต์ แนะนำ - หากคุณต้องการเชื่อมโยงกับวงจรการใช้งานของแท็ก ให้ทำที่นี่
กำหนดการอัพเดต	() => สัญญา	วิธีการนี้กำหนดเวลาการเรียกอัพเดตแบบอะซิงโครนัส โดยจะรวมการเรียกอัปเดตเป็นชุดที่มุมมองบนสุดหากมีมุมมองที่ซ้อนกัน มันจะส่งคืนสัญญาว่าการอัพเดตจะดำเนินการเมื่อใด
อัปเดต	-	วิธีการนี้จะอัปเดตแท็ก สิ่งนี้เรียกว่าโดยปริยายหลังจากเหตุการณ์ถูกทริกเกอร์จากหน้าเว็บ ดู onkeydown ใน 'ตัวอย่างแบบฟอร์มธรรมดา' สำหรับกรณีดังกล่าว เรียกเมธอดนี้ด้วยตนเองเพื่ออัปเดตแท็ก แนะนำ - ขอแนะนำให้โทร scheduleUpdate() ด้วยตนเองแทนเพื่อป้องกันการต่อเรียงการอัปเดตแบบซิงโครนัส

วิธีการที่สืบทอดมาจาก Riot Observable (เปิด หนึ่ง ปิด ทริกเกอร์)

แต่ละ El.View เป็นตัวปล่อยเหตุการณ์ ดู riot.observable สำหรับเอกสารเพิ่มเติม http://riotjs.com/api/observable/

วิธีการแบบคงที่

ชื่อ	พิมพ์	คำอธิบาย
El.View.register	-	ซึ่งจะลงทะเบียนแท็กแบบกำหนดเองปัจจุบันด้วยเอ็นจิ้นการเรนเดอร์ เรียกมันหลังจากที่คุณกำหนดแท็ก

El.Form ขยาย El.View

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

คุณสมบัติ

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

วิธีการ

ชื่อ	พิมพ์	คำอธิบาย
เริ่มต้น	-	โค้ดที่นี่ดำเนินการเมื่อมีการเตรียมใช้งานแท็กแต่ก่อนที่จะเมานต์ โทร initInputs() ดังนั้นให้โทรด้วยตนเอง - หรือโทร super() ใน ES6 แนะนำ - หากคุณต้องการเชื่อมโยงกับวงจรการใช้งานของแท็ก ให้ทำที่นี่
initInputs	-	รวบรวม การกำหนดค่า และกำหนดโครงสร้างที่ปล่อยออกมาให้กับ อินพุต อินพุต เช่น การกำหนดค่า มีการอ้างอิงไปยังฟิลด์ที่มีชื่อใน data
ส่ง	(กิจกรรม) => คำมั่นสัญญา	เมธอดนี้จะทริกเกอร์การตรวจสอบความถูกต้องสำหรับแต่ละฟิลด์ใน ข้อมูล ตามที่กำหนดไว้ใน configs วิธีการนี้ควรจะเรียกว่าเป็นตัวจัดการเหตุการณ์/ผู้ฟัง โดยจะเรียก send() หากการตรวจสอบความถูกต้องสำเร็จ จะส่งคืนสัญญาเมื่อการตรวจสอบความถูกต้องสำเร็จ/ล้มเหลว
_ส่ง	-	รหัสที่นี่ดำเนินการเมื่อมีการตรวจสอบแบบฟอร์มระหว่างการเรียก send()

El.Input ขยาย El.View

นี่คือคลาสพื้นฐานสำหรับการสร้างอินพุตแบบฟอร์มและการควบคุม IO

คุณสมบัติ

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

วิธีการ

ชื่อ	พิมพ์	คำอธิบาย
เปลี่ยน	(กิจกรรม) =>	เมธอดนี้จะอัพเดตอินพุตแล้วตรวจสอบความถูกต้อง เมธอดนี้ควรถูกเรียกโดยตัวจัดการเหตุการณ์/ผู้ฟัง
เปลี่ยน	-	วิธีการนี้จะถูกเรียกเมื่อสัญญาที่ส่งคืนของ this.input.validate ดำเนินการอย่างสมบูรณ์
clearError	-	เมธอดนี้ตั้งค่า errorMessage เป็น '' และถูกเรียกก่อนการตรวจสอบความถูกต้อง
ข้อผิดพลาด	(ข้อผิดพลาด) =>	เมธอดนี้ตั้งค่า errorMessage และถูกเรียกเมื่อการตรวจสอบล้มเหลว
รับค่า	(เหตุการณ์) => ใด ๆ	วิธีการนี้รับค่าจากอินพุต ตามค่าเริ่มต้น เมธอดนี้จะส่งกลับค่าเป้าหมายของ เหตุการณ์
ตรวจสอบความถูกต้อง	(PromiseReference?) => สัญญา	เมธอดนี้จะตรวจสอบความถูกต้องของอินพุต โดยส่งคืน Promise ที่แสดงถึงความสำเร็จในการตรวจสอบความถูกต้อง และล้มเหลวทั้งโดยการอ้างอิง (จำเป็นภายใน) และตามค่า

ฟังก์ชั่น

ชื่อ	พิมพ์	คำอธิบาย
El.scheduleUpdate	-	กำหนดเวลาการอัปเดตสำหรับไมโครแอปทั้งหมดบนหน้า

สืบทอดมาจาก Riot (El.mount, El.update ฯลฯ)

ฟังก์ชันวงจรชีวิตของ el.js นั้นสืบทอดมาจาก Riot.js

แผนภูมิที่ไม่แน่นอนที่สังเกตได้เริ่มต้น

el.js ใช้ Referrential Trees เพื่อจัดเก็บข้อมูลแบบฟอร์ม

(BYODS) นำโครงสร้างข้อมูลของคุณเอง

นำเมธอด get, set, on, Once, Off จากการอ้างอิงไปใช้กับโครงสร้างข้อมูลของคุณเอง แล้วปล่อยลงในคุณสมบัติข้อมูล

แนวทางปฏิบัติที่ดีที่สุด

ใช้คอนเทนเนอร์และการควบคุม

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

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

การทำให้องค์ประกอบ UI ของคุณเป็นนามธรรมเช่นนี้ ช่วยให้ผู้อื่นสามารถนำและปรับแต่งโค้ดของคุณมาใช้ใหม่ได้ง่ายขึ้นมาก ดู shop.js สำหรับการใช้งาน

ใช้ร้านค้าของรัฐเดียว

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

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

 var data = {
	state0 : 0 ,
	state1 : 1 ,
}

El . mount ( '*' , { data : data } )

การใช้งานขั้นสูง

มรดกต้นแบบที่ซ้อนกัน

ไม่เหมือนกับการเรนเดอร์ Riot ปกติ el.js อนุญาตให้เข้าถึงค่าโดยนัยบน this.parent และ this.parent...parent ผ่านการสืบทอดต้นแบบของบริบทการเรนเดอร์ การทำเช่นนี้เพื่อหลีกเลี่ยงการส่งข้อมูลเดียวกันซ้ำๆ ผ่านคอนเทนเนอร์ที่ซ้อนกัน เนื่องจากมีแนวโน้มที่จะเกิดข้อผิดพลาดและมีรายละเอียดมากเกินไป นอกจากนี้ยังช่วยให้สร้างคอนเทนเนอร์และการควบคุมได้ง่ายขึ้นอีกด้วย

ส่งผ่านตัวแปรข้อมูลอย่างชัดเจน:

 < my-container-1 >
	< my-container-2 data =' { data } ' >
		< my-container-3 data =' { data } ' >
			value: { data.value1 }
		</ my-container-3 >
		< my-container-3 data =' { data } ' >
			value: { data.value2 }
		</ my-container-3 >
	</ my-container-2 >
	< my-container-2 data =' { data } ' >
		< my-container-3 data =' { data } ' >
			value: { data.value3 }
		</ my-container-3 >
		< my-container-3 data =' { data } ' >
			value: { data.value4 }
		</ my-container-3 >
	</ my-container-2 >
</ my-container-1 > 

 // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )

เทียบเท่ากับการอ้างอิงตัวแปรข้อมูลโดยปริยาย

 < my-container-1 >
	< my-container-2 >
		< my-container-3 >
			value: { data.value1 }
		</ my-container-3 >
		< my-container-3 >
			value: { data.value2 }
		</ my-container-3 >
	</ my-container-2 >
	< my-container-2 >
		< my-container-3 >
			value: { data.value3 }
		</ my-container-3 >
		< my-container-3 >
			value: { data.value4 }
		</ my-container-3 >
	</ my-container-2 >
</ my-container-1 > 

 // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) 

ใบอนุญาต

บีเอสดี