AMD and CMD are dead之js模塊化黑魔法

2014-06-16 09:28 【當耐特】閱讀(6666) 評論(8) 收藏舉報

緣由

在2013-03-06 13:58的時候，曾甩下一片文章叫：《為什么不使用requirejs和seajs》，并放下豪言說發(fā)布一款完美的模塊化庫，再后來就把那篇文章刪了，再然后就沒有然后。該用seajs還用seajs，甚至我碼的SCJ都是用requirejs組織起來的。

時光飛逝，歲月流轉。彈指間，來到了2014年6月15日，也就是昨日，突然碼興大發(fā)，一發(fā)不可收拾，也許跟最近小說和詩寫得比較猛，把碼意給壓抑了，便有了這次噴發(fā)。

js問題

作為一名前MS必應團隊資深當耐特(.NET)石專家，拿js與C#開發(fā)應用開發(fā)做個對比，js主要暴露的問題有：

1.沒有class關鍵字來定義類

2.沒有namespace關鍵字來定義命名空間

3.沒有using/require/import/include關鍵字來處理依賴

4.繼承、partial class、static、private、protected、publish等都要通過小技巧或者特定約定規(guī)范且手段太多

AMD和CMD的問題

為什么要define(function(){return xx})?

為什么要本是同根生，還要deps？

為什么要module.export?

為什么要define(function(require, exports, module) {})？

為什么所有模塊都需要require deps才能使用？

別看多只多寫了幾個單詞，但這絕對是掙扎糾結之后妥協(xié)的結果。

你要推翻它？那請制定一個更好的規(guī)范，OK？沒有就別瞎嚷嚷，OK？

規(guī)范

js里一切define的東西皆class創(chuàng)建出來的

js中一切class都在namespace下

js中define("namespace.class",[namespaces],factory)用于把namespace和class名定義好，并可引用依賴的namespace，類似C#using

js中require用于引用依賴，類似于C#using

js中同一namespace下，依賴的模塊不需要引用,如define("namespace.classA",factory)不再需要define("namespace.classA",["namespace.classB"],factory)

js中繼承直接通過冒號:define("namespace.class:base",[namespaces],factory)

js中部分類直接通過partial關鍵字define("partial namespace.class",[namespaces],factory)

ps：尼瑪！要求這么多，那還是js了嗎？一定要把js改成C#一樣嗎？直接去用cs和ts算了？規(guī)范有可行性嗎?能實現(xiàn)嗎？

恩！js是個可塑性很強的小子，你想把他塑造成什么形象，他就成什么樣子。

舉個栗子

define("AppName.Song", function () {
    var Song = function (title) {
        this.title = title;
    }
})
define("AppName.Album", function () {
    var Album = {};
    Album.title = "當耐特專輯";
    Album.songs = [new Song("當耐特進行曲"), new Song("當耐特蕩起雙槳")];
})
require(["AppName"], function () {
    var span = document.createElement("span"), text = "";
    for (var i = 0, len = arguments.length; i < len; i++) {
        text += "第" + i + "個參數(shù):" + arguments[i].toString();
        text += "<br/>"
    }

    var song = new Song("春天的故事");
    text += "song title:" + song.title;
    text += "<br/>";
    text += "album first song:" + Album.songs[0].title;
    span.innerHTML = text;
    var resultShowPanel=document.getElementById("resultShowPanel");
    resultShowPanel.innerHTML="";
    resultShowPanel.appendChild(span);
})

可以在不同操作系統(tǒng)或瀏覽器環(huán)境測試,兼容到IE5.5+

從代碼可以看出：

在Album中,不需要引用Song，就可以使用父AppName下的Song

在程序入口require下，直接引用top namespace就可以使用其下的Song和Album

原理

先看下圖：

拿到function之后進行toString,再重構該string,然后創(chuàng)建新的Function,再apply執(zhí)行，把賴的模塊傳給apply的第二個參數(shù)。有碼有真相：

_findRefrence = function (deps, callback, isDefine, className, mdName) {
    var i = 0, len = deps.length, moduleArr = [], moduleNameArr = [];
    for (; i < len; i++) {
        for (var key in modules) {
            var arr = key.split("."), ns = arr[0], cl = arr[1];
            if (ns === deps[i]) {
                moduleNameArr.push(cl);
                moduleArr.push(modules[key]);
            }
        }
    }
    var entire = callback.toString();
    var body = entire.slice(entire.indexOf("{") + 1, entire.lastIndexOf("}")) + (isDefine ? ("return " + className + ";") : "");
    var fn = new Function(moduleNameArr, body);
    var obj = fn.apply(null, moduleArr);
    if (isDefine) {
        modules[mdName] = obj;
    }
}

此時該有掌聲，但且慢著鼓掌，這是第一個版本，僅僅不夠。再看下個栗子：

再舉栗子

define2("NS.Song", {
    init: function (title) {
        this.title = title;
            var aa = "xxxxxxxxxxxx";
    },
    play: function () {
        alert(this.title);
    }
})

define2("NS.Album", {
    init: function (title,songs) {             
        this.title = title || "當耐特專輯";
        this.songs =songs|| [new Song("當耐特進行曲"), new Song("當耐特蕩起雙槳")];
                
    },
    createSong: function (name) {
        var song = new Song(name);
        this.songs.push(song);
    }
})
require2(["NS"], function () {
    var span = document.createElement("span"), text = "";
    for (var i = 0, len = arguments.length; i < len; i++) {
        text += "第" + i + "個參數(shù):" + arguments[i].toString();
        text += "<br/>"
    }

var song = new Song("春天的故事");
    text += "song title:" + song.title;
    text += "<br/>";
    var album = new Album();
    text += "album first song:" + album.songs[0].title;
    span.innerHTML = text;  
    var resultShowPanel2 = document.getElementById("resultShowPanel2");
    resultShowPanel2.innerHTML="";
    resultShowPanel2.appendChild(span);
})

現(xiàn)在可以看到，define的function沒有了？全部成了{init:xxx,xxx:xxx}的JSON格式，require還保留了其回掉的function,這樣是符合語義的。

簡直是極簡主義！簡單就是美。但簡單的背后做了大量的工作。

原理

看圖：

相關代碼：

function JSONstringifyWithFuncs(obj) {
    Object.prototype.toJSON = function () {
        var sobj = {}, i;
        for (i in this)
            if (this.hasOwnProperty(i))
                sobj[i] = typeof this[i] == 'function' ?
                    this[i].toString() : this[i];

        return sobj;
    }
}

這樣，json里面function的信息也不回丟失。

Class使用的是John Resig的Class，init為構造函數(shù)，使用_super可以調用父類方法很方便。

總結

有些好的東西，由于歷史原因可能會遭受大量的反對，但這就是我心目中，理想規(guī)范方便極簡的模塊化開發(fā)方式，后續(xù)發(fā)布并支持腳本加載和namespace樹，如:

system

system.web

system.web.ui

system.web.ui.control

system.web.ui.control.xx.xxx.xxx.xxx……

求磚和薦。

刷新頁面返回頂部

當耐特