面试指南」JS 模块化、组件化、工程化相关的 15 道面试题

2023-08-20 20:06:46

JS 模块化、组件化、工程化相关的 15 道面试题

1.什么是模块化？
2.简述模块化的发展历程？
3.AMD、CMD、CommonJS 与 ES6 模块化的区别？
4.它们是如何使用的？
5.export 是什么？
6.module.export、export 与 export defalut 有什么区别？
7.什么是组件化？
8.组件化的原则是什么？
9.全局组件与局部组件的区别？
10.如何注册一个全局组件，并使用它？
11.局部组件又是如何注册并使用的？
12.如何封装一个高复用的 Vue 前端组件？
13.什么是前端工程化思想？
14.工程化可以解决什么问题？
15.是如何处理这些问题的？

问：1.什么是模块化？

答：

将 JS 分割成不同职责的 JS，解耦功能，来用于解决全局变量污染、变量冲突、代码冗余、依赖关系难以维护等问题的一种 JS 管理思想，这就是模块化的过程。

问：2.简述模块化的发展历程？

答：

模块化的发展主要从最初的无模块化，发展到闭包式的 IIFE 立即执行解决模块化，到后来的 CommonJS、 AMD、CMD，直到 ES6 模块化规范的出现。

// jQuery风格的匿名自执行

(function(window) {

  //代码

  window.jQuery = window.$ = jQuery; //通过给window添加属性而暴漏到全局

})(window);

问：3.AMD、CMD、CommonJS 与 ES6 模块化的区别？

答：

CommonJS 是 NodeJs 的一种模块同步加载规范，一个文件即是一个模块，使用时直接 require(),即可，但是不适用于客户端，因为加载模块的时候有可能出现‘假死’状况，必须等模块请求成功，加载完毕才可以执行调用的模块。但是在服务期不存在这种状况。

AMD (Asynchronous Module Definition):异步模块加载机制。requireJS 就是 AMD 规范，使用时，先定义所有依赖，然后在加载完成后的回调函数中执行，属于依赖前置，使用：define()来定义模块，require([module], callback)来使用模块。

AMD 同时也保留 CommonJS 中的 require、exprots、module，可以不把依赖罗列在 dependencies 数组中，而是在代码中用 require 来引入。

// AMD规范

require(['modA'], function(modA) {

  modA.start();

});

// AMD使用require加载模块

define(function() {

  console.log('main2.js执行');

  require(['a'], function(a) {

    a.hello();

  });

  $('#b').click(function() {

    require(['b'], function(b) {

      b.hello();

    });

  });

});

缺点：属于依赖前置，需要加载所有的依赖，不可以像 CommonJS 在用的时候再 require，异步加载后再执行。

CMD(Common Module Definition):定义模块时无需罗列依赖数组，在 factory 函数中需传入形参 require,exports,module，然后它会调用 factory 函数的 toString 方法，对函数的内容进行正则匹配，通过匹配到的 require 语句来分析依赖，这样就真正实现了 CommonJS 风格的代码。是 seajs 推崇的规范，是依赖就近原则。

// CMD规范

// a.js

define(function(require, exports, module) {

  console.log('a.js执行');

  return {

    hello: function() {

      console.log('hello, a.js');

    }

  };

});

// b.js

define(function(require, exports, module) {

  console.log('b.js执行');

  return {

    hello: function() {

      console.log('hello, b.js');

    }

  };

});

// main.js

define(function(require, exports, module) {

  var modA = require('a');

  modA.start();

  var modA = require('b');

  modB.start();

});

ES6 模块化是通过 export 命令显式的指定输出的代码，输入也是用静态命令的形式。属于编译时加载。比 CommonJS 效率高，可以按需加载指定的方法。适合服务端与浏览器端。

// a.js

export var a = 'a';

export var b = function() {

  console.log(b);

};

export var c = 'c';

// main.js

import { a, b } from 'a.js';

console.log(a);

console.log(b);

区别：

AMD 和 CMD 同样都是异步加载模块，两者加载的机制不同，前者为依赖前置、后者为依赖就近。

CommonJS 为同步加载模块，NodeJS 内部的模块管理规范，不适合浏览器端。

