首頁>編程相關>三方組件
下載

el.js

一個合理的微應用框架，具有實用的可重複使用性。

介紹

el.js是一個建立在 Riot.js 範本之上的框架，用於建立微型應用程式。

什麼是微應用程式？

Web 框架要求開發人員將大部分（如果不是全部）網頁建置為動態 Web 應用程式。這使得開發人員能夠確保網頁上的所有內容都遵循他們可以推理的單一一致、可預測的渲染流程。然而，與傳統的靜態網站相比，它也存在許多缺點，包括更複雜的快取方案、更長的載入時間和 SEO 問題。微應用為這些缺點提供了強大的解決方案。不要建立巨大的整體 Web 應用程序，而是建立小型應用程式並將它們嵌入到靜態頁面中。

微應用程式執行一個小且範圍非常狹窄的功能，可以一次又一次地重複使用。微應用程式與框架成為標準之前的可嵌入小部件的想法沒有太大區別，但它們在執行上有所不同，因為它們強調對合理框架和實際可重用性的依賴。

一個簡單的表單範例

HTML：索引.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：我的腳本.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 ( '*' )

安裝

超文本標記語言

將此標籤新增至自訂腳本和相依性以及引用 window.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 ]不明確的此類型儲存用於建立validate() 的原始MiddlewareFunction或MiddlewareFunctions
姓名細繩」這是該類型的其餘部分引用的El.Form資料屬性上的欄位名稱。
參考參考樹不明確的這是一個指向可變資料樹的鏈接，可以透過呼叫 this.ref.get( name ) 來檢索name的值

方法

姓名類型描述
證實（參考樹，字串）=> Promise此方法使用 Promise 序列呼叫所有MiddlwareFunctions 。

中介軟體功能

  • 類型：（值：任意）=> Promise 或任意

此類型用於定義El.Form的中間件。使用這些函數進行驗證和輸入清理，例如： 

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

Promise參考

  • 類型：{p：承諾}

這種類型在內部使用，以方便透過引用返回承諾。

課程

埃爾維尤

這是所有 El 類別的基底類別。每個El.View都對應一個自訂標籤。擴展此類以建立您自己的自訂標籤。

特性

姓名類型預設描述
CSS細繩」這是一個代表標籤 CSS 的字串。安裝時，它會在標籤底部為每個類別注入一次。
數據參考樹不明確的此屬性儲存標籤的狀態。
html細繩」這是一個表示標籤內部 html 的字串。
根HTML元素不明確的此屬性儲存網頁中已安裝視圖綁定到的標籤的參考。
標籤細繩」這是自訂標籤名稱。

方法

姓名類型描述
初始化之前()=>這裡的程式碼在標籤初始化之前執行。
初始化()=>這裡的程式碼在標籤初始化時但在安裝之前執行。推薦- 如果您需要綁定到標籤的生命週期，請在此處執行。
日程更新() => 承諾此方法安排異步更新呼叫。如果存在嵌套視圖，它會在最頂層視圖中批次更新呼叫。它會傳回更新執行時間的承諾
更新()=>此方法更新標籤。這是在網頁觸發事件後隱式呼叫的。對於這種情況，請參閱「簡單表單範例」中的 onkeydown。手動呼叫該方法來更新標籤。建議- 建議手動呼叫scheduleUpdate()，以防止同步更新級聯。

從 Riot Observable 繼承的方法（on、one、off、trigger）

每個El.View都是一個事件發射器。請參閱 riot.observable 以了解更多文檔，http://riotjs.com/api/observable/

靜態方法

姓名類型描述
El.View.register ()=>這會向渲染引擎註冊目前的自訂標籤。定義標籤後調用它

El.Form 擴充 El.View

此類用於表示表單以及更複雜的 IO 驅動的微應用程式。此類提供通用表單驗證和表單提交邏輯。

特性

姓名類型預設描述
配置目的不明確的向MiddlewareFunction或MiddlewareFunctions陣列提供名稱映射。有關詳細信息，請參閱MiddlewareFunction 。
輸入目的無效的configs中的每個元素都會轉換為input中的元素。不建議直接修改。

方法

姓名類型描述
初始化()=>這裡的程式碼在標籤初始化時但在安裝之前執行。呼叫initInputs()，因此手動呼叫它 - 或在 ES6 中呼叫 super()。推薦- 如果您需要綁定到標籤的生命週期，請在此處執行。
初始化輸入()=>編譯配置並將發出的結構指派給input 。像configs這樣的輸入包含對data中指定欄位的參考。
提交（事件）=> 承諾此方法會觸發對configs中定義的data中每個欄位的驗證。此方法應作為事件處理程序/偵聽器呼叫。如果驗證成功，它會呼叫submit() ，並在驗證成功/失敗時傳回一個承諾
_提交()=>此處的程式碼在呼叫Submit()期間驗證表單時執行

El.Input 擴充 El.View

這是建立表單輸入和 IO 控制項的基底類別。

特性

姓名類型預設描述
綁定細繩」此屬性決定綁定到父表單資料中的哪個欄位。
抬頭細繩」與bind相同，已棄用。
錯誤訊息細繩」此屬性設定為 this.input.validate 傳回的 Promise 擷取的第一個錯誤訊息。
輸入輸入類型無效的此屬性是根據父資料的欄位綁定指定的內容從父表單的輸入屬性中取得的。
有效的布林值錯誤的此屬性用於確定輸入所處的驗證狀態。

方法

姓名類型描述
改變（事件）=>此方法更新輸入，然後驗證它。此方法應該由事件處理程序/偵聽器呼叫。
改變了()=>當 this.input.validate 傳回的 Promise 完全執行時呼叫此方法。
清除錯誤()=>此方法將errorMessage設為 '' 並在驗證之前呼叫。
錯誤（錯誤）=>此方法設定errorMessage並在驗證失敗時呼叫。
獲取值（事件）=> 任何此方法從輸入中獲取值。預設情況下，此方法傳回Event的 target.value。
證實(PromiseReference?) => 承諾此方法驗證輸入，它透過引用（內部需要）和值傳回一個表示驗證成功和失敗的 Promise。

功能

姓名類型描述
El.scheduleUpdate ()=>安排頁面上所有微應用程式的更新。

繼承自Riot（El.mount、El.update等）

el.js的生命週期函數繼承自 Riot.js。

預設可觀察可變樹

el.js使用引用樹來儲存其表單資料。

(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 } )

執照

BSD

展開
附加信息
相關應用
爲您推薦
相關資訊 全部