摘要：代码地址模块化的主要区别此前年前前前前前端模块化，主流的就是，支持的二者都可以用为什么模块化一直以来，前端开发的痛点之一就是代码复用职责划分问题，兼容性比如等新语法的支持组件化代码压缩等不在本文讨论范围。
前言
请注意，现在是2019/05/22，这！不！是！坟！贴！，你没！有！穿！越！！
为了以后，可能需要搞一下以前的旧项目，自己也想玩玩，，，所以补一下旧时代的模块化玩法。。。
代码：github地址
AMD/CMD/Common.js/UMD/ES6模块化的主要区别此前（2019年前前前前）前端模块化，主流的就是AMD/CommonJS，支持UMD的二者都可以用
为什么模块化？
一直以来，前端开发的痛点之一就是 代码复用/职责划分 问题，兼容性比如ES6等新语法的支持/组件化/代码压缩等不在本文讨论范围。
在这些 前端模块化 的东西出现之前，都是用
目录结构：
...
equire.js-AMD
├─ index.html
├─ js
├─ lodash.js
├─ m1.js
└─ m2.js
├─ main.js
└─ require.js
HTML
<script src="./require.js" data-main="./main.js">script>
入口 main.js
// js/mian.js
// 全局配置
require.config({
// 根路径设置，paths下面全部都是根据baseUrl的路径去设置
baseUrl:"./js",
paths: { // 定义引用时名称对应的路径
m1: "m1",
m2: "m2",
lodash: "lodash"
},
// 用来配置不兼容的模块，没有module.exports的第三方库（未验证。。。）
// shim:{
// "lodash": {
// exports: "_"
// }
// }
})
define("main", function() {
require(["m1"], function(m1) {
console.log("name: ", m1.name);
console.log("add: ", m1.add(2, 8));
});
})
模块定义
define函数格式： define(id");
// js/m1.js
// define(id");
define("m1", ["lodash", "m2"], function(_, m2) {
_.map([1,2], function(num){
console.log("num: ", num);
});
console.log(m2);
var add = function(x, y) {
return x + y;
};
return {
name: "m1.js",
add: add
};
})
二、CMD/sea.js
什么是CMD？
在浏览器端的CommonJS（除去某些Node.js环境特有的API）；同步、动态加载;
依赖就近，哪里需要哪里require；
异步引入 require.async([dependencies], callback)；
使用 exports/module.exports 方式导出
以下使用sea.js v3.0.0示例：
目录结构：
...sea.js--CMD
├─ index.html
├─ js
├─ lodash.js
├─ m1.js
└─ m2.js
├─ main.js
└─ sea.js
HTML
<script src="./js/lodash.js">script>
<script src="./sea.js">script>
<script>
// 配置
seajs.config({
base: "./", // 后续引用基于此路径
alias: { // 别名，可以用一个名称 替代路径（基于base路径）
lodash: "js/lodash.js",
m1: "js/m1",
m2: "js/m2",
},
});
// 加载入口模块
seajs.use("./main.js", function(main) {
// 执行完 main.js导出(exports/module.exports)之前的同步操作之后的 回调
main.init(); // init
});
script>
入口 main.js
// js/mian.js
define(function(require, exports, module) {
var m1 = require("m1");
console.log(m1.add(2,8));
// 多带带导出
exports.init = function init() {
console.log("init");
}
// 或者 先定义，再统一导出
// function init() {
// console.log("init");
// }
// module.exports = {
// init: init
// }
});
模块定义
define函数格式： define(function(require, exports, module) {})
// js/m1.js
define(function(require, exports, module) {
// 使用第三方库 lodash.js，script标签导入
// 优先require，不然使用script
_.map([1,2], function(item) {
console.log(item);
})
// 异步引入
require.async("m2", function(m2) {
console.log("异步引入 m2");
}); // m2
// 每个函数多带带导出
exports.add = function(x, y) {
return x + y;
}
// 或者 先定义，再统一导出
// function add(x, y) {
// return x + y;
// }
// modules.exports = {
// add: add
// }
});
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/6879.html
摘要：中使用操作符具体做了哪些事情创建了一个空对象空对象的属性指向构造函数的属性执行构造函数，将的指向前端面试题及答案浏览器篇前端面试题及答案篇前端面试题及答案篇前端面试题及答案性能优化篇 这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出...
摘要：中使用操作符具体做了哪些事情创建了一个空对象空对象的属性指向构造函数的属性执行构造函数，将的指向前端面试题及答案浏览器篇前端面试题及答案篇前端面试题及答案篇前端面试题及答案性能优化篇 这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出...
摘要：第二行，在第一行之后运行，因此必须等加载完成。类似于，但是是依赖就近，延迟执行，是依赖前置，提前执行。是一个文件名重命名导入成员名称标识符从已经存在的模块脚本文件等导入返回一个对象。 前言 JS模块化编程是前端小伙伴们必不可少的知识，下面妹子将于自认为比较清晰的方式列举出来。 1 require 特点： 1.运行时加载 2.拷贝到本页面 3.全部引入 1.1 CommonJS No...
摘要：所以说的模块机制没有解决文件依赖关系和文件异步加载的问题。大部分团队还是停留在第二第三阶段，每个阶段的实现都有很多种选择。希望这篇文章能够激起大家永远保持积极向前追求完美代码的心，不仅对自己的成长也会对公司带来无限的价值。 本篇技术博客来自有着化腐朽为神奇能力的，Worktile 技术牛人Web 总监 @徐海峰 大神的分享~满满的干货，你值得拥有！ Worktile 的前端构建之路 2...
摘要：所以说的模块机制没有解决文件依赖关系和文件异步加载的问题。大部分团队还是停留在第二第三阶段，每个阶段的实现都有很多种选择。希望这篇文章能够激起大家永远保持积极向前追求完美代码的心，不仅对自己的成长也会对公司带来无限的价值。 本篇技术博客来自有着化腐朽为神奇能力的，Worktile 技术牛人Web 总监 @徐海峰 大神的分享~满满的干货，你值得拥有！ Worktile 的前端构建之路 2...
阅读 1062·2021-11-15 11:37
阅读 3257·2021-11-11 16:55
阅读 1613·2021-08-25 09:39
阅读 3034·2019-08-30 15:44
阅读 1627·2019-08-29 12:52
阅读 1257·2019-08-29 11:10
阅读 3084·2019-08-26 11:32
阅读 3104·2019-08-26 10:16