ES6 模块化编译时加载，通过 export,import 静态输出输入代码，效率高，同时适用于服务端与浏览器端。

问：4.它们是如何使用的？

答：

CommonJS 使用 module.exports,向外暴露模块，使用 require()引入模块，然后直接调用其中的数据或方法。

// m1.js 模块定义

module.exports={

    'date1':123,

    'date2':{a:1,b:'hello'},

    'function1':function(){...},

};

// main.js  模块使用

var module=require(m1.js);

module.data1;

module.data2;

module.function1();

AMD 使用 define(['m1','m2','m3',...],function(m1,m2,m3,...){})来定义模块内部的输出,使用 require(['m1','m2',...],function(m1,m2,...){})来调用模块并使用它。

// 定义：

define(['module1','module2','module3',...],function(module1,module2,module3,...){})

// 引入并调用：

require(['modA'], function(modA) {

  modA.start();

});

CMD 用 define(factory)来定义模块或使用它，factory 可以是数据也可以是方法，而后 define 内部通过 module.exports 向外部暴露。在使用时，，通过工厂函数 function(require, exports, module)中的 require 来引入其他模块并使用该模块。

// 定义 m1.js

define(function (require, exports, module) {

  //内部变量数据

  var data = 'atguigu.com'

  //内部函数

  function show() {

    console.log('module1 show() ' + data)

  }

  //向外暴露

  exports.show = show

})；

// m2.js

define(function(require, exports, module) {

  module.exports = {

    msg: 'I Will Back'

  };

});

// m3.js

define(function (require, exports, module) {

  const API_KEY = 'abc123'

  exports.API_KEY = API_KEY

});

// m4.js

define(function (require, exports, module) {

  //引入依赖模块(同步)

  var module2 = require('./module2')

  function show() {

    console.log('module4 show() ' + module2.msg)

  }

  exports.show = show

  //引入依赖模块(异步)，最后执行，因为是异步的，主线的先执行完才会执行这

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

    console.log('异步引入依赖模块3  ' + m3.API_KEY)

  })

});

// main.js调用模块并使用

define(function (require) {

  var m1 = require('./m1')

  var m4 = require('./m3')

  m1.show()

  m4.show()

});

5.export 是什么？

答：

export 是 ES6 中用于向外暴露数据或方法的一个命令。

通常使用 export 关键字来输出一个变量，该变量可以是数据也可以是方法。

而后，使用 import 来引入，并使用它。

// a.js

export var a = 'hello';

export function sayHello(name) {

  console.log('Hello,' + name);

}

// main.js

import { a, sayHello } from './a.js';

console.log(a);

console.log(sayHello('LiMing'));

问：6.export defalut、export 与 module.exports 有什么区别？

答：

都是用于向外部暴露数据的命令。

export defalut 与 export 是 ES6 Module 中对外暴露数据的。

export defalut 是向外部默认暴露数据，使用时 import 引入时需要为该模块指定一个任意名称，import 后不可以使用{}；

export 是单个暴露数据或方法，利用 import{}来引入，并且{}内名称与 export 一一对应，{}也可以使用 as 为某个数据或方法指定新的名称；

module.exports 是 CommonJS 的一个 exports 变量，提供对外的接口。

// export defalut示例

// a.js

var a='Hello World！';

export defalut=a;

// main.js

import A from 'a.js';

console.log(A);

// export 示例

// b.js

export var b='b';

export function sayHello(name){

  console.log(name+'Hello World！');

}

// main.js

import {b,sayHello} from 'b.js'

sayHello('LiMing');

console.log(b);

// module.exports示例

// c.js

var  c='123';

function getValue(){

  return c;

}

function updateValue(value){

  c=value;

}

module.exports={

  getValue,

  updateValue

}

// main.js

import handleEvent from 'c.js';

handleEvent.getValue();

handleEvent.updateValue('456');

问：7.什么是组件化？

答：

组件化主要是从 Html 角度把页面解耦成一个一个组件的过程，便于代码的高复用、单一职责、方便维护、避免代码冗余的一种解决方案。

问：8.组件化的原则是什么？

答：

