前端组件封装
2017-09-14 本文已影响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>
