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的前端框架大致就是这样了。
RequireJS简单实用说明的更多相关文章
- jQuery的几种简单实用效果
许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 简单实用的PHP防注入类实例
这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下 本文实例讲述了简单实用的PHP防注 ...
- php简单实用的操作文件工具类(创建、移动、复制、删除)
php简单实用好用的文件及文件夹复制函数和工具类(创建.移动.复制.删除) function recurse_copy($src,$dst) { // 原目录,复制到的目录 $dir = opend ...
- 基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
- C#_简单实用的翻页
简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...
- 简单实用的Windows命令(一)
前几天新买了一台笔记本电脑,使用了一下几个简单的查看电脑配置的命令,觉得非常的不错,在此记录一下 一:运行命令的方式有两种 1:使用快捷键WIN+R,然后在弹出的“运行”对话框中输入对应的命令 2:在 ...
- 简单实用的Windows命令(二)
昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...
- iOS边练边学--多线程介绍、NSThread的简单实用、线程安全以及线程之间的通信
一.iOS中的多线程 多线程的原理(之前多线程这块没好好学,之前对多线程的理解也是错误的,这里更正,好好学习这块) iOS中多线程的实现方案有以下几种 二.NSThread线程类的简单实用(直接上代码 ...
随机推荐
- 软件测试为什么需要学习Linux的知识?Linux学到什么程度?-log5
软件测试为什么需要学习Linux的知识?学到什么程度?-log5 Dotest软件测试学堂-董浩 公司目前90%的服务器操作系统不是Windows,而是Linux(RedHat.Debian.Cen ...
- LaTeX多图合并代码示例(subfigure)
\usepakage{subfig} \begin{figure*}[!htb] \centering \subfigure[Derm101 data distribution]{\includegr ...
- 题解-BJOI2019 光线
Problem loj3093 & x谷 题意概要:给定 \(n\) 块玻璃,每块玻璃有其折射比例与反射比例(折射比例+反射比例 不一定为 \(100\%\)),求从最上头打下一束光,有多少比 ...
- spring mybatis mysql 事务不起作用
之前框架事务应该是好的,不过这次做了些修改,不知如何竟然不好用了,整理了好半天,java框架配置就是吓人,有一点不熟悉的就可能暴露问题,好处是又深入的了解了配置原理. 开始以为是mysql不支持事务的 ...
- flask蓝图的简单使用
1.flask的简单使用 from flask import Flask # from flask import make_response app = Flask(__name__) app.con ...
- 收藏一个可以学习javascript prototype的链接
https://github.com/mqyqingfeng/Blog/issues/2
- Codeforces 558E A Simple Task (计数排序&&线段树优化)
题目链接:http://codeforces.com/contest/558/problem/E E. A Simple Task time limit per test5 seconds memor ...
- hadoop mkdir: Cannot create directory /usr. Name node is in safe mode.
今天在hdfs上面创建文件夹的时候报了:org.apache.hadoop.dfs.SafeModeException: Cannot delete /user/hadoop/input. Name ...
- Make a plan
1. 思考 2. 学习英语 3. 练习书法 执行周期:2015年1月15日到2016年1月16日. 要像每一次用餐一样对待每一天的计划. 早晨起来,第一件事情是洗漱,然后是思考: 中午时间,第一件事情 ...
- scrapy爬取数据保存csv、mysql、mongodb、json
目录 前言 Items Pipelines 前言 用Scrapy进行数据的保存进行一个常用的方法进行解析 Items item 是我们保存数据的容器,其类似于 python 中的字典.使用 item ...