js组件封装，调用的方法怎么写

JavaScript013

js组件封装，调用的方法怎么写,第1张

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>