javaScript中封装的各种写法示例（推荐）
前言
在javascript的世界里，写法是个神奇的现象，真是百家齐开放啊！每次看到老外写的js组件，思想和写法都怪异，就没看到一个js结构基本相同的代码出来。今天，我就来谈谈js写法，我在开发过程中，也写了几种。对于性能方面，如果代码结构或逻辑写的不好，会造成计算机CPU的运算加大，运行性能降低，js的写法对性能的影响也是至关重要的。
通常写js组件开发的，都会用到匿名函数的写法去封装一个对象，与外界形成一个闭包的作用域。（这里对于js的继承，多态，我就不多说了，高级程序员应该具备这些知识，如果您也做过java开发，这个概念太熟悉了。）
主要对封装进行研究，因为前后台都会涉及到面向对象的概念，对于封装，怎么封装，封装的性能，等等很重要概念。封装（在程序世界是第一概念，我个人认为），全天下漫天遍野的封装，JQuery，EXT和Prototype.js封装的是javascript，jQueryuI和jQuerymobile封装着jQuery，java中的JDBC在spirng,Hibernate等框架封装着，在这里列举几个例子，还有很多种不一一介绍。
回到主题javaScript封装写法，先来看看一个简单的
functionhello(){
vara='hello';
alert(a);
}
js函数是最原始，最基础的封装，懂js一目了然，如果你的页面不需要很多js交互操作，就可以用这种简单的方式，如果你喜欢用JQuery,则需要写成这样
$(function(){
$('#id').click(function(){
alert('hello');
})
});
如果用Node.js则比较复杂点，因为要Node.js要加载一个HTTP模块，写法如下
varhttp=require('http');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.write('hello
');
}).listen(8080);
再深层次封装写法，如果遇到大量使用js操作，单凭每个小的函数无法满足，因为它们存在一个公共的域中，写法多而散很容易造成了很多bug因素，需要规整。js创造者给我们提供了一个叫匿名函数，顾名思义，匿名函数就是没有实际名字的函数，它的格式很多种，！function(){}(),(function(){})(),(function(){}()),newfunction(){},voidfunction(){}();JQuery.js就是一个匿名函数封装,先看最常用的
(function(){
star.init=(function(name){
vare=newEditor(name,Data.toolbarData);
});
})();
如果开发一些js组件的时候，可以先创建一个对象，给这个对象属性和方法，让这个对象能够单独操作和可以和其他对象合作
varklm=klm||{};
klm=(function(){
//第一个写法
klm.init=function(){
alert('hello');
}
//第二个写法
klm.browser=(function(ua){
varb={
msie:/msie/.test(ua)&&!/opera/.test(ua),
opera:/opera/.test(ua),
safari:/webkit/.test(ua)&&!/chrome/.test(ua),
firefox:/firefox/.test(ua),
chrome:/chrome/.test(ua)
};
})(window.navigator.userAgent.toLowerCase());
//将其定义方法以接口方式返回给外界引用
return{
init:klm.init,
browser:klm.browser
}
})();
接下来这种js封装写法是我自己比较喜欢的
varmyOpinion=myOpinion||{};
myOpinion.prototype={
init:function(obj,i){
alert('hello');
},
closeWindow:function(obj,d){
obj.click(function(){
d.hide();
});
}
}
$(function(){
varmy=myOpinion.prototype;
my.init($(".z-sidebarliem"),$("#contact"));
$("#contact").add(my.closeWindow($(".z-sidebarliem"),$("#contact")));
});
这种方式先通过prototype继承方式把每一个小的操作封装成属性，init和closeWindow，然后可以进行初始化加载如my.init();也可以绑定到某个操作事件上如$("#contact").add(my.closeWindow());这些封装一气而成。
还有定义单个属性封装
WinShow.create=function(c,body){
var_head=''+c.title+' 在这里我创建一个create属性以匿名函数形式封装一段HTML代码，并给这个HTML代码绑定点击事件。
列举以上几种js封装形式，但是小生还在研究中，这几种都能实现相同操作，可是写法有些区别，对于性能方面谁有更好的见解可以点评我，进行交流。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对毛票票的支持。