kmdjs整合uglifyjs2打造極致的程式設計體驗

2021-09-07 06:42:01 字數 2079 閱讀 8411

上篇文章大概展示了kmdjs0.1.x時期的程式設計正規化:

如下面所示,可以直接依賴注入到function裡,

var ball = new ball(0, 0, 28, 1, -2, 'kmdjs');

var vp = bom.getviewport();

});

也可以直接在**裡把full namespace加上來呼叫,如:

var vp = util.bom.getviewport();

});

而且,在迴圈依賴的場景,因為執行順序的問題,會導致第一種方式注入undefined,所以迴圈依賴的情況下只能用full namespace的方式來呼叫。

這種程式設計體驗雖然已經足夠好,但是可以更好。怎樣才算更好?

不用依賴注入function

不用寫full namespace,自動匹配依賴

如下所示:

var ball = new ball(0, 0, 28, 1, -2, 'kmdjs');

var vp = bom.getviewport();

});

這就要借助uglifyjs能力,把function的字串替換成帶有namespace就可以實現上面的效果。

function fixdeps(fn,deps) );

}if (node instanceof u2.ast_dot) );}}

if (node instanceof u2.ast_symbolref) );

}}));

var clonenodes = .concat(nodes);

//過濾new nodes 中的symbo nodes

for (var i = 0, len = nodes.length; i < len; i++) }}

for (var i = nodes.length; --i >= 0;) ),

args: node.args

});} else if (node instanceof u2.ast_dot) ),

property: node.property

});}else if(node instanceof u2.ast_symbolref));

}var start_pos = node.start.pos;

var end_pos = node.end.endpos;

code = splice_string(code, start_pos, end_pos, replacement.print_to_string());

}return code.replace('function ___kmdjs_temp','function');

}function getfullname(deps,name) else if(matchcount===1)else

}function splice_string(str, begin, end, replacement)

function isinscopechainvariables(scope, name)

if (scope.parent_scope)

return false;

}function isinarray(arr,name),['c.b','aaa.g','sfsf.c','aaaa.m'] ))

輸出:

function (a)
這樣,kmdjs在執行模組function的時候,只需要fixdeps加上full namespace就行:

function buildbundler());

topnsstr+= kmdjs.nslist.join('\n') +"\n\n";

each(kmdjs.factories, function (item) );

if(kmdjs.buildend) kmdjs.buildend(topnsstr);

return topnsstr;

}

build出來的包,當然全都加上了namespace。再也不用區分迴圈依賴和非迴圈依賴了~~~

上面的所有**可以github上找到:

kmdjs指令大全

通過下面方式,可以輸出kmdjs聲稱的類 src dist kmd.js?debug data main js main script 在kmd.js後面加上?debug可以在console面板檢視到依賴關係和輸出的class。通過下面方式,可以輸出使用canvas繪製的專案依賴關係圖 src di...

使用uglifyjs壓縮JS

npm install uglify js g 3 演示如何使用uglifyjs壓縮js 開啟乙個用於存放js檔案的資料夾,進入到cmd 此時輸入命令對lazyload.js檔案進行壓縮並輸出檔名為lazyloady.min.js的檔案 uglifyjs lazyload.js o lazyload...

使用UglifyJS合併 壓縮JavaScript

在uglifyjs入門中主要記錄了uglifyjs的安裝,配置。篇末在命令列中使用了乙個簡單命令來壓縮乙個js檔案。這篇以程式設計的方式去壓縮js檔案。即寫乙個build.js檔案,使用node命令執行該檔案。build.js中的 會去呼叫uglifyjs的介面函式以執行壓縮任務。這段 的大概意思是...