Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

直接调用 jQuery 插件等非标准模块的方法 #286

Closed
lifesinger opened this issue Jul 16, 2012 · 58 comments

Comments

@lifesinger
Copy link
Member

commented Jul 16, 2012

默认情况下,SeaJS 要求所有文件都是标准的 CMD 模块,但现实场景下,有大量 jQuery 插件等非 CMD 模块存在。在 SeaJS 里,通过以下方式,可以直接调用非标准模块。

下面以 jQuery 插件为例。

1. 暴露 jQuery

jQuery 插件都依赖 jQuery 模块,为了加载 jQuery 插件,首先得将 jQuery 模块暴露出来:

// 配置 jquery 并放入预加载项中
seajs.config({
  alias: {
    'jquery': 'https://a.alipayobjects.com/static/arale/jquery/1.7.2/jquery.js'
  },
  preload: ["jquery"]
})

// 将 jQuery 暴露到全局
seajs.modify('jquery', function(require, exports) {
  window.jQuery = window.$ = exports
})

2. 修改 jQuery 插件的接口

我们以 jquery.cookie 插件为例。

// 配置别名
seajs.config({
  alias: {
    'cookie': 'https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js'
  }
})

// 将 jQuery Cookie 插件自动包装成 CMD 接口
seajs.modify('cookie', function(require, exports, module) {
  module.exports = $.cookie
})

3. 调用 Cookie 插件

这样,在其他模块中,就可以直接调用 cookie 插件了:

a.js:

define(function(require, exports) {
  var cookie = require('cookie')

  cookie('the_cookie')
  cookie('the_cookie', 'the_value')

  // ...
})

完整范例:http://seajs.org/test/issues/auto-transport/test.html

小结

利用 preloadmodify,理论上可以自动封装好所有非 CMD 模块。但需要注意:对于依赖项,比如 jQuery,其实是将其降级成了普通文件。如果一个页面内存在多个插件,不同插件依赖的 jQuery 版本不同,则上面的方式会有问题,需要使用者自己去解决。

RequireJS 2.0 的 shim 配置,原理和 SeaJS 的差不多。SeaJS 是直接将底层实现暴露出来,让用户自己去决定如何使用。无论是 RequireJS 的 shim 方式,还是 SeaJS 的 modify 方式,都存在不少隐患。 最好的方式还是建议手动封装成标准的 CMD 模块,这样可以确保加载性能最优,命名和版本上也永不会冲突。

注:该特性从 SeaJS 1.2.1 版本开始支持。

相关讨论

@iahu

This comment has been minimized.

Copy link

commented Mar 28, 2013

你妹的,按文档的方法,引用的文件就变成 [object%20Object].js 了,真是我不会用你的大作 !

@edokeh

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2013

@iahu
你不给代码人家也不能帮你解决啊

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Mar 29, 2013

@iahu 用 seajs 2.0.0 吧,这篇文档已经不适用。2.0 里,直接用 shim 插件加载就好:#579

@iahu

This comment has been minimized.

Copy link

commented Mar 29, 2013

@lifesinger 昨天折腾得太累了,不好意思。后来还是用 RequireJs 解决问题。
另外,我想问问:

  1. AMD 是不是容易卡死UI?
  2. 为什么采用与 SeaJs同样采用 CMD 规范编写的 NodeJs 模块 不能直接调用——我大概观察了下,好像定义格式不太一样,这也是问题啊,既然遵循同样的规范为什么格式又不一样,
  3. 用常规全局变量写法写的脚本经过 shim 配置,在 var ejs = require('ejs') 后会覆盖 ejs 的(全局)定义,但是可以直接 require('ejs'),然后 ejs 会注册到window 名下。
  4. 把一个常规脚本,换成 SeaJs 标准格式 跟 RequireJs 转换有什么不同吗?

另另外,感觉RequireJS 的自动加载插件机制挺不错。

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Mar 29, 2013

@iahu

  1. AMD 是一加载就执行,当一次加载很多文件时,意味着会立刻执行大量脚本,这时可能会导致 UI 卡。CMD 的执行是分散的,因此一般来说不会造成 UI 卡。

  2. SeaJS 与 Node.js 的关系,可参考这篇文档:#275

  3. shim 配置后,require('ejs') 得到的 ejs 就是全局那个 ejs,也可以将挂载在 window 上的 ejs 去掉,比如

    seajs.config({
      plugins: ["shim"],
      alias: {
         src: 'path/to/ejs.js',
         exports: function() { var ejs = window.ejs; window.ejs = undefined; return ejs }
      }
    })
  4. RequireJS 的 shim 插件,本质上和 SeaJS 是一样的。

@iahu

This comment has been minimized.

Copy link

commented Mar 29, 2013

@lifesinger 嗯,明白了,非常感谢!

@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

请问配置 alias{'zz': {src: 'xx/yy/zz.js', exports: 'zz'}} 之后,reqiure(''zz) zz.js 成了 [object%20Object].js 是我使用方法不对吗?

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

没有加载 shim 插件?

config 里激活下 shim 插件:

seajs.config({

  plugins: ["shim"]

})
@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

@lifesinger 激活了 shim 插件

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

看看 Network 面板,是否真的加载了 plugin-shim.js 文件
另:seajs 的版本要是 2.0.0

@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

确认是加载了,seajs 版本是 2.0.0b3

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

更新下,seajs 已经 2.0.0 正式版了,下载地址:

https://github.com/seajs/seajs/archive/2.0.0.zip

@whosesmile

This comment has been minimized.

Copy link

commented Apr 7, 2013

@iahu 这个问题我也碰到了,我还奇怪为什么没人提,我一直也为是我自己的问题,今天出差回来还在自我找原因呢。 shim插件已经加载进来了,但是请求地址就是object-object,明显没有解析出来。

