码迷,mamicode.com
首页 > 其他好文 > 详细

前端模块化

时间:2018-09-04 00:12:43      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:样式   port   common   ref   异步   enter   adf   fan   function   

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

前端模块化

标签:样式   port   common   ref   异步   enter   adf   fan   function   

原文地址:https://www.cnblogs.com/QianBoy/p/9581779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!