Weex Web 組件注冊(cè)
進(jìn)行 module
的定義
import Alert from './alert'
import _css from './style'
const modal = {
alert: function (config, callback) {
config.callback = function () {
callback && callback()
}
new Alert(config).show()
},
...
}
export default {
init: function (Weex) {
...
Weex.registerModule('modal', modal)
}
}
方法 registerModule
定義
創(chuàng)建新的對(duì)象, 然后將 mdule 上對(duì)應(yīng)的ownProperty
定義的方法都代理到新的對(duì)象上
registerApiModule (name, module, meta) {
if (!weexModules[name]) {
weexModules[name] = {}
}
for (const key in module) {
if (module.hasOwnProperty(key)) {
weexModules[name][key] = function () {
const called = weex._meta.apiCalled
if (!called[name]) {
called[name] = {}
}
const calledMod = called[name]
if (!calledMod[key]) {
calledMod[key] = 0
}
calledMod[key]++
return module[key].apply(weex, arguments)
}
}
}
調(diào)用定義方法
image
callback 函數(shù)調(diào)用
[圖片上傳失敗...(image-b5f8cd-1552542830883)]
組件 Alert
構(gòu)造
會(huì)引用基類 modal
文件,然后在構(gòu)造函數(shù)中執(zhí)行Modal.call(this)
import Modal from './modal',
export default function Alert (config) {
this.msg = config.message || ''
this.callback = config.callback
this.okTitle = config.okTitle || 'OK'
Modal.call(this)
this.node.classList.add('weex-alert')
}
Alert.prototype = Object.create(Modal.prototype)
組件 Alert
函數(shù)擴(kuò)展
會(huì)實(shí)現(xiàn)具體的渲染函數(shù) createNodeContent
來(lái)完成具體的頁(yè)面渲染.
createElement( TagName )
: 會(huì)創(chuàng)建出對(duì)應(yīng)的 html 元素
createTextNode( Text )
: 創(chuàng)建對(duì)應(yīng)的文本節(jié)點(diǎn)
Alert.prototype.createNodeContent = function () {
const content = document.createElement('div')
content.classList.add(CONTENT_CLASS)
this.node.appendChild(content)
const msg = document.createElement('div')
msg.classList.add(MSG_CLASS)
msg.appendChild(document.createTextNode(this.msg))
content.appendChild(msg)
...
}
通過(guò) bindEvents()
進(jìn)行點(diǎn)擊事件的綁定和注冊(cè)
Alert.prototype.bindEvents = function () {
Modal.prototype.bindEvents.call(this)
const button = this.node.querySelector('.' + BUTTON_CLASS)
button.addEventListener('click', function () {
this.destroy()
this.callback && this.callback()
}.bind(this))
}