首页

摩登概念白话问答（第一部分）

到 B 站观看视频

《摩登前端开发者》课程答疑环节，有学员提出了一些非常好的问题，主要针对一些天天用到，但是新手又非常不好理解的概念。这里 Peter 给出学习这些概念的思路，和脱口秀式的白话回答。

主要都有哪些概念？

主要是这些？

Q1: 《摩登前端开发者》 一共分三个阶段，第一阶段用 gulp 构建一个基于 flexbox 技术的响应式网站，第二阶段使用 Webpack 构建一个 React 应用，第三阶段用 Meteor 配合 React 使用构建应用。请问 Peter ，这三者有何联系，难度是递增的吗？

回答：首先，gulp/Webpack/Meteor 这三项技术都是前端开发者不可以不知道的，并且它们三个其实都是可以配合 React 来使用的。Gulp 特点是简单，配合上 browerify 这样工具，也可以发挥类似于 Webpack 的作用。而 Webpack 其实不是一个新手工具，文档很高深，新手根本看不懂，而我是被迫把 Webpack 添加到课程中的，因为 React 最初的几个创始人都用 Webpack ，时至今日 Webpack 已经确立的自己在 React 开发中，构建工具这个角度的王者地位了。所以不能不讲，但是其实我自己去年开始学 Webpack 的经历是极其不 happy 的，像我自己是个老手，居然要花一个月的时间专门去啃这个工具本身，我靠！

所以说，三个阶段难度不是递增的，Webpack 这一部分最难，因为他是高手工具。而 gulp 和 Meteor 都是新手工具，可以放心去学。后续课程改版，我会把 Webpack 这一部分调整到最后，单独拿出来做选学内容的。因为我发现 Meteor-React 配合使用目前已经变得非常的强大，这个后续将会是 Peter 最最强烈推荐给大家的写 React 的最佳方式。Webpack 只推荐给高手，特殊场合使用。

Q2: 好，Flexbox 使用方面的问题。为何在 Safari 和一些比较老的安卓系统上的微信中，网页会有排版错误呢？

回答：Flexbox 是一套新的，替代原有 CSS 的 float/postion 那套机制的 CSS 功能。非常强大，所以强烈推荐大家用。但是如果我们去 caniuse.com 去看一下，就会发现，flexbox 目前的浏览器兼容性还略有欠缺。比如像 IE10 只是部分支持，像 wrap 这样的功能是不支持的，所以咱们的代码放上去跑回有问题的。另外，问题最大的还应该是 andriod 上的微信，微信浏览器使用安卓上的浏览器内核，比较老的安卓系统上 flexbox 也是有问题的。

总之，Flexbox 可以大胆的学，因为目前所有最新版的浏览器都支持的。用起来要谨慎，要考虑是否要照顾 IE8 或者老 andriod 的用户。如果是的话，那么 flexbox 的网站就需要添加更多的兼容性代码，应该说非常复杂，基本上就是 if 是这个平台，正常运行 flexbox 代码，if 是老平台，加很多 hack 进来，页面开发难度会激增，所以课程中没有做介绍。

Q3: 构建工具有哪些，作用是？

回答：类似于 gulp/Webpack 这样的工具都属于构建工具，build system 。作用基本上就是把我们写的源码编译成可以部署的目标代码。过程中会涉及到文件拼接比如把 html 的片段拼成一个大 html 页面，把 JS 代码压缩到一个文件中，还有吧 Sass 代码编译成原生 CSS 等等。

Q4: SPA 的适用场合？

回答：SPA 是单页面应用的英文缩写，简单来说就是当我们第一次访问网站的时候，一下子就把所有页面都下载到浏览器中的，相当于安装了一个客户端。这样的好处就是每次点按钮的时候，页面会直接显示出来，不会刷新，用户使用体验更平滑。好多视频网上有对 SPA 架构的详细介绍。但是，总之 SPA 开发是有一定难度的，那么它要解决的痛点是什么呢？

首先我觉得 SPA 的用武之地是在 Mobile 移动端。因为在手机上大家已经适应了原生应用的平滑不刷新的体验，那么这时候，如果我打开一个微信中的页面，页面也能有原生应用的平滑体验，那么岂不是很棒的。的确，我北京的几位朋友就是用 Meteor-React 技术栈做微信开发的。另外，在桌面端，很多强交互的网站也使用 SPA 架构来提高用户体验，例如 coding.net codefights.com 等等。

Q5: 为何一台机器会有多个 IP 地址？

回答：目前主流的还是 V4 版本的 IP 地址，它的特点就是地址是由四个字段组成的，例如 xxx.xxx.xxx.xxx 。互联网上一台计算机就好比一座房子，IP 就相当于地址。首先，互联网上每天我们访问的服务器都有一个公网地址，这个是需要花钱买的，例如如果我们买了阿里云的 VPS ，对应我们就会获得一个公网 IP 。另外也有局域网 IP 的概念，比如公司内网的各个机器，没必要每一台都有 IP ，所以，我们就可以给每一台机器自己分配一个局域网 IP ，例如，192.168.1.1 ，这种以 192 打头的就是标准的局域网 IP ，另外如果我没有记错 127 打头的也是局域网 IP 专用地址。我在公司内网上，如果需要登录一台计算机，就是运行 ssh 192.168.1.11 这样的命令就行了。公网 IP 是全世界独一无二的，但是不同的局域网内，可能都有局域网 IP 为，192.168.1.1 ，这个也没有问题，就像每个小区可能都有 23 栋，但是也不会混淆一样。

好，这样，一台机器可能有局域网 IP 也可能同时又公网 IP 。如果我

ping qd.haoduoshipin.com

就会看到公网 IP 了。这时候我运行 ssh haoduoshipin.com 登录到我的服务器上，运行 ifconfig 命令，就可以看到我这台机器的公网 IP 和局域网 IP ，另外还有一个 loopback 回环网络的 IP ，这个是系统内容各个应用之间通讯用的，不必深究。

后续内容放到第 192 期中了。