告誡一些正在路上敏捷開發前端的人...

1 前言

本人學藝不精,沒有進行過任何系統化學習,曾經認爲前端無非就是達成各類端的運行就能夠了,在網頁中奔跑,在微信小程序上奔跑,在app上奔跑,會用些前輩們造就的輪子。只要能用,那就是完成了。後來發現這一切並無那麼簡單...php

我所認爲的前端css

大二那年,我加入了專門爲比賽而誕生的團隊。爲了快速的入門,學習了關於<div>和盒子模型,float:left。這些能夠速成頁面的法門,在沒有語義化的世界裏,其實html中<div><a><img>。已經足夠能夠統一網頁前端的世界。而後就是不斷的學習簡單版的css,paddingmarginmarginborderbackgroundwidthheight,其餘的一概百度一下,你就知道。徹底已經知足了,基本網頁需求,關鍵是寫的還蠻快的。那麼js呢,其實初學者,只要懂一些c語言的運算符合數據類型,加上一個jQuery的選擇器,難道非要去學習dom與bom?那些原本就須要時間和積累的東西嘛。咱們只會朝着一個方向,就是敏捷開發,快速開發。html

比賽的時候,還須要本身寫一個後端,使用一門名曰php的語言,稍微瞭解了一下mvc的設計模式,靠着記憶力背出了鏈接數據庫的語句。有一個叫作phpMyAdmin巧妙的生成了mysql的語句,學上增刪改查,4個函數,就覺得拿下了後端的世界。前端

開始工做了,咱們寫着簡陋的ajax,調用着前輩們寫好的方法,開始進行了一場拼圖開發,這一切來得太簡單,太容易了,彷佛沒有經歷過什麼痛苦,就已經成了所謂的"全棧工程師",咱們會寫前端,也會後端,對於數據最大理解就是將數據存儲在一個教myqsql的數據中。vue

工做了2年後,看到了社招的題目,猛然間五味雜陳,我看不懂什麼叫作document,對於es6也就能說說letconstvar 和不知因此的箭頭函數()=>。關於語義化也知之甚少。對於vue的理解也僅僅侷限於雙向綁定。webpack的使用無非就是百度一下,你就懂了。固然也會有人和我同樣,對於webpack,侷限在vue-cil腳手架上。前端的優化呢,使用工具壓縮一下圖片,將ajax的同步改爲異步,防止頁面堵塞。node

難道這些就是前端?python

對此告誡那些剛剛入門對於代碼世界充滿但願的人——**全部速成的東西,沒一個是好東西。**咱們老是喜歡一些,敲下回車,立刻有效果的東西。咱們對於原理而言,咱們對金錢更加感興趣,咱們更喜歡關注一些,好比說這個行業目前本身值多少錢,這樣實際的東西。mysql

對此感謝掘金寫做者計劃,可以讓我可以表達出,這2年對於前端的弊端,看到本身深深的不足。用上一句winter大神的話,重學前端。我將會分享一些關於前端一些入門筆記(固然有什麼錯誤還請糾正),讓那些和我同樣,對於前端的瞭解(狹義)的人,開始從新認識這個,廣闊無際的前端世界,對於技術從新包含這敬畏之心。webpack

如何學習前端?ios

針對知識點的各個擊破策略

2 基本功考察

2.1 關於html

  1. html語義化標籤的理解;
  2. 結構化的理解;
  3. 可否寫出簡潔的html結構;
  4. SEO優化
  5. h5中新增的屬性; 如自定義屬性data, 類名className等, 新增表單元素, 拖拽Drag
  6. h5中新增的API, 修改的API, 廢棄的API 稍做了解 (離線存儲, audio, video)

2.2 關於CSS

  1. CSS選擇器( 三大特性)
  2. BFC機制
  3. 盒模型

css入門筆記(上) juejin.im/post/5cc569…

  1. CSS模塊化開發(封裝),SCSS和LESS的使用
  1. 屏幕適配 以及 頁面自適應
  1. CSS3中新增的選擇器
  2. CSS3中新增的屬性, transform trasition animation等...

css入門筆記(下) juejin.im/post/5d98b1…

2.3 關於佈局

  1. 標準文檔流(padding + margin + 負margin) + 浮動float + 定位 left + right + top + bottom
  2. 百分比佈局: px單位 用 %num代替, 佔父級元素的百分比
  3. flex彈性佈局: 主軸 輔助軸的幾個屬性
  4. grid柵格佈局: 使用框架中的類名來替代: 本質上仍是百分比佈局

2.4 關於JS基礎 (完成)

  1. 變量數據類型及檢測: 基本 + 引用
  2. 運算符: 算術 + 條件 + 邏輯 + 位 + 短路, 隱式轉換等
  3. 條件, 循環, 異常處理 if switch(){case xxx:} try catch finally throw
  4. 函數定義, 調用方式(apply, call, 直接調用), 傳參: 實參給形參賦值
  5. 字符串, 數組, 對象經常使用API

JavaScript基礎入門筆記   juejin.im/post/5caaf9…

2.5 正則表達式

2.6 關於JS高級

  1. 做用域, 做用域鏈, 閉包
  2. 原型, 原型鏈, 繼承
  3. 函數上下文, this指向
  4. js的運行機制, 事件隊列和循環
  5. 同步, 異步編程