我之前再用2.0b2,后来换成b3,都不好使,刚才看了玉伯的回复我换了2.0正式版本,果然好了,真的太坑了。。。
我觉得seajs的测试不太充分,建议如果是测试版本,不要放在官方网站的正式下载地址上面,专开一个TAB。
还有之前b2,b3版本在IE下面有错误,seajs最后的map会报错,我也一直纳闷为什么没人提,正式版本我待会再看看。

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

beta 版本,shim 这一块的确没充分测试。

正式版已经完全测试过,更新下就好。

@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

正在做替换测试,希望没有问题了,嘿嘿。

@whosesmile

This comment has been minimized.

Copy link

commented Apr 7, 2013

建议,开发测试版本不要放在官方下载地址上面,可以单开一个TAB,并且明确提示风险。不然简单的版本递归加上来,使用者肯定是下最新的啊。

可以学习jQuery的做法,它的下载地址只有正式发布版,测试版,BETA版本你在上面是看不到的。

还有我知道玉伯精力有限,文档维护不是很快,那我觉得在人力有限的情况下,图稳不要图快,口碑会被毁的,就像@iahu 说的换了requirejs,我上个月当时实在没辙,也不想去看源码,真的看了看requirejs的文档打算换来着。

2013-04-07

lovemoon

@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

嗯,object%20Object 更新后是解决了。很感谢。
但我又碰到 define 只给出两个参数的时候的问题。比如:
define('foo', function('require'){
// snip...
})
控制台会出一系列的错误提示。

不确定seajs内部是怎么样处理的。但如果不能接受两个参数,应该可以抛出错误吧?

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

两个参数的问题,从 2.0.0 里取消掉了。这是一个不兼容修改。

2.0.0 里,只支持

define(fn)

define(id, deps, fn)

你上面的代码可以修改成:

define(id, null, fn)

这个在发布日志里有写,可能太多了,大家都没看。

2013/4/7 fusionBIn notifications@github.com

嗯,object%20Object 更新后是没解决了。很感谢。
但我又碰到 define 只给出两个参数的时候的问题。比如:
define('foo', function('require'){
// snip...
})
控制台会出一系列的错误提示。

不确定seajs内部是怎么样处理的。但如果不能接受两个参数,应该可以抛出错误吧?


Reply to this email directly or view it on GitHubhttps://github.com//issues/286#issuecomment-16011145
.

王保平 / 玉伯(射雕)
送人玫瑰手有余香

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

精力的确有限,不好意思。

在这个下载页里,是没有 beta 版的:

http://seajs.org/docs/#downloads

github 那个 tag 页,排序不大合理,2.0.0 排在 2.0.0b1 下面了,我删除掉 b1到b3几个tag

2013/4/7 Frank Wang lifesinger@gmail.com

两个参数的问题,从 2.0.0 里取消掉了。这是一个不兼容修改。

2.0.0 里,只支持

define(fn)

define(id, deps, fn)

你上面的代码可以修改成:

define(id, null, fn)

这个在发布日志里有写,可能太多了,大家都没看。

2013/4/7 fusionBIn notifications@github.com

嗯,object%20Object 更新后是没解决了。很感谢。
但我又碰到 define 只给出两个参数的时候的问题。比如:
define('foo', function('require'){
// snip...
})
控制台会出一系列的错误提示。

不确定seajs内部是怎么样处理的。但如果不能接受两个参数,应该可以抛出错误吧?


Reply to this email directly or view it on GitHubhttps://github.com//issues/286#issuecomment-16011145
.

王保平 / 玉伯(射雕)
送人玫瑰手有余香

王保平 / 玉伯(射雕)
送人玫瑰手有余香

@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

2.0.0 的文档确实没看 =_=!!!

有问必答,已经是非常佩服了!有能力的也应该参与下开发,毕竟大家都还有工作。
谢谢 @lifesinger ;)

@whosesmile

This comment has been minimized.

Copy link

commented Apr 7, 2013

我刚才提到过seajs在IE下面有错误,刚才我看了看,错误还在,是sourcemap那一行出错,我用的是IE10,然后将浏览模式切换到IE7,IE8都不行,IE9没问题,因为本机没有IE6环境,无法测试。

我将这一行删掉就没问题了,或者添加注释:
/*
//@ sourceMappingURL=sea.js.map
*/

我看jQuery是这么做的,它将sourceMapping放在头部的/**/注释里面,然后没有错误。

这个sourcemap功能我还从来没用过,无法测试,不过既然jQuery这么做,那肯定chrome是支持写在注释里的。

@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit
上面有这样一段话:

is now deprecated; “SourceMap” is now expected.
The generated code may include a line at the end of the source, with the following form:
//@ sourceMappingURL=

应该是 @lishuangbao 你提到的格式,它也是个注释

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

我在 IE6-9 下都测试过

IE10 没机器没测。能帮忙在 IE10 下访问:http://seajs.org/tests/runner.html 吗?

2013/4/7 smilelegend notifications@github.com

我刚才提到过seajs在IE下面有错误,刚才我看了看,错误还在,是sourcemap那一行出错,我用的是IE10,然后将浏览模式切换到IE7,IE8都不行,IE9没问题,因为本机没有IE6环境,无法测试。

我将这一行删掉就没问题了,或者添加注释:
/*
//@ sourceMappingURL=sea.js.map
*/

我看jQuery是这么做的,它将sourceMapping放在头部的/**/注释里面,然后没有错误。

这个sourcemap功能我还从来没用过,无法测试,不过既然jQuery这么做,那肯定chrome是支持写在注释里的。


Reply to this email directly or view it on GitHubhttps://github.com//issues/286#issuecomment-16011413
.

王保平 / 玉伯(射雕)
送人玫瑰手有余香

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 7, 2013

