js模块化世界

前言

我们经常见到 一些这样的写法,require('xxx')、import xx from '../components/data'、export const data、。。。也听见一些这样的说法:commonjs 规范、AMD规范。。。

其实 都是 属于模块化概念里的东西了。所谓模块化,就是将一些功能 独立化、块状化,易于被别人使用。这是代码开发向前的趋势了。这里主要说一下当前模块化的 主要规范。所谓规范,即 遵从的一些语法标准。

主要有三大规范:commonJS、AMD、es6模块化 

commonJS: 

同步加载依赖模块,require导入、module.exports导出。 

语法: 

// 导入
const moduleA = require('./moduleA');

// 导出
module.exports = moduleA.someFunc;

 

优点: 

Node.js环境 可运行;npm的第三方模块 多使用 该规范 

缺点: 

浏览器环境不支持,须转换 

 

注:CommonJS 还可以细分为 CommonJS1 和 CommonJS2,区别在于 CommonJS1 只能通过 exports.XX = XX 的方式导出,CommonJS2 在 CommonJS1 的基础上加入了 module.exports = XX 的导出方式。 CommonJS 通常指 CommonJS2。

AMD 

异步加载模块。主要是为了解决浏览器环境的模块化问题,代表性 如 requirejs。 

语法: 

// 定义一个模块
define('module', ['dep'], function(dep) {
  return exports;
});

// 导入和使用
require(['module'], function(module) {
});

 

优点: 

可直接在浏览器环境运行;可并行加载多个模块;支持node环境和浏览器环境 

缺点: 

js环境 运行 需要amd库的支持。 

Es6模块化 

Import;export。取代 commonJS 和 AMD 成为 通用解决方案。

// 导入
import { readFile } from 'fs';
import React from 'react';
// 导出
export function hello() {};
export default {
  // ...
};

缺点: 

浏览器需要 转换为es5. 

 

posted @ 2019-02-22 18:05  点几  阅读(187)  评论(0编辑  收藏  举报