重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?

展示和推动执行需根据公司实际情况解决
日志服务接受前端HTTP请求打日志
前端页面插入JavaScript代码,监听Window.onerror和window.performance
通用日志服务
Flex布局解决问题
别扭
JavaScript文件独立发布
线上需要一个公共的HTML文件来运行JavaScript
JavaScript代码渲染页面内容
发布的从HTML变成了JavaScript
前端将代码给服务端同学,改成JSP等代码,再一起发布
前端发HTML
产出是一个线上的URL地址
前端工程师发布的原材料是HTML
将网页放到线上真实对用户服务的机器上
正则对状态机理解意义不大
正则实现状态机
产生词法环境
具有名称的函数表达式
CSS计算与DOM树流式构建同步进行
CSSOM构建先于DOM树
不需关心编译后的代码
CSS使用document.createElement("style")
JavaScript使用eval
不建议使用同步请求
XMLHttpRequest传第三个参数
使用Object.getOwnPropertyNames
使用iframe或让其提供组件
未设计style src属性
alt属性不可缺失
推荐使用接口和Mixin
不提倡多继承
无法简单分类
ES6执行过程复杂
并行解析HTML和preload
PC上除历史包袱不要使用
Window对象属性来源
JavaScript宿主环境提供的对象
函数API原型为Function.prototype
API包括类和函数
渲染引擎处理成网页
DOM树嵌套数据结构
参数传递实现模板化
需要迭代更新
ES6支持继承原生构造函数
解决方案根据公司实际情况
数据安全考虑
日志服务
来自HTML标准
外部资源类
超链接类
建议切换到flex布局
兼容问题案例
错误收集
性能优化
CSS布局
逻辑页面独立发布
发布系统差异
发布过程
发布定义
正则和状态机
JavaScript函数表达式
DOM树和CSSOM构建关系
var, let和const在babel编译
localStorage中JavaScript和CSS执行
jquery ajax同步请求原理
脚本反射获取JavaScript原生对象
嵌入其他行业线页面
style标签使用
figureCaption标签和img标签alt属性
多继承和聚合
ES5和ES6可执行代码概念
link preload解析执行时机
iframe标签使用场景和注意点
宿主对象
Window对象API继承关系
DOM树和渲染引擎
活动页面交互模板化
原生构造器继承
线上监控数据采集和显示
链接分类
float排版中margin值兼容问题
前端性能优化和线上错误收集
CSS布局调试
前端架构中,每个逻辑页面如何可以做到独立发布

该思维导图由 AI 生成,仅供参考

