js的模块化写法

记得前两天本身写一个动画首页，动画很复杂，我用的fullpage虽然相对比较简单，可是每一个页面的animation各有差别，须要相对控制，估计有上千行的js代码，写的心情乱糟糟的。

如何让代码量巨大，并且能够方便的管理，不会出现命名的冲突，代码结构乱七八糟问题，让代码设计结构清晰明了，这是一个巨大的需求

其实这就是一个需求分析和解决方案实施的过程。

　　function m1(){
　　　　//...
　　}
　　function m2(){
　　　　//...
　　}

通常人没有什么面向对象和模块化的概念会这么去写。确实js的面向对象不会像java同样明了，除了难以管理就是命名冲突的问题了。

    var module1 = new Object({
　　　　_count : 0,
　　　　m1 : function (){
　　　　　　//...
　　　　},
　　　　m2 : function (){
　　　　　　//...
　　　　}
　　});

 把方法封装成对象的方法，这样就能够至关于给函数方法名加个前缀同样，可是麻烦是代码依然会暴露大量的变量，设计代码应该尽可能让代码没必要要暴露的变量封起来。

 因而有人发明了这种写法，执行和上一个对象写法同样，也能够少暴露变量了，这样就是面向对象模块化的基本写法了，可是还要改进的

(function(){
　　　　var _count = 0;
       var module1 = function(){
　　　　　　
　　　　　　var m1 = function(){
　　　　　　　　//...
　　　　　　};
　　　　　　var m2 = function(){
　　　　　　　　//...
　　　　　　};
　　　　　　return {
　　　　　　　　m1 : m1,
　　　　　　　　m2 : m2
　　　　　　};
　　　　};
      window.module1 = module1()
})()

 

这种方法是闭包的写法，能够把大量的代码写在闭包里，最后用添加到window属性当中，就暴露出去只有本身想暴露的方法了，这样代码的书写余地也更大了。

    var module2 = (function (mod){
　　　　mod.m3 = function () {
　　　　　　//...
　　　　};
　　　　return mod;
　　})(module1);

 

这段代码的意义是实现继承，传入modele，添加新的方法，而后返回，便获得一个新的对象，这个对象有了新的参数

模块的规范

先想想，为何模块很重要？

由于有了模块，咱们就能够更方便地使用别人的代码，想要什么功能，就加载什么模块。

可是，这样作有一个前提，那就是你们必须以一样的方式编写模块，不然你有你的写法，我有个人写法，岂不是乱了套！考虑到Javascript模块如今尚未官方规范，这一点就更重要了。

目前，通行的Javascript模块规范共有两种：CommonJS和AMD。我主要介绍AMD，可是要先从CommonJS讲起。

 

　var math = require('math');
　　math.add(2,3); // 5

 

commonJs是这么作的，require至关于load就是加在math.js，而后调用，这是用在服务器端的，可是客户端怎么办，客户端须要异步加载

因此出现了AMD

    require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

 

 经过回掉的方式异步加载。

 目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js