<script src="js/require.js"></script>

<script src="js/require.js" data-main="js/main"></script>

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

    // some code here

  });

使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

  require.config({

    paths: {

      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"

    }

  });

 require.config({

    baseUrl: "js/lib",

    paths: {

      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"

    }

  });

require.config({

    paths: {

      "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

    }

  });

假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:

  // math.js

  define(function (){

    var add = function (x,y){

      return x+y;

    };

    return {

      add: add
    };

  });

加载方法如下:

  // main.js

  require(['math'], function (math){

    alert(math.add(1,1));

  });

如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。

  define(['myLib'], function(myLib){

    function foo(){

      myLib.doSomething();

    }

    return {

      foo : foo

    };

  });

当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

require.js的简单使用的更多相关文章

  1. require.js 模块化简单理解

    组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...

  2. 使用require.js

    requirejs使用入门 什么是requirejs? RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要 ...

  3. require.js+bootstrap实现简单的页面登录和页面跳转

    小颖的这个demo其实很简单的,大家一起来先来看看页面效果图:          目录: 代码: inde.html <!DOCTYPE html> <html> <he ...

  4. EpiiAdmin 开源的php交互性管理后台框架, 让复杂的交互变得更简单!Phper快速搭建交互性平台的开发框架,基于Thinkphp5.1+Adminlte3.0+Require.js。

    EpiiAdmin EpiiAdmin php开源交互性管理后台框架,基于Thinkphp5.1+Adminlte3.0+Require.js, 让复杂的交互变得更简单!Phper快速搭建交互性平台的 ...

  5. require.js模块化管理和加载js(按需加载)简单实例教学

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  6. require.js简单入门

    推荐文章:http://www.ruanyifeng.com/blog/2012/11/require_js.html 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, 2)实现并引用 ...

  7. [javascript模块化]require.js简单使用

    1.javascript模块规范 CommonJS 主要用于服务器端编程,比如node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性方法require(),用 ...

  8. require.js工作原理(初始)

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  9. require.js基本认识

    基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...

随机推荐

  1. 转:python webdriver 环境搭建

    第一节 环境搭建准备工具如下:-------------------------------------------------------------下载 python[python 开发环境]ht ...

  2. C++动态内存分配

    C++动态内存分配1.堆内存分配 :C/C++定义了4个内存区间:代码区,全局变量与静态变量区,局部变量区即栈区,动态存储区,即堆(heap)区或自由存储区(free store). 堆的概念:通常定 ...

  3. java基础(59):Eclipse把自动括号匹配改成C++那样的(强迫症,没办法)

    在Eclipse开发环境下依次选择: 1.Windows->Preferences->Java->Code Style->Formatter: 2.在Active Profil ...

  4. C#: 启动画面设计

    Windows Form经常会在启动主界面的时候预先有启动画面,这也是因为用户体验的需要,用户知道已经启动application,而不是在load resource的时候等待.因此这里不能用单线程的思 ...

  5. UVALive 6145 Version Controlled IDE(可持久化treap、rope)

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  6. HDU 4822 Tri-war(LCA树上倍增)(2013 Asia Regional Changchun)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4822 Problem Description Three countries, Red, Yellow ...

  7. hdu5255 魔法因子

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=5255 首先先预处理出一个p,使得p*因子X等于一个整数,且p最小,设q=p*X. 则题目则可以看成存在 ...

  8. (转载)R14也称作子程序连接寄存器

    R14也称作子程序连接寄存器(Subroutine Link Register)或连接寄存器LR.当执行BL子程序调用指令时,R14中得到R15(程序计数器PC)的备份. 其他情况下,R14用作通用寄 ...

  9. React-Native坑1:Invariant Violation:Application 项目名 has not been registered.

    React-Native坑1:Invariant Violation:Application 项目名 has not been registered. 字数347 阅读1421 评论3 喜欢7 前言 ...

  10. webpack 无法安装

    命令行输入:  npm install webpack -g 解决办法:增加环境变量  D:\nine\trunk\node_modules\.bin\ bin目录下有webpack.cmd 如果还是 ...