V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Marstin
V2EX  ›  前端开发

组件如何实现追加元素的自动实例化

  •  
  •   Marstin ·
    Marstin · 2020-06-01 10:41:37 +08:00 · 1097 次点击
    这是一个创建于 1397 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如定义组件 <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 自动实例化呢?

    第 1 条附言  ·  2020-06-01 16:31:51 +08:00

    组件实现代码大概是这样

    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);
    })
    
    11 条回复    2020-06-02 08:10:55 +08:00
    Marstin
        1
    Marstin  
    OP
       2020-06-01 11:20:10 +08:00
    难顶
    temporary
        2
    temporary  
       2020-06-01 11:22:26 +08:00
    vue?
    TomatoYuyuko
        3
    TomatoYuyuko  
       2020-06-01 11:22:50 +08:00
    你这个问题给我整蒙了,你这用了 mvvm 的框架是吗,那还用 jq 做 dom 操作?
    Marstin
        4
    Marstin  
    OP
       2020-06-01 15:11:57 +08:00
    @TomatoYuyuko @temporary 就是没用 mvvm 框架才有这问题啊,现在很烦
    TomatoYuyuko
        5
    TomatoYuyuko  
       2020-06-01 15:42:53 +08:00
    @Marstin 你这是什么框架或者插件写的组件
    rioshikelong121
        6
    rioshikelong121  
       2020-06-01 15:47:38 +08:00
    看看你的框架有没有提供什么主动渲染 Component 的方法。
    Marstin
        7
    Marstin  
    OP
       2020-06-01 16:15:49 +08:00
    @TomatoYuyuko jq,组件自己手写的
    @rioshikelong121 没有
    temporary
        8
    temporary  
       2020-06-01 17:55:05 +08:00
    document.body.append(document.createElement('component-a'))
    TomatoYuyuko
        9
    TomatoYuyuko  
       2020-06-01 18:02:33 +08:00
    你这么写好绕啊,非得用 JQ 的话,干脆给$挂个新方法,把 append 封装一下不就好了?
    $(body)._append('<component-a name="test3"></component-a>')
    twelvechen
        10
    twelvechen  
       2020-06-02 07:57:27 +08:00   ❤️ 1
    使用 MutationObserver 监听 DOM 变动,然后在回调里实例化试试?
    Marstin
        11
    Marstin  
    OP
       2020-06-02 08:10:55 +08:00
    @twelvechen MutationObserver 确实完全能满足需求的,就有点担心性能
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4576 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 09:55 · PVG 17:55 · LAX 02:55 · JFK 05:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.