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

如何改造现有文件为 CMD 模块 #971

Closed
afc163 opened this Issue Sep 29, 2013 · 75 comments

Comments

Projects
None yet
@afc163
Member

afc163 commented Sep 29, 2013

如何改造现有文件为 CMD 模块

经过一段考察,我们终于要在项目中引入模块机制和 Sea.js 了,那么如何将现有的文件改造成 CMD 模块就成了重要的问题。下面针对一些典型场景来说明包装的方式。

首先还是请大家详细了解下 CMD 模块定义规范,只要洞悉事物的定义和本质,一切问题可迎刃而解。

改造主流模块

这里指的是 jQuery、Moment、Backbone、underscore 等业界主流模块,这些模块一般都有对 AMD 和 CommonJS 的支持代码,例如 jQuery 源文件的最后几行:

if ( typeof module === "object" && module && typeof module.exports === "object" ) {
    module.exports = jQuery;
} else {
    window.jQuery = window.$ = jQuery;

    if ( typeof define === "function" && define.amd ) {
        define( "jquery", [], function () { return jQuery; } );
    }
}

还有 Backbone 里:

var Backbone;
if (typeof exports !== 'undefined') {
  Backbone = exports;
} else {
  Backbone = root.Backbone = {};
}

对于有这些兼容代码的,只需要去掉 define.amd 的支持,或是直接包装上 define 就可以了。

define(function(require, exports, module) {
  // code here ...
});

如果没有模块化的兼容代码,有时候需要手动引入依赖,以及暴露对应的接口。

define(function(require, exports, module) {
  var $ = require('$');
  // code here ...
  module.exports = Placeholders;
});

可以参考 cmdjs/gallery 里的 Gruntfile 对这些主流模块的代码替换方式。

现有的 JS 文件

对于一些现有的普通 JS 文件,相对简单的多,参考 CMD 的书写规范,把那些暴露到全局命名空间的接口用 CMD 的方式进行改造就可以了。

比如现有文件 util.js

window.util = window.util || {};
util.addClass = function() {
  window.css();
};
util.queryString = function() {};

改为:

define(function(require, exports, module) {
  // 引入依赖
  var css = require('css');

  util.addClass = function() {
    css();
  };
  util.queryString = function() {};

  // 暴露对应接口
  module.exports = util;
});

这里不啰嗦,就是基本的 CMD 书写规范。实际的改造过程中,情况可以比上面的例子要复杂一些,具体情况具体解决就行。

改造 jQuery 插件

这也是一个经常遇到的问题,我们推荐以下的包装方式:

// jquery-plugin-abc
define(function(require, exports, module) {
  var $ = require('$');
  // 插件的代码
  $.fn.abc = function() {};
});

这样的改造方式实际上是强化了原有的 $ 对象(而不是重新包装出一个新的 $),在实际调用时,可以用下面的方式:

seajs.use(['$', 'jquery-plugin-abc'], function($) {
  // $ 有了 jquery-plugin-abc 所提供的插件功能
  $.abc();
});

更多 jQuery 插件的包装,可以参考 cmdjs/jquery 里的做法。

工具

除了手动的方式修改代码外,我们推荐使用 Grunt 来进行统一的改造,官方也通过 Grunt 改造了很多主流模块和 jQuery 插件,具体的操作手册见 引入 CMD 模块指南 。你可以在 cmdjs/gallerycmdjs/jquery 中找到具体的 Gruntfile ,从而借鉴到您的项目中去。所有打包好的模块可以在 spmjs.org 中找到。

小结

上面提供的是原有代码包装为 CMD 书写规范 的方法,在具体上线前,可能还需要打包为具名模块(包含 ID 的模块)。关于构建方面的进一步知识可以参考 构建工具

这里提到的包装方式都比较典型和简单,具体的实践可能千差万别。您在项目中有什么探索、实践和问题,欢迎来这里分享和提问。

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Sep 29, 2013

Member

有任何问题,欢迎留言交流。
注意:已解决的问题,会在整理后删除掉。

Member

afc163 commented Sep 29, 2013

有任何问题,欢迎留言交流。
注意:已解决的问题,会在整理后删除掉。

@lifesinger

This comment has been minimized.

Show comment
Hide comment
@lifesinger

lifesinger Sep 30, 2013

