快捷導(dǎo)航

JavaScript中實(shí)現(xiàn)依賴(lài)注入的思路分享

更新時(shí)間：2015年01月15日 09:04:37 投稿：junjie

這篇文章主要介紹了JavaScript中實(shí)現(xiàn)依賴(lài)注入的思路分享,本文給出的解決方案包括獲取func的參數(shù)列表、根據(jù)參數(shù)列表尋找依賴(lài)、傳遞依賴(lài)項(xiàng)參數(shù)并實(shí)例化等3個(gè)步驟,需要的朋友可以參考下

如今各個(gè)框架都在模塊化，連前端的javascript也不例外。每個(gè)模塊負(fù)責(zé)一定的功能，模塊與模塊之間又有相互依賴(lài)，那么問(wèn)題來(lái)了：javascript的依賴(lài)注入如何實(shí)現(xiàn)？（javascript的依賴(lài)注入，各大框架都有相應(yīng)的實(shí)現(xiàn)，這里只學(xué)習(xí)實(shí)現(xiàn)思路）

如下需求：

假設(shè)已經(jīng)有定義好的服務(wù)模塊Key-Value集合，func為添加的新服務(wù)，參數(shù)列表為服務(wù)依賴(lài)項(xiàng)。

復(fù)制代碼代碼如下:

var services = { abc : 123, def : 456, ghi : 789 }; // 假設(shè)已定義好某些Service

function Service(abc, ghi){

    this.write = function(){

        console.log(abc);

        console.log(ghi);

    }

}

function Activitor(func){

    var obj;

    // 實(shí)現(xiàn)

    return obj;

}

解決思路：

通過(guò)某種機(jī)制（反射？），取出該func定義的參數(shù)列表，并一一賦值。然后再通過(guò)某種機(jī)制（Activitor？），實(shí)例化該func。

解決方案：

一、獲取func的參數(shù)列表：

如何獲取參數(shù)列表呢？我首先想到的是反射機(jī)制。那javascript里面有沒(méi)有反射呢？應(yīng)該有吧，我目前只知道使用eval(str)函數(shù)，但貌似并沒(méi)有獲取參數(shù)列表的相關(guān)實(shí)現(xiàn)。再看func.arguments定義，此屬性只在調(diào)用func并傳遞參數(shù)時(shí)才有效，也不能滿(mǎn)足需求。

那能不能通過(guò)處理func.toString()后的字符串獲取參數(shù)列表呢？

上手試試吧：

復(fù)制代碼代碼如下:

 function getFuncParams(func) {

     var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);

     if (matches && matches.length > 1)

         return matches[1].replace(/\s*/, '').split(','); 

     return [];

 };

至此獲得func參數(shù)列表數(shù)組。

二、根據(jù)參數(shù)列表尋找依賴(lài)：

得到了參數(shù)列表，即得到了依賴(lài)列表，將依賴(lài)項(xiàng)作為參數(shù)傳入也就很簡(jiǎn)單了。

復(fù)制代碼代碼如下:

 var params = getFuncParams(func);

 for (var i in params) {

     params[i] = services[params[i]];

 }

三、傳遞依賴(lài)項(xiàng)參數(shù)并實(shí)例化：

我們知道，javascript里面有func.constructor有call(thisArg,[arg[,arg,[arg,[…]]]])和apply(thisArg,args…)兩個(gè)函數(shù)，都可以實(shí)現(xiàn)實(shí)例化func操作。其中call函數(shù)第一個(gè)參數(shù)為this指針，剩余為參數(shù)列表，這個(gè)適合在已知func參數(shù)列表的情況下使用，不能滿(mǎn)足我的需求。再看第二個(gè)apply函數(shù)，第一個(gè)參數(shù)也為this指針，第二個(gè)參數(shù)為參數(shù)數(shù)組，其在調(diào)用時(shí)會(huì)自動(dòng)為func的參數(shù)列表一一賦值，正好滿(mǎn)足我的需求。

代碼大概如下：

復(fù)制代碼代碼如下:

function Activitor(func){

    var obj = {};

    func.apply(obj, params);

    return obj;

}

至此我們能夠創(chuàng)建該func的實(shí)例，并傳遞該func需要的參數(shù)。

四、打印測(cè)試一下吧：

完整代碼：

復(fù)制代碼代碼如下:

var
// 假設(shè)已定義好某些Service
services = { abc: 123, def: 456, ghi: 789 },

    // 獲取func的參數(shù)列表(依賴(lài)列表)
    getFuncParams = function (func) {
        var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);
        if (matches && matches.length > 1)
            return matches[1].replace(/\s+/, '').split(',');
        return [];
    },

    // 根據(jù)參數(shù)列表(依賴(lài)列表)填充參數(shù)(依賴(lài)項(xiàng))
    setFuncParams = function (params) {
        for (var i in params) {
            params[i] = services[params[i]];
        }
        return params;
    };

// 激活器
function Activitor(func) {
    var obj = {};
    func.apply(obj, setFuncParams(getFuncParams(func)));
    return obj;
}

// 定義新Service
function Service(abc, ghi) {
    this.write = function () {
        console.log(abc);
        console.log(ghi);
    }
}

// 實(shí)例化Service并調(diào)用方法
var service = Activitor(Service);
service.write();

控制臺(tái)成功打?。?/p>

您可能感興趣的文章: