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

backbone插件中,需要通过script标签引入require.js。

data-main属性的作用是,指定网页程序的主模块,即网页的主模块是src下的app.js

require.js

1、网页主模块是app.js,主模块依赖于其他的模块,这样就会用到require()和require.config()
当需要依赖的模块和主模块在同一目录下时,使用require()或require.config()
当需要依赖的模块和主模块不在同一目录下时,使用require.config()
2、require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

    // some code here

  });
require()中有两个参数,第一个参数是数组,内容主模块要依赖的模块,例子中表示主模块
依赖于jquery.js、underscore.js、backbone.js
第二个参数是个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参
数形式传入该函数,从而在回调函数内部就可以使用这些模块。
3、当主模块app.js和三个需要依赖的模块jquery.js、underscore.js、backbone.js不在同一个目录
下的时候,可以使用require.config()
require.config()中参数paths是个对象,paths属性指定各个模块的加载路径。baseUrl表示的是改变基目录,如下(2)所示
(1) require.config({
    paths: {
      "jquery": "lib/jquery.min",
      "underscore": "lib/underscore.min",
      "backbone": "lib/backbone.min"
    }
  });
(2) require.config({
    baseUrl: "js/lib",
    paths: {
      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    }
  });
(3)如果某个模块在另一台主机上,也可以直接指定它的网址,比如:
  require.config({
    paths: {
      "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
    }
  });
4、按照AMD规范,模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
例: 假定现在有一个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文件。
5、加载非规范的模块
这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。
例:underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。
 require.config({
    shim: {
//shim是用来配置不兼容的模块。具体来说,每个模块要定义exports值(输出的变量名),表明这个模块外部调用时的名称
      'underscore':{
        exports: '_'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
//deps数组,表明该模块的依赖性。即backbone.js依赖于underscore.js和jquery.js
        exports: 'Backbone'
      }
    }
  });

参考网址:http://www.cnblogs.com/duanhuajian/archive/2013/01/04/2844151.html

require.js学习笔记(内容属于转载总结)的更多相关文章

  1. 【转】require.js学习笔记(二)

    require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...

  2. require.js学习笔记

    使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织 官方网站http ...

  3. 【转】require.js学习笔记(一)

    一.立即执行函数 立即执行函数可以有效避免临时变量污染全局空间.可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用. for (var i = 0; i < elems.lengt ...

  4. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  5. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  6. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  7. Node.js学习笔记(2):基本模块

    Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...

  8. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

随机推荐

  1. 插入排序和一点小感悟(c++版)

    很早之前,为了应付数据结构考试.花了一星期多看了数据结构,当时觉得也没什么难的. 过了老久,总算是招报应了,做笔试题发现其实所有理解只是在表面,实际上我并不会实现,确实是这样,学术这东西真没捷径,还是 ...

  2. Random类和ThreadLocalRandom类

    Random类和ThreadLocalRandom类 Random类用于生成一个伪随机数,他有两个构造方法:一个构造方法使用默认的种子(以当前时间作为种子),另一个构造方法需要显示传入一个long型整 ...

  3. CodeForces 651A Joysticks 贪心

    A. Joysticks time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  4. percona-toolkit工具包的使用教程之开发类工具

    percona-toolkit工具包的使用教程之开发类工具 1.  pt-duplicate-key-checker l  功能介绍: 功能为从mysql表中找出重复的索引和外键,这个工具会将重复的索 ...

  5. Linux下mysql备份 恢复

    转载自http://blog.chinaunix.net/uid-20577907-id-161611.html 比如我们要备份mysql中已经存在的名为linux的数据库,要用到命令mysqldum ...

  6. Python import 指定目录中的模块

    #coding=utf-8 import os,sys sys.path.append('test') # 下级目录(text) parentdir = os.path.dirname(os.path ...

  7. jQuery模拟鼠标点击事件失效的问题

    最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...

  8. liftover的使用/用法

    Lift genome positions Genome positions are best represented in BED format. UCSC provides tools to co ...

  9. ALV详解:OO ALV

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. QQLogin

    import java.awt.*; import javax.swing.*; public class QQLogin extends JFrame{ QQLogin(){ this.setSiz ...