标签：操作方法 数据 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的前端框架大致就是这样了。
标签：操作方法 数据 des bsp router else bootstra text display
原文地址：http://www.cnblogs.com/sunnie/p/7160189.html
