平常在开发网页的时候，经常会使用开源的或者是别人封装好的js组件，这样可以节省开发成本，提高工作效率。其实我们自己写的js代码，也可以封装成功组件，以方便自己和同事后面直接使用，下面就来介绍下js如何封装组件
工具/原料
1
javascript
2
网页浏览器
方法/步骤
1
新建一个测试页面，用来测试js封装组件代码，这里添加三个div块，后面会使用封装的组件代码来操作这三个块
测试Js封装组件
测试块1
测试块2
点击隐藏
2
为了演示测试效果，分别给三个块添加不同的样式
3
重点的地方是js组件的封装，这里只是简单的演示组件的封装，结构一样，内容就写了简单的2个测试方法，在正常发封装组件中，在组件方法里可以添加N个方法这里添加了2个方法，一个是changeColor方法，一个是hide方法，后续需要封装的方法，都写在这里。
4
打开浏览器开始测试页面效果，默认打开如图显示3个div色块
5
点击测试块1和测试块2，颜色分别变化了。表示上面封装的方法是正常可以使用的
6
点击隐藏测试块，测试hide方法是否可以正常使用。点击之后，色块正常隐藏了。到此js的组件封装方法演示完成。后面如果需要编写自己的封装组件，只需要将上面演示的js组件代码复制，在添加方法区域添加自己的方法即可。
7
完整的测试代码如下：
测试Js封装组件
测试块1
测试块2
点击隐藏
注意事项
上面的组件封装，和jquery的组件封装方法类似。如果你的项目本来就是基于jquery组件的，可以直接使用jquery的extend更为方便和强大
上一篇：好品牌的高档汽车脚垫的鉴别方法
下一篇：域名选择的三要素