RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化

requireJS 加载代码的时候，其相对路径为baseUrl,baseUrl通常被设置为data-main指定文件的目录

em:

<script src="js/libs/require.js"  defer async="true"  data-main="js/main.js"></script>

data-main:起始的js

src:依赖的require库js

举一个简单的例子：

Index.html:

<!doctype html>

<html lang="en">

 <head>

     <meta charset="UTF-8">

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

 </head>

 <body>

 </body>

</html>

mian.js

require.config({

   baseUrl:"js/lib",//设置基本路径

   paths:{

           "user":'user',                      //-----   js/lib/user

           "jquery":"jquery-1.11.3"   //-----js/lib/jquery-1.11.3

   }

/*方式二：

   paths:{

           "user":'lib/user',

           "jquery":"lib/jquery-1.11.3"

      }

*/

 });

 require(["jquery","user"],function($,user){//依赖的模块

       $(function(){

           alert("juery加载完毕");

       });

对于每一个分开的js: 采用AMD模式来编写模块，模块必须采用特定的define()函数来定义

User.js(此时user.js是没有依赖模块的)

define([],function(){

           function fun1(){

             alert("it works");

          }

         fun1();

 })

注：若是模块有依赖，第一个参数是一个数组，第二个参数是匿名函数

前面的依赖项将以参数的形式传递给函数，顺序与之前一致

Demo:

define([“../cart”,”../inventory”],function(cart,inventory){

      return {

           color:”blue”,

           addToCart:function(){

                 inventory.decrement(this);

                 cart.add(this);

           }

    }

});

模块也可以不返回对象，任何有效的返回都是可以的。

对于没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

 注：require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义

（1）exports值（输出的变量名），表明这个模块外部调用时的名称；

（2）deps数组，表明该模块的依赖性。

em:

require.config({

      baseUrl:"",

      paths:{

           "angular":"../ipi_view/eaf/common/lib/angualr"

      }

        shim：{

                'angular':{

                    exports:'angular',

                    deps:['angular']

　　　　  },

         ‘jquery-slide’:{

              deps: [‘jquery’]

         }，

　　　 'jquery.scroll': {

　　　　　　deps: ['jquery'],// 该模块的依赖性。

　　　　　　exports: 'jQuery.fn.scroll'//这个模块外部调用时的名称

　　   }

       }

});

require([‘jquery-slide’]，function（jQ）{

 ......../......

});//保证了先加载jquery,在加载其插件

进一步解释一下:

1）require.config的作用(主要用于解决有些第三法方非AMD库文件的问题)，如果你的文件都是AMD，那么你就可以完全删除require.config这个东西了.

2）require.config的另一个作用就是解决过度臃肿的文件路径问题（直接说我们一般在require.config里面可以简化，将长的路径问题一次性解决）.

require.config({

　　　　paths:{

　　　　　　“mycheck“:'../ipi_view/common/mycheck'，//自定义的一个公共指令

　　　　}

})

require(['mycheck'],function(){..................})

例如：

在paths中配置的文件可以直接在require(['mycheck'],function(){......})中引用,这样你的项目中所有的js文件中都会引入mycheck，这样意味着你可以直接在页面上使用。

当然也可以

require([''../ipi_view/common/mycheck'，‘’],function(){..................})

参考：http://www.ruanyifeng.com/blog/2012/11/require_js.html

requireJS的使用说明的更多相关文章

  1. requirejs中Shims使用说明

    RequireJS中如果使用AMD规范,在使用的过程中没有太多的问题,如果加载非AMD规范的JS文件,就需要使用Require中的shim. require.config({ paths:{ jque ...

  2. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  3. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  4. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  5. 使用gulp解决RequireJS项目前端缓存问题（二）

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

  6. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  7. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  8. angularjs集成requirejs

    其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...

  9. awk使用说明

    原文地址:http://www.cnblogs.com/verrion/p/awk_usage.html Awk使用说明 运维必须掌握的三剑客工具:grep(文件内容过滤器),sed(数据流处理器), ...

随机推荐

  1. nyoj——297（期望）

    GoroSort 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 Goro has 4 arms. Goro is very strong. You don't me ...

  2. python 连接操作 各类数据库

    转载自MySQL Loners 一,python 操作 MySQL:详情见:这里 #!/bin/env python # -*- encoding: utf-8 -*- #-------------- ...

  3. 【转】线程池体系介绍及从阿里Java开发手册学习线程池的正确创建方法

    jdk1.7中java.util.concurrent.Executor线程池体系介绍 java.util.concurrent.Executor : 负责线程的使用与调度的根接口  |–Execut ...

  4. ZOJ 2975 Kinds of Fuwas（暴力+排列组合）

    Kinds of Fuwas Time Limit: 2 Seconds      Memory Limit: 65536 KB In the year 2008, the 29th Olympic ...

  5. 【HTML5】使用 JavaScript 来获取电池状态（Battery Status API）

    HTML5 规范已经越来越成熟,可以让你访问更多来自设备的信息,其中包括最近提交的 "Battery Status API".如其名称所示,该 API 允许你通过 JavaScri ...

  6. python之阶乘的小例子

    现在自己写阶乘是这个样子的 def f(x): return x * f(x-1) if x >1 else 1 后来无意中看到耗子的一篇<Python程序员的进化>的文章, 感脚这 ...

  7. iOS跳转支付宝付款码和扫一扫页面

    iOS跳转支付宝付款码和扫一扫页面 // 是否支持支付宝 NSURL * myURL_APP_A = [NSURL URLWithString:@"alipay://"]; if ...

  8. PentesterLab-PHP Include And Post Exploitation

    一.打开页面,看到这么个页面,按照惯例随手点一点 二.Login处显然是一个后台登录页面,但前提是的有账号密码,看了下Submit这个页面,发现url中有个page参数 三.nikto跑一下这个页面. ...

  9. 余弦相似度及基于python的三种代码实现、与欧氏距离的区别

    1.余弦相似度可用来计算两个向量的相似程度 对于如何计算两个向量的相似程度问题,可以把这它们想象成空间中的两条线段,都是从原点([0, 0, ...])出发,指向不同的方向.两条线段之间形成一个夹角, ...

  10. iOS LZMA类压缩算法使用

    LZMA(Lempel-Ziv-Markov chain-Algorithm的缩写)是2001年以来得到发展的一个数据压缩算法,它用于7-Zip归档工具中的7z格式和 Unix-like 下的 xz  ...