Singal Page App：使用Knockout和RequireJS建立高度模塊化的單頁應用引擎

時間 2019-11-20

標籤 singal page app 使用 knockout requirejs 建立高度模塊化單頁應用引擎欄目 JavaScript 简体版

原文原文鏈接

開篇扯淡

距離上一篇文章已經有好幾個月，也不是沒有時間記錄點東西，主要是換了新的工做，在一家外資工做，目前的工做內容大多都是前端開發，新接觸的東西由於時間緣由，大多還不成體系，因此這麼長時間什麼都沒記錄下來，也正是由於新的工做內容，纔有了今天這篇文章。css

這篇文章是我本身的博客項目的前端重寫，由於目前ASP.NET API和單頁應用的流行，結合目前工做中用到的東西，我決定把個人博客項目的前端部分整個重寫，（之前的就是一坨…）html

步入正題

背景知識

RequireJS http://www.requirejs.org/前端

Knockout http://knockoutjs.com/jquery

BootStrap http://getbootstrap.com/git

PubSubJS https://github.com/mroderick/PubSubJSgithub

若是沒有接觸過的朋友請自行谷歌百度吧，就不浪費口水，額，鍵盤啦，什麼，沒有jQuery，呵呵，呵呵，正如Knockout官方文檔裏說的，Everyoue loves jquery。ajax

RequireJS我用來作模塊加載器，Knockout作MVVM分離也是爽到沒朋友（誰用誰知道），Bootstrap搭建界面佈局，PubSub，看着名字就知道啦。json

文檔結構

Libs:放置上文中提到的各類框架和工具；bootstrap

App：主要的工做目錄，articleList、catalog、articleViewer分別表明整個前端應用中的一個組件,對應的.html文件是他們自身的視圖模板;api

Utilities:存放一些工具類，如檢測設備、格式化Url和字符串等；

Layout：只有一個文件，存放了整個前端應用的模板，能夠經過更改這個文件，來改變各個組件的表現形式。

服務端API準備

爲這個示例，我只準備了三個服務端API：

GetCatalog 獲得文章類型目錄：

namespace MiaoBlog.Controllers.API
{
    public class CatalogController:ApiController
    {
        public IEnumerable<CategoryView> Get()
        {
            GetAllCategoriesResponse response = articleCatalogService.GetAllCategories();
            return response.Categories;
        }
    }
}

GetArticlesByCategory 根據類型ID和頁面編號獲取文章目錄，

GetArticle 根據文章ID獲取文章內容等信息：

namespace MiaoBlog.Controllers.API
{
    public class ArticlesController:ApiController
    {
        public IEnumerable<ArticleSummaryView> GetArticlesByCategory(int categoryId, int pageNumber)
        {
            GetArticlesByCategoryRequest request = GenerateArticlesByCategoryRequestFrom(categoryId, pageNumber-1);
            GetArticlesByCategoryResponse response = articleCatalogService.GetArticlesByCategory(request);
            return response.Articles;
        }

        public ArticleDetailPageView GetArticle(int id)
        {
            ArticleDetailPageView detailView = new ArticleDetailPageView();
            GetArticleRequest request = new GetArticleRequest() { ArticleId = id };
            GetArticleResponse response = articleCatalogService.GetArticle(request);
            ArticleView articleView = response.Article;
            detailView.Article = articleView;
            detailView.Comments = response.Comments;
            detailView.Tags = response.Tags;
            return detailView;
        }


        private static GetArticlesByCategoryRequest GenerateArticlesByCategoryRequestFrom(int categoryId, int index)
        {
            GetArticlesByCategoryRequest request = new GetArticlesByCategoryRequest();
            request.NumberOfResultsPerPage = int.Parse(ApplicationSettingsFactory.GetApplicationSettings().NumberOfResultsPerPage);
            request.Index = index;
            request.CategoryId = categoryId;
            request.ExcerptLength = int.Parse(ApplicationSettingsFactory.GetApplicationSettings().ExcerptLength);
            return request;
        }
    }
}

Require配置與系統配置

這裏我用到的Require的幾個經常使用插件：domReady、css、text.

paths配置了引用的js的別稱：