Member

感谢 @afc163 整理,期待社区里更多人将经验总结分享出来。

Member

lifesinger commented Sep 30, 2013

感谢 @afc163 整理,期待社区里更多人将经验总结分享出来。

@lifesinger lifesinger closed this Sep 30, 2013

@chenming142

This comment has been minimized.

Show comment
Hide comment
@chenming142

chenming142 Oct 11, 2013

请问对于jquery-mobile.js这种,源码文件既支持AMD规范,然后它又依赖jquery属于jquery插件的,该如何CMD化呢?

chenming142 commented Oct 11, 2013

请问对于jquery-mobile.js这种,源码文件既支持AMD规范,然后它又依赖jquery属于jquery插件的,该如何CMD化呢?

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Oct 11, 2013

Member

可直接按照文中的包装 jQuery 插件的方式,无视支持 AMD 规范的代码即可。

Member

afc163 commented Oct 11, 2013

可直接按照文中的包装 jQuery 插件的方式,无视支持 AMD 规范的代码即可。

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Nov 7, 2013

Member

按照此文封装了一个简单的小工具:https://github.com/afc163/cmdize/

Member

afc163 commented Nov 7, 2013

按照此文封装了一个简单的小工具:https://github.com/afc163/cmdize/

@hkongm

This comment has been minimized.

Show comment
Hide comment
@hkongm

hkongm commented Nov 12, 2013

cool!

@alvin2ye

This comment has been minimized.

Show comment
Hide comment
@alvin2ye

alvin2ye Nov 12, 2013

@afc163 这个工具好

alvin2ye commented Nov 12, 2013

@afc163 这个工具好

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Dec 12, 2013

// jquery-plugin-abc
define(function(require, exports, module) {
  var $ = require('$');
  // 插件的代码
  $.fn.abc = function() {};
});

在 function(){} 里面不用写东西吗?

kmvan commented Dec 12, 2013

// jquery-plugin-abc
define(function(require, exports, module) {
  var $ = require('$');
  // 插件的代码
  $.fn.abc = function() {};
});

在 function(){} 里面不用写东西吗?

@lizzie

This comment has been minimized.

Show comment
Hide comment
@lizzie

lizzie Dec 12, 2013

Member

@kmvan 不要同个问题四处贴啊.

Member

lizzie commented Dec 12, 2013

@kmvan 不要同个问题四处贴啊.

@hotoo

This comment has been minimized.

Show comment
Hide comment
@hotoo

hotoo Dec 12, 2013

Member

不一样的 Issues

Issues 用来写文档,
Issues 用来当论坛,
Issues 用来写博客,
就会是这样的后果。

cc @lifesinger

Member

hotoo commented Dec 12, 2013

不一样的 Issues

Issues 用来写文档,
Issues 用来当论坛,
Issues 用来写博客,
就会是这样的后果。

cc @lifesinger

@lifesinger

This comment has been minimized.

Show comment
Hide comment
@lifesinger

lifesinger Dec 12, 2013

Member

@hotoo 至少带来了活跃度哦,君不见很多国内其他开源类库,死气沉沉更糟糕……

Member

lifesinger commented Dec 12, 2013

@hotoo 至少带来了活跃度哦,君不见很多国内其他开源类库,死气沉沉更糟糕……

@lizzie

This comment has been minimized.

Show comment
Hide comment
@lizzie

lizzie Dec 12, 2013

Member

@hotoo 👎 你干嘛又吐槽...

Member

lizzie commented Dec 12, 2013

@hotoo 👎 你干嘛又吐槽...

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Dec 12, 2013

@lizzie 抱歉。不过也不是同一个问题,关联而已嘛。
我感觉还是文档有点模糊,如果能增加一些例子就更好了

kmvan commented Dec 12, 2013

@lizzie 抱歉。不过也不是同一个问题,关联而已嘛。
我感觉还是文档有点模糊,如果能增加一些例子就更好了

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Dec 12, 2013

Member

@hotoo 的 issue 吐槽也成月经贴了。。。

On Dec 12, 2013, at 2:31 PM, 闲耘™ notifications@github.com wrote:

不一样的 Issues

Issues 用来写文档,
Issues 用来当论坛,
Issues 用来写博客,
就会是这样的后果。

cc @lifesinger


