zoukankan      html  css  js  c++  java
  • 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有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和其插件的加载,不会有 全局变量污染问题。

  • 相关阅读:
    利用Response.Buffer做类似异步效果
    web集群时session同步的3种方法
    LVS之DR跨网段实战及高可用性
    LVS之DR模式实战及高可用性
    LVS-DR实现web调度模式
    LVS之-LAMP搭建wordpress
    LVS-NAT搭建HTTP及HTTPS
    实现NFS共享wordpress
    LAMP一键安装
    在centos6上实现编译安装lamp和wordpress,并编译xcache
  • 原文地址:https://www.cnblogs.com/bzggood/p/5844986.html
Copyright © 2011-2022 走看看