使用requireJS的shim参数,完成jquery插件的加载

没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载,这个时候jquery框架生成全局变量$和jQuery等全局变量。如果项目中引用了requireJS框架,采用模块化的方式加载jquery,那么jquery不会再添加全局变量$和 jQuery 。现在问题来了,虽然jquery框架已经开始支持AMD规范,但是jquery的众多插件还是不支持AMD,仍然像以前一样需要使用全局变量$。jquery插件大多都是如下结构:

(function( $, undefined ) {

})( jQuery );

如果我们项目中使用了jquery插件,但是jquery框架是通过requireJS加载的(不会添加全局变量$),那怎么完成jquery插件的加载呢?使用传统的方,在HTML页面中通过<script>加载jquery插件,肯定是不行的。这个时候我们需要使用到

requireJS的shim参数,来完成jquery插件的加载。下面我们以加载jquery-ui的slider插件为例:

requirejs.config({
shim: {
'jquery.ui.core': ['jquery'],
'jquery.ui.widget': ['jquery'],
'jquery.ui.mouse': ['jquery'],
'jquery.ui.slider':['jquery']
},
paths : {
jquery : 'jquery-2.1.1/jquery',
domReady : 'require-2.1.11/domReady',
'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',
'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',
'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',
'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider'
}
}); require([ 'jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'],
function($) { $("#slider" ).slider({
value:0,
min: 0,
max: 4,
step: 1,
slide: function( event, ui ) {}
}); });

在path参数中,我们设置了模块名称(可以随意指定)和js文件路径的映射,然后在shim参数中,指定了模块名称和它的依赖数组,上面我们的jquery插件只依赖于jquery框架。通过这种方式,就可以使用requireJS完成jquery和其插件的加载,不会有全局变量污染问题

http://www.bubuko.com/infodetail-671521.html 有例子讲解

eps和exports的含义exports很好理解,就是模块的返回值。main.js中exports的值,一定要与dateUtil.js和stringUtil.js中暴露出的全局变量名称一致。很显然dateUtil.js和stringUtil.js这2个模块的返回值,就是暴露出的全局变量window.DateUtils和window.StringUtils,requireJS框架就是将这些全局变量的值返回,作为模块的返回结果。如果dateUtil.js或stringUtil.js中暴露了多个全局变量,那么exports可以指定其中任何的一个,作为模块的返回结果。不过一般的框架,都只会使用1个全局变量,这样冲突的可能性会减少,毕竟全局变量越少越好。deps是指定所要依赖的其他js模块

requirejs中 shim的更多相关文章

  1. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  2. requirejs中Shims使用说明

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

  3. 模块化开发RequireJS之shim配置

    一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.confi ...

  4. 使用requireJS的shim參数,完毕jquery插件的载入

    没有requireJS框架之前,假设我们想使用jquery框架,会在HTML页面中通过<script>标签载入.这个时候jquery框架生成全局变量$和jQuery等全局变量.假设项目中引 ...

  5. RequireJS中的require如何返回模块

    requirejs中定义AMD模块规则如下: define(function(){ var ProductManager={ Create:function(){ console.log(" ...

  6. 关于requirejs中的define的原理理解

    我们已经了解到模块模式是为单例创建私有变量和特权方法的. 一个最基本的例子: var foo=(function(){ var something='cool', var another=[1,2,3 ...

  7. RequireJS中的require返回模块

    requirejs中定义AMD模块规则如下: define(function(){ var ProductManager={ Create:function(){ console.log(" ...

  8. requirejs中的define

    关于requirejs中的define的原理理解   我们已经了解到模块模式是为单例创建私有变量和特权方法的.一个最基本的例子: var foo=(function(){ var something= ...

  9. requirejs源码分析: config中shim

    shim处理的源码: //Merge shim                 if (cfg.shim) {                     eachProp(cfg.shim, funct ...

随机推荐

  1. mysql 主从同步原理

    Replication 线程 Mysql的 Replication 是一个异步的复制过程,从一个 Mysql instace(我们称之为 Master)复制到另一个 Mysql instance(我们 ...

  2. tomcat 设置根目录访问

    from http://nj-apple-tree.iteye.com/blog/1635953 1,设置跟路径时,三种方式 在Tomcat默认安装后,tomcat的主目录是webapps/root目 ...

  3. [zt]系统中常用MIPS指令

    指令 功能 应用实例 LB 从存储器中读取一个字节的数据到寄存器中 LB R1, 0(R2) LH 从存储器中读取半个字的数据到寄存器中 LH R1, 0(R2) LW 从存储器中读取一个字的数据到寄 ...

  4. JAVA正则表达式介绍和使用

    本文引用自 http://www.cnblogs.com/android-html5/archive/2012/06/02/2533924.html 技术博客 1.Java中在某个字符串中查询某个字符 ...

  5. 8点需要注意的Web编程小细节

  6. 安装redis,执行make test时遇到You need tcl 8.5 or newer in order to run the Redis test

    安装他yum install tcl

  7. php 中如何创建一个空对象

    // 创建一个空对象 $obj=(object)array(); //假设这是从数据库取内容 $arr=["prod_id"=>103,"prod_name&quo ...

  8. jQuery 控制表单和表格

    这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践. <!DOCTYPE html PUBLIC &q ...

  9. LoadRunner11.00入门教程出现的问题

    问题1.打不开浏览器 解决办法:打开浏览器工具--Internet 选项--高级--取消启用第三方浏览器扩展. 顺带解决了,有两个浏览器问题. 两个浏览器:一个是自带的IE,一个是其他软件插件. 解决 ...

  10. Thinking in Java——笔记(1)

    Introduction To Obejct The progress of abstraction But their primary abstraction still requires you ...