paths:{
        'lib/jquery': './Libs/jquery-1.11.1',
        'lib/underscore': './Libs/underscore',
        'lib/unserscore/string': './Libs/underscore.min',
        'lib/backbone':'./Libs/backbone',
        'lib/backbone/eproxy':'./Libs/backbone.eproxy',
        'lib/backbone/super': './Libs/backbone.super',
        'lib/pubsub': './Libs/pubsub',
        'r/css': './Libs/css',
        'r/less': './Libs/less',
        'r/text': './Libs/text',
        'r/domReady': './Libs/domReady',
        'r/normailize': './Libs/normalize',
        'pubsub': './Libs/pubsub',
        'lib/ko': './Libs/knockout-3.2.0',
        'utility': './Utilities/utility',
        'util/matrix2d': './Utilities/matrix2d',
        'util/meld':'./Utilities/meld',
        'lib/bootstrap': './Libs/bootstrap-3.2.0/dist/js/bootstrap',
        'lib/bootstrap/css': './Libs/bootstrap-3.2.0/dist/css/'
    },

shim的配置略過；

而後就是require的調用入口了，從這裏啓動整個前端應用：

require(['lib/jquery', 'r/domReady', 'lib/underscore', 'config', 'r/text!Layout/template.html', 'r/css!lib/bootstrap/css/bootstrap.css', 'lib/bootstrap', ], function ($, domReady, _, config, template) {
    domReady(function () {
        var rootContainer = $("body").find("[data-container='root']");
        var oTemplate=$(template);
        var modules = $("[data-module]",oTemplate);
        _.each(modules, function (module, index) {
            require(["App/" + $(module).attr("data-module")], function (ModuleClass) {
                var combineConfig = _.defaults(config[$(module).attr("data-module")], config.application);
                var oModule = new ModuleClass(combineConfig);
                oModule.load();
                oModule.render(modules[index]);
            });
        });
        rootContainer.append(oTemplate);
    });
});

這裏看到了template.html經過r/text引入，上文中提到過，它就是整個應用程序的模板文件，先看一下它的結構我再接着解釋代碼內容：

<div class="container">
    <div class="row">
        <div class="col-lg-3" data-module="catalog"></div>
        <div class="col-lg-9" data-module="articleList"></div>
    </div>
    <div data-module="articleViewer"></div>
</div>

這樣看起來，代碼的意圖就明晰多了，在頁面中查到了data-container爲root的節點，將它做爲整個前端應用的根節點，而後再讀取上面的模板文檔，根據模板中標籤的data-module屬性，得到模塊名稱，而後動態的加載模塊。

在這裏我使用了Underscore的_.defaults方法，給各個模塊取得了各自的配置內容和公用配置內容，Underscore是js的一個工具類，自行百度，很少介紹，還有個我的推薦的Underscore.string，它提供了不少js處理字符串的方法，比較方便好用。

上文所說起的應用配置文件以下：

define(function () {
    return {
        application: {
            Events: {
                SWITCH_CATEGORY:"Miaoblog_Switch_Category",
                OPEN_ARTICLE:"Miaoblog_Open_Article"
            }
        },

        catalog: {
            APIs: {
                GetCatalog: {
                    Url: "http://localhost:15482/api/Catalog"
                }
            }
        },
        articleList: {
            APIs: {
                GetArticleList: {
                    Url: "http://localhost:15482/api/Articles",
                    ParamsFormat: "categoryId={0}&pageNumber={1}"
                }
            }
        },
        articleViewer: {
            APIs: {
                GetArticle: {
                    Url:"http://localhost:15482/api/Articles/{0}"
                }
            }
        }
    };
});

結合上文中的代碼，能夠明確的知道一點，各個組件模塊最終只會獲得關於它本身的配置項目和公用的，也就是application級別的配置內容，在application對象中的Events對象在下文中將會作詳細的介紹。

模塊中的工做

就已catalog模塊爲例，先貼上代碼，再作解釋：

/// <reference path="../Libs/require.js" />
define(['lib/jquery', 'lib/ko', 'lib/underscore','pubsub', 'r/text!App/catalogList.html'],
    function ($, ko,_, hub,template) {
        var app = function (config) {
            this.catalogList = null;
            this.oTemplate = $(template);
            this.config = config;
        }

        _.extend(app.prototype, {
            load: function () {
                var self = this;
                $.ajax({
                    type: "GET",
                    async: false,
                    url: self.config.APIs.GetCatalog.Url,
                    dataType: "json",
                    success: function (data) {
                        self.catalogList = data;
                    },
                    error: function (jqXHR, textStatus, error) {
                        console.log(error);
                    }
                });
            },
            render: function (container) {
                var self = this;
                var oContainer = $(container);
           
                var list = {
                    categories: ko.observableArray(),
                    switchCategory: function (selected) {
                        //alert("Hello world"+selected.Id);
                        hub.publish(self.config.Events.SWITCH_CATEGORY, selected.Id);
                    }
                };
                list.categories(self.catalogList);
                oContainer.append(this.oTemplate);
                ko.applyBindings(list, this.oTemplate.get(0));
            }
        });

        return app;
});

