首页 > 代码库 > js的模块化写法

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

 

js的模块化写法