預解釋做用域this juejin.im/post/5cc6b3…

JavaScript | 異步處理 juejin.im/post/5cd97d…

2.7 關於瀏覽器

  1. 瀏覽器的構成和運行機制
  2. 瀏覽器內核
  3. 瀏覽器交互: BOM和DOM相關webApi, 監聽事件
  4. 瀏覽器緩存機制
  5. 瀏覽器的渲染原理
  6. 瀏覽器的安全性: 跨域 和 攻擊

2.8 關於網絡協議 (完成)

  1. HTTP協議
  2. Ajax原理
  3. axios

http與ajax入門筆記  juejin.im/post/5cab02…

axios的使用說明  juejin.im/post/5d117f…

2.9 cookie, session, token

2.10 關於ES6語法 (完成)

  1. 字符串, 數組, 對象 擴展的api
  2. 變量擴展: let const 解構賦值 塊級做用域
  3. 函數擴展: 箭頭函數 默認參數, rest參數
  4. 展開運算符, 模板字符串
  5. set 和 map數據結構
  6. 迭代器和生成器函數 next 和 yield的理解
  7. proxy對象 屬性代理器: 屬性的讀取(get)和設置(set)相關操做
  8. promise對象, 異步編程的解決方案
  9. async + await: 異步編程的終極方案 promise + generator的語法糖
  10. class語法 構造函數的語法糖
  11. 模塊化編程 export + import 的 導出和導入

ECMAScript 6入門筆記 juejin.im/post/5c81dd…

2.11 VUE基礎

  1. 基本指令
  2. 實例的 屬性 和 方法
  3. 實例的生命週期
  4. 組件基礎: 建立,註冊,添加屬性方法,套用等...
  5. 組件通訊傳值  父子, 兄弟, 跨級
  6. 插槽slot 等...

Vue.js 2.0 手把手入門筆記 juejin.im/post/5d08b8…

2.12 VUE高級

  1. vue-router: 搭建SPA
  • 路由,組件的配置
  • 路由間的傳值
  • 路由跳轉
  • 路由的導航守衛
  • 記住在router.js 和 組件頁面中的使用方式
  1. vuex: 狀態管理: 數據倉庫store
  • 實例化倉庫的5大屬性的使用
  • state, getters, mutations, actions, modules
  • 輔助函數mapState等..., 倉庫中計算屬性的映射, 方便操做
  • 記住在 store.js 和 組件中 使用方式

2.13 VUE深刻, 源碼閱讀

  1. 數據響應式原理
  2. virtual dom
  3. diff 算法
  4. nextTick等等...

3 工程能力考察

3.1 項目能力

  1. vue-cli腳手架搭建 和 功能配置 vue.config.js
  2. webpack的經常使用配置
  3. 項目構建 打包
  4. 熟悉各種框架的文檔...
  5. UI框架: Bootstrap, MUI, Element-ui等
  6. 經常使用的插件整理, 整理一個本身插件庫, 封裝本身的方法庫,組件庫
  7. 經常使用的工具熟練度
  8. PC端 和 移動端開發注意事項
  9. 經驗總結: 快速肯定項目的技術選型
  10. 坑點總結: 項目遇到坑坑坑!!!
  11. 項目中的性能優化記錄 ( 都是細節點...多記錄 )
  12. 需求文檔的理解, 能夠結合 項目流程圖, UML圖
  13. 問題解決能力: (bug定位調試, 查找文檔, 尋求他人...)
  14. 記錄習慣養成

3.2 模塊化, 組件化開發能力

  1. 項目分類; 各種文件整理,分類
  2. 各種功能封裝
  3. 組件和功能模塊的抽離, 解耦, 複用

3.3 前端優化方案 (完成學習)

  1. 優化css
  2. 優化圖片
  3. 優化js
  4. 優化html
  5. 移動端
  6. cookie
  7. 服務器端

前端優化方案 juejin.im/post/5cab0f…

4 內功考察:

4.1 面向對象的編程思想

  1. 類的抽象
  2. 對象的封裝, 繼承
  • 爲了更好的去管理數據, 分類數據     實現高內聚, 低耦合

4.2 設計模式

設計模式感受也是 將面向對象思想 再度抽象成現實中 某些特定模式
數據結構和算法

學習經常使用的排序搜索算法, 順序表,鏈表,棧,隊列,樹,堆 結構等等...
考驗你的 抽象思惟 和 數學功底了
將現實需求 抽象成 計算機代碼 的思惟能力

5 附加技能考察:

5.1 學習能力

  1. 持續學習的態度--博客, 筆記記錄
  2. 技術論壇活躍度高, 問答多
  3. GitHub開源項目參與

5.2 瞭解一門後端語言

  1. python, node.js, php等...
  2. 數據庫mysql,redis,mongodb.  sql的操做語句, mongo的操做語句, redis操做語句
  3. node + express 搭建本地服務等
  4. egg()

5.3 系統編程

  1. Linux命令行操做, 系統文件管理
  2. 多任務, 多線程, 多進程, 協程, 併發, 並行, 串行, 同步, 異步等概念的理解
相關文章
相關標籤/搜索