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

Posted wiwimi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面试指南」JS 模块化组件化工程化相关的 15 道面试题相关的知识,希望对你有一定的参考价值。

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 等等。


技术图片





















以上是关于面试指南」JS 模块化组件化工程化相关的 15 道面试题的主要内容,如果未能解决你的问题,请参考以下文章

2019年17道高频React面试题及详解

2021年BATJ30套大厂Android经典高频面试题,使用指南

260道网络安全工程师面试题(附答案)

60道30K+C++工程师面试必问面试题

Java面试高频题精选300道,一份通往阿里的必备指南(pdf文档)

“金三银四”春招指南!分享两道阿里P7究极难度算法题