Reply to this email directly or view it on GitHub.

Member

afc163 commented Dec 12, 2013

@hotoo 的 issue 吐槽也成月经贴了。。。

On Dec 12, 2013, at 2:31 PM, 闲耘™ notifications@github.com wrote:

不一样的 Issues

Issues 用来写文档,
Issues 用来当论坛,
Issues 用来写博客,
就会是这样的后果。

cc @lifesinger


Reply to this email directly or view it on GitHub.

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Dec 12, 2013

Member

这只是一个省略的例子。。。

On Dec 12, 2013, at 12:35 PM, kmvan notifications@github.com wrote:

// jquery-plugin-abc
define(function(require, exports, module) {
var $ = require('$');
// 插件的代码
$.fn.abc = function() {};
});
在 function(){} 里面不用写东西吗?


Reply to this email directly or view it on GitHub.

Member

afc163 commented Dec 12, 2013

这只是一个省略的例子。。。

On Dec 12, 2013, at 12:35 PM, kmvan notifications@github.com wrote:

// jquery-plugin-abc
define(function(require, exports, module) {
var $ = require('$');
// 插件的代码
$.fn.abc = function() {};
});
在 function(){} 里面不用写东西吗?


Reply to this email directly or view it on GitHub.

@lizzie

This comment has been minimized.

Show comment
Hide comment
@lizzie

lizzie Dec 12, 2013

Member

@kmvan
你问的什么问题啊

在 function(){} 里面不用写东西吗?

里面用不用写东西, 不是你自己代码里的逻辑吗?!

Member

lizzie commented Dec 12, 2013

@kmvan
你问的什么问题啊

在 function(){} 里面不用写东西吗?

里面用不用写东西, 不是你自己代码里的逻辑吗?!

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Dec 12, 2013

@lizzie 那,那例如 validation 这个jquery插件是如何改成cmd模块呢?我用seajs 1.3版的方法不行。

kmvan commented Dec 12, 2013

@lizzie 那,那例如 validation 这个jquery插件是如何改成cmd模块呢?我用seajs 1.3版的方法不行。

@jiyinyiyong

This comment has been minimized.

Show comment
Hide comment
@jiyinyiyong

jiyinyiyong Dec 12, 2013

能否考虑一下建立 SF 的子站? http://segmentfault.com/sites
我认为问答网站以及 SF 的博客系统的设计对解决目前一些问题有好处

jiyinyiyong commented Dec 12, 2013

能否考虑一下建立 SF 的子站? http://segmentfault.com/sites
我认为问答网站以及 SF 的博客系统的设计对解决目前一些问题有好处

@jinguoxing

This comment has been minimized.

Show comment
Hide comment
@jinguoxing

jinguoxing Dec 20, 2013

jQuery Tools 如何变成CMD规范?

jinguoxing commented Dec 20, 2013

jQuery Tools 如何变成CMD规范?

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Dec 20, 2013

Member

jQuery Tools 是啥

Member

afc163 commented Dec 20, 2013

jQuery Tools 是啥

@jinguoxing

This comment has been minimized.

Show comment
Hide comment
@jinguoxing

jinguoxing Dec 21, 2013

http://jquerytools.org jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information and visual appeal. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner.

requirejs 里面通过设置 shim 可以正常使用。

seajs 里面没有啥头绪,不知道怎么使用。

jinguoxing commented Dec 21, 2013

http://jquerytools.org jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information and visual appeal. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner.

requirejs 里面通过设置 shim 可以正常使用。

seajs 里面没有啥头绪,不知道怎么使用。

@pengpengdcr

This comment has been minimized.

Show comment
Hide comment
@pengpengdcr

pengpengdcr Jan 17, 2014

请问现在seajs模块的存放路径有规范吗?比如像maven那样:seajs-modules(seajs的base)/groupId(公司或组织名称)/artifactId(项目名称)/version(版本)/jsfile.js(js文件名)。如果大家都遵循这样的模块存放路径的话,有人想使用别人写的seajs模块时,就不需要每次都自己手工改模块文件中的模块id,以适应自己的模块文件存放结构了。

pengpengdcr commented Jan 17, 2014