這裏惟一新的內容就是大殺器knockout終於出場了。

從上一節內容能夠看到，主模塊將會一次調用子模塊的load和render方法，在這個子模塊catalog中，load階段，經過對服務端的api調用獲得了文章目錄，API的地址是經過config文件的解析傳遞過來的，的數據結構是這樣的：

而在render階段，傳入的參數爲僅供給當前組件的佔位，組件自身能夠決定怎樣去佈局這個佔位，這就涉及到了它自身的模板文件了：

<ul class="nav nav-pills nav-stacked" data-bind="foreach:categories">
    <li>
        <a href="#" data-bind="attr:{categoryId:Id},click:$parent.switchCategory">
            <!--ko text: Name--><!--/ko-->
            <span class="badge pull-right" data-bind="text:ArticlesCount"></span>
        </a>
    </li>
</ul>

在數據和視圖二者間，我使用了Knockout進行綁定，它的優點在文檔中有詳細的描述，若是您想了解的話，就在文章開始找連接吧；

接着分析代碼，在視圖中，使用了Bootstrap的樣式建立了一個目錄樣式，而且banding了一個switchCategory方法到viewModel中，當咱們點擊每個類型連接時候，系統會經過上文中提到的Pubsub工具發佈一個SWITCH_CATEGORY的事件出去，而且攜帶了所點擊類型的ID，這個常量字符串也是在上一節中的config文件中配置的。

模塊間的工做

上一節中提到了Pubsub發佈了一個事件出去，意圖是但願文章列表或者其餘什麼關心這個事件的組件去作它本身的工做，在這個示例中固然就只有articleList這個組件了，來看一下這個組件的代碼：

/// <reference path="../Libs/require.js" />
define(['lib/jquery', 'lib/ko', 'lib/underscore', 'utility', 'pubsub', 'r/text!App/articleList.html','r/css!App/CommonStyle/style.css'],
    function ($, ko, _, utility,hub,layout) {
        var app = function (config) {
            this.config = config;
            this.oTemplate = $(layout);
            this.currentPageArticles = null;
            this.currentCategoryId = null;
            this.currentPageNumber = null;
            this.articleListViewModel = null;
        }

        _.extend(app.prototype, {
            initialize:function(){
                
            },

            load: function () {
                var self = this;
                hub.subscribe(this.config.Events.SWITCH_CATEGORY, function (msg, data) {
                    self.switchCategory(data);
                });
            },

            render: function (container) {
                var self = this;
                var oContainer = $(container);
                this.articleListViewModel = {
                    articles: ko.observableArray(),
                    openArticle: function (selected) {
                        hub.publish(self.config.Events.OPEN_ARTICLE, selected.Id);
                    }
                };
                oContainer.append(this.oTemplate);
                ko.applyBindings(this.articleListViewModel, this.oTemplate.get(0));
            },

            switchCategory: function (categoryId) {
                var self = this;
                self.currentCategoryId = categoryId;
                self.currentPageNumber = 1;
                $.ajax({
                    type: "GET",
                    async: true,
                    url: utility.FormatUrl(false,self.config.APIs.GetArticleList,categoryId,self.currentPageNumber),
                    dataType: "json",
                    success: function (data) {
                        self.articleListViewModel.articles(data);
                    }
                });
            },
            turnPage: function (pageNumber) {

            }
        });

        return app;
    }
);

這裏主要看如下兩個點：

1.在Load階段，組件監聽了SWITH_CATEGORY這個事件，在事件觸發後，將調用switchCategory方法；由於這個SWITCH_CATEGORY這個常量是配置在application對象中，因此它在各個組件間是公用的；

2.在switchCategory中，傳入的即便上一節中提到的類型ID，而後一樣經過上一節的方法，調用服務端API，得到數據，而後使用knockout進行數據綁定，在ViewModel中，能夠看到一個openArticle方法，一樣發佈了一個事件，在這個示例中，是右articleViewer監聽的，因爲原理相近，就很少作解釋了，僅有破圖了代碼送上。