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. jps、jstack、jmap、jhat、jstat、hprof使用详解

    https://my.oschina.net/feichexia/blog/196575#comment-list A. jps(Java Virtual Machine Process Status ...

  2. LeetCode OJ：Burst Balloons（击破气球）

    Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...

  3. LeetCode OJ：Ugly Number II（丑数II）

    Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...

  4. Centos下找不到eth0设备的解决方法

    问题描述: ifconfig命令无法找到eth0设备,且/etc/sysconfig/network-scripts/中只有ifcfg-lo文件,而没有ifcfg-eth0. 临时解决方法一: 使用命 ...

  5. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  6. React-Native进阶_6.导航 Naviagtion传递数据并展示

    接着上面 Navigation 继续学习传递数据给下一个页面 onPress={() => this.props.navigation.navigate('Detail',{info:movie ...

  7. 每周荐书：云原生、Docker、Web算法（评论送书）

    每周荐书:云原生.Docker.Web算法(评论送书) 感谢大家对每周荐书栏目的支持,先公布下上周中奖名单 名优秀评论可以免费获得此书.   云原生应用架构实践 云原生架构,关注简化开发流程.提升研发 ...

  8. OkHttp之ConnectInterceptor简单分析

    在< Okhttp之CacheInterceptor简单分析 >这篇博客中简单的分析了下缓存拦截器的工作原理,通过此博客我们知道在执行完CacheInterceptor之后会执行下一个浏览 ...

  9. I.MX6 linux eGalaxTouch 自动获取设备节点

    I.MX6 linux eGalaxTouch 自动获取设备节点 \\\\\\\\\\\\\\-*- 目录 -*-///////////// | 一. 需求: | 二. /proc/bus/input ...

  10. 【剑指offer】07重建二叉树，C++实现

    本博文是原创博文,转载请注明出处! # 本文为牛客网<剑指offer>刷题笔记 1.题目 # 输入某二叉树的前序遍历和中序遍历的结果,重建二叉树 2.思路(递归) # 前序遍历中,第一个数 ...