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. day25 crm 权限管理 通用的增删改查框架

    代码: https://github.com/liyongsan/git_class/tree/master/day25/LuffyCRM

  2. 上传组件UploadiFive（H5版本）

    初始化 $('#file_upload').uploadifive({ 'auto' : false, 'buttonClass':'btn', 'buttonText':'选择视频', 'fileS ...

  3. 二、DBMS_JOB(用于安排和管理作业队列)

    1.概述 作用:用于安排和管理作业队列,通过使用作业,可以使ORACLE数据库定期执行特定的任务注意:当使用DBMS_LOB管理作业时,必须确保设置了初始化参数job_queue_processes( ...

  4. Python 读取window下UTF-8-BOM 文件

    with open('target.txt', 'r', encoding='utf_8_sig') as fp: print(fp.read())

  5. 使用 Express 实现一个简单的 SPA 静态资源服务器

    背景 限制 SPA 应用已经成为主流,在项目开发阶段产品经理和后端开发同学经常要查看前端页面,下面就是我们团队常用的使用 express 搭建的 SPA 静态资源服务器方案. 为 SPA 应用添加入口 ...

  6. 优化JDBC封装

    可重用性较强的JDBC封装 以下为代码,注释中写了主要思想 主类 com.util.JDBCUtil.java package com.util; import java.lang.reflect.F ...

  7. vux配置i18n

    根据使用文档,先引入i18n import VueI18n from 'vue-i18n'; Vue.use(VueI18n) const i18n = new VueI18n({ locale: ' ...

  8. zset类型以及其操作

    sorted set类型 sorted sets类型以及其操作zset是set的一格升级版本,它在set的基础上增加了一格顺序属性,这一属性在添加元素的同时可以指定,每次指定后,zset会自动重新按照 ...

  9. IGMP技术总结

    转载自:IGMP技术总结 本博客(http://blog.csdn.net/livelylittlefish)贴出作者(三二一.小鱼)相关研究.学习内容所做的笔记,欢迎广大朋友指正! 1.  IGMP ...

  10. JFinal源码详解

    JFinal的框架我24号的一篇博文写到过,它优秀的地方在精简代码上,那么有两处源码是我觉得是值得我们要好好解析一下,一处是初始化加载—servlet跳转,另一处是DB+ActiveRecord的映射 ...