RequireJS簡單實用說明
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.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簡單實用說明