前端邓浩 - require.js
type: channel
link: https://denghao.me/index.php/tag/require-js/
items: js模块AMD兼容写法总结

js模块AMD兼容写法总结
type: item
date: 2017-12-06T09:23:00+08:00
description: 本文只针对浏览器端require.js方式加载模块进行总结。下文的源码是精简版，不能直接运行，完整源码参见DEMO 或者https://github.com/denghao123/js-module。个人能力有限，仅供参考，并非最佳实践。涉及记忆点：require.js加载标准模块reqiure.js加载非标准模块AMD/commonJs兼容写法jQuery插件AMD兼容写法多页面按需加载模块一、 require.js加载标准模块模块定义（amd.js）：define([], function() { return { hello: function() { console.log("我是AMD规范写法") } } }); 配置（config.js）：require.config({ paths: { "amd": "./assets/js/amd" } }); 模块调用（page1.js）：requirejs(["amd"], function(o) { o.hello(); }); 二、 reqiure.js加载非标准模块模块定义（funs.js）：function fn1() { console.log("我是fn1()") } function fn2() { console.log("我是fn2()") } 配置（config.js）：require.config({ shim: { "funs": { init: function() { return { fn1: fn1, fn2: fn2 } } } } }); 模块调用（page2.js）：requirejs(["funs"], function(o) { o.fn1(); o.fn2(); }); 三、 AMD/commonJs兼容写法模块定义（commonjs.js）：(function() { var Obj = { name: "DH", say: function() { console.log("你好") } } if (typeof module !== "undefined" && typeof exports === "object") { module.exports = Obj; } else if (typeof define === "function" && (define.amd || define.cmd)) { define(function() { return Obj; }); } else { this.Obj = Obj; } }).call(this || (typeof window !== "undefined" ? window : global)); 配置（config.js）：require.config({ paths: { "commonjs": "./assets/js/commonjs" } }); 模块调用（page3.js）：requirejs(["commonjs"], function(o) { console.log(o.name); o.say(); }); 四、 jQuery插件AMD兼容写法模块定义（jquery.say.js）：(function(factory) { if (typeof define === "function" && define.amd) { define(["jquery"], factory); } else { factory(jQuery); } }(function($) { $.extend({ say: function() { console.log("jquery say") } }) })); 配置（config.js）：require.config({ baseUrl: "./assets/js", paths: { "jquery": "jquery.min", "jquery-say": "jquery.say" } }) 模块调用（page4.js）：requirejs(["jquery","jquery-say"], function() { $.say(); }); 五、 多页面按需加载模块html按需引用js：page1.html page2.html 共公配置（config.js）：require.config({ baseUrl: "./assets/js", paths: { "jquery": "jquery.min", "jquery-say": "jquery.say", "say": "jquery.say", "amd": "amd", "commonjs": "commonjs" }, shim: { "…