怎么把html页面中的JS函数，提取封装到一个JS中，直接在页面调用JS文件就可以了？？？

JavaScript020

怎么把html页面中的JS函数，提取封装到一个JS中，直接在页面调用JS文件就可以了？？？,第1张

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

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

2、将html中的函数封装到index.js文件中。

3、在index.html中的<script>标签，引入提取封装的js文件，并输入调用的js代码：fun2()fun1()。

4、浏览器运行index.html页面，此时成功调用了外部js文件中的函数打印出了结果。

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

示例：

1、JS封装就是尽量把使用的方式简单化，内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值，其他条件尽量不要使用人员进行设置。

2、JS封装的方法有函数方式、对象的方式、闭包的方式。

举例

1）函数方式

function kk(a,b){

   内部对a，b怎么处理就不需要关心了

}

2）对象方式

function kk(a,b){

   this.x = a

   this.y = b

}

var k = new kk(1,2)//通过面向对象的方式

alert(k.x)

3）闭包方式

function kk(a,b){

   var k = 1

   return function tt(){

      k++

   }

}

var u = kk(1,2)

u()//闭包实现累加

u()//闭包实现累加