闭包式 js架构 前端书写心得

5月份的杭州区w3c标准化交流会

带着感冒 去了口碑做了次分享，分享的内容是最近刚接触到的并且用的比较爽快的《闭包式js架构》

顺便吐槽一下，这次来的人不多，不知道是不是不太好意思来交流还是怎么了，是不屑么~？，就当交朋友么~ 其实我也很菜的，听了就知道。

以下是我最近在做新系统的时候用到的一种 闭包式js架构 书写方法，大家慢慢看，有些地方似曾相识，说不定有你想要的东西，仅仅是分享，也许又更好的实现方法。



1. 说说闭包

因为这样的架构思想又一些类似 javascript 的闭包概念。所以我在分享的时候做了下闭包的引导。

分享前做PPT的时候特意去百度娘那里看了下关于闭包的知识补习一下。百科

分享的时候因为主要讲的不是闭包所以顺便带过一下，不过会后，似乎有人反而对闭包感兴趣，嘎嘎。真是指哪哪不响哇。

回来又抽空查了下 《javascript 高级程序设计》中的闭包解释，似乎比百度娘上面的更浅显一些，百科上的是一种比较极端的闭包，(有空朋友可以翻阅一下：p56)。 最简单的闭包 就是全局变量。



2. 利用匿名函数解决$冲突

很多朋友应该会碰到过 一个老系统页面里好多js库的情况吧。神嘛 prototype jQuery mootools 会时不时暂用$符号，导致各种冲突。

记得jquery 有个方法是把$让出来。

这里给出一个比较好用的匿名函数 来形成 封闭作用域来实现。 很多jquery 插件就是这样来书写的

复制代码运行代码编辑代码

(function($){

/***

* make $ in Closed Scope

*/

$(function(){

//do something on dom ready

});

})(jQuery);

复制代码运行代码编辑代码
Powered by W3Cfuns.com

利用匿名函数把，jQuery 引入匿名函数，这样在匿名函数的作用域里，你就可以自由的使用$了，并且这样也同样试用与其他库。



3. 怎样不污染命名空间

这个问题曾经困扰我挺久的，因为原现公司老系统里遍地都是 全局变量 全局fun，命名空间污染的让人蛋疼菊紧。 =，=

那么经过我哥的教导，就是利用 变量类形式 只占用 一个全局变量。如下：

复制代码运行代码编辑代码

(function($){

$.namespace('Platform.tms.home');

})(jQuery);

复制代码运行代码编辑代码
Powered by W3Cfuns.com

上面的namespace是一个jquery插件用来方便建立命名空间。

其实它就等同于下面这段代码。是不是用插件看起来简单多了。

复制代码运行代码编辑代码

var Platform = {}

Platform.tms = {}

Platform.tms.home = {}

复制代码运行代码编辑代码
Powered by W3Cfuns.com



4. 所谓 闭包式 js 架构 前端书写以上其实都是铺垫啦。

有了命名空间不污染全局变量，有了封闭空间匿名函数不会产生js库间的冲突，两者问题都良好解决。

现在要把两者结合起来，形成现在的 架构形式。代码如下：

复制代码运行代码编辑代码

/**

* @ TMS Package

*

* @author qilei.weiql

*/

(function($, TMS) {

var util = TMS.util;

})(jQuery, Platform.tms);

复制代码运行代码编辑代码
Powered by W3Cfuns.com

从代码里可以看出，我将独立的全局变量类Platform 和 jQuery 引入 匿名函数。

这样做的好处显而易见，就是利用 Platform 搭建桥梁，让 匿名函数内的 资源可以通过 Platform 访问到 其他匿名函数的资源。

简单的说就是类似：一个应用 当它需要用到某组件，那么只要包含某组件js文件进来就可以。



5. 说明下这样书写的好处好处除了前面说的，避免 命名空间污染，不产生库冲突，同时在封闭作用域内，你可以通过引用将全局变量类冗长的名字简化。如上面的代码中就用TMS 代表 Platform.tms，然后直接使用 TMS.util 来访问 Platform.tms.util，这样看起来是不是就简洁许多。这个就是要懒得有风度的表现^_^

甚至可以直接缓存你需要的组件，如：

复制代码运行代码编辑代码

var util = TMS.util;

复制代码运行代码编辑代码
Powered by W3Cfuns.com

复制代码运行代码编辑代码

var dialog= TMS.widgets.dialog;

复制代码运行代码编辑代码
Powered by W3Cfuns.com



6. 从一个栗子 表现书写心得

复制代码运行代码编辑代码

(function($, TMS) {

/*************************

* Header 头部控制类

*/

var Header = {

init : function(){

this._initHover();

},

_initHover : function(){

//do something

}

}

TMS.home.header = Header ;

})(jQuery, Platform.tms);

复制代码运行代码编辑代码
Powered by W3Cfuns.com

先丢一块代码给大家。上面的代码是渲染一个应用的头部js 文件。

外围代码跟上面差不多。

我的书写方法是 先 新建一个 Header 变量类，里面有一些子方法，如启动方法， 还有其他一切跟header 相关的方法都在里面。

然后将 header 跟 TMS.home.header 对接，便于被其他组件引用， 当然(如果你不像被外接影响，可以不用对接，这样就完全不受影响)



7. 方便的启动函数便于调试看了上面的那么多是不是发现写了那么多怎么启动。。。 现在就跟你说怎么启动，

上面栗子中header 不是 init() 方法么，这个就是 启动函数用来初始化一些数据以及启动专用。

那么一个应用里又很多区域需要启动那么代码就可以这样写。

复制代码运行代码编辑代码

(function($, TMS) {

$(function(){

TMS.home.header.init();

TMS.home.cate.init();

TMS.home.slider.init();

});

})(jQuery, Platform.tms);

复制代码运行代码编辑代码
Powered by W3Cfuns.com

上面就是对3个模块进行启动操作，就像开关一样，有些人会习惯在 启动函数上添加一些参数神嘛的（类似插件那样），但是这就像是开关一样，开关追求的是一种简洁，讲复杂的东西都放在init()里去吧，会让代码更又层次。

同时 当你需要只对一个模块进行调试的时候，你就只需要注释掉其他两行代码就可以不启动了。是不是很方便。



8. 闭包式的由来说了这么多，这样的书写方法以及优点，闭包式 的名字 是因为 它的两个特性跟闭包有点相似，一个是 封闭的作用域，另外一个是有一个全局变量类， 从一个封闭的作用域中 能够访问到 外部 全局资源，这个就是类似闭包的概念。

当然这个名字还是我YY出来的，也许它已经又它的学名了，如果又谁知道的话就不要吝啬 分享一下哇^__^



9. 其他一些可以扩展的东西上面的那么多心得都是在 我哥(笨笨) 虚心教导下产生的，

本来这次分享是直接邀请他来分享的，不过似乎他更忙些。

之后还会分享一些 进阶内容

a. 目录配置规范，为了让组件更规范，必须又它的目录规范

b. namespace 命名空间 的命名规范，一套好的命名规范能让整个架构非常又调理

c. Js 调试，合并方案，因为各个功能应用组件等都是分布在各个js 文件内的，在发布的时候需要又个合并方案，类似YUI