作者:程劭非(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/