javascript模块

模块化是什么？

模块化javascript代码，其实就是把一些经常用到的方法封装成一个类，然后要的话就导入到你要用到的HTML文件中，就想下面这样子

模块化代码的作用

如果你要用到component这个类的话，就引入就行了，所以它可以被我们复用，还有哪个网页需要，我们都可以把该类用到哪个网页，所以它具有可移植性，还有就是如果报错的话，我们可以到该js文件上改就好了，所以它的维护性很好。总的来说，我觉得模块化代码使我们的js文件管理更加有序，有可移植性，维护性，复用性，减少代码的冗余和提高工作效率。

如何模块化代码

我觉得这个应该是我们读者最想要的，你打广告打得那么好，吹模块化吹得那么高，那要怎么样才能做到模块化呢，它真的有那样子的疗效和效果么？我只能说的是提菜鸟建议，但是不能很权威地回答这个问题，毕竟自己的功力还是不够。希望如果有人看到我的文章后，想要给我补充的话，我很乐意。

• (1)首先javascript语言本身就没有创建模块和管理模块的支持;
• (2)解决命名空间的问题是模块化的最大问题，javascript语言本省也没有提供命名空间的支持，但是javascript对象就很好地支持;
• (3)对于模块化代码我觉得应该有两个视界，一个是模块开发者，一个是模块使用者。

其实模块化代码很简单，就是用一个对象，比如我们前端总是要操作DOM，那么我们就可以创建一个操作DOM的模块，其实就是一个有关DOM操作的对象，然后在那个对象里面弄上一些操作DOM的方法还有一些属性可以用。然后写在一个js文件里，以后要用到的话，就把这个js文件引入就行了。就是那么简单，不要把那个模块化想象到那么复杂，其实也就是一些对象。如何更好的效率，这个要看你的js功力了，我现在只能提供如何让模块化更好的人性化，就是让使用者更方便用还有就是开发者的一些注意事项。

做到较人性化的模块

1 .从上面我们已经知道了命名空间的重要性了，那我们就从这个下手吧。先问大家一个问题，如果我有两个DOM操作的模块，并且他们的功能是不重叠的。但是他们的命名是一样的，那出现什么情况？好了，不卖关子了，js引擎后解析的覆盖先解析的模块,是不是觉得很可惜，好像一山容不下两虎似的。那么这个就能体现命名空间的作用了，说到底也就是一个对象呀。比如：

Mkey.Dom.getDom = function(id){ return document.getElementById(id);}Ext.Dom.getDom = function(id){ native code .....}

两个getDom方法肯定不会混淆的。因为前面是不同的命名空间，其实也只是不同对象的同名属性就是了。其实保持命名空间的唯一性，这个才是最重要的。

2 .那怎么才能尽量实现命名空间的唯一性呢？让我们来看看Ext.namespace的源代码:

Ext.each就是实现第一个参数为数组中的每个元素执行第二个参数为函数。最厉害的是这句代码：

o = window[d[0]] = window[d[0]] || {};

为什么呢？比如我Ext.namespace(csdn.net);d = [csdn,net];那么再执行到上面的那段代码，赋值是从右到左的，所以它先检查window这个全局变量中有没csdn这个属性的存在，有的话就用，没得话就把window['csdn'] = {}然后在赋值给o变量。所以保持唯一性要去检查是不是存在你要设置那个命名空间。

3 .从开发者还有使用者来看模块，开发者应该尽量使你写的模块方便使用者用 (1) .该js文件的名字应该跟你的模块有联系，或者直接用模块中的类来命名你的js文件，然后应该在模块最前面写上这个类的作用等一些描述 (2) .比如上面，Mkey.Dom.getDom我觉得名字太长，对于我这个使用者，我要把它改短点，直接把那个方法赋给一个变量就行了，但是对于一些比如字符串、数字等就不能改了。比如Mkey.Dom.Auto_ID，是这个整数，它在Dom中是自增的，如果我把它赋给一个变量的话，它得到的只是静态引用，当Auto_ID改变，那个变量是没有变化的，那么怎么办？这个就要依赖开发者了。他可以设置一个函数:

Mkey.Dom.getAutoId = function(){ return Mkey.Dom.Auto_ID;}

这样子就可以使模块更有伸缩性呀，可以设置一些方法和属性名字短，便于使用者使用，提高效率。