请问现在seajs模块的存放路径有规范吗?比如像maven那样:seajs-modules(seajs的base)/groupId(公司或组织名称)/artifactId(项目名称)/version(版本)/jsfile.js(js文件名)。如果大家都遵循这样的模块存放路径的话,有人想使用别人写的seajs模块时,就不需要每次都自己手工改模块文件中的模块id,以适应自己的模块文件存放结构了。

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Jan 17, 2014

Member

seajs 本身没有 id 的规范。

官方推荐的 spmjs 社区里的模块里有一个完整的规范,类似楼主的。

http://docs.spmjs.org/doc/transport#id-%E8%A7%84%E8%8C%83

Arale 目前就是按这个规范来设定 id 的。http://aralejs.org/docs/getting-started.html#%E4%BD%BF%E7%94%A8-seajs

Member

afc163 commented Jan 17, 2014

seajs 本身没有 id 的规范。

官方推荐的 spmjs 社区里的模块里有一个完整的规范,类似楼主的。

http://docs.spmjs.org/doc/transport#id-%E8%A7%84%E8%8C%83

Arale 目前就是按这个规范来设定 id 的。http://aralejs.org/docs/getting-started.html#%E4%BD%BF%E7%94%A8-seajs

niphor added a commit to niphor/seajs that referenced this issue Feb 20, 2014

@wangwen1220

This comment has been minimized.

Show comment
Hide comment
@wangwen1220

wangwen1220 Mar 19, 2014

"cmd/gallery" => "cmdjs/gallery"

wangwen1220 commented Mar 19, 2014

"cmd/gallery" => "cmdjs/gallery"

@silenceExia

This comment has been minimized.

Show comment
Hide comment
@silenceExia

silenceExia Apr 8, 2014

对于通过cdn引入的jquery之类的常用模块该怎么办呢。。。。

silenceExia commented Apr 8, 2014

对于通过cdn引入的jquery之类的常用模块该怎么办呢。。。。

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Apr 8, 2014

那就没戏,找块块化的cdn吧

-------- Original Message --------
From:silenceExia notifications@github.com
Time:Tue 4/8 PM 05:03
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

对于通过cdn引入的jquery之类的常用模块该怎么办呢。。。。


Reply to this email directly or view it on GitHub:
#971 (comment)

kmvan commented Apr 8, 2014

那就没戏,找块块化的cdn吧

-------- Original Message --------
From:silenceExia notifications@github.com
Time:Tue 4/8 PM 05:03
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

对于通过cdn引入的jquery之类的常用模块该怎么办呢。。。。


Reply to this email directly or view it on GitHub:
#971 (comment)

@silenceExia

This comment has been minimized.

Show comment
Hide comment
@silenceExia

silenceExia Apr 8, 2014

@kmvan 这。。。能推荐个不。。。

silenceExia commented Apr 8, 2014

@kmvan 这。。。能推荐个不。。。

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Apr 8, 2014

我很低端的,没用cdn,是自行改的模块化。

-------- Original Message --------
From:silenceExia notifications@github.com
Time:Tue 4/8 PM 05:13
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

@kmvan 这。。。能推荐个不。。。


Reply to this email directly or view it on GitHub:
#971 (comment)

kmvan commented Apr 8, 2014

我很低端的,没用cdn,是自行改的模块化。

-------- Original Message --------
From:silenceExia notifications@github.com
Time:Tue 4/8 PM 05:13
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

@kmvan 这。。。能推荐个不。。。


Reply to this email directly or view it on GitHub:
#971 (comment)

@emilley

This comment has been minimized.

Show comment
Hide comment
@emilley

emilley Apr 11, 2014

jquery改写成CMD的写法之后,理论是闭包,在全局是访问不到这个库的任何信息,但是在官方给出的例子,还有我自己改写的;jquery都是个全局变量;如果这样子的话就没有必要把jquery改成cmd规范了?
image

emilley commented Apr 11, 2014

jquery改写成CMD的写法之后,理论是闭包,在全局是访问不到这个库的任何信息,但是在官方给出的例子,还有我自己改写的;jquery都是个全局变量;如果这样子的话就没有必要把jquery改成cmd规范了?
image

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Apr 11, 2014

Member

理想的情况下 $ 和 jQuery 不应该是全局变量,建议 cmd 化之后从 window 上删除。

当然如果网站环境比较纯粹,全局变量也不是什么问题。

Member

afc163 commented Apr 11, 2014

