期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？
下载APP
关闭
渠道合作
推荐作者
期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？
2019-05-23 winter 来自北京
《重学前端》
课程介绍
你好，我是 winter。
上一期的答疑文章发布之后，同学们的热情很高，我在后台又收到了一批新的问题，今天我们继续来答疑。
1. 请问前端架构中，每个逻辑页面如何可以做到独立发布呢？
答：首先，我们要知道发布是什么意思，我们平时开发好一个网页，把它放到线上真实对用户服务的机器上，这个过程叫做发布。
正常来讲，前端工程师发布的原材料是 HTML，产出是一个线上的 URL 地址。
各个公司的发布系统差异非常的大，有的是前端发 HTML，有的是前端把代码给服务端同学，改成 JSP 之类的代码，再一起发布。
对于逻辑页面而言，我们需要发布的从 HTML 变成了 JavaScript，这个 JavaScript 代码的作用就是渲染一个页面的内容。同时我们线上还需要一个公共的 HTML 文件来运行这些 JavaScript。
最后这些 JavaScript 文件只要能够做到独立发布，我们就可以认为逻辑页面是独立发布了。
2. 对于一个后端开发者来说，前端最困难的东西永远是 CSS 布局而不是 JavaScript，我们对 CSS 有很大畏惧和恐慌在于：CSS 没有很好的调试工具能解决问题，即使 chrome dev 这样的顶级 debug 工具，有时候也很难解释诸如“为什么页面上的这个盒子在这个地方”这样的问题。感觉 CSS 完全不符合编程的思路，老师有没有办法缓解一下这个问题？
答：其实我在课程中已经解释过了，早期的 CSS 从思路上来说就很别扭， 任何人都会觉得别扭，现在有了 Flex 布局，我认为这个问题基本可以算解决了。
3. 最近一直在研究前端性能优化和线上错误收集，收效甚微，老师可以讲解一下大厂是怎么处理的吗？
答：这一部分，首先你需要一个比较通用的日志服务，能接受前端用 HTTP 请求的方式打一些日志进去，一般公司都会有这样的系统，如果没有，就需要新建一个，这部分比较麻烦，需要一定的专业知识。
有了这个日志服务，剩下的就是在每个前端页面插入一个 JavaScript 代码，监听 Window.onerror 可以得到错误，取 window.performance 可以得到性能，拿到以后，打日志就行了。
至于后续怎么去展示，展示了以后又怎么去推动执行，这块就需要你自己根据公司实际情况去找到解决方案了。
4. 老师，想问一下用 float 排版的时候 margin 值在不同的浏览器中会显示不同，是什么原因导致的呢？
答：我是从 IE6 时代过来，我还真没听说过 margin 值有什么兼容问题，你可以拿具体的案例来，我们一起看一看。不过我建议早日切到 flex，我们不要在没价值的事情上浪费生命。
5. 把链接分为超链接类和外部资源类是您自己的理解么，还是官方有这种分类呀，我没找到。老师可以说一下么？
答：不是，链接这个概念来自 HTML 标准（4.6.1 位置）。
我在 HTML 的部分都在讲这个问题，你可以关注一下。
6. 老师，关于线上监控的数据采集和数据显示您有好的插件或者方案推荐？
这个其实没有现成的，这个东西，如果公司从数据安全的角度考虑，一般都不让用第三方的。
答：我查了一下，你说的没错，还真是这样，这块我理解错了，我后面会迭代一下。
8. 活动页面样式风格多变，并且有些活动页面是存在交互和购买流程等交互，这些交互怎么做成模板化？
答：这个答案很简单，只要能传参数，就能做成模板化。
9. DOM 树就是一种嵌套的数据结构吗？然后是渲染引擎将这个数据结构处理成我们看到的网页吗 ？
答：DOM 树是嵌套的树形结构，渲染过程是把它变成位图，绘制过程是把它画到显示器上。关于这部分内容，你可以回顾一下浏览器原理部分的几节课。
10. 浏览器中大多数的对象都原型继承自 Object，是否可以根据原型继承关系将 Window 上面的 api 绘制成一颗树？有了这些继承关系是否更容易理清这些全局属性呢？
答：API 不止有类，也有很多函数呀。所有的函数 API 的原型都是 Function.prototype，这不就没意义了么。
11. “宿主对象（host Objects）：由 JavaScript 宿主环境提供的对象，它们的行为完全由宿主环境决定。”
但是下面对宿主对象的解释又是：“实际上，这个全局对象 windows 上的属性，一部分来自 JavaScript 语言，一部分来自浏览器环境”。这并不像上面说的完全由宿主环境决定，这个怎么理解呢？
答：请注意看了，我这里讲宿主对象有个“们”字。
所以，这里可不是对宿主对象的解释，这是对 Window 对象的解释。Window 对象比较复杂，这块我没有详细讲，从 JavaScript 的 Global Object 的角度可以讲，浏览器部分还有个 Window Proxy 机制，我是觉得复杂又没什么实际意义就没有讲，你可以这样感性地理解一下：全局对象和 Window 对象合成了一个东西。
12. winter 老师，我看到淘宝用了 iframe 标签，能给我讲一下这个标签的使用场景和注意点吗？
答：我可以简单告诉你一个口诀：手机上不要用，PC 上除了历史包袱不要用。
13. 请问下，link preload 解析执行时机和构建 CSSOM 一样吗，HTML 从上往下解析到 link preload 才会解析执行？还是说并行解析 HTML 和 preload？
答：从标准来看应该是可以并行，但是具体怎样这块需要看浏览器源代码确定。
14. 老师，在 ES5 之前版本规范中，会提及 JavaScript 的可执行代码分为全局、函数、Eval。但是在 ES6 之后版本规范中，再也不提及可执行代码的概念了，这是为什么呢？
答：它们还在，只是现在执行过程更复杂了，没法这么简单分类了。
15. winter 老师，你提倡多继承吗？还是说尽量用聚合来解决问题？我看着 ES6 里面要实现多继承的方式也挺别扭的。
答：我不提倡多继承，Java 也不支持多继承啊。如果你想抽象可以用接口来代替，想复用可以用 Mixin 来代替。
16. 我这里还有个问题，使用 figureCaption 标签后，img 标签的 alt 属性可以缺失么？我一直觉得 alt 与 src 情同手足，什么都不应该把彼此拆散的。
答：不可以缺失，这是两个意思，figureCaption 可能是“图 1”这种东西，可不一定在描述图片内容。
17. 老师，style 既然也可以这么用<style>css 规则</style>，为什么没有 <style src=“”></style>？
答：你这个设计得不错，但是估计有了 link 以后，HTML 懒得把 style 改成 replacement 了吧。
18. 老师好，想请问下，业务场景中需要嵌入公司其他行业线的页面，这种不使用 iframe 该怎么办？
答：理论上应该让他们给你做个组件出来，但是如果实在没别的办法，就使用 iframe 吧。
19. 老师，目前有办法通过脚本反射的方式获取所有 JavaScript 原生对象吗？还是只能查文档？通过 for. in 遍历全局对象是不可以的，因为这些 JavaScript 原生对象虽然挂到了全局，但是属于不可枚举成员。
答：我们现在可以用 Object.getOwnPropertyNames，但是你 symbol 还是拿不到。
20. 老师，jquery ajax 同步请求的原理是? 目前用 axios 库，不支持同步请求，如果希望执行同步请求有什么解决办法？
答：原理是 XMLHttpRequest 这个可以传第三个参数，但是我不建议你用同步请求，会把 JS 执行线程卡住。
21. 老师您好，把 JavaScript 代码缓存在 localStorage 中，从 localStorage 取出后怎么执行？ 如果缓存的是 CSS 呢？
答：执行 JavaScript 用 eval，执行 CSS 用 document.createElement(“style”)。
22. 请问：var,let 和 const 在 babel 中都会被编译为 var, 那怎么区分 const 是常量呢？
答：如果你用 babel 的话，就不要管编译后的代码。
23. DOM 树构建与 CSSOM 构建有先后关系吗？CSS 计算与 DOM 树流式构建同步进行是不是意味着 DOM 树流式构建之前，CSSOM 已经构建完成呢？
答：我这里说的确实有点歧义，我在这里再厘清一下。CSSOM 是有 rule 部分和 view 部分的，rule 部分是在 DOM 开始之前就构件完成的，而 view 部分是跟着 DOM 同步构建的。
24. 老师能解释下这个么？
答：这个地方比较特殊，“具有名称的函数表达式”会在外层词法环境和它自己执行产生的词法环境之间，产生一个词法环境，再把自己的名称和值当作变量塞进去。
所以你这里的 b = 20 并没有改变外面的 b，而是试图改变一个只读的变量 b。这块儿的知识有点偏，你仅做理解掌握就好。
25. 关于状态机这一块，我觉得是不是可以先讲一节正则的知识点呢。理解了正则，那么大家对状态机的概念就有了更加直观的理解了。
答：一般正则都是状态机实现的，讲正则对理解它底层的状态机并没有多少意义。
当然了，词法分析也可以用正则来实现，我这里没有这么做而已，我写过一个 JavaScript 的词法分析是用正则做的，你可以参考这里:
好了，今天的答疑就到这里，如果你还有问题，可以继续给我留言。我们一起讨论。
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享赞 8
提建议
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
期末答疑（一）：前端代码单元测试怎么做？
下一篇
尾声 | 长风破浪会有时，直挂云帆济沧海
精选留言(10)
sheldon2019-05-23问您一个问题，我最近看了《你不知道的javascript》.作者说：现在你所理解的javascript很可能是从别人那里学来的不完整版。这样的javascript只是真正的javascript的影子。学完这个系列后，你就会掌握真正的javascript. 我们的javascript知识也好，java知识也好。都是从书本上或者百度，google得来，或者工作中得来。像这本书的作者这样，市面上的书他都说只教了皮毛。那他是如何学习到这些知识的？ 我很好奇。我想问作者是通过什么途径去了解这些知识点而写出这系列书的？ 就我所在的周围同事来说，能持续不断的读书已经算是很厉害了。 期待您的答复！展开共 1 条评论12
阿成2019-05-23勇于承认错误的好老师共 1 条评论10
bolingboling2019-05-25听最后一讲的时候 老师说以后想搞教育 突然就有了一个想法 有一个说法是 前端分为两种 一种在阿里 另一种是在去阿里的路上 本人也非常想去阿里 但无奈实力不允许 老师在阿里工作了那么久 面试过那么多人 所以能不能搞一个学习小组 制定一套学习体系或者说技能体系 就对标阿里的比如 P5 P6 P7 技能达成就可以入职阿里那种 必定火爆 2333共 2 条评论6
Geek_0bb5372019-05-24老师请教一个问题 关于页面通用部分（导航栏、页脚）最为独立的模块如何引入其他页面？在网上收集资料时 看到如下方法： 假设是多页面应用 1.iframe 但是这种有跨越问题还会被劫持什么的问题； 2.前端用js代码动态加载； 3.后端用模版把通用的插进去； 4.使用工具模块拼接页面； 5.引入 比如像jsp里的include； 我想问下淘宝用的是哪一种？怎么做才是最好的？展开2
whatever2019-05-26老师，关于if else和switch case的使用，您曾说过已经不需要使用switch了，本节答疑您也说需要性能分析后再下结论。我就去做了个实验。发现if else即使是满足第一个判断条件的情况下，也比switch case慢了好几倍唉。 var variable = 'a'; console.time('if'); if(variable=='a'){ console.log("a") }else if(variable=='b'){ console.log("b") }else if(variable=='c'){ console.log("c") }else if(variable=='d'){ console.log("d") }else{ console.log("e") } console.timeEnd("if"); console.time("switch"); switch (variable){ case 'a': console.log("a"); break; case 'b': console.log("b"); break; case 'c': console.log("c"); break; case 'd': console.log("d"); break; case 'e': console.log("e"); break; default: break; } console.timeEnd("switch")展开1
Owen2019-05-23老师您好，平时在电脑上做好的页面，放到不同规格的屏幕上就会出现尺寸自适应的问题，请问老师有什么可靠办法解决页面在屏幕上自适应的问题。谢谢1
李东霞2019-05-23希望能写些关于优化的课1
Geek_1349e32019-07-06对一些名词的解释和一些工程化方案：https://zhuanlan.zhihu.com/p/71562853作者回复: 写得不错
1
Tao2019-06-01工作用到 Vue ，在 Methods 里写了很多方法，通常会有是一个方法调用另外一个或多个其他方法，Leader 说我这样的代码耦合太高，我也认识到这样的问题，请问 js 编程中，如何写出更好的函数，更好是指可复用，好维护。作者回复: 1. 一个方法调用另一个或者多个很正常，但是不必要的情况下特意调用别的方法不对。 2. 模块间的关联叫做耦合，模块内的关联是内聚，所以高内聚低耦合是划分模块的一种方法，不会指导你写函数
1
ywqqjw2019-05-23请问老师，在使用flex布局还有HTML5新标签时还是会碰上IE兼容性的问题，一般都是怎么解决？目前我都是只能重新写一遍，但是看着又是<div>一把梭很难受。