比如定义组件 <component-a> 使用方法为以下两种:
<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 自动实例化呢?
组件实现代码大概是这样
const ComponentA = function(ele){
let componentA = {
init:function(){
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){
……
}
}
componentA.init();
return componentA;
}
$("component-a").each(function(){
new ComponentA(this);
})
1
Marstin OP 难顶
|
2
temporary 2020-06-01 11:22:26 +08:00
vue?
|
3
TomatoYuyuko 2020-06-01 11:22:50 +08:00
你这个问题给我整蒙了,你这用了 mvvm 的框架是吗,那还用 jq 做 dom 操作?
|
4
Marstin OP @TomatoYuyuko @temporary 就是没用 mvvm 框架才有这问题啊,现在很烦
|
5
TomatoYuyuko 2020-06-01 15:42:53 +08:00
@Marstin 你这是什么框架或者插件写的组件
|
6
rioshikelong121 2020-06-01 15:47:38 +08:00
看看你的框架有没有提供什么主动渲染 Component 的方法。
|
7
Marstin OP |
8
temporary 2020-06-01 17:55:05 +08:00
document.body.append(document.createElement('component-a'))
|
9
TomatoYuyuko 2020-06-01 18:02:33 +08:00
你这么写好绕啊,非得用 JQ 的话,干脆给$挂个新方法,把 append 封装一下不就好了?
$(body)._append('<component-a name="test3"></component-a>') |
10
twelvechen 2020-06-02 07:57:27 +08:00 1
使用 MutationObserver 监听 DOM 变动,然后在回调里实例化试试?
|
11
Marstin OP @twelvechen MutationObserver 确实完全能满足需求的,就有点担心性能
|