zoukankan      html  css  js  c++  java
  • 前端 组件化开发/模块化开发

    一、什么是模块?

    定义:具有相同属性和行为的事物的集合

    在前端中:将一些属性比较类似和行为比较类似的内容放在同一个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
        3. 安装文件输出流工具
          npm install vinyl-source-stream --save-dev
        4. 在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操作
          });
        3. 在页面中引入
          <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模式大受开发者的欢迎,使用这个模式的产品的推广和普及变得容易得多。

    来自:http://www.jianshu.com/p/9171c5496c8e

  • 相关阅读:
    2021,6,10 xjzx 模拟考试
    平衡树(二)——Treap
    AtCoder Beginner Contest 204 A-E简要题解
    POJ 2311 Cutting Game 题解
    Codeforces 990G GCD Counting 题解
    NOI2021 SDPTT D2T1 我已经完全理解了 DFS 序线段树 题解
    第三届山东省青少年创意编程与智能设计大赛总结
    Luogu P6042 「ACOI2020」学园祭 题解
    联合省选2021 游记
    Codeforces 1498E Two Houses 题解 —— 如何用结论吊打标算
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6380393.html
Copyright © 2011-2022 走看看