理论上这个注释不应该导致 IE10 出错
IE10 究竟干了什么?

2013/4/7 Frank Wang lifesinger@gmail.com

我在 IE6-9 下都测试过

IE10 没机器没测。能帮忙在 IE10 下访问:http://seajs.org/tests/runner.html 吗?

2013/4/7 smilelegend notifications@github.com

我刚才提到过seajs在IE下面有错误,刚才我看了看,错误还在,是sourcemap那一行出错,我用的是IE10,然后将浏览模式切换到IE7,IE8都不行,IE9没问题,因为本机没有IE6环境,无法测试。

我将这一行删掉就没问题了,或者添加注释:
/*
//@ sourceMappingURL=sea.js.map
*/

我看jQuery是这么做的,它将sourceMapping放在头部的/**/注释里面,然后没有错误。

这个sourcemap功能我还从来没用过,无法测试,不过既然jQuery这么做,那肯定chrome是支持写在注释里的。


Reply to this email directly or view it on GitHubhttps://github.com//issues/286#issuecomment-16011413
.

王保平 / 玉伯(射雕)
送人玫瑰手有余香

王保平 / 玉伯(射雕)
送人玫瑰手有余香

@iahu

This comment has been minimized.

Copy link

commented Apr 7, 2013

找了一圈没我也找着 IE10
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-issues
在网上找了找,不知道是不是这个问题?
jQuery 的解决办法:
http://bugs.jquery.com/ticket/13274#comment:6

@whosesmile

This comment has been minimized.

Copy link

commented Apr 7, 2013

我看了你最后发的jquery的Bug解释,我想我知道为什么了,也知道为什么IE9没问题了。。。
因为我在页面启用了html5,所以使用条件表达式引用了一个脚本html5.js,在这个脚本里用到了@cc_on,而这个脚本是在所有脚本和样式表之前就被引入的,所以可能导致这个问题。

@whosesmile

This comment has been minimized.

Copy link

commented Apr 8, 2013

我觉得我的想法应该得到支持,你想既然我要开启map,那么通常来讲不可能是某些应用需要,某些应用不需要,而一定是全部应用都应该开启,那么如果我在每个应用的config上面都要做一个Map配置,为什么不能在seajs里面做一个全局的配置呢?为什么要将一些肯定都要用的配置非要重写一遍再在每个config里面全部写一次呢?

通常一个网站都有一些通用的组件,譬如jquery,mootools,mustache,underscore等等,也会有自己网站定制好的核心库假如叫base.js,这些文件在大多数情况下都是需要preload的,想当然的做法是做一个全局配置,那这个配置按照现在的方案应该放在哪里呢?因为我不能卸载seajs里面了,至少map配置不能,而如果我在用grunt去打包分发,显然是把简单的逻辑弄复杂了,期望能解决这个问题,或给个建议的方案。

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 8, 2013

能否贴出 config 文件?不要激动,我比你更郁闷,因为你有代码,而我没有。一直在猜测你遇到的问题。

彼此猜来猜去太累了,这不是娱乐节目,是严肃的软件开发。

@whosesmile

This comment has been minimized.

Copy link

commented Apr 8, 2013

我以为我说的很明白了呢,。

seajs:

// after source code 
seajs.config({
    charset: 'utf-8',
    debug: false,
    alias: {
        'jquery': 'lib/jquery/jquery.1.9.1.js',
        'base': 'lib/base.js',
        'json': 'lib/json.js',
        'storage': 'lib/storage.js'
    },
    // map: [[/(.*?\.(css|js))$/i, '$1?netposa-'+ (new Date().getTime()) +'.$2']],
    preload: ['jquery', 'base', this.JSON ? '' : 'json', this.localStorage ? '' : 'storage']
});

页面:

<script type="text/javascript" src="/js/seajs/sea.js" data-config="apps/decode/config.js" data-main="apps/decode/main.js"></script>

例如页面中的config.js:

seajs.config({
    alias: {
        'jqueryui': 'lib/jquery/jquery-ui-1.10.1.custom.min.js',
        'jquery.timepicker': 'lib/jquery/jquery-ui-timepicker-addon.js',
        'jqueryui.css': '/css/jqueryui/jquery-ui-1.10.1.custom.min.css'
    }
});

这里的config.js用于添加当前应用用到的自定义组件,我有很多的这样的页面,现在上面的jqueryui和timepicker因为MAP的原因被我改造成CMD了,所以没有用shim插件。

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 8, 2013

仔细查了下,是因为 map 了两次导致的,修改下 map 配置为:

map: [[/^([^?]*\.(css|js))$/i, '$1?netposa-'+ (new Date().getTime()) +'.$2']]

这样应该就没问题了。

@whosesmile

This comment has been minimized.

Copy link

commented Apr 9, 2013

我目前还有3个问题,我写了一个demo测试,如果你有闲暇时间,可以跑一下,问题被我放在demo/config.js里面了。
如果可能,seajs能提供一个类似unfuddle就方便啦,这样沟通成本会低很多。

我不知道附件通过邮件是否能够正常发送,貌似是通过github中转,如果不能,可以给我回复邮件。

@whosesmile

This comment has been minimized.

Copy link

commented Apr 9, 2013

说错,是类似jsfiddle,unfuddle是我用的代码仓库。

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 9, 2013

放线上哦,没有人有时间去解压
怎么放线上,自己想办法

2013/4/9 smilelegend notifications@github.com

我目前还有3个问题,我写了一个demo测试,如果你有闲暇时间,可以跑一下,问题被我放在demo/config.js里面了。
如果可能,seajs能提供一个类似unfuddle就方便啦,这样沟通成本会低很多。

我不知道附件通过邮件是否能够正常发送,貌似是通过github中转,如果不能,可以给我回复邮件。


