前端模块化
Posted qianboy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端模块化相关的知识,希望对你有一定的参考价值。
CommonJS
含义
:javascript
模块化规范
核心思想
:通过require方法来同步加载依赖的模块,通过module.exports导出需要暴露的接口
// 导入 const moduleA = require(‘./moduleA‘); // 导出 module.exports = moduleA.someFunc;
代码无法直接运行在浏览器环境下,必须通过工具转换成标准的ES5缺点
AMD
含义
:JavaScript
模块化规范
不同点
:异步加载依赖模块
用处
:用于解决针对浏览器环境的模块化问题
/ 定义一个模块 define([ ‘require‘, ‘dependency‘ ], function(require, factory) { ‘use strict‘; }); // 导入和使用 require()
可在不转换代码的情况下直接在浏览器中运行优点
:
- 可异步加载依赖
- 可并行加载多个依赖
- 代码可运行在浏览器环境和Node.Js环境下
缺点
JavaScript运行环境没有原生支持AMD,需要项导入实现了AMD的库后才能正常使用
ES6模块化
它将逐渐取代CommonJs和AMD规范
样式文件中的模块化// 导入 import { readFile } from ‘fs‘; // 导出 export default
以SCSS为例
// util.scss文件 // 定义样式片段 @mixin center { position: absoluts; left: 50%; top: 50%; } // 导入和使用util.scss中定义的样式片段 @import ‘util‘; #box{ @include center }
更多内容可访问我的博客:http://webfly.com.cn
以上是关于前端模块化的主要内容,如果未能解决你的问题,请参考以下文章