javaScript封装的各种写法

在javascript的世界里，写法是个神奇的现象，真是百家齐开放啊！每次看到老外写的js组件，思想和写法都怪异，就没看到一个js结构基本相同的代码出来。今天，我就来谈谈js写法，我在开发过程中，也写了几种。对于性能方面，如果代码结构或逻辑写的不好，会造成计算机CPU的运算加大，运行性能降低，js的写法对性能的影响也是至关重要的。

通常写js组件开发的，都会用到匿名函数的写法去封装一个对象，与外界形成一个闭包的作用域。（这里对于js的继承，多态，我就不多说了，高级程序员应该具备这些知识，如果您也做过java开发，这个概念太熟悉了。）

主要对封装进行研究，因为前后台都会涉及到面向对象的概念，对于封装，怎么封装，封装的性能，等等很重要概念。封装（在程序世界是第一概念，我个人认为），全天下漫天遍野的封装，JQuery，EXT和Prototype.js封装的是javascript，jQuery uI和jQuery mobile封装着jQuery，java中的JDBC在spirng,Hibernate等框架封装着，在这里列举几个例子，还有很多种不一一介绍。

回到主题javaScript封装写法，先来看看一个简单的

function hello(){var a = 'hello';alert(a);
}

js函数是最原始，最基础的封装，懂js一目了然，如果你的页面不需要很多js交互操作，就可以用这种简单的方式，如果你喜欢用JQuery,则需要写成这样

$(function(){$('#id').click(function(){alert('hello');})
});

如果用Node.js则比较复杂点，因为要Node.js要加载一个HTTP模块，写法如下

var http = require('http');
http.createServer(function(req,res){res.writeHead(200,{'Content-Type':'text/html'});res.write('<p>hello</p>');
}).listen(8080);

再深层次封装写法，如果遇到大量使用js操作，单凭每个小的函数无法满足，因为它们存在一个公共的域中，写法多而散很容易造成了很多bug因素，需要规整。js创造者给我们提供了一个叫匿名函数，顾名思义，匿名函数就是没有实际名字的函数，它的格式很多种，！function(){}(),(function(){})(),(function(){}()),new function(){},void function(){}();JQuery.js就是一个匿名函数封装,先看最常用的

 (function(){star.init = (function(name){var e = new  Editor(name, Data.toolbarData);});})();

如果开发一些js组件的时候，可以先创建一个对象，给这个对象属性和方法，让这个对象能够单独操作和可以和其他对象合作

  var klm = klm || {};klm = (function(){//第一个写法klm.init = function(){alert('hello');}//第二个写法klm.browser = (function(ua){var b = {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封装写法是我自己比较喜欢的

 var myOpinion = myOpinion || {};myOpinion.prototype={init:function(obj,i){alert('hello');},closeWindow:function(obj,d){obj.click(function(){d.hide();});}}$(function(){var my = myOpinion.prototype;my.init($(".z-sidebar li em"),$("#contact"));             $("#contact").add(my.closeWindow($(".z-sidebar li em"),$("#contact")));});

这种方式先通过prototype继承方式把每一个小的操作封装成属性，init和closeWindow，然后可以进行初始化加载如my.init();也可以绑定到某个操作事件上如$("#contact").add(my.closeWindow());这些封装一气而成。

还有定义单个属性封装

 WinShow.create = function(c,body){        var _head = '<div class="+ c.heacss +"><span class="+ c.concss +">' + c.title + '</span></div>';this.container.innerHTML = _head;return this.container;this.container.onclick = function(e){alert('hello');}}

在这里我创建一个create属性以匿名函数形式封装一段HTML代码，并给这个 HTML代码绑定点击事件。

列举以上几种js封装形式，但是小生还在研究中，这几种都能实现相同操作，可是写法有些区别，对于性能方面谁有更好的见解可以点评我，进行交流。

javaScript封装的各种写法相关推荐

php js写法,javaScript封装的各种写法
这篇文章主要介绍了javaScript封装的各种写法,通过列举优缺点和使用场景详细介绍了几种JavaScript封装的格式,对JavaScript的感兴趣朋友可以参考下本篇文章在javascript ...
【转载】100多个很有用的JavaScript函数以及基础写法大集合
1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4 ...
javascript封装与多态的体现
封装是实现面向对象程序设计的第一步,封装就是将数据与函数等集合在一个个的单元中(我们称之为类).被封装的对象通常被称为抽象数据类型. 在传统的面向对象语言中有访问修饰符,如Private:只有类本身能 ...
JavaScript 封装插件学习笔记（一）
此篇只是笔记,在借鉴.参考.模仿的过程,可能不完整,请多指教! 定义插件名称要注意命名冲突,防止全局污染. 1.第一种Javascript对象命名:(Javascript语言是"先解析,后运 ...
javascript 跳转页面写法
点击菜单跳转(显示链接): 点击返回按钮js写法: function back() {//window.location.href = "javascript:history.go(-1)& ...
JavaScript 封装设计模式介绍
对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...
JavaScript的三种写法
1.2-JavaScript的三种写法 1-复习CSS代码的三种写法 1.外联样式:写在css文件中,使用link导入 <link rel="stylesheet" href ...
CSS+JavaScript封装一个图标旋转组件
1. 前言: 由于自己想封装一个类似Bootstrap的前端框架,当然也只是简单实现.看见了一个网站上的上下箭头的旋转动态效果,于是就想着自己也来封装一个这个效果.效果如下: 2. 说明: ...
html页面封装是什么,javascript封装是什么？
封装,即隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别:将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成& ...

javaScript封装的各种写法

javaScript封装的各种写法

javaScript封装的各种写法相关推荐

最新文章

热门文章