

首页  思维导图  详情



前端模块化

2019-07-25 10:25:41   0  举报





AI智能生成

前端模块化整理

前端模块化

前端开发

软件开发

模版推荐

作者其他创作

大纲/内容

CMD

实现

浏览器端

sea.js

说明 

整合了common.js 和 amd的特点

模块使用时再声明

模块的加载是异步的，模块使用时才会加载执行

基本语法

引入

同步

var fs = require('fs');

异步

require.async('./module3', function (m3) { })

定义&暴露模块

无依赖

define(function(require, exports, module){  exports.xxx = value  module.exports = value })

有依赖

define(function(require, exports, module){  //引入依赖模块(同步)  var module2 = require('./module2')  //引入依赖模块(异步)  require.async('./module3', function (m3) {  })  //暴露模块  exports.xxx = value })

es Modules

实现

浏览器端

使用Bable将es6转为es5

使用Browserify进行浏览器端编译

服务器端

正常使用

说明

是es6的模块引入方法，依赖需要提前声明好 import在顶层

基本语法

引入

import '模块名'

import a from '模块名'  将该模块引入为a

输出

export default 默认输出模块

export 输出模块

跟commonJs的区别

引入

common 运行时加载

因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成

es6 编译时输出接口

ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

输出

es6输出的是一个值的引用

ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

common 输出的是一个值的拷贝

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

AMD

实现

浏览器端

require.js

说明

依赖必须提前声明好

模块加载异步，指定回调函数

基本语法

引入

require(['module1', 'module2'], function(m1, m2){    使用m1/m2 })

定义&暴露模块

无依赖

define(function(){    return 模块 })

有依赖

define(['module1', 'module2'], function(m1, m2){ return 模块 })

commonJs

实现

服务器端

node

浏览器端

webpack

Browserify

说明

模块加载同步，即资源加载完再执行

每个文件都可以是一个模块

服务器端

模块加载是运行时同步加载

浏览器端

模块加载是提前编译打包处理

基本语法

引入

第三方模块

var fs = require('fs');

自定义模块

var fs1 = require('./fs');

模块引入说明

读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错

输出

module.exports = 模块或者模块对象集合

exports.value = 模块名

输出说明

module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口

 Collect

Get Started

Android 模块化

 Collect

Get Started

前端JS模块化

 Collect

Get Started

服务模块化管理业务流程图

 Collect

Get Started

模块化场景





0 条评论

下一页