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

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

(function( $, undefined ) {

})( jQuery );

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

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和其插件的加载,不会有 全局变量污染问题。文章地址https://www.yii666.com/article/332516.html

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

使用requireJS的shim参数 解决插件 jquery.ui 等插件问题-相关文章

  1. deepin设置jdk全局变量

    sudo vim /etc/bash.bashrc在文件最后边添加JAVA_HOME=jdk地址CLASSPATH=.:$JAVA_HOME/bin.tools.jarPATH=$JAVA_HOME/bin:$PATHexport JAVA_HOME CLASSPATH PATH然后刷新文件source  /etc/bash.bashrc然后java -version检查

  2. phpCMS V9 自定义添加 全局变量{SKIN_PATH}方法

    前言:目前v9版本新增{js_path},{css_path},{img_path}三个全局变量,代替2008版本中{skin_path},样式图片脚本分开路径,确实达到了一定在后台管理方便的目的,但是个人感觉并不十分便捷优势:可实现自定义模板分离,与default模板images/js/css文件分开存放,方便管理,并实现自定义模

  3. Vue之添加全局变量

    定义全局变量原理:设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。全局变量模块文件:Global.vue文件:使用方式1:在需要的地方引用

  4. 谈谈django里的Contex和RequestContext---向模板里添加全局变量

    一直很想仔细研究一下,我在django模板里,可以直接访问变量user, request之类的变量,哪里来的,到底都有哪些?这会儿周五,我有空来仔细看看代码。模拟一下需求:我们做一个在线商城,需要把这些全局变量注入到所有页面,如用户的资料:比如用户的账号、用户的姓名

  5. deepin添加设置快捷键

    deepin的设置侧边栏没有快捷键需要手动设置,第一步就是要知道设置的命令是什么。按下start,把其中的“控制中心”发送到桌面,以文本方式打开之,其中的exec字段就是打开设置所执行的命令。打开控制中心,在键盘区域添加自定义快捷键,只需要把命令和快捷键进行绑定

  6. deepin添加新的打开方式软件

    在/usr/share/applications文件夹中,你可以先打开一个其他的软件比如geany,然后根据geany的配置配置你所需要的新软件

  7. 【Jest】笔记三:全局变量

    一、前提我们在使用unittest,testng框架的时候都知道,每个case都是项目独立的,上一个case返回的值是不能使用到下一个case的,但是实际中接口之间的关系是紧密相连的,这个时候我们怎么办?二、解决办法在describe()测试套件前添加全局变量 

  8. Axure之全局变量

    ****全局变量*****1、定义:变量是一个数据的容器,是一个字符串,可设置默认值;2、功能:两个功能:读、写3、特点:随时随地可以对变量进行读和写,不限页面。也就是在不同的页面也可以访问同一个全局变量4、设置变量的步骤【添加动作】下【全局变量】--》【设置变

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png