使用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和其插件的载入,不会有全局变量污染问题。
使用requireJS的shim參数,完毕jquery插件的载入的更多相关文章
- requirejs中 shim
使用requireJS的shim参数,完成jquery插件的加载 时间 2014-10-31 13:59:10 CSDN博客 原文 http://blog.csdn.net/aitangyong/ ...
- jQuery.ajax()方法中參数具体解析
前言 在项目开发中,为了实现异步向服务端发起请求,最常常使用的就是jQuery.ajax方法了.刚開始需求比較简单,调用jQuery.ajax方法时要传的參数也就那几个常见的參数:url/data/d ...
- jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...
- 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题
没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...
- jQuery(expression, [context]) , $(即jQuery)的參数问题
jQuery(expression, [context]) 返回值:jQuery 概述 这个函数接收一个包括 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQuery 的 ...
- jquery ajax參数加点号状态200进error
今天开发中遇到一个非常恶心的问题: 用jquery中的ajax提交.发现假设參数中有点号的參数.后台正常返回200状态码的情况下也会走到error:function. 1. 參数data: " ...
- 【Jquery】jQuery获取URL參数的两种方法
jQuery获取URL參数的关键是获取到URL,然后对URL进行过滤处理,取出參数. location.href是取得URL.location.search是取得URL"?"之后的 ...
- jquery ui 分页插件 传入后台的连个參数名
參数名: page .rows page=int(request.form.get('page',1).encode('u8')) rows1=int(request.form.get('rows', ...
- httpUrlConnection的參数具体解释
post方式的的请求过程: // 设置是否向httpUrlConnection输出,由于这个是post请求,參数要放在 // http正文内,因此须要设为true, 默认情况下是false; http ...
随机推荐
- C# 处理年月日提取时间
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- tomcat添加访问的ip限制
在如下位置添加如下代码: 代码: <Valve className="org.apache.catalina.valves.RemoteAddrValve" allow=&q ...
- CAD使用SetxDataDouble写数据(com接口)
主要用到函数说明: MxDrawEntity::SetxDataDouble 写一个Double扩展数据,详细说明如下: 参数 说明 [in] BSTR val 字符串值 szAppName 扩展数据 ...
- 编程规范:allocator
一.作用 标准库allocator类定义在头文件memory中,它帮助我们将内存分配和对象构造分离开来 allocator<T> a //定义一个名为a的allocator对象,它可以为类 ...
- Linux从入门到适应(一):VSCode C++环境配置
作为在Windows环境下习惯使用Visual Studio IDE的人,对于Linux环境下的Vim编辑使用十分难受,虽然网上很多人说vim非常牛逼和强大,但是我更加习惯于使用VS code的界面, ...
- 笔试算法题(24):找出出现次数超过一半的元素 & 二叉树最近公共父节点
出题:数组中有一个数字出现的次数超过了数组长度的一半,请找出这个数字: 分析: 解法1:首先对数组进行排序,时间复杂度为O(NlogN),由于有一个数字出现次数超过了数组的一半,所以如果二分数组的话, ...
- [Python3网络爬虫开发实战] 1.9.2-Scrapyd的安装
Scrapyd是一个用于部署和运行Scrapy项目的工具,有了它,你可以将写好的Scrapy项目上传到云主机并通过API来控制它的运行. 既然是Scrapy项目部署,基本上都使用Linux主机,所以本 ...
- nginx网站标准配置
#nginx开启的进程数worker_processes 4; #4核CPU #定义全局错误日志定义类型,[debug|info|notice|warn|crit]error_log ...
- Oracle 数据库实例启动关闭过程
Oracle数据库实例的启动,严格来说应该是实例的启动,数据库仅仅是在实例启动后进行装载.Oracle数据启动的过程被划分为 几个不同的步骤,在不同的启动过程中,我们可以对其实现不同的操作,系统修复等 ...
- Matlab学习笔记(二)
二.MATLAB基础知识 (二)数值.变量和表达式 命名规则: 变量名对大小写敏感,即区分大小写 变量名必须以字母开头,后面可以采用数字.下划线和字母,但不能使用空格.标点符号和运算符 变量名最长可以 ...