前端面试锦集之 node.js 及项目工程化

一、node.js 及项目工程化

1. 使用 Node.js 编写代码实现遍历文件夹及所有文件名，代码如下所示：

// 实现遍历文件下，获取所有的文件
// 这里使用同步的方式比异步的方式简单的多，异步需要回调里面嵌套回调
const fs = require('fs')
const path = require('path')
const readDir = (entry) => {
    const dirInfo = fs.readdirSync(entry);// [ 'hello', 'test.js' ]
    dirInfo.forEach(item => {
        const location = path.join(entry, item)
        const info = fs.statSync(location)
        // console.log(info.isDirectory())
        if (info.isDirectory()) {// 如果是一个文件夹
            console.log(`dir: ${location}`)
            readDir(location) // 递归的方式实现
        } else {// 如果是一个文件
            console.log(`file: ${location}`)
        }
    })
    // console.log(dirInfo)
}
 
// __dirname是系统级的变量，拿到的是当前文将所在文件夹
readDir(__dirname)

2. Node 如何实现版本的升级，使用 nvm 的原因，答案如下所示:

• 为什么要升级 node 的版本
  • 新的 ES 语法
  • webpack 做打包的时候，提升打包速度，因为cwebpack 底层依赖 node的 api
• 如何升级 node 版本
  • npm install nvm
• nvm 的使用是允许在电脑上安装多个 node 版本
• nvm use 版本号，安装新版本的版本是 nvm install 版本号
• 还有一个和 nvm差不多的一个n模块

3. 前端开发要学习 Node.js 的原因，答案如下所示：

• node.js 不算是非常优秀的后端语言，计算能力是非常差的，这给后端开发带来了很大的麻烦
• node.js可以做一个中间的过滤层的服务器
• node.js 可以作为一个数据的分发服务器
• node.js 最强的能力，给前端提供工程化的能力，webpack 就是用 node.js 实现的
• npm 的包管理系统也是 node.js 最后的体现

4. 模块化的差异 AMD CommonJS ESModule，如下所示：

• AMD 依赖前置，也就是说依赖之前就写好了
• ESmodule 是静态的，加载的是一个接口
• AMD 和 commonJS 都是动态的，可以实现动态加载，而且加载的是一个对象
• 静态引入的好处：可以做代码的静态分析，webpack中的打包就是利用了静态依赖
• 代码示例如下所示：

  // AMD 在Angular中就是非常好的体现
  defined(['a','b'],function(a, b){
      // 数组中放的是a模块和b模块
      // 函数相当于一个c模块
  })
  

5. 图片上传到服务器的过程，答案如下所示：

• <input type='file'> 考虑的问题：低版本浏览器的兼容问题 高版本浏览器的兼容问题
• 针对高版本浏览器的兼容，如下所示：
  • 预览功能的实现：通过input标签的onchange事件触发函数
  • 浏览器的FileReader 和 FileReader.readAsDataURL
  • <img src='base64'>来展示图片
• 针对低版本浏览器的兼容，如下所示：
  • 低版本浏览器是没有FileReader这个类的
  • 在onchange触发的时候：直接让input通过表单的形式直接提交给后端，后端存储完会返回一个图片的url
  • 创建img标签，显示图片

6. token存在cookie里，过期的处理方式，答案如下所示：

• token尽量让后端做，前端不要做这方面的动作
• 过期处理最好的解决办法就是直接跳转到登录界面

7. node 框架中的 MVC，答案如下所示：

• Node.js是典型的MVC模块化开发的框架，明显的特点是加入了后台的服务器进来，使读取本地文件变得容易
• 视图层，放在views文件夹中。由ejs写成的模版，可以实现html的代码复用
• 路由层，在 router里，用来分配页面的路由，无论页面什么逻辑，都可以用路由来控制页面的跳转，每个路由其实就是页面的一种状态，这有些类似于react的状态控制，每个状态跳转之后都会交给controller
• 控制层，在controllers里，可以负责当前路由下的页面或者说状态的接口调用和数据返回，在页面中拿到 controller 返给的数据，就可以控制页面的渲染
• 如果 mvc 是骨架，那么存在 public 里的js和css以及图片、图标等资源文件的编写和引用就可以使得我们网站更加丰富美观的

