前端模块化的那些事儿

2024年5月20日 220次阅读 来源: shockw4ver

一、什么是模块？

定义：具有雷同属性和行动的事物的鸠合
在前端中：将一些属性比较相似和行动比较相似的内容放在同一个js文件内里，把这个js文件称为模块
目标：为了每一个js文件只关注与本身有关的事变，让每一个js文件各行其职

二、什么是模块化？CommonJS是什么？AMD和CMD又是什么？

①模块化：指的就是恪守commonjs范例，处置惩罚差别js模块之间互相挪用题目
②CommonJS：

  1. A.js文件中挪用另一个B.js文件，肯定要在A.js中引入B.js
    require("B.js");

  2. 另一个被挪用的js，也就是B.js肯定要对外供应接口。
    module.exports=B;

历程以下：
B.js

var b = "Hello,I'm module B.";
module.exports = b;//暴露一个接口，与b对接。这个接口既可所以函数，也可所以对象，以至是数组。

A.js

var _b = require("./B.js");//现实历程当中应该是B.js相对于A.js的途径，这比运用绝对途径去猎取要范例很多
//此时_b获得了B.js的接口，这个接口指向B.js中的变量b
console.log( _b );//"Hello,I'm module B.";

这就完成了一个简朴的模块化事情方式，即：
模块间互相挪用，协同事情，完成某特定功用。

④AMD范例：Async Module Define 异步模块声明
⑤CMD范例：Common Module Define 大众模块声明

⑥模块化的中心代价：模块化最中心的代价在于处置惩罚差别文件之间的分工和挪用题目，即依靠关联。

三、模块化的一些东西

  • gulp + browerify

    • 构建步骤：

      1. 装置gulp

        ``npm install gulp --save-dev //要装置全局照样当地依靠依据现实情况来``

      2. 装置browserify –save–dev
        npm install browserify --save--dev

    1. 装置文件输出流东西
      npm install vinyl-source-stream --save-dev

    2. 在gulpfile里编写使命完成模块化
      gulpfile.js

//基础模块引入
var gulp = require('gulp');
var brow = require('browerify');
var source = require('vinyl-source-stream');
//使命编写
gulp.task('bundle', function() {
//将使命交付给browserify
//brow读取进口文件后，能自动查找互相之间有依靠的关联的模块
 return brow('./entry.js')
 .bundle()//输出一个文件流变量（gulp的事情机制）
 .pipe(source('bundle.js'))//将文件流变量输出为文件
 .pipe(gulp.dest('js'));//将文件终究输出
}

  • webpack
    参考webpack的设置及运用

  • requireJS

    • 模块声明范例：AMD

    • 声明模块

      • 参数1：id 是这个模块的称号，它是一个可选参数，默以为require加载此模块时指定的称号，若定义这个参数，那末这个模块名应该为“顶级”的，不允许相对称号。

      • 参数2：数组，为这个模块所依靠的其他模块

      • 匿名函数参数：为依靠模块在这个模块中的接口，它们是一一对应的，因而即使不须要某个模块的接口，但如果须要它背面模块的接口，那也必需给它增添一个用于占位的参数。

define( 'id', [ 'module1', 'module2' ], function( m1, m2 ) {
  return {
    arg1: m1,
    arg2: m2
  }
  //返回值等于module3的接口
});

  • 运用步骤

    1. 下载requireJS
      bower install requirejs//依据个人习气挑选下载方式，只需保证后续引入的途径准确

    2. 设置config文件和main.js
      config.js

require.config( {
  base: '',//引入模块的肇端途径
  //paths对象为要引入的模块的称号及途径，且不需.js后缀，require默许会为文件增加.js后缀
  paths: {
    'jquery': './jquery-1.11.0'//这就引入了juery作为一个模块。 PS：jquery本身已完成了AMD，而且'jquery'是一个顶级模块名。
  }
} );

main.js

require(['jquery'], function( $ ) {
  $(document).css("background", "#000");//这就完成了引入运用jquery模块，并用它举行dom操纵
});

  1. 在页面中引入

<script data-main="./main.js" src="./bower-components/requirejs/dist/require.js></script>
//main等于主逻辑进口文件

  • SeaJS

    • 模块声明范例：CMD

    • 声明模块

define( function( require, exports, module ) {
  var c = require('./Controller.js');
  c();
})

  • 运用步骤

    1. 下载seajs
      bower install seajs//这里依据个人习气下载seajs的包，只需引入时途径准确就行

    2. 设置seajs.config

seajs.config({
  base: './', //模块肇端途径
})
seajs.use('./main');//运用主逻辑进口文件，相当于requirejs中的data-main文件

requireJS和SeaJS都是在前端完成模块化，相当于一个前端的js模块化加载器，和webpack不一样，webpack是经由过程nodejs将文件打包的。

四、模块化案例

前端mvc架构

  • Vue 组件化&模块化

  • React 组件化&模块化

  • node.js 每一个文件都是模块

什么是MVC

  • 后端开辟的一种观点
    即view( html + js + css + img ) + controller( 掌握层 ) + model( 数据模型 )

    • 前端演变了一套MVC系统：

      • veiw( html + css + js )
        写静态页面 css、js、img及结果

      • controller( 专注于完成效劳和逻辑掌握的层面叫做掌握器 )
        监听页面中请乞降事宜，处置惩罚请乞降事宜；向model要求数据，获得数据后绑定到页面

      • model ( 数据变量 || ajax从效劳端取回的数据 )
        对外供应一些数据

表现了一种分层的观点，让每一个层面只做本身该做的行动，削减代码耦合和冗余

为何运用MVC？

  • 低耦合：
    MVC将营业分为三层，削减了数据与营业的耦合性，增强了各层次功用的自力性，使得在需求转变时能够只须要转变个中一层就能够完成效劳；

  • 复用性高：
    三层营业功用清楚，耦合度低，使各模块能够自力完成本身功用，降低了依靠性，具有很高的复用性。

  • 利于批量临盆和扩大：
    复用性高使得在批量临盆的时刻能够依据需求举行模块的重用，加快了临盆效力。而且模块化使得扩大也异常轻易，模块只需依据范例举行编写，经考核后引入便能够完成扩大。

  • 利于合作开辟：
    扩大性强使合作开辟也变得异常轻易，每一个人依据本身的分工设想本身的模块，不与别人争执，引入时也各行其职。

  • 推行提高度高：
    因为对合作开辟的友爱，使得MVC形式大受开辟者的迎接，运用这个形式的产物的推行和提高变得轻易很多。

    原文作者：shockw4ver
    原文地址: https://segmentfault.com/a/1190000007439277
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