使用带有RequireJS的私有jquery - 优化后发出问题

时间:2013-07-12 13:05:13

标签: javascript jquery optimization requirejs

我正在使用requireJS和一个CDN版本的jQuery(现在是推荐的方法)组建一个框架,并在优化代码时遇到一些问题。输出是命名空间,我指定每个模块使用文档中概述的jquery的私有版本:

require.config({
    // Add this map config in addition to any baseUrl or
    // paths config you may already have in the project.
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    }
});

// and the 'jquery-private' module, in the
// jquery-private.js file:
define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

我在优化后看到的问题是“jq”在“jquery-private.js”文件中未定义。

有什么想法吗?我试过设置jq = $但这似乎破坏了全局。

感谢。

2 个答案:

答案 0 :(得分:5)

以下是我通过jQuery CDN & optimization sample与您在原始问题中粘贴的RequireJS jQuery Instructions page部分进行关联的Mapping Modules to use noConflict链接所做的工作。

1 - 分叉sample

2 - 使用此内容创建文件www/js/lib/jquery-private.js

define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

3 - 修改www/js/app.js以粘贴map部分,以便require.config现在看起来像这样:

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
    },
    map: {
      '*': { 'jquery': 'jquery-private' },
      'jquery-private': { 'jquery': 'jquery' }
    }    
});

4 - 修改www/js/app/main.js以使用jqlocal而不是$(只是为了向自己证明它不是全局jQuery:

define(["jquery", "jquery.alpha", "jquery.beta"], function(jqlocal) {
    jqlocal(function() {
        jqlocal('body').alpha().beta();
    });
});

5 - 更改为tools文件夹并运行:

node r.js -o build.js

6 - 更改为已创建的www-build文件夹并运行servedir(对于哪个Web服务器并不重要,但这是我用于开发的内容)

7 - 浏览本地地址&应用程序的端口号(在我的情况下为http://localhost:8000/app.html)并看到:

  

Alpha就是Go!

     

Beta是Go!

您可以看到最终结果here

答案 1 :(得分:0)

为了实现这一点,我改变了我使用Require的方式(可能我应该如何一直这样做)。这些信息可能对其他人有用,所以我想我会把它放在那里。

以前我在定义的模块中指定了任何依赖项:

define( [ "dep1", "dep2", "jquery" ], function( var1, var2, jq ) {

这最初工作正常,但在优化时失败了。我将依赖项移动到包含此模块的require函数调用,然后它开始在优化前后均正常工作,私有使用jquery:

require( [ 'jquery', 'dep1', 'dep2' ], function( jq, var1, var2 ) {
    formValidator.formValidationInit( jq( el ) );
});

我不会想到这会有所作为,但似乎也是如此。

值得注意的是,我不得不更改jquery-private文件,因为它仍然引发了一个关于“jq”未被定义的问题。我现在将jq设置为等于全局$并返回它以便可以使用它:

define(['jquery'], function () {
    var jq = $;
    return jq.noConflict( true );
});