8. mongle与mysql的优势，答案如下所示：

• mongle是属于noSQL，noSQL的设计非常灵活，目前大数据方面的数据库有noSQL的
• mysql适合做比较规范化的数据存储

9. Less、sass、stylus、css，命名空间与 css module 之间的区别，答案如下所示：

• Less 的底层是 JS 所实现的，Sass 的底层是 Ruby 所实现的，Stylus 的底层更加小巧一些的，相比 CSS
• 命名空间可以解决样式的冲突问问题，css module可以使得样式的管理与使用更加的模块化

10. 工程化上的按需加载，答案如下所示：

• 前端工程化是一个高层次的思想，而模块化和组件化是为工程化思想下相对较具体的开发方式，因此可以简单的认为模块化和组件化是工程化的表现形式。
• 模块化和组件化一个最直接的好处就是复用，除了复用之外还有就是分治，我们能够在不影响其他代码的情况下，按需修改某一独立的模块或是组件，因此很多地方我们即使没有复用需要，也可以根据分治需求进行模块化或组件化开发。
• 前端工程化，将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。
• 模块化以及模块化的好处，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。js模块化方案很多有AMD、CommonJS、UMD、ES6 Module等。css模块化开发大多数是在less、sass、stylus等预处理器的import、minxin特性支持下实现。
• 前端发展的导向是前端工程化，智能化，模块化，组件化，层次化。Web前端页面的开发必然与DOM进行交互操作，前端框架的一次次更新，是从满足目前的业务需求到提升效率的阶段，慢慢走向改善性能的阶段（开发和部署环境优化，代码优化，网站性能优化，数据优化，页面优化等等）。
• 前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同，质量开发，具体如下：
  • Node服务，提供数据代理，路由，服务器渲染
  • Web应用开发，专注于web交互体验
  • 前端运维：构建，测试，部署，监控
• 前端的开发，一定要规范化，代码规范，分支管理，模块管理，自动化测试，最后部署；规范化有利于以后项目的重构，二次开发，版本迭代，前端上手，如下所示：
  • 重命名，对类，接口，方法，属性重命名
  • 抽取代码，将方法内代码抽取其他地方调用
  • 封装字段，类字段换属性
  • 删除参数，重排参数

11. git 上的冲突怎么解决的，答案如下所示：

• 产生冲突是因为两个人同时修改了相同文件的相同代码
• 直接在冲突的文件中修改对应的文件，修改之后再次提交
• 具体步骤，如下所示：
  • git brach bugfix
  • git checkout bug fix
  • git add .
  • git commit
  • git setOrigin
  • git push
  • git checkout master
  • git merge bugfix
  • webpack 打包 master 分支代码
  • 把生成的代码扔到 CDN 上

12. 设计模式的理解，如下所示：

• 设计模式，从设计到模式，可以理解为 设计、模式、分开和从设计到模式。
• 23 种设计模式，分为创建型、组合型和行为型。
• 创建型模式，如下所示：
  • 工厂模式，工厂方法模式，抽象工厂模式和建造者模式
  • 单例模式
  • 原型模式
• 结构型模式，如下所示：
  • 适配器模式
  • 装饰器模式
  • 代理模式
  • 外观模式
  • 桥接模式
  • 组合模式
  • 享元模式
• 行为型模式，如下所示：
  • 策略模式
  • 模版方法模式
  • 观察者模式
  • 迭代器模式
  • 职责连模式
  • 命令模式
  • 备忘录模式
  • 状态模式
  • 访问者模式
  • 中介者模式
  • 解释器模式

13. node 中的 npm 与版本管理，答案如下所示：

• package.lock 版本锁，会锁住当前的版本信息，安装依赖的时候会参考锁文件的版本
• yarn.lock，为了跨机器安装得到一致的结果，Yarn 需要比你配置在 package.json 中的依赖列表更多的信息。 Yarn 需要准确存储每个安装的依赖是哪个版本。
  为了做到这样，Yarn 使用一个你项目根目录里的 yarn.lock 文件。这可以媲美其他像 Bundler 或 Cargo 这样的包管理器的 lockfiles。它类似于 npm 的 npm-shrinkwrap.json，然而他并不是有损的并且它能创建可重现的结果。所有 yarn.lock 文件应该被提交到版本控制系统