- js的模块化
在前端开发的原始时期,只要在script标签中嵌入js代码就能实现一些基本的交互效果,但是随着时代的进步。js扮演的角色变得重要起来,js应用的场景页越来越复杂,。然而,js都没有类的概念,更不用说模块了。
为什么要有模块化
- 当一个项目变得复杂的时候,会出现问题,比如:
命名冲突:开发中重复命名,导致命名冲突。
文件依赖:项目开发中,依赖的js文件,引入遗漏,引入顺序错误。 - 使用模块化开发可以避免类似情况,而且利于项目的维护:
提升开发效率:代码方便重用,能直接引入,避免重复开发。
方便后期维护:维护起来文件依赖和结构清晰
- 当一个项目变得复杂的时候,会出现问题,比如:
- AMD
AMD 英文Asynchronous Module Definition,中文“异步模块定义”。它是一个在浏览器端模块化开发的规范。AMD规范的主要实现是RequireJs
define(id?, dependencies?, factory)
id:指定义中模块的名字(可选)。如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。
dependencies:当前模块依赖的,已被模块定义的模块标识的数组字面量(可选)。
factory:一个需要进行实例化的函数或者一个对象。
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});
- CMD
CMD 英文 Common Module Definition。CMD 依赖就近。CMD规范的主要实现是SeaJsdefine(function(require, exports, module){ 模块代码 });
- commonjs
CommonJS是服务器端模块的规范,Nodejs使用该规范。
CommonJS定义,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象属性。
通过 require 来加载模块。
commonJs通过 exports 和 modul.exports 来暴露模块中的内容。 - es6的module 语法
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。
export 命令用于规定模块的对外接口。
import 命令用于输入其他模块提供的功能。// profile.js export var firstName = ‘Michael‘; export var lastName = ‘Jackson‘; export var year = 1958; // main.js import {firstName, lastName, year} from ‘./profile‘; function setName(element) { element.textContent = firstName + ‘ ‘ + lastName; }
时间: 2024-10-06 11:15:31