Reply to this email directly or view it on GitHubhttps://github.com//issues/286#issuecomment-16092789
.

王保平 / 玉伯(射雕)
送人玫瑰手有余香

@whosesmile

This comment has been minimized.

Copy link

commented Apr 9, 2013

这提问的成本太高了吧,我声明我不是新手,专职前端5年,关注seajs也有将近2年了,淘宝的D2我也去过,也见过你本人。我提问不是说我遇到瓶颈非解决不可,总是有可以绕过去的办法,只是我想如果能针对这个框架从实际开发者的角度提出一些问题,并且能够得到改进我也会有一点成就感;当然这些问题也可能是我使用不当,人总会犯错,但是如前文说的,我不是新手,这种概率小得多。

http://demo.smilelegend.com/demo/

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 9, 2013

这和提问成本有什么关系?你遇到了问题我们也很想帮你,如果不能准确定位到问题,我们胡猜一气对你就有好处了?

看了一下你发的链接,还是没有能提供可重现问题的 live demo,建议读一下这篇文章:https://github.com/seajs/seajs/blob/master/CONTRIBUTING.md

@whosesmile

This comment has been minimized.

Copy link

commented Apr 9, 2013

我发了源码了吧?解压缩成本很高吗?我为了提问并写模拟代码从早上开始到现在,我很蛋疼是不是?好了,味道变了已经。

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 9, 2013

你都说了 jsfiddle 是个好工具,放上去一份发个链接很难么?

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 9, 2013

最好的办法是,fork 下 seajs,在 tests 目录下,增加一个测试用例,使得测试用例不通过。国外不少开源项目,只接受这种 bug

用 zip 包的问题是,一是没发送过来,附件里根本没有,二是很多情况下,解压后要跑起来,还依赖 http server 配置,比如访问路径等,这些配置在你看来是不烦琐的,但我每天要处理好几个这种 zip 包的话,修改各种配置、路径就挺折腾人。

简单的问题,jsfiddle,复杂的问题,请通过 fork seajs,添加 test case 来给出。

回到你提的这几个问题:

第一个

// 问题1:
        // ccc.js名字不能与alias重名?
        // 此配置如果我require('ccc') 我发现根本不会发出请求
        // 如果我将alias改成不与文件重名 则正常
        // 貌似也是cache导致的问题 如果我将map开启 则正常 因为会跟一个随机数
        seajs.config({
            plugins: ['shim'],
            alias: {
                'ccc': {
                    src: '/demo/ccc.js',
                    exports: 'ccc'
                }
            }
        });

我只能说不知道为什么,因为我本地有类似测试用例,一切好好的,具体请看:

https://github.com/seajs/seajs/blob/master/tests/specs/extensible/plugin-shim/main.js#L40

第二个问题是问的 why,why 类问题,不是我不想回答,而是要回答,涉及源码,一两句话解释不清,最好要清楚,估计还是得依赖你是否了解 seajs 的机制。这类问题更多取决于自己的钻研。

第三个问题,本质上和第二个问题是一样的。这种用法下,就是会加载两次。加时间戳,推荐用 nocache 插件:

seajs.config({

  plugins: ['nocache']

})

不是不友好,而是太累。

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented Apr 9, 2013

提供 demo,不要把问题搅和在一起,一个问题一个 demo,并且是有问题的 demo
你的 demo 都把有问题的 map 什么都注释掉了,叫人家怎么调试呢?

只能忽略了,抱歉。

@lgmaotang

This comment has been minimized.

Copy link

commented May 7, 2013

我想把以前的项目转移到用SEAJS里去,可是老出错误。错误如下:

