重学前端-总结：1、明确你的前端学习路线与方法

约定不等于承诺〃 2021-09-28 05:34 308阅读 0赞

### 文章目录 ###

*  重学前端-总结：1、明确你的前端学习路线与方法
 *  前端学习路径与学习方法
 *  第一个方法：建立知识架构
 *   *  理解流行的术语和问题
 *  第二个方法：追本溯源
 *  课程链接

# 重学前端-总结：1、明确你的前端学习路线与方法 #

到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。

目前前端存在几大问题：  
1、前端的基础知识不牢固  
2、技术上存在短板，就会导致前端开发者的上升通道不甚顺畅。  
3、前端工程师也会面临技术快速发展问题带来的挑战。

拿 JavaScript 标准来说，ES6 中引入的新特性超过了过去十年的总和，新特性带来的实践就更多了，仅仅是一个 Proxy 特性的引入，就支持了 VueJS 从 2.0 到 3.0 的内核原理完全升级。

建立知识架构，同样有利于面试，没人能够记住所有的知识，当不可避免地谈到一个记不住的知识，如果你能快速定位到它在知识架构中的位置，把一些相关的点讲出来，说明你理解到位了。

# 前端学习路径与学习方法 #

1、基础入门  
阅读经典的前端教材：《JavaScript 高级程序设计》、《精通 CSS》  
2、有工作经验，框架学习，掌握原理。  
三个目标：

*  摸索出适合前端学习方法；
 *  建立起前端技术的知识架构；
 *  理解前端技术背后的核心思想。

# 第一个方法：建立知识架构 #

建立自己的知识架构，并且在这个架构上，不断地进行优化。

## 理解流行的术语和问题 ##

但是知识点之间，没有任何逻辑关系，比如

*  类型转换
 *  this 指针
 *  闭包
 *  作用域链
 *  原型链  
    应该做以下划分 ，
 *  文法
 *  语义
 *  运行时  
    因为对于任何计算机语言来说，必定是“用规定的文法，去表达特定语义，最终操作运行时的”一个过程。  
    细分一个层级：
 *  文法
    
     *  词法
     *  语法
 *  语义
 *  运行时
    
     *  类型
     *  执行过程  
        文法是编译原理的知识，然后，程序 = 算法 + 数据结构，那么，对运行时来说，类型就是数据结构，执行过程就是算法。  
        词法中有各种直接量、关键字、运算符，  
        语法和语义则是表达式、语句、函数、对象、模块，类型则包含了对象、数字、字符串等

# 第二个方法：追本溯源 #

有一些知识，背后有一个很大的体系，例如，我们对比一下 CSS 里面的两个属性：

*  opacity；
 *  display。  
    虽然都是“属性”，但是它们背后的知识量完全不同，opacity 是个非常单纯的数值，表达的意思也很清楚，而 display 的每一个取值背后都是一个不同的布局体系。我们要讲清楚 display，就必须关注正常流（Normal Flow）、关注弹性布局系统以及 grid 这些内容。

# 课程链接 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center 1])

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/51565f0941f84566aab8e1b126b19c51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210923/8ffaa822a2674bbdb5778c011ae4b368.png