非MVVM项目
比如定义组件 <component-a> 组件:
const ComponentA = function(ele){
this.init(ele);
}
ComponentA.prototype = {
constructor : ComponentA,
init:function(ele){
this.createElement(ele,this._getData(ele));
},
createElement:function(ele,data){
this.getTargetElement([...this.ele.attributes],data)
this._replaceElement(ele,targetEle);
},
getTargetElement(attributes,data){
……
},
getData(ele){
……
},
_replaceElement(ele){
……
}
}
$("component-a").each(function(){
new ComponentA(this);
})
使用方法为以下两种:
<component-a name="test1"></component-a>
<div name="test2"></div>
$("[name=test2]").componentA({params:params});
如果追加元素$(body).append('<component-a name="test3"></component-a>'),test3 在 dom 中存在还是以原始文本存在,而非替换成 <component-a> 组件。
那么怎么实现 <component-a> 才能让 test3 自动实例化呢?