你好,我是 winter。
上一期的答疑文章发布之后,同学们的热情很高,我在后台又收到了一批新的问题,今天我们继续来答疑。
1. 请问前端架构中,每个逻辑页面如何可以做到独立发布呢?
答:首先,我们要知道发布是什么意思,我们平时开发好一个网页,把它放到线上真实对用户服务的机器上,这个过程叫做发布。
正常来讲,前端工程师发布的原材料是 HTML,产出是一个线上的 URL 地址。
各个公司的发布系统差异非常的大,有的是前端发 HTML,有的是前端把代码给服务端同学,改成 JSP 之类的代码,再一起发布。
对于逻辑页面而言,我们需要发布的从 HTML 变成了 JavaScript,这个 JavaScript 代码的作用就是渲染一个页面的内容。同时我们线上还需要一个公共的 HTML 文件来运行这些 JavaScript。
最后这些 JavaScript 文件只要能够做到独立发布,我们就可以认为逻辑页面是独立发布了。
2. 对于一个后端开发者来说,前端最困难的东西永远是 CSS 布局而不是 JavaScript,我们对 CSS 有很大畏惧和恐慌在于:CSS 没有很好的调试工具能解决问题,即使 chrome dev 这样的顶级 debug 工具,有时候也很难解释诸如“为什么页面上的这个盒子在这个地方”这样的问题。感觉 CSS 完全不符合编程的思路,老师有没有办法缓解一下这个问题?
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Winter老师以简洁明了的语言回答了读者提出的问题,涉及到前端发布、CSS布局、性能优化、错误收集、JavaScript继承、DOM树渲染、iframe标签等多个前端技术领域。文章内容涵盖了前端开发中的实际问题和解决方案,对于前端开发人员具有一定的参考价值。Winter老师的回答通俗易懂,为读者提供了解决问题的思路和方法。同时,文章还涉及了一些特殊的JavaScript知识点,如具有名称的函数表达式和状态机的概念。Winter老师的回答为读者提供了前端开发中的实际问题和解决方案,对于前端开发人员具有一定的参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(10)

  • 最新
  • 精选
  • Geek_1349e3
    对一些名词的解释和一些工程化方案:https://zhuanlan.zhihu.com/p/71562853

    作者回复: 写得不错

    2019-07-06
    1
  • Tao
    工作用到 Vue ,在 Methods 里写了很多方法,通常会有是一个方法调用另外一个或多个其他方法,Leader 说我这样的代码耦合太高,我也认识到这样的问题,请问 js 编程中,如何写出更好的函数,更好是指可复用,好维护。

    作者回复: 1. 一个方法调用另一个或者多个很正常,但是不必要的情况下特意调用别的方法不对。 2. 模块间的关联叫做耦合,模块内的关联是内聚,所以高内聚低耦合是划分模块的一种方法,不会指导你写函数

    2019-06-01
    1
  • sheldon
    问您一个问题,我最近看了《你不知道的javascript》.作者说:现在你所理解的javascript很可能是从别人那里学来的不完整版。这样的javascript只是真正的javascript的影子。学完这个系列后,你就会掌握真正的javascript. 我们的javascript知识也好,java知识也好。都是从书本上或者百度,google得来,或者工作中得来。像这本书的作者这样,市面上的书他都说只教了皮毛。那他是如何学习到这些知识的? 我很好奇。我想问作者是通过什么途径去了解这些知识点而写出这系列书的? 就我所在的周围同事来说,能持续不断的读书已经算是很厉害了。 期待您的答复!
    2019-05-23
    1
    12
  • 阿成
    勇于承认错误的好老师
    2019-05-23
    1
    10
  • bolingboling
    听最后一讲的时候 老师说以后想搞教育 突然就有了一个想法 有一个说法是 前端分为两种 一种在阿里 另一种是在去阿里的路上 本人也非常想去阿里 但无奈实力不允许 老师在阿里工作了那么久 面试过那么多人 所以能不能搞一个学习小组 制定一套学习体系或者说技能体系 就对标阿里的比如 P5 P6 P7 技能达成就可以入职阿里那种 必定火爆 2333
    2019-05-25
    2
    6
  • Geek_0bb537
    老师请教一个问题 关于页面通用部分(导航栏、页脚)最为独立的模块如何引入其他页面?在网上收集资料时 看到如下方法: 假设是多页面应用 1.iframe 但是这种有跨越问题还会被劫持什么的问题; 2.前端用js代码动态加载; 3.后端用模版把通用的插进去; 4.使用工具模块拼接页面; 5.引入 比如像jsp里的include; 我想问下淘宝用的是哪一种?怎么做才是最好的?
    2019-05-24
    2
  • whatever
    老师,关于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")
    2019-05-26
    1
  • Owen
    老师您好,平时在电脑上做好的页面,放到不同规格的屏幕上就会出现尺寸自适应的问题,请问老师有什么可靠办法解决页面在屏幕上自适应的问题。谢谢
    2019-05-23
    1
  • 李东霞
    希望能写些关于优化的课
    2019-05-23
    1
  • ywqqjw
    请问老师,在使用flex布局还有HTML5新标签时还是会碰上IE兼容性的问题,一般都是怎么解决?目前我都是只能重新写一遍,但是看着又是<div>一把梭很难受。
    2019-05-23
收起评论
显示
设置
留言
10
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部