组件的主要原则就是单一职责，高复用性。在前端的开发中，我们通常会对一个页面解耦拆分成许多组件，确保一个组件只负责一个事情，同时尽可能减少外部的关联，组件的相关逻辑只在组件内部处理，利用传递参数，事件通信来保持组件对外的通信。

对于 Vue 项目来说，我们一般把页面中频繁使用的组件，注册为全局可用；其他的按需在页面中局部使用。

问：9.全局组件与局部组件的区别？

答：

全局组件经过注册后，全局可用，可以在任何地方使用，局部组件我们一般定义好后，在页面需要的地方按需引入。

在 Vue 中，全局组件一般是全局使用的 Toast、Loading、Confirm 等，而局部组件是页面中的某个功能的 vue 组件；

另外全局组件与局部组件注册方式不同。

问：10.Vue 如何注册一个全局组件，并使用它？

答：

一般我们定义好.vue 的组件后，通过 import 引入，使用 Vue.Component()来注册全局注册组件。这样我们就可以在其他地方使用它了。

问：11.Vue 局部组件又是如何注册并使用的？

答：

局部组件也是通过 import 引入，不同的是在 Vue 实例中 components 对象中注册，我们就可以在 templete 中使用了。

问：12.如何封装一个高复用的 Vue 前端组件？

答： 1.我们可以把页面上的每个独立的可视/可交互区域/相同页面功能视为一个组件来解耦页面； 2.当我们确定了一个 vue 组件后，再从 html、css 和 js 三个方面把组件的自身逻辑放入组件内部,然后通过 Props，$emit 来保持与父组件进行传输的传递与事件的通信，对于跨父子关系的组件间，使用 eventBus 来做通信； 3.最后我们就可以在使用的地方使用 import 引入,Vue.Component(),或实例的 components 来注册它，最后在页面模板中使用； 4.组件内部我们可能用到动态 class、动态 style、组件的 Props 双向绑定、组件的生命周期等，具体逻辑需要根据组件本身功能来动态调优。

问：13.什么是前端工程化思想？

答：

前端工程化是把前端项目当成一个工程，制定合理的开发流程、工具集的使用以及合理的开发规范，来贯穿开发、优化、测试、代码管理，到发布部署的一种管理思想。

问：14.工程化可以解决什么问题？

答：

前端工程化可以解决业务代码维护难，开发流程不统一，代码格式风格多样性，测试覆盖率低成效不显著，发布部署流程繁琐复杂等问题。

问：15.是如何处理这些问题的？

答：

对于一个好的前端工程我们一般都是从以下方面来着手：

制定开发规范：包含高效率的开发流程、代码命名/注释/文档规范，合理的目录结构，数据请求规范，路由管理方案，静态资源处理等等；

模块化规范：统筹模块化方案，合理设计全局模块以及按需引入的局部模块的使用，使用可靠的三方工具库，尽可能减少代码冗余，保证模块的单一职责，高聚低耦等；

组件化开发：尽可能拆分为组件，封装各个组件的功能，保证组件的高复用性、灵活性以及与外部的通信畅通；

性能优化：对工程作必要的性能测试，对于性能瓶颈项制定解决方案，并做持续优化。优化数据请求，合并请求，Node 中间件优化请求数据,对静态资源压缩/CDN 部署，尽可能使用字体图标代替图片资源，合理的使用数据缓存等等；

项目测试：编写必要的单元测试，保证功能的可靠性，处理好逻辑的边界问题以及合理的容错机制；

发布部署：使用持续集成，持续交付的管理模式来简化发布部署流程，提高发布部署的效率，将更多的时间转移至功能开发测试上；

开发流程：优化开发流程，保证需求评审、技术评估、业务开发、测试、debugger 以及发布上线的高效率沟通，输出留存必要的协作文档资料，尽可能地减少无效沟通，采用小组式敏捷开发思想；

开发工具集：使用必要的工具集，提升开发管理效率，比如使用编辑器 VSCode 与其插件、代码管理工具与平台 Svn/Git/SourceTree/Gitee/GitLab、Webapack 打包工具 + npm script 开发工作流、Tapd 协作平台、产品设计平台 Axure/ 蓝湖、思维导图 XMind 等等。

码农公寓