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.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的前端框架大致就是这样了。