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中调用使用该组件方法

示例：

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。

2、在index.js中，实现func1和func2函数。

3、在index.html中，新增第3个button，并调用func3()方法，并在<script>标签中输入js代码：

function func3() {

$('body').append('use func3<br/>')

}

4、浏览器运行index.html页面，此时点击“函数3”按钮，能正常执行func3函数来输出内容。