1、定义一个传入占位节点id的组件类
比如这里定义一个组件MyClass
function MyClass(id){//组件模板}
2、在组件内获取节点id
function MyClass(id){//组件模板var _self = document.getElementById(id)//根据id获取组件
}
3、定义类的方法
function MyClass(id){//组件模板var _self = document.getElementById(id)//根据id获取组件
this.addP=function(){//定义类方法,这里是显示内容为1233
_self.innerHTML ="1233"
}
}
4、直接在js中调用使用该组件方法
示例:
<body><div id='rrr'></div> 定义占位dom节点
</body>
<script>
var mc = new MyClass('rrr')//初始化组件
mc.addP()//组件调用方法
</script>
1、定义一个类
2、类中增加一个方法
3、body中定义一个dom节点
4、脚本中把dom节点和类定义结合起来,实现特定的组件功能
示例:
<script>function TestWidegt(did){//定义一个组件类
var _self = document.getElementById(did)//根据id获取dom节点
this.addP=function(){//增加组件方法,这里就是添加一个节点
_self.innerHTML = '<p>111</p>'//在dom节点下添加节点p
}
return this//返回当前组件
}
function Test(){
var t = new TestWidegt('dv')//根据占位的dom节点定义组件
t.addP()//在占位节点中增加显示内容
}
</script>
<body>
<input type='button' value='测试组件'/>
<div id='dv'>111</div> 组件占位使用的dom节点
</body>