理想的情况下 $ 和 jQuery 不应该是全局变量,建议 cmd 化之后从 window 上删除。

当然如果网站环境比较纯粹,全局变量也不是什么问题。

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Apr 11, 2014

不用全局,预加载一下就好了

-------- Original Message --------
From:偏右 notifications@github.com
Time:Fri 4/11 PM 07:12
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

理想的情况下 $ 和 jQuery 不应该是全局变量,建议 cmd 化之后从 window 上删除。

当然如果网站环境比较纯粹,全局变量也不是什么问题。


Reply to this email directly or view it on GitHub:
#971 (comment)

kmvan commented Apr 11, 2014

不用全局,预加载一下就好了

-------- Original Message --------
From:偏右 notifications@github.com
Time:Fri 4/11 PM 07:12
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

理想的情况下 $ 和 jQuery 不应该是全局变量,建议 cmd 化之后从 window 上删除。

当然如果网站环境比较纯粹,全局变量也不是什么问题。


Reply to this email directly or view it on GitHub:
#971 (comment)

@emilley

This comment has been minimized.

Show comment
Hide comment
@emilley

emilley Apr 14, 2014

改造jquery插件 ,中有一点不太明白
define(function(require, exports, module) {
var $ = require('$');
// 插件的代码
$.fn.abc = function() {};
});
为什么这么写在use的时候可以调用到这个插件的接口呢,这个又没有对外提供接口?如果利用的是作用域的范围,为什么在改造插件去掉 var $ = require('$');这句又会报错呢?

emilley commented Apr 14, 2014

改造jquery插件 ,中有一点不太明白
define(function(require, exports, module) {
var $ = require('$');
// 插件的代码
$.fn.abc = function() {};
});
为什么这么写在use的时候可以调用到这个插件的接口呢,这个又没有对外提供接口?如果利用的是作用域的范围,为什么在改造插件去掉 var $ = require('$');这句又会报错呢?

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Apr 14, 2014

不require肯定出錯啊

-------- Original Message --------
From:emilley notifications@github.com
Time:Mon 4/14 PM 03:32
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

改造jquery插件 ,中有一点不太明白
define(function(require, exports, module) {
var $ = require('$');
// 插件的代码
$.fn.abc = function() {};
});
为什么这么写在use的时候可以调用到这个插件的接口呢,这个又没有对外提供接口?如果利用的是作用域的范围,为什么在改造插件去掉 var $ = require('$');这句又会报错呢?


Reply to this email directly or view it on GitHub:
#971 (comment)

kmvan commented Apr 14, 2014

不require肯定出錯啊

-------- Original Message --------
From:emilley notifications@github.com
Time:Mon 4/14 PM 03:32
To:seajs/seajs seajs@noreply.github.com
Cc:kmvan kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

改造jquery插件 ,中有一点不太明白
define(function(require, exports, module) {
var $ = require('$');
// 插件的代码
$.fn.abc = function() {};
});
为什么这么写在use的时候可以调用到这个插件的接口呢,这个又没有对外提供接口?如果利用的是作用域的范围,为什么在改造插件去掉 var $ = require('$');这句又会报错呢?


Reply to this email directly or view it on GitHub:
#971 (comment)

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jul 30, 2014

@afc163 恩 但这种应该没事吧,就这样用吧。谢谢了!

ghost commented Jul 30, 2014

@afc163 恩 但这种应该没事吧,就这样用吧。谢谢了!

@zhishaofei3

This comment has been minimized.

Show comment
Hide comment
@zhishaofei3

zhishaofei3 Jul 31, 2014

我改造jquerymedia插件
就是把jquery.media.js和jquery.metadata.js里增加

