YUI元件 開發風格 微調控件

2021-08-25 09:21:41 字數 661 閱讀 2742

前段時間的學習,試著分析了一下calendar元件,卻發現比較大,大致了解到元件的一般開發風格。我們在使用calendar元件,兩步,init();然後render();

init()所做事情有以下:

render()所作的事情很簡單,就是建立日期元件所需的element,在建立的時候,也許呼叫者想特殊處理一些資訊,則將event.fire(),呼叫者對事件subscribe來處理特殊;比如在日期建立之前想將頁面做些其他改變。效果類似aop面向切面。

render : function() ,
yahoo.register("calendar", yahoo.widget.calendar, );

用來方便yui在yuiloader的時候的版本衝突控制。

仿造以上的開發風格,將網上的乙個微調控件進行改裝,符合yui 元件的開發模式。效果如下:

公升級為時間元件

進一步擴充套件日期元件:

開發中學到的小技巧:

setinterval的時候,需要將元件的this傳遞進去,可是因為setinterval是全域性的函式,this為指到瀏覽器dom。

var me=this;

this._interval = setinterval(function(),150);

使用這樣的方法可以將呼叫函式的this變換,比較簡單。

vue元件命名風格

單檔案元件的檔名應該要麼始終是單詞大寫開頭 pascalcase 要麼始終是橫線連線 kebab case 單詞大寫開頭對於 編輯器的自動補全最為友好,因為這使得我們在 js x 和模板中引用元件的方式盡可能的一致。然而,混用檔案命名方式有的時候會導致大小寫不敏感的檔案系統的問題,這也是橫線連線命名...

微信小程式元件化開發

官方介紹 本次demo目錄結構 page下兩個資料夾,乙個components,用於存放元件 乙個home,為我們的主要頁面 components裡面兩個元件,乙個banner,乙個news,都是都過右鍵 新建component 生成的 第一步 配置 home.json 使頁面能使用元件 home....

微信小程式 元件化開發

7.slot 插槽的使用 8.component構造器 類似於頁面,自定義元件由json,wxml,wxss,js四個檔案 在wxml檔案中編寫屬於元件自己的模板 在wxss中編寫屬於元件的相關樣式 在js檔案中定義資料結構和相關邏輯 以home頁面為例 1.先在home.json中進行註冊 usi...