<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 API 之控制浏览器滚动条

    有时候 web 页面上的元素并非直接可见的,就算把浏览器最大化,我们依然需要拖动滚动条才能看到想要操作的元素, 这个时候就要控制页面滚动条的拖动, 但滚动条并非页面上的元素, 可以借助 JavaScr ...

  2. fzuoj Problem 2177 ytaaa

    http://acm.fzu.edu.cn/problem.php?pid=2177 Problem 2177 ytaaa Accept: 113    Submit: 265Time Limit: ...

  3. [转]Chrome 控制台console的用法

    Chrome 控制台console的用法 下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x&q ...

  4. Python学习总结15:时间模块datetime & time & calendar (二)

    二 .datetime模块  1. datetime中常量 1)datetime.MINYEAR,表示datetime所能表示的最小年份,MINYEAR = 1. 2)datetime.MAXYEAR ...

  5. .NET: WPF Template

    Data Template: 要做一个listBox,里面有车子的简单信息,点了里面的item后就会显示详细信息. car class: using System; using System.Coll ...

  6. Linux的set

    功能说明: 设置shell 语 法: set [+-abCdefhHklmnpPtuvx] 补充说明: set指令能设置所使用shell的执行方式,可依照不同的需求来做设置. 参 数: -a 标示已修 ...

  7. hdu5354 Bipartite Graph

    分治+并查集.假设要求[L,mid]的答案,那么很明显,如果一条边的两个端点都>mid的话或者一个端点>mid一个端点<L,说明询问[L,mid]这个区间中任何一点时候,这一条边都是 ...

  8. Facebook开源项目:我们为什么要用Fresco框架?

    (Facebook开源项目)Fresco:一个新的Android图像处理类库 在Facebook的Android客户端上快速高效的显示图片是非常重要的.然而多年来,我们遇到了很多如何高效存储图片的问题 ...

  9. java 选择排序法

    public class Test3 { /**@author shaobn * @param 选择排序:将a.length - i个元素分别和第i个元素相比较,小的话就将值调换.依次递减进行排列 * ...

  10. php正则表达式and数组

    <?php //正则表达式 //斜杠代表定界符 /^$/ /* $str="abcde123fg456h"; $reg="/\d/"; echo preg ...