ReferenceError: $ is not defined
[在此错误处中断]     
$(document).ready(function () {……
入口:
define(function(require) {

  var T = require('./test');

  new T();
test.js文件
define(function (require, exports, moudles) {
    //var $=require("jquery-1.7.1");
   // require("jquery.nyroModal-1.5.5")($)
    $(document).ready(function () {
        alert($);
    })

config.js文件:
seajs.config({
  // Enable plugins
  plugins: ['shim'],

  // Configure alias
  alias: {
    'jquery-1.9.1': {
      src: 'lib/jquery-1.9.1.min.js',
      exports: 'jquery-1.9.1'
    },
    'jquery-1.7.1': {
      src: 'lib/jquery-1.7.1.min.js',
      exports: 'jquery-1.7.1'
    },
    'jquery.nyroModal-1.5.5': {
      src: 'lib/jquery.nyroModal-1.5.5.min.js',
      exports: 'jquery.nyroModal-1.5.5'
    },
    'jquery':{
     src:'https://a.alipayobjects.com/static/arale/jquery/1.7.2/jquery.js',
     exports:'jquery'
  },
  preload: ["jquery"]
  }
})

谢谢,我是第一次接触你这个,基础功夫一般,看看JS代码如果用时间是看的懂的。

@lifesinger

This comment has been minimized.

Copy link
Member Author

commented May 7, 2013

@lgmaotang 怎么这么多 jquery?保留 arale 那个就好,并且改成:

seajs.config({

  alias: {
     'jquery': 'https://a.alipayobjects.com/static/arale/jquery/1.7.2/jquery.js'
  }

})

你对 shim 插件的理解错了很多,不要用就好。

@lgmaotang

This comment has been minimized.

Copy link

commented May 8, 2013

好的,我看了你最新的2.0版本的里面的单元测试,仔细研究了一下,现在配置成功了。
if (typeof global === 'undefined') {
global = this
}
if (typeof require === 'function') {
var __require = require
}
seajs.config({
alias: {
'jquery-1.7.1': 'lib/jquery-1.7.1.min.js',
'jquery.nyroModal-1.5.5':'lib/plugin/jquery/nyroModal-1.5.5/js/jquery.nyroModal-1.5.5.min.js',
'jqModal.js': 'lib/plugin/jquery/jqmodal/js/jqModal.js',
'jqDnR.js': 'lib/plugin/jquery/jqmodal/js/jqDnR.js',
'nyroModal-1.5.5.css':'lib/plugin/jquery/nyroModal-1.5.5/styles/nyroModal.css',
'jqModal.css':'lib/plugin/jquery/jqmodal/css/jqModal.css',
'jqModal.litejava3.css':'lib/plugin/jquery/jqmodal/css/jqModal.litejava3.css'
}
})
define('jquery.nyroModal-1.5.5', ['jquery-1.7.1'])
define('jqModal.js', ['jquery-1.7.1'])
define('jqDnR.js', ['jquery-1.7.1'])
define('jquery.nyroModal', ['jquery.nyroModal-1.5.5'], function() {
return global.jQuery
})
define('jqModal', ['jqModal.js'], function() {
return global.jQuery
})
define('jqDnR', ['jqDnR.js'], function() {
return global.jQuery
})
define('jquery', ['jquery-1.7.1'], function() {
return global.jQuery
})
以上是config.js
---------------------------------------------------------
以下是我写的测试test.js
define(function(require) {
require('jquery.nyroModal')
require('jqModal')
require('jqDnR')
require('nyroModal-1.5.5.css')
require('jqModal.css')
require('jqModal.litejava3.css')
$(document).ready(function () {
$('.nyroModal').nyroModal({bgColor:"#ECECEC",zIndexStart:103});
$("body").append('

龙港生活经济网百宝箱
注:点击查询结束,进行删除操作!
    ');
    $('#ex3a').jqm({trigger: '.trigger',overlay: 0}).jqDrag('.jqDrag');
    $('input.jqmdX').hover(
    function(){ $(this).addClass('jqmdXFocus'); },
    function(){ $(this).removeClass('jqmdXFocus'); })
    .focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
    .blur(function(){ $(this).removeClass('jqmdXFocus'); });
    //$(".lifeBox").jqDrag('.lifeBoxTitle');
    //$(".heLpBox").jqDrag('.titleBox');
    //$(".coBox").jqDrag('.titleBox');
    $('.lifeCon').hide();
    $("#close").click(function(){$('.lifeCon').slideToggle("slow");});

    })
    $(function(){

    $("#sFod h3").each(function(index){
    var tadMenu = $("#sFod h3");
    var tadMenuUl = $("#sFod").next().find(".searchInput");
    $(this).click(function(){
    tadMenu.removeClass("sFod_selected");
    $(this) .addClass("sFod_selected");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    $("#sFod").next().find(".searchText input").click(function(){
    if($(this).val()=="请输入关键字查询本地交友、求职、二手等信息"){
    $(this).val("")
    }
    });

    $("#sFod").next().find(".searchText input").blur(function(){
    if($(this).val()==""){
    $(this).val("请输入关键字查询本地交友、求职、二手等信息");
    }
    });

    $("#EmTab .emText").click(function(){
    if($(this).val()=="请输入职位或者职位关键词"){$(this).val("")}
    });
    $("#EmTab .emText").blur(function(){
    if($(this).val()==""){
    $(this).val("请输入职位或者职位关键词");
    }
    });

    $("#tadLeftMenu").find("li").each(function(index){
    var tadMenu = $("#tadLeftMenu").find("li");
    var tadMenuUl = $("#tadLeftCon").find("ul");
    $(this).mouseover(function(){
    tadMenu.removeClass("tadSle");
    $(this) .addClass("tadSle");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    $("#tadRightMenu").find("li").each(function(index){
    var tadMenu = $("#tadRightMenu").find("li");
    var tadMenuUl = $("#tadRightCon").find("ul");
    $(this).mouseover(function(){
    tadMenu.removeClass("tadSle");
    $(this) .addClass("tadSle");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    /**/
    $("#tabImageShowTitle").find("li").each(function(index){
    var tadMenu = $("#tabImageShowTitle").find("li");
    var tadMenuUl = $("#tabImageCon").children("div");
    $(this).mouseover(function(){
    tadMenu.removeClass("tis_s");
    $(this) .addClass("tis_s");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });
    $("#tabBoxTitle").find("li").each(function(index){
    var tadMenu = $("#tabBoxTitle").find("li");
    var tadMenuUl = $(".tabBoxInfor").children("div");
    $(this).mouseover(function(){
    tadMenu.removeClass("tb_s");
    $(this) .addClass("tb_s");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    /**/
    $("#htNav").find("li").each(function(index){
    var tadMenu = $("#htNav").find("li");
    var tadMenuUl = $("#htContnet").children("ul");
    $(this).mouseover(function(){
    tadMenu.removeClass("htNav_s");
    $(this) .addClass("htNav_s");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });
    $("#htContnet").find("li").each(function(index){
    var tadMenu = $(this).parent().find("li");
    $(this).mouseover(function(){
    tadMenu.removeClass("ht_s");
    $(this) .addClass("ht_s");
    });
    });

    $("#tPro").find("li").each(function(index){
    var tadMenu = $("#tPro").find("li");
    var tadMenuUl = $(".content").children("ul");
    $(this).mouseover(function(){
    tadMenu.removeClass("tPro_s");
    $(this) .addClass("tPro_s");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    $(".ck li").click(function(){
    var this_nav = $(this).parent().parent();
    var tadMenu = this_nav.find("li");
    var tadMenuUl = this_nav.next().find(".ckBoxLeft");
    var index= this_nav.find("li").index($(this));
    var index = $(this).index(tadMenu);
    tadMenu.removeClass("sel");
    $(this) .addClass("sel");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });

    $("#starTitle").find("li").each(function(index){
    var tadMenu = $("#starTitle").find("li");
    var tadMenuUl = $("#starCon").children("ul");
    $(this).mouseover(function(){
    tadMenu.removeClass("s_s");
    $(this) .addClass("s_s");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    $("#comboTitle").find("li").each(function(index){
    var tadMenu = $("#comboTitle").find("li");
    var tadMenuUl = $("#houseListSale").children("table");
    $(this).mouseover(function(){
    tadMenu.removeClass("sle");
    $(this) .addClass("sle");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    $("#carTitle").find("li").each(function(index){
    var tadMenu = $("#carTitle").find("li");
    var tadMenuUl = $("#carListSale").children("ul");
    $(this).mouseover(function(){
    tadMenu.removeClass("sle");
    $(this) .addClass("sle");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });

    $("#tabInforShowTitle").find("li").each(function(index){
    var tadMenu = $("#tabInforShowTitle").find("li");
    var tadMenuUl = $("#tabInforCon").children("ul");
    $(this).mouseover(function(){
    tadMenu.removeClass("tis_s");
    $(this) .addClass("tis_s");
    tadMenuUl.addClass("hidden");
    tadMenuUl.eq(index).removeClass("hidden");
    });
    });
    $("#EmTab .EmTabUl").find("li").each(function(index){
    var EmTabLi = $("#EmTab .EmTabUl").find("li");
    var emTableLi = $("#EmTab .emTable").find("li");;
    $(this).mouseover(function(){
    EmTabLi.removeClass("em_s");
    $(this) .addClass("em_s");
    emTableLi.addClass("hidden");
    emTableLi.eq(index).removeClass("hidden");
    });
    });

    });
    });
    function baibao(n){
    switch (n) {
    case 0 :
    $(".jqmdTC").html("面积转换");
    break;
    case 1 :
    $(".jqmdTC").html("城市地图");
    break;
    case 2 :
    $(".jqmdTC").html("海量词汇");
    break;
    case 3 :
    $(".jqmdTC").html("每日天气");
    break;
    case 4 :
    $(".jqmdTC").html("火车查询");
    break;
    case 5 :
    $(".jqmdTC").html("航班查询");
    break;
    case 6 :
    $(".jqmdTC").html("手机归属");
    $("#title").html("提交查询");
    $("#title button").click(function(){
    var tel=($("#title input").val());
    $.ajax({
    type: "POST",
    url: "baibao.php",
    data: "i=6&tel="+tel,
    success: function(msg){
    $("#content").append(msg);
    }
    });
    });
    break;
    case 7 :
    $(".jqmdTC").html("身份查询");
    $("#title").html("提交查询");
    break;
    case 8 :
    $(".jqmdTC").html(" 家常菜谱");
    break;
    case 9 :
    $(".jqmdTC").html("邮编查询");
    break;
    case 10 :
    $(".jqmdTC").html("星座查询");
    break;
    }
    }

    现在暂时转了一些代码到seajs框架上,后面正在续费,谢谢你的及时回复。

    ------------------ 原始邮件 ------------------
    发件人: "lifesinger"notifications@github.com;
    发送时间: 2013年5月7日(星期二) 上午10:30
    收件人: "seajs/seajs"seajs@noreply.github.com;
    抄送: "卢卡(Luca)"123480108@qq.com;
    主题: Re: [seajs] 直接调用 jQuery 插件等非标准模块的方法 (#286)

    @lgmaotang 怎么这么多 jquery?保留 arale 那个就好,并且改成:
    seajs.config({ alias: { 'jquery': 'https://a.alipayobjects.com/static/arale/jquery/1.7.2/jquery.js' } })
    你对 shim 插件的理解错了很多,不要用就好。


    Reply to this email directly or view it on GitHub.

    @lifesinger

    This comment has been minimized.

    Copy link
    Member Author

    commented May 8, 2013

    @lgmaotang 能否到这里排一下版? #286 (comment)

    现在代码密密麻麻的,看不清。有问题的话,建议重新提一个 issue 来讨论。

    @lgmaotang

    This comment has been minimized.

    Copy link

    commented May 8, 2013

    好的,我看了你最新的2.0版本的里面的单元测试,仔细研究了一下,现在配置成功了。

    if (typeof global === 'undefined') {
      global = this
    }
    
    if (typeof require === 'function') {
      var __require = require
    }
    seajs.config({
      alias: {
        'jquery-1.7.1': 'lib/jquery-1.7.1.min.js',
        'jquery.nyroModal-1.5.5':'lib/plugin/jquery/nyroModal-1.5.5/js/jquery.nyroModal-1.5.5.min.js',
        'jqModal.js': 'lib/plugin/jquery/jqmodal/js/jqModal.js',
        'jqDnR.js': 'lib/plugin/jquery/jqmodal/js/jqDnR.js',
        'nyroModal-1.5.5.css':'lib/plugin/jquery/nyroModal-1.5.5/styles/nyroModal.css',
        'jqModal.css':'lib/plugin/jquery/jqmodal/css/jqModal.css',
        'jqModal.litejava3.css':'lib/plugin/jquery/jqmodal/css/jqModal.litejava3.css'
        }
    })
    define('jquery.nyroModal-1.5.5', ['jquery-1.7.1'])
    define('jqModal.js', ['jquery-1.7.1'])
    define('jqDnR.js', ['jquery-1.7.1'])
    define('jquery.nyroModal', ['jquery.nyroModal-1.5.5'], function() {
      return global.jQuery
    })
    define('jqModal', ['jqModal.js'], function() {
      return global.jQuery
    })
    define('jqDnR', ['jqDnR.js'], function() {
      return global.jQuery
    })
    
    define('jquery', ['jquery-1.7.1'], function() {
      return global.jQuery
    })

    以上是config.js
    ------------------------------------------
    以下是我写的测试test.js

    define(function(require) {
        require('jquery.nyroModal')
        require('jqModal')
        require('jqDnR')
        require('nyroModal-1.5.5.css')
        require('jqModal.css')
        require('jqModal.litejava3.css')
        $(document).ready(function () {
           $('.nyroModal').nyroModal({bgColor:"#ECECEC",zIndexStart:103});
           $("body").append('<div id="ex3a" class="jqmDialog"><div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">龙港生活经济网百宝箱</div></div></div><div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC"><div class="jqmdMSG"><span style="color:red;">注:点击查询结束,进行删除操作!</span><div id="title"></div><ul id="content"></ul></div></div></div></div><input type="image" src="" class="jqmdX jqmClose" /></div>');
           $('#ex3a').jqm({trigger: '.trigger',overlay: 0}).jqDrag('.jqDrag');
              $('input.jqmdX').hover(
                function(){ $(this).addClass('jqmdXFocus'); },
                function(){ $(this).removeClass('jqmdXFocus'); })
              .focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
              .blur(function(){ $(this).removeClass('jqmdXFocus'); });
        //$(".lifeBox").jqDrag('.lifeBoxTitle');
        //$(".heLpBox").jqDrag('.titleBox');
        //$(".coBox").jqDrag('.titleBox');
        $('.lifeCon').hide();
        $("#close").click(function(){$('.lifeCon').slideToggle("slow");}); 
    
      })
    $(function(){
    
    
            $("#sFod h3").each(function(index){
                var tadMenu = $("#sFod h3");
                var tadMenuUl = $("#sFod").next().find(".searchInput");
                $(this).click(function(){
                    tadMenu.removeClass("sFod_selected");                  
                    $(this) .addClass("sFod_selected");
                    tadMenuUl.addClass("hidden");   
                    tadMenuUl.eq(index).removeClass("hidden");
                });                                    
            });
    
    
    
            $("#sFod").next().find(".searchText input").click(function(){
                if($(this).val()=="请输入关键字查询本地交友、求职、二手等信息"){
                    $(this).val("")
                }                    
            });
    
            $("#sFod").next().find(".searchText input").blur(function(){
                if($(this).val()==""){
                    $(this).val("请输入关键字查询本地交友、求职、二手等信息");
                }                     
            });
    
            $("#EmTab .emText").click(function(){
                if($(this).val()=="请输入职位或者职位关键词"){$(this).val("")}                   
            });
            $("#EmTab .emText").blur(function(){
                if($(this).val()==""){
                    $(this).val("请输入职位或者职位关键词");
                }                     
            });
    
    
    
    
        $("#tadLeftMenu").find("li").each(function(index){
            var tadMenu = $("#tadLeftMenu").find("li");
            var tadMenuUl = $("#tadLeftCon").find("ul");
            $(this).mouseover(function(){
                tadMenu.removeClass("tadSle");                 
                $(this) .addClass("tadSle");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");
            });                                    
        });
    
        $("#tadRightMenu").find("li").each(function(index){
            var tadMenu = $("#tadRightMenu").find("li");
            var tadMenuUl = $("#tadRightCon").find("ul");
            $(this).mouseover(function(){
                tadMenu.removeClass("tadSle");                 
                $(this) .addClass("tadSle");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");
            });                                    
        });
    
        /**/
        $("#tabImageShowTitle").find("li").each(function(index){
            var tadMenu = $("#tabImageShowTitle").find("li");
            var tadMenuUl = $("#tabImageCon").children("div");
            $(this).mouseover(function(){
                tadMenu.removeClass("tis_s");                  
                $(this) .addClass("tis_s");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");
            });              
        });
    
        $("#tabBoxTitle").find("li").each(function(index){
            var tadMenu = $("#tabBoxTitle").find("li");
            var tadMenuUl = $(".tabBoxInfor").children("div");
            $(this).mouseover(function(){
                tadMenu.removeClass("tb_s");                   
                $(this) .addClass("tb_s");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");
            });              
        });
    
    
        /**/
        $("#htNav").find("li").each(function(index){
            var tadMenu = $("#htNav").find("li");
            var tadMenuUl = $("#htContnet").children("ul");
            $(this).mouseover(function(){
                tadMenu.removeClass("htNav_s");                
                $(this) .addClass("htNav_s");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");
            });              
        }); 
    
        $("#htContnet").find("li").each(function(index){
            var tadMenu = $(this).parent().find("li");                           
            $(this).mouseover(function(){
                tadMenu.removeClass("ht_s");                   
                $(this) .addClass("ht_s");
            });
        });
    
        $("#tPro").find("li").each(function(index){
            var tadMenu = $("#tPro").find("li");
            var tadMenuUl = $(".content").children("ul");
            $(this).mouseover(function(){
                tadMenu.removeClass("tPro_s");                 
                $(this) .addClass("tPro_s");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");
            });              
        });
    
    
    
    
    
        $(".ck li").click(function(){
            var this_nav =  $(this).parent().parent();
            var tadMenu = this_nav.find("li");
            var tadMenuUl = this_nav.next().find(".ckBoxLeft");
            var index= this_nav.find("li").index($(this));
            var index = $(this).index(tadMenu);
            tadMenu.removeClass("sel");                
            $(this) .addClass("sel");
            tadMenuUl.addClass("hidden");   
            tadMenuUl.eq(index).removeClass("hidden");           
        });
    
        $("#starTitle").find("li").each(function(index){
            var tadMenu = $("#starTitle").find("li");
            var tadMenuUl = $("#starCon").children("ul");
            $(this).mouseover(function(){
                tadMenu.removeClass("s_s");                
                $(this) .addClass("s_s");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");  
            });          
        }); 
    
    
            $("#comboTitle").find("li").each(function(index){
            var tadMenu = $("#comboTitle").find("li");
            var tadMenuUl = $("#houseListSale").children("table");
            $(this).mouseover(function(){
                tadMenu.removeClass("sle");                
                $(this) .addClass("sle");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");  
            });          
        });
    
        $("#carTitle").find("li").each(function(index){
            var tadMenu = $("#carTitle").find("li");
            var tadMenuUl = $("#carListSale").children("ul");
            $(this).mouseover(function(){
                tadMenu.removeClass("sle");                
                $(this) .addClass("sle");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");  
            });          
        });
    
        $("#tabInforShowTitle").find("li").each(function(index){
            var tadMenu = $("#tabInforShowTitle").find("li");
            var tadMenuUl = $("#tabInforCon").children("ul");
            $(this).mouseover(function(){
                tadMenu.removeClass("tis_s");                  
                $(this) .addClass("tis_s");
                tadMenuUl.addClass("hidden");   
                tadMenuUl.eq(index).removeClass("hidden");
            });              
        });
    
        $("#EmTab .EmTabUl").find("li").each(function(index){
            var EmTabLi = $("#EmTab .EmTabUl").find("li");
            var emTableLi = $("#EmTab .emTable").find("li");;
            $(this).mouseover(function(){
                EmTabLi.removeClass("em_s");                   
                $(this) .addClass("em_s");
                emTableLi.addClass("hidden");   
                emTableLi.eq(index).removeClass("hidden");
            });
        });
    
    
    
    });
    });
    function baibao(n){
      switch (n) {
       case 0 :
           $(".jqmdTC").html("面积转换");
           break;
       case 1 :
           $(".jqmdTC").html("城市地图");
           break;
       case 2 :
           $(".jqmdTC").html("海量词汇");
           break;
       case 3 :
           $(".jqmdTC").html("每日天气");
           break;
       case 4 :
           $(".jqmdTC").html("火车查询");
           break;
       case 5 :
           $(".jqmdTC").html("航班查询");
           break;
       case 6 :
           $(".jqmdTC").html("手机归属");
           $("#title").html("<input value='请输入有效手机号码' /><button>提交查询</button>");
           $("#title button").click(function(){
            var tel=($("#title input").val());
            $.ajax({
                       type: "POST",
                       url: "baibao.php",
                       data: "i=6&tel="+tel,
                       success: function(msg){
                         $("#content").append(msg);
                       }
                    });
            });
           break;
       case 7 :
           $(".jqmdTC").html("身份查询");
           $("#title").html("<input value=请输入有效身份证号/><button>提交查询</button>");
           break;
       case 8 :
           $(".jqmdTC").html(" 家常菜谱");
           break;
       case 9 :
           $(".jqmdTC").html("邮编查询");
           break;
       case 10 :
           $(".jqmdTC").html("星座查询");
           break;
        }
        } 

    我的意思是说,2.0版本与前以的版本调用不一样对的吧。
    现在配置成功了,暂时可能把我的部分代码转到seajs框架下运行了。以后看看有没有再遇到问题,如果遇到问题会反应上去的。
    再次谢谢。

    @lgmaotang

    This comment has been minimized.

    Copy link

    commented May 8, 2013

    乖乖,会自动过滤掉html代码片段的。

    @lifesinger

    This comment has been minimized.

    Copy link
    Member Author

    commented May 8, 2013

    我帮你排了一下版,这是 Markdown 语法,可以参考 http://github.github.com/github-flavored-markdown/

    没有问题就好。

    @wood8

    This comment has been minimized.

    Copy link

    commented Jul 14, 2013

    modify 现在废除了吗?

    @lifesinger

    This comment has been minimized.

    Copy link
    Member Author

    commented Jul 14, 2013

    废除了。

    On Sun, Jul 14, 2013 at 10:16 PM, Matthew Lee notifications@github.comwrote:

    modify 现在废除了吗?


    Reply to this email directly or view it on GitHubhttps://github.com//issues/286#issuecomment-20936991
    .

    王保平 / 玉伯(射雕)
    送人玫瑰手有余香

    @Funnyhao

    This comment has been minimized.

    Copy link

    commented Aug 27, 2013

    下午试用了一下,遇到一个问题,希望能得到帮助。
    我将example中的代码在自己的机子上测试一下,发现config里面,jquery更改路径后,init.js中就拿不到$对象了。

    <script src="../js/examples-master/sea-modules/seajs/seajs/2.1.1/sea.js"></script> <script> seajs.config({ alias:{ "jquery":"../seajs/jquery.js" //执行失败 // "jquery":"../examples-master/sea-modules/jquery/jquery/1.10.1/jquery.js" //执行成功 } }); seajs.use('../js/seajs/init',function(){alert(2);}); </script>

    //init.js
    define("../js/seajs/init",['jquery'],function(require,exports,module){
    var $ = require('jquery');
    $(function(){alert(1)});
    });

    @afc163

    This comment has been minimized.

    Copy link
    Member

    commented Aug 27, 2013

    对,id 和路径要匹配。spmjs/spm#694

    @Funnyhao

    This comment has been minimized.

    Copy link

    commented Aug 27, 2013

    不是很懂,能讲详细一点吗?

    @afc163

    This comment has been minimized.

    Copy link
    Member

    commented Aug 27, 2013

    @Funnyhao

    This comment has been minimized.

    Copy link

    commented Aug 28, 2013

    明白,十分感谢~

    @yyman001

    This comment has been minimized.

    Copy link

    commented Dec 10, 2014

    • -也不行啊,复制你的代码...直接报错 Uncaught TypeError: undefined is not a function ,
      应该是没有找到 seajs.modify()方法
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    9 participants
    You can’t perform that action at this time.