【备忘录】兼容amd与cmd

主流模块的代码替换方式参考:https://github.com/cmdjs/gallery
jquery引入cmd模块:https://github.com/cmdjs/jquery
amd config:https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md

umdjs:https://github.com/umdjs/umd

=======================================================================================
customizable
=======================================================================================
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
......
}));

=======================================================================================
jquery 兼容amd cmd模块
=======================================================================================

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 兼容cmd模块
=======================================================================================

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

===========================================================================================
手动 cmd
===========================================================================================

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

===========================================================================================
现有js改造为cmd例子
===========================================================================================

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;
});

===========================================================================================
改造jquery插件
===========================================================================================

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

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

===========================================================================================
兼容amd/cmd写法
===========================================================================================

!function(factory) {

//factory是一个函数,下面的koExports就是他的参数

// Support three module loading scenarios
if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
// [1] CommonJS/Node.js
// [1] 支持在module.exports.abc,或者直接exports.abc
var target = module['exports'] || exports; // module.exports is for Node.js
factory(target);
} else if (typeof define === 'function' && define['amd']) {
// [2] AMD anonymous module
// [2] AMD 规范
//define(['exports'],function(exports){
// exports.abc = function(){}
//});
define(['exports'], factory);
} else {
// [3] No module loader (plain <script> tag) - put directly in global namespace
factory(window['ko'] = {});
}
}(function(koExports){
}

===========================================================================================
插件jquery-mousewheel兼容amd/cmd写法
===========================================================================================

(function (factory) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify/Seajs
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
doSomething...
}));

posted @ 2014-06-18 16:45  xiaoroad  阅读(692)  评论(0编辑  收藏  举报