《重学前端》：用标准重新定义前端

81 阅读 0 评论 54 点赞

我是靠谱客的博主洁净机器猫，最近开发中收集的这篇文章主要介绍《重学前端》：用标准重新定义前端，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作者：程劭非（winter）

前手机淘宝前端负责人

学习感受

整套课程主要从前端标准重新认识前端，标准的发展肯定也是前端历史的发展。其次各个浏览器都是基于标准去实现的，所以这使读者对前端有了一个高屋建瓴的认识。除了各种标准的介绍其次就是帮助读者梳理各种知识体系，比如 js、css、html，我们所学的任何东西都不会在这个体系之外，这有利于对知识的整合，构成自己的知识树，毕竟前端大多数学习者都是基于知识点学习，而不是在自己的体系中。整个课程还是有一定难度的，其实不管我们学习啥，一般都会有一个学习曲线，有的是先难后易，有的是先易后难，整套课程坚持学习到最后的人是很少的，看每节的评论量和收藏量就能明显感受到。

我认为不管学习啥，一鼓作气，再而衰，三而竭，有的难点理解不了就先搁着继续前进，因为有的知识确实超过我们当前能力，何必因为这个难点阻碍我们前进，影响我们继续看后面的风景呢。我承认尽管有很多不懂得地方，但是我相信这总比花了很多钱半途而废要强，对于一些难点完全可以留着随缘，随着我们自身的不断成长，也许有些东西在以后某个特定的时机你就会自然而然的明白和理解，当然更鼓励多花点时间克服，毕竟对未知的好奇和解决困难，才是我们真正成长的原因。以上纯属个人观点和分享，不喜勿喷。

知识体系具有哪些特征？
怎样看待前端工程师的成长？
JS 中对象种类有哪些？
JS 中的函数有多少种？
CSS 中有哪两种规则？

知识体系具有哪些特征？

体系需要完备性和逻辑性：JavaScript 的任何知识都不会出现在这个范围之外，这是知识架构的完备性。单纯的学习知识点是没办法建立知识体系，因为这些知识点之间，没有任何逻辑关系。它们既不是并列关系，又不是递进关系，合在一起，也就没有任何意义。这样的知识架构，无法帮助我们去发现问题和理解问题。体系需要我们自己的思考和完善，也需要更大的视角能看到别人一些好的方法。

怎样看待前端工程师的成长？

关于前端工程师成长，我认为需要两个视角：

一是立足标准，系统性总结和整理前端知识，建立自己的认知和方法论；
二是放眼团队，从业务和工程角度思考前端团队的价值和发展需要。只有这样做，才能够持续发展，在高速发展的技术和工程浪潮中稳稳立足。

JS 中对象种类有哪些？

宿主对象（host Objects）：由 JavaScript 宿主环境提供的对象，它们的行为完全由宿主环境决定。
- 在浏览器环境中，我们都知道全局对象是 window，window 上又有很多属性，如 document。
内置对象（Built-in Objects）：由 JavaScript 语言提供的对象。固有对象（Intrinsic Objects ）：由标准规定，随着 JavaScript 运行时创建而自动创建的对象实例。
- Boolean、String、Number、Array、Date等
原生对象（Native Objects）：可以由用户通过 Array、RegExp 等内置构造器或者特殊语法创建的对象。普通对象（Ordinary Objects）：由{}语法、Object 构造器或者 class 关键字定义类创建的对象，它能够被原型继承。

JS 中的函数有多少种？

第一种，普通函数：用 function 关键字定义的函数。

function foo(){
// code
}

第二种，箭头函数：用 => 运算符定义的函数。

const foo = () => {
// code
}

第三种，方法：在 class 中定义的函数。

class C {
foo(){
//code
}
}

第四种，生成器函数：用 function * 定义的函数。

function* foo(){
// code
}

第五种，类：用 class 定义的类，实际上也是函数。

class Foo{
constructor(){
//code
}
}

第六 / 七 / 八种，异步函数：普通函数、箭头函数和生成器函数加上 async 关键字。

async function foo(){
// code
}
const foo = async () => {
// code
}
async function foo*(){
// code
}

CSS 中有哪两种规则？

CSS 的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是 at 规则，另一种是 qualified rule，也就是普通规则。

普通规则
- 选择器
- 申明列表
  - 属性
  - 值：
    - 值得类型
    - 函数
at 规则
- @charset ： https://www.w3.org/TR/css-syntax-3/
- @import ：https://www.w3.org/TR/css-cascade-4/
- @media ：https://www.w3.org/TR/css3-conditional/
- @page ： https://www.w3.org/TR/css-page-3/
- @counter-style ：https://www.w3.org/TR/css-counter-styles-3
- @keyframes ：https://www.w3.org/TR/css-animations-1/
- @fontface ：https://www.w3.org/TR/css-fonts-3/
- @supports ：https://www.w3.org/TR/css3-conditional/
- @namespace ：https://www.w3.org/TR/css-namespaces-3/