js如何封装复用性

文本编辑软件

浏览器

先在一个文件夹下面创建文件index.html，并复制一份jquery.min.js到同一目录下。

用可编辑文本文件的软件打开index.html文件，在index.html中加入如图内容。接下来将从函数、类、文件三个角度分析如何对js代码进行封装。

从面向过程的角度看，函数是封装代码的主要方式，如图修改index.html文件。将代码封装到函数deleteInfo()中，每个相同的操作使用的是同一份代码。

用浏览器打开index.html，效果如图。

从面向对象的角度看，类是封装代码的主要方式，如图修改index.html文件。类主要有属性和方法，将属性和方法进行封装，可以说是在函数的基础上再加上属性，得到进一步的封装。

用浏览器打开index.html，效果如图。

如果将上面编写的js代码放到一个js文件中，这样就能实现用文件封装js代码，封装后，在别的html文件中也能使用这些代码。这里就用常用到的jQuery来作为封装的文件。如图修改index.html文件。加入了jQuery文件后，只要按照一定的规范，就能很轻易的对dom节点进行操作，减少了很多js代码的编写。而且任何一个html文件都能引入这个文件，使用里面的js代码。

用浏览器打开index.html文件，效果如图。