requirejs 配制

baseUrl: 用来配制动态加载脚本时,脚本文件的起始位置,此属性可以指定值,也可以由 requirejs 自动计算出值:

  1:不进行任何配制: 假如 a.html 中引用 require.js 文件 <script src="require.js"></script>

    这样在 require([‘util‘],...)  的时候,util.js 的路径就是和 a.html 在同一个目录.

 

  2:通过 data-main 属性指定主文件:假如 a.html 中引用 require.js 文件 <script data-main="../app/main.js" src="require.js"></script>

    这种情况下,requirejs 会把 "../app/"  作为 baseUrl 属性的值,在 require([‘util‘],...)  的时候,util.js 的路径就是 ../app/util.js 了。

  3:显示指定 baseUrl 属性:假如 /admin/home.html 中引用 require.js 文件 <script data-main="../app/main.js" src="require.js"></script>

    在 main.js 中配制了 baseUrl 的值为 ‘lib‘ 值,在 require([‘util‘],...)  的时候,util.js 的路径就是 lib/util.js, 这是相对于 home.html 文件, 对于网站的绝对地址就是 /admin/lib/util.js 了。

  从上面的三种情况可以看取, requirejs 生成脚本路径的时候,就是把 baseUrl 加上 脚本的路径。

paths: 用来配制一些路径的别名,在 require 的时候直接使用别名就可以加载相应的脚本。

    paths 也可以文件夹的别名,如控件全部放在 lib/common/controls/ 目录下面,如果在不取别名的情况下,引用一个控件需要这样 require([‘lib/common/controls/date‘], ...), 如果在 paths 里配制了 ‘controls‘: ‘lib/common/controls‘ 后, 就可以 require([‘controls/date‘], ...) 了。

    paths 还有备错配制功能,如 jquery 的库默认从 cdn 上加载,如果 cdn 加载不成功就从本地加载:

    ‘jquery‘:[‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min‘, ‘lib/jquery‘]

shim: 配制一些未按 AMD 模式定义的库,(在 requirejs 中,模块使用 define 方法定义,define 方法会有一个返回值,这返回值就是模块的对象),如 jquery 的一些插件及以前一些老点的库,都没有按这些方式做,所以需要通过 shim 属性来配制一下:

    shim: {

      ‘bold‘: [

        ‘deps‘: [‘jquery‘],

        ‘exports‘: ‘jQuery.fn.bold‘

      ]

    }

  上面的代码中,主要是 exports 属性,这此属性的意思是当文件加载成功后, requirejs 从哪个变量中获取文件中所定义的对象,其实就是一个变量名称,requirejs 通过这个变量名称获取到一个值,并传递到相应的方法。

urlArgs: 用来指定在加载脚本时,附加在脚本 url 地址后面的参数,如 urlArgs: ‘ver=10001‘, 那么在动态加载的所有的脚本文件中,都会加上这个参数。

bundles: 当一个文件中定义了多个模块时,就需要使用此属性来进行相应的配制 bundles: { jsUtil:[‘MathUtil‘, ‘DateUtil‘] }, jsUtil 是文件名称, MathUtil 和 DateUtil 是通过 define 定义的模块名称,这样定义后,就可以使用 require([‘MathUtil‘, ‘DateUtil‘]...) 的方式对模块进行相应的引用。

时间: 2024-08-08 17:44:20

requirejs 配制的相关文章

requireJS

1.用于ADM(基于模块的异步加载JavaScript代码的机制)js模块开发 2.下载requireJS 3.好处: 1)有效防止命名冲突(js多时可能很多全局变量容易重复) 2)声明不同的js文件之间的依赖 3)模块化的开发 4.常用方法: requirejs.config:为模块指定别名 requirejs:将写好的模块引入并编写主代码 define:编写模块,在相应地方来引用 5.例子: 1)引入模块入口data-main是入口;<script data-main="js/main

requireJS(一)

一:为什么要使用requireJS? 很久之前,我们所有的JS文件写到一个js文件里面去进行加载,但是当业务越来越复杂的时候,需要分成多个JS文件进行加载,比如在页面中head内分别引入a.js,b.js,c.js等,如下所示: <script src="js/app/a.js"></script> <script src="js/app/b.js"></script> <script src="js/

JS模块化工具requirejs教程02

基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: define(function(){ function fun1(){ alert("it works"); } fun1(); }) 通过define函数定义了一个模块,然后再页面

CentOS 编译安装php5.5, 并配制支持apach,nignx核心代码

首先是编译准备工作: yum groupinstall "Development tools" 然后是编译安装 PHP 5.5.x 需要用到的 devel 包: yum install libxml2-devel gd-devel libmcrypt-devel libcurl-devel openssl-devel 从官方下载,解压: wget http://us3.php.net/get/php-5.5.5.tar.gz/from/cn2.php.net/mirror tar -x

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题 目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题.那么问题来了,依赖资源过多时怎么办? build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题

Linux应用:配制SSL站点

配制一个SSL站点 1.自建CA签证服务器IP:192.168.1.5  电脑名称:jacktest (Linux5.4-32b) 2.http服务器IP:192.168.1.3  电脑名称:test (Linux5.4-32b) 3.测试服务器IP:  192.168.1.19  电脑名称:test2 (winXP) 4.站点名称与证书站点名称一定要一致,否则有警告: 5.一个IP地址只能建立一个SSL虚拟主机: 一.安装SSL环境 [[email protected] conf.d]# yu

Linux下Aphche配制教程(Center Os)

前几天换了一台服务器,重新配了一台web服务器,大概流程如下(由于闲编译比较烦锁,所以直接yum安装): 一. 安装Web服务器软件 yum install httpd 二. 安装php yum install php*    yum -y install php*   --skip-broken 三. 安装mysql yum install mysql* 四. 经过以上三个步骤,已经完成apache.php.mysql的安装,接一下直接简单的配制即可 (1)配制站点 vim /etc/http

requirejs下载与配置

写在开始: requirejs有中文版api文档,可以访问http://www.requirejs.cn/home.html 下载requirejs 访问http://www.requirejs.cn/docs/download.html 下载require.js(可以下载原版或压缩版,压缩版体积小,原版未压缩,便于开发人员阅读) 这里下载到scripts目录 参考资料: http://www.requirejs.cn/

requirejs一 加载JavaScript文件

首先,目录如下(根目录有一个index.html文件.有一个scripts文件夹): scripts文件夹有如下的文件 以下是index.html代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>My Sample Project</title> 5 <!-- data-main attribute tells require.js to load 6 scripts/main.js after