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

时间： 2024-11-08 23:58:47

RequireJS简单实用说明的相关文章

简单实用的PHP防注入类实例

这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下 本文实例讲述了简单实用的PHP防注入类.分享给大家供大家参考.具体如下: PHP防注入注意要过滤的信息基本是get,post,然后对于sql就是我们常用的查询,插入等等sql命令了,下面我给各位整理两个简单的例子,希望这些例子能给你网站带来安全. PHP防注入类代码如下: 复制代码 代码如下: <?php /**  * 参数处理类  *

微信公众平台之超简单实用的天气预报后台实现

微信公众平台之超简单实用的天气预报后台实现 概述,前段时间我在开发一个自己的微信公众平台,需要实现天气预报功能,在网上度娘了下,实现天气预报的接口API还蛮多的,有:中国气象局.雅虎和新浪等,中国天气预报接口需要全国的编码,雅虎的有时候访问不了,研究了下还是新浪提供的接口比较简单实用.新浪天气预报API的URL是http://php.weather.sina.com.cn/xml.php?city=%B1%B1%BE%A9&password=DJOYnieT8234jlsK&day=0.其

FMDB数据库的简单实用

引入和FMDB第三方类库,  demo地址:http://pan.baidu.com/s/1c0pbfxA 1 #define dataBasePath [[(NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES)) lastObject]stringByAppendingPathComponent:dataBaseName] 2 #define dataBaseName @"MyDatabase

简单实用的CSS网页布局中文排版技巧

由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助. 一.如何设定文字字体.颜色.大小等 font-style设定斜体,比如font-style:italic font-weight设定文字粗细,比如font-weight:bold font-size设定文字大小,比如font-size:12px line-heigh

Java对象简单实用（计算器案例）

Java对象简单实用(计算器案例) 对 Java中的对象与属性,方法的使用,简单写了个案例 1 import java.util.Scanner; 2 class Calculste 3 { 4 int a; //定义两个整数 5 int b; 6 String option; //定义接收操作符的字符串 7 public void count(){ 8 9 //对操作符进行判断 10 switch(option){ 11 case "+": 12 System.out.println

php简单实用的操作文件工具类（创建、移动、复制、删除)

php简单实用好用的文件及文件夹复制函数和工具类(创建.移动.复制.删除) function recurse_copy($src,$dst) {  // 原目录,复制到的目录 $dir = opendir($src); @mkdir($dst); while(false !== ( $file = readdir($dir)) ) { if (( $file != '.' ) && ( $file != '..' )) { if ( is_dir($src . '/' . $file) )

Mac中Git的简单实用（6） --- 分支管理策略

今天我来介绍下Git,Git是一款免费.开源的分布式版本控制系统. 我们在上一个学习了Git分支冲突管理. 这一章,我们要学习Git的Fast-forward模式.保存恢复现场 .测试的feature分支. Mac中Git的简单实用(1) - Git基本命令(1) Mac中Git的简单实用(2) - Git基本命令(2) Mac中Git的简单实用(3) - Github远程仓库 Mac中Git的简单实用(4) - 分支branch管理 Mac中Git的简单实用(5) - Git分支冲突管理 1.

JavaScript 日期格式化 简单实用

JavaScript 日期格式化 简单实用 代码如下,引入jquery后直接后加入以下代码刷新可测试 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.

关于git的简单实用

这里主要介绍的是 "开源中国"的使用  ;其实就相当于github的中国版.只不过服务器在中国 ,所以速度上稍微快一些. 好 废话不多说直接上代码 ! 整个过程都是在Mac终端中完成: 首先 .要创建一个文件夹用来装我们的项目  在创建项目之前我们先来熟悉一下终端的帮助功能 , 在终端中 如果想调出git 的帮助直接可以输入 git help指令 这样就可以调出关于git的所有帮助 如果 知道详细的某个关键字怎么使用也很简单 直接输入git help checkout *退出输入wq