如何在 FineUIMvc 中引用第三方 JavaScript 庫

聲明：FineUIMvc（基礎版）是免費軟件，本系列文章適用於基礎版。

引入第三方顏色選擇器

在 FineUIMvc 中使用第三方 JavaScript 遵循一定的約定，也非常簡單。

下面以官網示例為例：http://fineui.com/demo_mvc/#/demo_mvc/ThirdParty/ColorPicker

這個例子引入了第三方的顏色選擇器，配合 FineUIMvc 的 TextBox 控件一起使用。

我們來看下本頁面的視圖定義：

@{
    ViewBag.Title = "ThirdParty/ColorPicker";
    var F = @Html.F();
}
@section head {
    <link rel="stylesheet" href="~/third-party/res/spectrum/spectrum.css" />
    <style>
        .mycolor .f-field-body {
            display: inline-block !important;
            width: 150px;
            margin-right: 5px;
        }

        .mycolor .sp-replacer {
            border-width: 0;
            padding: 0;
            position: absolute;
            top: 50%;
            margin-top: -10px;
        }

        .mycolor .sp-dd {
            display: none;
        }

        .mycolor .sp-preview {
            margin-right: 0;
        }
    </style>
}

@section body {

    @(F.SimpleForm()
        .ID("SimpleForm1")
        .BodyPadding(5)
        .Width(450)
        .EnableCollapse(true)
        .ShowBorder(true)
        .Title("表單")
        .ShowHeader(true)
        .Items(
            F.DatePicker()
                .Required(true)
                .Label("日期一")
                .EmptyText("請選擇日期一")
                .ID("DatePicker1")
                .ShowRedStar(true),
            F.TextBox()
                .ID("tbxMyBox")
                .CssClass("mycolor")
                .Text("#f90")
                .Required(true)
                .ShowRedStar(true)
                .Label("選擇顏色"),
            F.Button()
                .ID("btnSubmit")
                .ValidateForms("SimpleForm1")
                .Text("提交表單")
                .OnClick(Url.Action("btnSubmit_Click"),
                    new Parameter("dateValue", "F.ui.DatePicker1.getText()"),
                    new Parameter("textValue", "F.ui.tbxMyBox.getValue()"))
        )
    )

}

@section script {
    <script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script>
    <script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script>
    <script>
        F.ready(function () {
            var tbxMyBox = F.ui.tbxMyBox;

            tbxMyBox.bodyEl.spectrum({
                preferredFormat: "hex3",
                showInput: true,
                showPalette: true,
                palette: [
                    ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
                    ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
                    ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
                    ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
                    ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
                    ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
                    ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
                    ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
                ]
            });
        });
    </script>
}

整體上講分為三大部分：

1. @section head：所有的 CSS 定義都放在這里面，包含第三方的 CSS 文件引用。

2. @section body：正文部分

3. @section script：腳本區域，放置第三方腳本引用和初始化腳本。

 

下面看下頁面的初始化腳本：

F.ready(function () {
    var tbxMyBox = F.ui.tbxMyBox;

    tbxMyBox.bodyEl.spectrum({
        ......
    });
});

1. F.ready 類似於 jQuery 的 $.ready 函數，在頁面上所有的控件初始化完畢之后觸發。

2. F.ui.tbxMyBox 用來獲取頁面上 id=tbxMyBox 的控件實例，在 FineUIMvc 的客戶端腳本中，你可以通過這種方式獲取所有的控件實例。如果你之前用過FineUI（開源版），知道還有另一種獲取控件實例的方式：F('tbxMyBox')，為了兼容之前的代碼，這種方式依然支持。

3. tbxMyBox.bodyEl 表示的是文本輸入框的 input 標簽，是一個 jQuery 對象。通過瀏覽器的調試工具，我們很容易的觀察 bodyEl 所指向的元素：

 

常見錯誤

 一個看似簡單的任務，但是如果不了解其中的原理，也會經常出錯，下面就列出網友經常犯錯的地方。

重復引入jQuery庫

錯誤代碼：

@section script {
    <script src="~/res/jquery.js" type="text/javascript"></script>
    <script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script>
    <script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script>
    <script>
    
    ...
    </script>
}

因為 FineUIMvc 的客戶端庫里已經引入了 jQuery，因此無需再引入 jQuery 庫，重復引入 jQuery 會出現各種問題。

因此上面的代碼要把  <script src="~/res/jquery.js" type="text/javascript"></script> 這一行刪掉。

 

JavaScript引用位置錯誤

錯誤代碼：

@section head {
    <link rel="stylesheet" href="~/third-party/res/spectrum/spectrum.css" />
    
    <script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script>
    <script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script>
    <script>
    ...
    </script>
}

這是另外一個常見的錯誤，將 JavaScript 代碼放入 head 節中。之所以這樣做是錯誤的，還要看布局視圖的定義（_Layout.cshtml）： 

<!DOCTYPE html>
<html>
<head>
    @F.RenderCss()
    
    @RenderSection("head", false)
</head>
<body>
    @Html.AntiForgeryToken()

    @F.PageManager

    @RenderSection("body", true)

    @F.RenderScript()
    @RenderSection("script", false)
</body>
</html>

這是一個簡化的布局視圖，注意其中我們放置的順序，@F.RenderScript() 用來渲染 FineUIMvc 所需要的 JavaScript 引用，所以第三方和自定義 JavaScript 引用都要放到這個的后面，也就是 script 節中（當然，如果你調整了布局視圖的定義，就另當別論了）。

 

$.ready 還是 F.ready

錯誤代碼：

@section script {
    <script src="~/third-party/res/spectrum/spectrum.js" type="text/javascript"></script>
    <script src="~/third-party/res/spectrum/i18n/jquery.spectrum-zh-cn.js" type="text/javascript"></script>
    <script>
        $.ready(function () {
            var tbxMyBox = F.ui.tbxMyBox;

            tbxMyBox.bodyEl.spectrum({
                ...
            });
        });
    </script>
}

這個錯誤也會經常出現，很多網友認為 DOMReady 時（$.ready）應該就可以寫初始化代碼了。其實不然，因為你的初始化代碼中包含對 FineUIMvc 控件的引用（F.ui.tbxMyBox），而在 DOMReady 時這些控件還沒有初始化。

記着一點：自定義初始化腳本放到 F.ready() 里面。

 

小結

本篇文章講解了如何引入第三方 JavaScript 庫到 FineUIMvc 主導的頁面中，這個過程遵循一定的規則，簡單明了。同時也分析了網友常見的錯誤，它們分別是重復引入 jQuery 庫，JavaScript 放置的位置不對，以及自定義腳本放到了 DOMReady 里面。 

 

 

《FineUIMvc隨筆》目錄：http://www.cnblogs.com/sanshi/p/6473592.html