最近做項(xiàng)目用到 ASP.NET Web Optimizatoin Framework，發(fā)現(xiàn) Sea.js 的依賴加載在 Release 版本下不能很好的工作了——因?yàn)?Web.Optimizatoin 合并了所有腳本。同時(shí)由于寫慣了 Java 
程序和 C# 程序，對(duì)于沒有命名空間概念的 Sea.js 和 RequireJS 也感覺不爽。考慮了下，覺得模塊管理其實(shí)并不復(fù)雜，所以將之前在《ASP.NET MVC4 捆綁(Bundle)技術(shù)下的 JavaScript》 中提到的 js-modular 的基礎(chǔ)上進(jìn)行了改進(jìn)，最終產(chǎn)生了 jNs。

創(chuàng)新互聯(lián)是一家專業(yè)提供靈壽企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為靈壽眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

jNs 是一個(gè)具有命名空間概念的 JavaScript 模塊管理工具。與 Sea.js 和 ReqireJS 等模塊管理工具不同，jNs 只管理模塊的定義和使用，而不負(fù)責(zé)加載，非常適合發(fā)布合并 JavaScript 代碼的 Web 項(xiàng)目，比如使用了 ASP.NET Web Optimization Framework 提供的 Script Bundle 功能的 ASP.NET 項(xiàng)目，以及使用 UglifyJS 壓縮合并腳本的項(xiàng)目等。

jNs 托管在 git.oschina.net 上，其 README 中已經(jīng)有詳情的示例，所以這里就不廢話了。這里主要說說在 ASP.NET MVC 項(xiàng)目里怎么使用。

第一，定義合理的腳本結(jié)構(gòu)

下面展示了一個(gè)來自某個(gè)實(shí)際項(xiàng)目的腳本目錄（有所精簡(jiǎn)），也許不是最好的結(jié)構(gòu)，但我個(gè)人覺得很清晰（用方括號(hào) []括起來的是目錄）。

[Scripts]
  │ - jNs-1.0.0.js
  │ - jNs-1.0.0.min.js
  │ - jquery-2.1.3.js
  │ - jquery-2.1.3.min.js
  ├─[core]
  │   └─[co]
  │       │ - app.js
  │       │ - compatible.js
  │       │ - util.js
  │       ├─[app]
  │       │   │ - ajax.js
  │       │   │ - dialog.js
  │       │   │ - page.js
  │       │   └ - ui.js
  │       └─[util]
  │           │ - case.js
  │           │ - debug.js
  │           └ - format.js
  └─[page]
      ├─[home]
      │   └ - index.js
      └─[user]
          └ - index.js

其中有兩個(gè)比較關(guān)鍵的主目錄，一個(gè)是 core，一個(gè)是 page。

core 是整個(gè)項(xiàng)目中需要使用到的模塊，在 bunles 中配置成一個(gè)名為 ~/bundle/core 的 ScriptBundle。Release 版本下會(huì)被打包成一個(gè)合并的腳本文件。大部分的頁(yè)面只需要引用 ~/bundles/core 就可以了，因?yàn)榇蟛糠值墓眠壿嫸荚谶@里了。

但是仍然會(huì)有一部分頁(yè)面比較特殊，需要有自己的腳本。那么這些腳本就按一定的路徑保存在 page 目錄下。

core 中的目錄結(jié)構(gòu)與模塊的結(jié)構(gòu)對(duì)應(yīng)，這樣查找腳本文件的時(shí)候就比較方便，比如示例中的結(jié)構(gòu)對(duì)應(yīng)的模塊全稱（含命名空間）就是：

co.app
co.app.ajax
co.app.dialog
co.app.page
co.app.ui
co.compatible
co.util
co.util.case
co.util.debug
co.util.format

這個(gè)結(jié)構(gòu)看起來就像 Java 一樣。不過與 Java 不同，目錄不必與命名空間（或包）對(duì)應(yīng)，文件名也不必與模塊名相同——這似乎更像 C#。

還有一點(diǎn)需要注意的是，在同一個(gè)命名空間下，子級(jí)命名空間和模塊名是可以相同的，這也算是 jNs 的特點(diǎn)之一吧。

有了合理的結(jié)構(gòu)，還需要解決下面這個(gè)問題。

第二，保證 jNs.js 在模塊定義之前加載

雖然一般認(rèn)為在 ScriptBunlde 中 Include 的腳本會(huì)順序加載，或者說在 Release 版本下按順序合并，所以認(rèn)為可以這樣寫配置：

// BundleConfig.cs
// 注意：這是錯(cuò)誤的示例
public static void RegisterBundles(BundleCollection bundles)
{
    bunles.Add(new ScriptBundle("~/bundles/core")
        .Include("~/scripts/jNs-{version}.js").
        .IncludeDirectory("~/scripts/core/", "*.js", true)
    );
}

可惜事實(shí)不是。我閱讀了它的源碼，發(fā)現(xiàn)它使用了一個(gè) Dictionary 來進(jìn)行中間過程的處理，所以最終輸出的順序完全是不確定的。所以 jNs 有可能在某個(gè)模塊文件之后加載，那么模塊文件中的 jNs(...) 就會(huì)出錯(cuò)——因?yàn)檫€沒定義。

不過很幸運(yùn)，Web.Optimization 提供了 IBundleOrderer 接口來處理順序的問題。我比較懶，所以不想直接去實(shí)現(xiàn)IBundleOrderer 接口，而是從 DefaultBundleOrderer 繼承了個(gè)子類來處理順序——不管 DefaultBundleOrderer 是怎么處理的，我只需要在它處理之后按輸入的順序重新排列一下就好了

public class AsIsBundleOrderer : DefaultBundleOrderer
{
    public override IEnumerable<BundleFile> OrderFiles(
        BundleContext context,
        IEnumerable<BundleFile> files
    )
    {
        var originalList = files.ToList();
        IEnumerable<BundleFile> orderFiles = base.OrderFiles(context, originalList);
        return orderFiles.OrderBy(f => originalList.IndexOf(f));
    }
}

在有 AsIsBundleOrderer 之后，再來看看正確的 Bundle 配置

public static void RegisterBundles(BundleCollection bundles)
{
    var bundle = new ScriptBundle("~/bundles/core")
        .Include("~/Scripts/jNs-{version}.js")
        .IncludeDirectory("~/Scripts/core/", "*.js", true);
    bundle.Orderer = new AsIsBundleOrder();
    bundles.Add(bundle);
}

網(wǎng)站標(biāo)題：jNs在ASP.NETMVC項(xiàng)目中的應(yīng)用
文章起源：http://chinadenli.net/article26/geodjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)