博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用requireJS的shim參数,完毕jquery插件的载入
阅读量:6071 次
发布时间:2019-06-20

本文共 1476 字,大约阅读时间需要 4 分钟。

没有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://lpngx.baihongyu.com/

你可能感兴趣的文章
vim学习与理解
查看>>
DIRECTSHOW在VS2005中PVOID64问题和配置问题
查看>>
MapReduce的模式,算法以及用例
查看>>
《Advanced Linux Programming》读书笔记(1)
查看>>
zabbix agent item
查看>>
一步一步学习SignalR进行实时通信_7_非代理
查看>>
AOL重组为两大业务部门 全球裁员500人
查看>>
字符设备与块设备的区别
查看>>
为什么我弃用GNOME转向KDE(2)
查看>>
Redis学习记录初篇
查看>>
爬虫案例若干-爬取CSDN博文,糗事百科段子以及淘宝的图片
查看>>
Web实时通信技术
查看>>
第三章 计算机及服务器硬件组成结合企业运维场景 总结
查看>>
IntelliJ IDEA解决Tomcal启动报错
查看>>
默认虚拟主机设置
查看>>
七周五次课(1月26日)
查看>>
Linux系统一些系统查看指令
查看>>
php中的短标签 太坑人了
查看>>
[译] 可维护的 ETL:使管道更容易支持和扩展的技巧
查看>>
### 继承 ###
查看>>