前言

以一种要开发 Node.js 实战项目为最终目标
进行一系列的技术预研过程

有特点，有针对性，有目标

培养 Node 领域的全局观

1 关于 Nodejs

1.1 什么是 Node.js

官网的话：

• Node.js 是基于 ChromeV8 执行引擎的 JS 运行时环境
• Node.js 使用了一个事件驱动，非阻塞式 I/O 的模型，使其轻量又高效

每一个字其实都看得懂，聚合到一起就有点懵了

我们先不来说 nodejs 是什么，先根据以往的经验抛出问题

1.1.1 在 Node.js 里运行 Js 跟在 Chrome 运行 Js 有啥不同？

已知 Chrome 浏览器用的是同样的 Javascript 引擎和模型

其实，在 Node.js 里写 Js 和在 Chrome 里写 Js，几乎一样

晃眼的几乎一样 那就是有不一样的地方呗！

• Nodejs 没有浏览器 API，即 (Document,window 等)
• 相应的，也增加了它专属的 API，比如文件系统，进程.

有了这些差别，其实就不难理解了

对于开发者来说

• 你在 chrome 里写 js 控制浏览器
• Node.js 让你用类似的方式，控制整个计算机

Node.js 的真谛，也就是官方抽象的释义，我们完全可以在不断深入的过程中慢慢理解～

前言

依托 Nodejs 使用 Buffer net 等模块逐步构建满足应用场景的 RPC 通道

1. RPC 调用

RPC

全称 Remote Procedure Call 翻译成中文：远程过程调用

emm.. 我只是个小前端..

1.1 如何通俗的解释是 RPC？

1.1.1 本地过程调用

1

我现在在家里，我需要洗衣服，就把衣服扔到洗衣机洗了

1.1.2 远程过程调用 (RPC)

1
2
3

我现在在逛街，我需要洗衣服，于是给在家里的男票打个哥电话，他把衣服扔到洗衣机洗了

那么我就实现了RPC调用！！

重新理解前端

前端工程师已经成为研发体系中重要的岗位，但与此相对是大部分前端工程师的知识其实都是来自于实践和工作中零散的学习，这个现状就引发了一系列的问题

• 前端的基础知识薄弱：散点自学 + 基础不牢

1

基础知识的欠缺会让你束手束脚，更限制你解决问题的思路

• 技术上存在短板，就会导致前端开发者的上升通道不甚顺畅

1

小公司的程序员，只能靠自己摸索，这样就很容易陷入重复性劳动的陷阱，最终耽误自己的职业发展

• 前端工程师也会面临技术发展问题带来的挑战

1

前端社区高度活跃，前端标准也在快速更新，这样蓬勃发展对技术来说无疑是好事，但是副作用也显而易见，它使得前端工程师的学习压力变得很大。

大部分人学前端的方式是 “土法学前端”，他们对于知识的理解基本都停留在点上，从来没有大范围把这些点串成线，形成自己的知识体系，因此才会出现遗漏和盲点

开篇

你有没有遇到以下问题

• 字段冗余

• 若干个不得不发的 HTTP 请求

发生这些，并不是前端 er 本意，但是又要承担诸如页面渲染慢等副作用而被用户诟病
究其原因，是前端在数据层面没有主动权

针对但不限于以上种种
我们需要以前端的设计者和开发者的角度出发 设计新的数据查询方式

Facebook 工程师率先提出 RESTful 架构体系的替代方案

并且应用在了其应用中

Facebook 使用 graphql 重构他们的 pc 站

接下来 让我们站在巨人的肩膀上，由浅至深聊聊被称之为面向未来的 API 的 - GraphQL

记录日常开发中不常用的一些小技巧

require.context()

1. 场景：如页面需要导入多个组件，原始写法:

1
2
3
4
5

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}

2. 这样就写了大量重复的代码，利用 require.context 可以写成

1
2
3
4
5
6
7
8

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
components:modules

API 方法

1
2
3
4
5
6
7

实际上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用
require.context(directory,useSubdirectories,regExp)
接收三个参数:
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名

前言

掘金链接

组件化思想并不是前端独有的，但却是前端技术的延伸

随着三大框架崛起，前端组件化逐渐成为前端开发的迫切需求，一种主流，一种共识，它不仅提高开发效率，同时也降低了维组件内聚原则护成本
开发者们不需要再面对一堆晦涩难懂的代码，转而只需要关注以组件⽅式存在的代码⽚段

这是一场新的挑战！

文章开始之前，明确本文的边界

• 从前端工程谈到组件化开发
• 组件的设计原则
• 组件的职能划分及利弊
• 组件设计的边界
• 落实到具体业务中如何做
• 一些感悟
• 总结

一个面试题引发的思考

1

面试官通常会问 写过前端通用组件吗？

理解 react 的 diff 算法

先来了解以下 五层因特尔协议栈

• 应用层（dns http） DNS 解析成 ip 并完成 http 请求发送
• 传输层（tcp udp）三次握手四次挥手建立 tcp 链接
• 网络层 （ip ARP） IP 寻址
• 数字链路层 将请求数据封装成帧
• 物理层 利用物理介质传输比特流

this 是 js 中最复杂的机制之一

任何足够先进的技术都和魔法无异 - Arthur C.Clarke

开篇

又回到了这个老生常谈，新生绝望的问题上，通常遇到这种大家都比较熟悉的问题，反而不知道怎么列大纲，怕不够深入也怕脱离主题～
emm..
此文系 不要再问我 XX 系列之 不要再问我 JS Clone 的问题了