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