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. js排序算法04——归并排序

    归并排序是一种分治算法.思想是把原数组切分成较小的数组,直到每个小数组只有一个位置,再将小数组归并成较大的数组,直到最后有一个完整有序的大数组. js实现如下: function mergeSort( ...

  2. 使用libimobiledevice + ifuse提取iOS沙盒文件

    简介 libimobiledevice:一个开源包,可以让Linux支持连接iPhone/iPod Touch等iOS设备. Git仓库: https://github.com/libimobiled ...

  3. Linux下第一次Node尝试

    由于需求所定,必须在服务器上使用nodejs,第一次使用过程记录下来. 首先是安装node,这里可以下载到各个版本的node:https://nodejs.org/download/ 我是进入rele ...

  4. C++中几个值得分析的小问题（1）

    下面3个小问题都是我认为C++ Beginner应该能够解答或辨别清楚的.希望我们能通过题目挖掘更多的信息,而不仅仅局限在解题.我最喜欢说的话:能力有限,所以作为抛砖引玉,希望共同讨论,指出错误. 另 ...

  5. ant+jmeter+jenkins+git持续集成以及邮件报告展示

    前序准备工作: ant--下载地址:http://ant.apache.org/bindownload.cgi jmeter--下载地址:http://jmeter.apache.org/downlo ...

  6. python3与python2中的string.join()函数

    在python2中,string 模块中有一个join()函数,用于以特定的分隔符分隔源变量中的字符串,将其作为新的元素加入到一个列表中,例如: body=string.join(( "Fr ...

  7. New Concept English three（11）

    Customs Officers are quite tolerant these days, but they can still stop you when you are going throu ...

  8. Entity Framework技术系列

    http://www.cnblogs.com/yilin/tag/Entity%20Framework/

  9. PostgreSQL文档编译

    之前一直没有将doc进行编译,最近编译成功了,却无法用man来查看,发现是没有将man的目录添加到搜索路径: MANPATH /usr/pgsql-10/share/man 加入到 /etc/man. ...

  10. postfix基于客户端的访问控制

    1.基于客户端的访问控制概览 postfix内置了多种反垃圾邮件的机制,其中就包括“客户端”发送邮件限制.客户端判别机制可以设定一系列客户信息的判别条件: smtpd_client_restricti ...