美文网首页
前端组件封装

前端组件封装

作者: 低调的内双 | 来源:发表于2017-09-14 11:02 被阅读0次

步骤如下:

1、定义一个类;
2、在类中添加方法;
3、在body中定义一个DOM节点;
4、在脚本中将DOM节点和类定义的方法结合起来,实现特定功能的组件。

<body>
    <input type="button" value="组件测试" />
    <div id="box">           <!--组件占位使用的DOM节点-->
        111
    </div>     
    <script type="text/javascript">
        function TestWidget(did){   //定义一个组件类
            var self = document.querySelector("#" + did);
            this.addp = function(){
                self.innerHTML = "<p>222</p>"
            }
            return this; //返回当前组件
            }
        function Test(){
            var t = new TestWidget("box");
            t.addp();
        }
        Test();
    </script>
</body>

相关文章

网友评论

      本文标题:前端组件封装

      本文链接:https://www.haomeiwen.com/subject/zugrsxtx.html