寫元件的能力是乙個前端工程師的基本能力。
使用oo模式是逐步搭建複雜元件的最佳編寫方式。
下面是使用es6的class方法編寫乙個監聽input輸入框，並展示輸入內容的基本元件。
會持續更新，在基類中練習新增基礎功能。
複製**使用es6語法，oo模式，使用事件訂閱/監聽基類
// 事件訂閱/監聽基類
class
event
// 監聽函式
on(key, listener) ;
}if (!this._events[key])
this._events[key].push(listener);
return
this;
}//通知函式
fire(key, ...args)
return
this;
}// 取消監聽
off(key, listener)
if (!this._events || !this._events[key]) return;
var r = this._events[key];
for (var i = 0; i < r.length; i++)
}return
this;
}}// 元件庫基類
class
base
extends
event
// get獲取配置項
get(key)
// set設定配置項
set(key, value)
init()
// 繫結事件
bind()
// 渲染介面方法
render()
// 定義銷毀的方法
destory()
}// 新增事件**、模版渲染、單向繫結
class
richbase
extends
base
// 繼承base基類
class
context
extends
base
// 私有屬性
_getnum()
init()
bind() );
}render()
}複製**
移動端元件化實踐
vant 是有贊開發的一套基於vue 2.0的mobile元件庫，在開發的過程中也踩了很多坑，今天我們就來聊一聊開發乙個移動端 modal 元件 在有讚該元件被稱為popup 需要注意的一些坑。在任何乙個合格的ui元件庫中，modal元件應該是必備的元件之一。它一般用於使用者處理事物，但又不希望跳轉...
一次元件化的實踐
更新 1.mvvm 可以將網路層轉移到viewmodel 層中，這樣就不需要將網路層抽離了，因為本來就沒和 控制器耦合。2.每次使用蜂巢的時候 控制器一定要實現 服務的協議，不然蜂巢會崩，還很難找到原因 3.蜂巢方案 雖然分離了控制器業務的耦合，但是引入了protocol 協議的耦合。同時需要維護 ...
Android元件化開發實踐（二） 元件化架構設計
先說說我自己的元件化架構設計方案，請看下圖 元件化架構設計圖 為了便於理解，按照從下往上的順序來講講我的分層思路。元件之間必須遵循以下規則 現在已經有很多成熟的元件化框架了，比較著名的有阿里的手淘atlas框架但是這些框架可能都過於複雜，上手難度高，對很多人來說並不一定好用。總的說來，沒有最好的架構...