重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32915 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

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

winter 2019-05-23
你好,我是 winter。
上一期的答疑文章发布之后,同学们的热情很高,我在后台又收到了一批新的问题,今天我们继续来答疑。
1. 请问前端架构中,每个逻辑页面如何可以做到独立发布呢?
答:首先,我们要知道发布是什么意思,我们平时开发好一个网页,把它放到线上真实对用户服务的机器上,这个过程叫做发布。
正常来讲,前端工程师发布的原材料是 HTML,产出是一个线上的 URL 地址。
各个公司的发布系统差异非常的大,有的是前端发 HTML,有的是前端把代码给服务端同学,改成 JSP 之类的代码,再一起发布。
对于逻辑页面而言,我们需要发布的从 HTML 变成了 JavaScript,这个 JavaScript 代码的作用就是渲染一个页面的内容。同时我们线上还需要一个公共的 HTML 文件来运行这些 JavaScript。
最后这些 JavaScript 文件只要能够做到独立发布,我们就可以认为逻辑页面是独立发布了。
2. 对于一个后端开发者来说,前端最困难的东西永远是 CSS 布局而不是 JavaScript,我们对 CSS 有很大畏惧和恐慌在于:CSS 没有很好的调试工具能解决问题,即使 chrome dev 这样的顶级 debug 工具,有时候也很难解释诸如“为什么页面上的这个盒子在这个地方”这样的问题。感觉 CSS 完全不符合编程的思路,老师有没有办法缓解一下这个问题?
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(10)

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

    作者回复: 写得不错

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

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

    2019-06-01
  • ywqqjw
    请问老师,在使用flex布局还有HTML5新标签时还是会碰上IE兼容性的问题,一般都是怎么解决?目前我都是只能重新写一遍,但是看着又是<div>一把梭很难受。
    2019-05-23
收起评论
10
返回
顶部