RequireJS簡單實用說明

標籤：操作方法   資料   des   bsp   router   else   bootstra   text   display   

OM前端架構說明

 

om前端架構採用RequireJS，RequireJS  是一個JavaScript模組載入器。它非常適合在瀏覽器中使用, 它非常適合在瀏覽器中使用，但它也可以用在其他指令碼環境, 就像 Rhino and Node. 使用RequireJS載入模組化指令碼將提高代碼的載入速度和品質。

 

RequireJS 的使用

 

首先在index.html中引用RequireJs, 

 

<script src="js/lib/require.js" data-main="js/main.js"></script>

 

注意到圖中標籤中有一個data-main屬性，你現在只需要瞭解require.js會在載入完成以後通過回調方法去載入這個data-main裡面的js檔案，所以這個js檔案被載入的時候，RequireJS已經載入執行完畢。

 

 

require.config({    // http://SMStatic.31huiyi.com/js    baseUrl: GLOBAL_CONFIG.SMStaticDomainURL + ‘js‘,    urlArgs: ‘v=‘ + (new Date().getTime()),    waitSeconds: 30,    paths: {        ‘jquery‘: ‘lib/jquery-2.1.4.min‘,        ‘underscore‘: ‘lib/underscore-min‘,        ‘backbone‘: ‘lib/backbone-min‘,        ‘utils‘: ‘util/utils‘,        ‘datatable‘: ‘plugin/datatable/js/datatable‘,        ‘lang‘: ‘util/lang-zh_cn‘,         ‘validate‘: ‘plugin/jquery.validate.form/js/jquery.validate.form‘,        ‘ztree‘: ‘plugin/zTree_v3/js/jquery.ztree.all-3.5.min‘,        ‘jqueryui‘: ‘lib/jquery-ui.min‘,        ‘printarea‘: ‘plugin/print/jquery.PrintArea‘,        ‘autopop‘: ‘app/auto_pop‘,        ‘zclip‘: ‘plugin/forms_zclip/jquery.zclip.min‘,              ‘calendar‘: ‘app/Ecalendar.jquery.min‘,        ‘moment‘: ‘lib/moment‘,        ‘bootstrap-datetimepicker‘: ‘lib/datetimepicker‘,        ‘newdatetime‘: ‘lib/newdatetime‘,          ‘timepicker‘: ‘lib/timepicker_init‘    },    shim: {        ‘validate‘: {            deps: [‘jquery‘, ‘lang‘]        },        ‘datatable‘: {            deps: [‘jquery‘]        },        ‘ztree‘: {            deps: [‘jquery‘],            exports: ‘$.fn.zTree‘        }    }});require.onError = function (err) {    console.log(err.requireType);    if (err.requireType === ‘timeout‘) {        console.log(‘modules: ‘ + err.requireModules);    }    throw err;};require([‘base/nav‘]);

 

在main.js檔案,裡面被一個匿名立即執行函數所包括。在require.config(...)中，可以配置許多配置項，後面會有詳細說明。上面在config中添加了一個path，在path配置了一個模組ID和路徑的映射，這樣在後續的所有函數中就可以直接通過模組ID來引入依賴，而不用再多次引入依賴多次輸入路徑帶來的麻煩。當然也可以直接引用相對路徑。

 

知道了大概的requirejs的結構。看看項目裡具體怎麼使用的吧。

 

那我們就以在om裡擷取服務雲的公司管理的功能為例。

連結是這樣 http://om.31huiyi.com/#/om/ServiceManagement/View/CompanyView

顯然這樣一個路由是我們自訂的，沒有#命名的檔案夾。

關於這樣一個連結是如何找到companyview.js的呢？

答案在於main.js一開始就載入的nav.js裡。看

 

define([    ‘jquery‘,    ‘backbone‘,    ‘util/router‘,    ‘base/BaseView‘,    ‘app/menunav‘], function($, Backbone, router, BaseView, menu){    var NavView = BaseView.extend({        el: $(‘body‘),        root: ‘#/sm‘,         slideSpeed: 200,        events: {            ‘click .menu > li.has-sub-menu > span‘: ‘foldMenu‘,            //‘click .menu > li.has-sub-menu > span‘: ‘routeMenu‘,            ‘click .menu .sub-menu > li‘: ‘routeMenu‘        },        initialize: function() {            menu.init();                        Backbone.history.start();        },                foldMenu: function(e){            var $T = $(e.target);            var SlideSpeed = this.slideSpeed;            var $P = $T.parent();            if($P.hasClass(‘active‘)){                $(‘.dy-nav‘).hide();                $P.removeClass(‘active‘);                                $P.find(‘.sub-menu‘).slideUp(SlideSpeed);            } else {                $(‘.menu > li.has-sub-menu‘).removeClass(‘active‘);                $(‘.menu > li.has-sub-menu‘).find(‘.sub-menu‘).slideUp(SlideSpeed)                                if($P.find(‘.sub-menu > li.active‘).length > 0){                    $(‘.dy-nav‘).show();                }                setTimeout(function(){                    menu.reset();                }, SlideSpeed+5);                                $P.addClass(‘active‘);                $P.find(‘.sub-menu‘).slideDown(SlideSpeed);              }                     var url = $T.data(‘url‘);            if (url) {                router.navigate(this.root + url, { trigger: true });            }        },                routeMenu: function(e){            var $T = $(e.currentTarget);            var url = $T.data(‘url‘);            if(url){                $(‘.menu .sub-menu > li‘).removeClass(‘active‘);                $T.addClass(‘active‘);                                var top = $T.offset().top;                var _html = ‘<div class="loading-view"></div>‘;                if($(‘.loading-view‘).length === 0){                    $(‘body‘).append(_html);                }                $(‘.loading-view‘).css({                    display: ‘block‘,                    top: top + ($T.height()-$(‘.loading-view‘).height())/2                });                                router.navigate(this.root+url, {trigger: true});            }        }    });        return new NavView;});

 

 

define([    ‘jquery‘,    ‘backbone‘,    ‘app/menunav‘], function ($, Backbone, menu) {    var Router = Backbone.Router.extend({        currentView: null,        root: GLOBAL_CONFIG.CurrentDomainScriptPath,        routes: {            ‘‘: ‘transmitRouter‘,            ‘sm/*path‘: ‘transmitRouter‘,            ‘*error‘: ‘error‘        },                switchView: function(hash, view){            var curLi = $(‘.menu‘).find(‘[data-url="/‘+hash+‘"]‘);            curLi.parents(‘.has-sub-menu‘).addClass(‘active‘);            curLi.addClass(‘active‘);            menu.active(curLi);                        if(this.currentView){                this.currentView.remove();            }            this.currentView = view;        },          transmitRouter: function(hash){            var _this = this;            // DefaultPage變數在Index.cshtml裡配置            if (!hash) hash = GLOBAL_CONFIG.DefaultPage;            require([_this.root + hash + ‘.js‘], function (View) {                var view = new View;                _this.switchView(hash, view);            });        },                error: function(){            alert(‘頁面未找到‘);            $(‘.loading-view‘).hide();        }    });        return new Router();});

 

定義了root,然後在所有的菜單的連結上都加上root.而在router.navigate這個方法裡會找到companyview的絕對位址。

 

 

  

 

 

 

   接下來看看companyview的結構是怎樣的？

 

 define = function (name, deps, callback)完成的,第一個參數是定義模組名，第二個參數是傳入定義模組所需要的依賴，第三個函數則是定義模組的主函數，主函數和require的回呼函數一樣，同樣是在依賴載入完以後再調用執行。通常第一個參數我們會不寫，以防我們會轉移這個檔案的目錄，讓最佳化工具自己生產這些模組名。

 

define([    ‘jquery‘,    ‘base/BaseView‘,    ‘app/ztree‘,    ‘utils‘,    ‘/script/OM/ServiceManagement/Model/CompanyModel.js‘,    ‘datatable‘,    ‘validate‘], function ($, BaseView, zTree, utils, CompanyModel, DataTable) {    var CompanysView = BaseView.extend({        model: CompanyModel,        url: CompanyModel.initurl,        dt: null,        events: {            ‘click #SearchByFansName‘: ‘Search‘,            ‘click #addCompany‘: ‘addCompany‘,            ‘click #searchUserBtn‘: ‘searchUserBtn‘,            ‘click #saveModel‘: ‘saveUserCompany‘        },        outerEvents: {},        initialize: function () {            var _this = this;            this.bindOuterEvent();            this.render({                complete: function () {                    _this.initTable();                }            });        });

 

下面我們講講這些參數的具體用法。

Model:在本次項目中我們把Controllers的操作方法的路由存到model裡去。便於管理,上面要引用這個路徑。

Url：是當前頁面的路由。

Dt：初始化為null,如果頁面裡有列表資料，會在initTable賦值。

Events：就是當前頁面觸發的事件。

OutEvents：就是公用事件

Initialize: 初始化這個頁面執行的方法。

 

OK,om的前端架構大致就是這樣了。

RequireJS簡單實用說明