define(function (require, exports, module) {
    var $ = require('$');
        然后下面就源码以前的:
        $.fn.media……

使用:

<script type="text/javascript">
    seajs.config({
        base: "./js/sea-modules/",
        alias: {
            "$": "jquery/jquery/1.10.1/jquery",
            "jquerymedia": "JqueryMedia/jquery.media",
            "jquerymediadata": "JqueryMedia/jquery.metadata"
        }
    });
    seajs.use(["./js/main.js", "jquerymedia", "jquerymediadata"]);
</script>

main.js:

define(function (require) {

    var $ = require("$");

    var mp3Info = "kyl.mp3";

    $(".media").show().parent().html('<a href="' + mp3Info + '" class="media {width:500, height:20}"></a>');
    $('a.media').media();

});

浏览器报错$('a.media').media(); 这一句 Uncaught TypeError: undefined is not a function

我给$('a.media').media();加 setTimeout(function(){$('a.media').media();},0);就没事了,请问这正常吗 怎么改?

zhishaofei3 commented Jul 31, 2014

我改造jquerymedia插件
就是把jquery.media.js和jquery.metadata.js里增加

define(function (require, exports, module) {
    var $ = require('$');
        然后下面就源码以前的:
        $.fn.media……

使用:

<script type="text/javascript">
    seajs.config({
        base: "./js/sea-modules/",
        alias: {
            "$": "jquery/jquery/1.10.1/jquery",
            "jquerymedia": "JqueryMedia/jquery.media",
            "jquerymediadata": "JqueryMedia/jquery.metadata"
        }
    });
    seajs.use(["./js/main.js", "jquerymedia", "jquerymediadata"]);
</script>

main.js:

define(function (require) {

    var $ = require("$");

    var mp3Info = "kyl.mp3";

    $(".media").show().parent().html('<a href="' + mp3Info + '" class="media {width:500, height:20}"></a>');
    $('a.media').media();

});

浏览器报错$('a.media').media(); 这一句 Uncaught TypeError: undefined is not a function

我给$('a.media').media();加 setTimeout(function(){$('a.media').media();},0);就没事了,请问这正常吗 怎么改?

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Jul 31, 2014

Member

应该这样比较合适:

define(function (require) {

    require('jquerymedia');
    require('jquerymediadata');
    var $ = require("$");

    var mp3Info = "kyl.mp3";

    $(".media").show().parent().html('<a href="' + mp3Info + '" class="media {width:500, height:20}"></a>');
    $('a.media').media();

});
Member

afc163 commented Jul 31, 2014

应该这样比较合适:

define(function (require) {

    require('jquerymedia');
    require('jquerymediadata');
    var $ = require("$");

    var mp3Info = "kyl.mp3";

    $(".media").show().parent().html('<a href="' + mp3Info + '" class="media {width:500, height:20}"></a>');
    $('a.media').media();

});
@zhangzuoqiang

This comment has been minimized.

Show comment
Hide comment
@zhangzuoqiang

zhangzuoqiang Aug 1, 2014

改造之路漫漫~~~

zhangzuoqiang commented Aug 1, 2014

改造之路漫漫~~~

@zhishaofei3

This comment has been minimized.

Show comment
Hide comment
@zhishaofei3

zhishaofei3 Aug 1, 2014

谢谢afc163

zhishaofei3 commented Aug 1, 2014

谢谢afc163

@uumeizi

This comment has been minimized.

Show comment
Hide comment
@uumeizi

uumeizi Aug 5, 2014

菜鸟问个很菜的问题,将一些已经封装好的JS插件改造为CMD模块是不是只需要在原来JS的基础上添加define(function(require, exports, module){//原始代码};

uumeizi commented Aug 5, 2014

菜鸟问个很菜的问题,将一些已经封装好的JS插件改造为CMD模块是不是只需要在原来JS的基础上添加define(function(require, exports, module){//原始代码};

@hotoo

This comment has been minimized.

Show comment
Hide comment
@hotoo

hotoo Aug 5, 2014

Member

最新的 spm 3 使用 commonjs 规范书写源码。
编译工具会自动帮你编译成 cmd 模块。

Member

hotoo commented Aug 5, 2014

最新的 spm 3 使用 commonjs 规范书写源码。
编译工具会自动帮你编译成 cmd 模块。

@wjzhb

This comment has been minimized.

Show comment
Hide comment
@wjzhb

wjzhb Aug 8, 2014

怎么直接使用原生的jq啊,比如cdn中的jq,eg:http://libs.baidu.com/jquery/1.8.3/jquery.min.js

wjzhb commented Aug 8, 2014

怎么直接使用原生的jq啊,比如cdn中的jq,eg:http://libs.baidu.com/jquery/1.8.3/jquery.min.js

@nickli

This comment has been minimized.

Show comment
Hide comment
@nickli

nickli Nov 21, 2014

其实 如果 目标 module是用amd编写的话, 可以不用改造。直接用适配的方式让AMD的module能在CMD中跑,详情请看 https://github.com/nickli/defineadaptation。这是我在项目中使用的。为了能让我的项目能不硬性依赖AMD CMD or KISSY. 欢迎交流

nickli commented Nov 21, 2014

其实 如果 目标 module是用amd编写的话, 可以不用改造。直接用适配的方式让AMD的module能在CMD中跑,详情请看 https://github.com/nickli/defineadaptation。这是我在项目中使用的。为了能让我的项目能不硬性依赖AMD CMD or KISSY. 欢迎交流

@onwo

This comment has been minimized.

Show comment
Hide comment
@onwo

onwo Dec 30, 2014

jquery.lazyload.min.js 测试 找不到 j("body").find("img.lazy").lazyload() lazyload 这个方法找不到 ?
jquery.lazyload.min.js 怎么封装好呢

onwo commented Dec 30, 2014

jquery.lazyload.min.js 测试 找不到 j("body").find("img.lazy").lazyload() lazyload 这个方法找不到 ?
jquery.lazyload.min.js 怎么封装好呢

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Dec 30, 2014

一头一尾即可

kmvan commented Dec 30, 2014

一头一尾即可

@jieyou

This comment has been minimized.

Show comment
Hide comment
@jieyou

jieyou Jan 21, 2015

截止到目前,jQuery依然没有自己实现对CMD的兼容吗? 目前还是需要手动改造?

jieyou commented Jan 21, 2015

截止到目前,jQuery依然没有自己实现对CMD的兼容吗? 目前还是需要手动改造?

@hhsh

This comment has been minimized.

Show comment
Hide comment
@hhsh

hhsh Feb 25, 2015

.abc();是实例方法,不应 $.abc();

hhsh commented Feb 25, 2015

.abc();是实例方法,不应 $.abc();

@Suzixuan

This comment has been minimized.

Show comment
Hide comment
@Suzixuan

Suzixuan Feb 27, 2015

@afc163 @lifesinger 关于组件依赖于jQuery的问题:
qq 20150227181046

调用:
qq 20150227181135

在新版浏览器上(火狐)正常,但在IE8下就报错。于是我就试着再封装jQuery和插件,结果是IE8没报错,但是插件也没有正常运作。

Suzixuan commented Feb 27, 2015

@afc163 @lifesinger 关于组件依赖于jQuery的问题:
qq 20150227181046

调用:
qq 20150227181135

在新版浏览器上(火狐)正常,但在IE8下就报错。于是我就试着再封装jQuery和插件,结果是IE8没报错,但是插件也没有正常运作。

@jack-Lo

This comment has been minimized.

Show comment
Hide comment
@jack-Lo

jack-Lo Mar 4, 2015

请问如何改造那种链入的资源,像百度地图这样<script src="http://api.map.baidu.com/api?v=2.0&ak=123456"></script>的?

jack-Lo commented Mar 4, 2015

请问如何改造那种链入的资源,像百度地图这样<script src="http://api.map.baidu.com/api?v=2.0&ak=123456"></script>的?

@kmvan

This comment has been minimized.

Show comment
Hide comment
@kmvan

kmvan Mar 4, 2015

没法

-------- Original Message --------
From:jack notifications@github.com
Time:Wed 3/4 PM 08:37
To:seajs/seajs seajs@noreply.github.com
Cc:"Km.Van" kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

请问如何改造那种链入的资源,像百度地图这样<script src="http://api.map.baidu.com/api?v=2.0&ak=123456"></script>的?


Reply to this email directly or view it on GitHub:
#971 (comment)

kmvan commented Mar 4, 2015

没法

-------- Original Message --------
From:jack notifications@github.com
Time:Wed 3/4 PM 08:37
To:seajs/seajs seajs@noreply.github.com
Cc:"Km.Van" kmvan.com@gmail.com
Subject:Re: [seajs] 如何改造现有文件为 CMD 模块 (#971)

请问如何改造那种链入的资源,像百度地图这样<script src="http://api.map.baidu.com/api?v=2.0&ak=123456"></script>的?


Reply to this email directly or view it on GitHub:
#971 (comment)

@nickeljew

This comment has been minimized.

Show comment
Hide comment
@nickeljew

nickeljew Jun 3, 2015

为什么我去掉 jQuery 中的 define.amd后,var $ = require("jquery"); $是undefined?
但是不赋值给$就可以正常使用。

nickeljew commented Jun 3, 2015

为什么我去掉 jQuery 中的 define.amd后,var $ = require("jquery"); $是undefined?
但是不赋值给$就可以正常使用。

@mozackye

This comment has been minimized.

Show comment
Hide comment
@mozackye

mozackye Jun 7, 2015

cmdjs/gallery 里没有的js怎么改造啊 gmu怎么改造啊 在外面套个define好像不行啊 都要自己改造太麻烦了啊

mozackye commented Jun 7, 2015

cmdjs/gallery 里没有的js怎么改造啊 gmu怎么改造啊 在外面套个define好像不行啊 都要自己改造太麻烦了啊

@mozackye

This comment has been minimized.

Show comment
Hide comment
@mozackye

mozackye Jun 7, 2015

都要去看懂js插件的源码吗 搞笑

mozackye commented Jun 7, 2015

都要去看懂js插件的源码吗 搞笑

@mozackye

This comment has been minimized.

Show comment
Hide comment
@mozackye

mozackye Jun 7, 2015

define(function(require, exports, module) {
var $ = require('$');
// code here ...
module.exports = Placeholders;
}); 这个Placeholders是什么东东 能举个例子吗

mozackye commented Jun 7, 2015

define(function(require, exports, module) {
var $ = require('$');
// code here ...
module.exports = Placeholders;
}); 这个Placeholders是什么东东 能举个例子吗

@suibobuzhuliu

This comment has been minimized.

Show comment
Hide comment
@suibobuzhuliu

suibobuzhuliu Jun 26, 2015

define(function(require, exports, module) {
// jquery源码
return window.$;
});

suibobuzhuliu commented Jun 26, 2015

define(function(require, exports, module) {
// jquery源码
return window.$;
});

@jack-Lo

This comment has been minimized.

Show comment
Hide comment
@jack-Lo

jack-Lo Jul 17, 2015

seajs模块有shim的实现吗?

jack-Lo commented Jul 17, 2015

seajs模块有shim的实现吗?

@lilugirl

This comment has been minimized.

Show comment
Hide comment
@lilugirl

lilugirl Nov 5, 2015

seajs如何包裹bootstrap.js

lilugirl commented Nov 5, 2015

seajs如何包裹bootstrap.js

@sunstarvip

This comment has been minimized.

Show comment
Hide comment
@sunstarvip

sunstarvip Nov 10, 2015

请问下按照文档介绍的方法封装了uploadify插件后,能够正常调用但是功能无法使用,而且初始化过程中还提示了看不明白的错误。有没有哪位大神封装过uploadify插件,应该如何封装和调用呢?

sunstarvip commented Nov 10, 2015

请问下按照文档介绍的方法封装了uploadify插件后,能够正常调用但是功能无法使用,而且初始化过程中还提示了看不明白的错误。有没有哪位大神封装过uploadify插件,应该如何封装和调用呢?

@sunstarvip

This comment has been minimized.

Show comment
Hide comment
@sunstarvip

sunstarvip Nov 17, 2015

在sea剔除了shim插件的3.0版本里面每一个非CMD的插件都需要我手动去重新模块化,并且还不一定能成功,更痛苦的是基本上除了自己写的JS所有第三方文件基本都是非CMD的,如此痛苦的开发经历我感觉远远偏离了我最初准备使用sea的初衷,不仅没有提升效率反而被各种模块化的问题困扰。虽然感觉作者剔除shim插件的初衷是好的,但是感觉实际结果只能是我转投了requirejs。

sunstarvip commented Nov 17, 2015

在sea剔除了shim插件的3.0版本里面每一个非CMD的插件都需要我手动去重新模块化,并且还不一定能成功,更痛苦的是基本上除了自己写的JS所有第三方文件基本都是非CMD的,如此痛苦的开发经历我感觉远远偏离了我最初准备使用sea的初衷,不仅没有提升效率反而被各种模块化的问题困扰。虽然感觉作者剔除shim插件的初衷是好的,但是感觉实际结果只能是我转投了requirejs。

@seajs seajs locked and limited conversation to collaborators Nov 17, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.