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

 

作者：程劭非（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/