1 前言
本人學藝不精,沒有進行過任何系統化學習,曾經認爲前端無非就是達成各類端的運行就能夠了,在網頁中奔跑,在微信小程序上奔跑,在app上奔跑,會用些前輩們造就的輪子。只要能用,那就是完成了。後來發現這一切並無那麼簡單...php
我所認爲的前端css
大二那年,我加入了專門爲比賽而誕生的團隊。爲了快速的入門,學習了關於<div>
和盒子模型,float:left
。這些能夠速成頁面的法門,在沒有語義化的世界裏,其實html中<div>
、<a>
、<img>
。已經足夠能夠統一網頁前端的世界。而後就是不斷的學習簡單版的css,padding
、margin
、margin
、border
、background
、width
、height
,其餘的一概百度一下,你就知道
。徹底已經知足了,基本網頁需求,關鍵是寫的還蠻快的。那麼js呢,其實初學者,只要懂一些c語言的運算符合數據類型,加上一個jQuery
的選擇器,難道非要去學習dom與bom?那些原本就須要時間和積累的東西嘛。咱們只會朝着一個方向,就是敏捷開發,快速開發。html
比賽的時候,還須要本身寫一個後端,使用一門名曰php
的語言,稍微瞭解了一下mvc
的設計模式,靠着記憶力背出了鏈接數據庫的語句。有一個叫作phpMyAdmin
巧妙的生成了mysql的語句,學上增刪改查,4個函數,就覺得拿下了後端的世界。前端
開始工做了,咱們寫着簡陋的ajax
,調用着前輩們寫好的方法,開始進行了一場拼圖開發,這一切來得太簡單,太容易了,彷佛沒有經歷過什麼痛苦,就已經成了所謂的"全棧工程師",咱們會寫前端,也會後端,對於數據最大理解就是將數據存儲在一個教myqsql
的數據中。vue
工做了2年後,看到了社招的題目,猛然間五味雜陳,我看不懂什麼叫作document,對於es6也就能說說let
、const
、var
和不知因此的箭頭函數()=>
。關於語義化也知之甚少。對於vue
的理解也僅僅侷限於雙向綁定。webpack
的使用無非就是百度一下,你就懂了。固然也會有人和我同樣,對於webpack,侷限在vue-cil
腳手架上。前端的優化呢,使用工具壓縮一下圖片,將ajax的同步改爲異步,防止頁面堵塞。node
難道這些就是前端?python
對此告誡那些剛剛入門對於代碼世界充滿但願的人——**全部速成的東西,沒一個是好東西。**咱們老是喜歡一些,敲下回車,立刻有效果的東西。咱們對於原理而言,咱們對金錢更加感興趣,咱們更喜歡關注一些,好比說這個行業目前本身值多少錢,這樣實際的東西。mysql
對此感謝掘金寫做者計劃,可以讓我可以表達出,這2年對於前端的弊端,看到本身深深的不足。用上一句winter大神的話,重學前端
。我將會分享一些關於前端一些入門筆記(固然有什麼錯誤還請糾正),讓那些和我同樣,對於前端的瞭解(狹義)的人,開始從新認識這個,廣闊無際的前端世界,對於技術從新包含這敬畏之心。webpack
如何學習前端?ios
針對知識點的各個擊破策略
2 基本功考察
2.1 關於html
- html語義化標籤的理解;
- 結構化的理解;
- 可否寫出簡潔的html結構;
- SEO優化
- h5中新增的屬性; 如自定義屬性data, 類名className等, 新增表單元素, 拖拽Drag
- h5中新增的API, 修改的API, 廢棄的API 稍做了解 (離線存儲, audio, video)
2.2 關於CSS
- CSS選擇器( 三大特性)
- BFC機制
- 盒模型
css入門筆記(上) juejin.im/post/5cc569…
- CSS模塊化開發(封裝),SCSS和LESS的使用
- 屏幕適配 以及 頁面自適應
- CSS3中新增的選擇器
- CSS3中新增的屬性, transform trasition animation等...
css入門筆記(下) juejin.im/post/5d98b1…
2.3 關於佈局
- 標準文檔流(padding + margin + 負margin) + 浮動float + 定位 left + right + top + bottom
- 百分比佈局: px單位 用 %num代替, 佔父級元素的百分比
- flex彈性佈局: 主軸 輔助軸的幾個屬性
- grid柵格佈局: 使用框架中的類名來替代: 本質上仍是百分比佈局
2.4 關於JS基礎 (完成)
- 變量數據類型及檢測: 基本 + 引用
- 運算符: 算術 + 條件 + 邏輯 + 位 + 短路, 隱式轉換等
- 條件, 循環, 異常處理 if switch(){case xxx:} try catch finally throw
- 函數定義, 調用方式(apply, call, 直接調用), 傳參: 實參給形參賦值
- 字符串, 數組, 對象經常使用API
JavaScript基礎入門筆記 juejin.im/post/5caaf9…
2.5 正則表達式
2.6 關於JS高級
- 做用域, 做用域鏈, 閉包
- 原型, 原型鏈, 繼承
- 函數上下文, this指向
- js的運行機制, 事件隊列和循環
- 同步, 異步編程
預解釋做用域this juejin.im/post/5cc6b3…
JavaScript | 異步處理 juejin.im/post/5cd97d…
2.7 關於瀏覽器
- 瀏覽器的構成和運行機制
- 瀏覽器內核
- 瀏覽器交互: BOM和DOM相關webApi, 監聽事件
- 瀏覽器緩存機制
- 瀏覽器的渲染原理
- 瀏覽器的安全性: 跨域 和 攻擊
2.8 關於網絡協議 (完成)
- HTTP協議
- Ajax原理
- axios
http與ajax入門筆記 juejin.im/post/5cab02…
axios的使用說明 juejin.im/post/5d117f…
2.9 cookie, session, token
2.10 關於ES6語法 (完成)
- 字符串, 數組, 對象 擴展的api
- 變量擴展: let const 解構賦值 塊級做用域
- 函數擴展: 箭頭函數 默認參數, rest參數
- 展開運算符, 模板字符串
- set 和 map數據結構
- 迭代器和生成器函數 next 和 yield的理解
- proxy對象 屬性代理器: 屬性的讀取(get)和設置(set)相關操做
- promise對象, 異步編程的解決方案
- async + await: 異步編程的終極方案 promise + generator的語法糖
- class語法 構造函數的語法糖
- 模塊化編程 export + import 的 導出和導入
ECMAScript 6入門筆記 juejin.im/post/5c81dd…
2.11 VUE基礎
- 基本指令
- 實例的 屬性 和 方法
- 實例的生命週期
- 組件基礎: 建立,註冊,添加屬性方法,套用等...
- 組件通訊傳值 父子, 兄弟, 跨級
- 插槽slot 等...
Vue.js 2.0 手把手入門筆記 juejin.im/post/5d08b8…
2.12 VUE高級
- vue-router: 搭建SPA
- 路由,組件的配置
- 路由間的傳值
- 路由跳轉
- 路由的導航守衛
- 記住在router.js 和 組件頁面中的使用方式
- vuex: 狀態管理: 數據倉庫store
- 實例化倉庫的5大屬性的使用
- state, getters, mutations, actions, modules
- 輔助函數mapState等..., 倉庫中計算屬性的映射, 方便操做
- 記住在 store.js 和 組件中 使用方式
2.13 VUE深刻, 源碼閱讀
- 數據響應式原理
- virtual dom
- diff 算法
- nextTick等等...
3 工程能力考察
3.1 項目能力
- vue-cli腳手架搭建 和 功能配置 vue.config.js
- webpack的經常使用配置
- 項目構建 打包
- 熟悉各種框架的文檔...
- UI框架: Bootstrap, MUI, Element-ui等
- 經常使用的插件整理, 整理一個本身插件庫, 封裝本身的方法庫,組件庫
- 經常使用的工具熟練度
- PC端 和 移動端開發注意事項
- 經驗總結: 快速肯定項目的技術選型
- 坑點總結: 項目遇到坑坑坑!!!
- 項目中的性能優化記錄 ( 都是細節點...多記錄 )
- 需求文檔的理解, 能夠結合 項目流程圖, UML圖
- 問題解決能力: (bug定位調試, 查找文檔, 尋求他人...)
- 記錄習慣養成
3.2 模塊化, 組件化開發能力
- 項目分類; 各種文件整理,分類
- 各種功能封裝
- 組件和功能模塊的抽離, 解耦, 複用
3.3 前端優化方案 (完成學習)
- 優化css
- 優化圖片
- 優化js
- 優化html
- 移動端
- cookie
- 服務器端
前端優化方案 juejin.im/post/5cab0f…
4 內功考察:
4.1 面向對象的編程思想
- 類的抽象
- 對象的封裝, 繼承
- 爲了更好的去管理數據, 分類數據 實現高內聚, 低耦合
4.2 設計模式
設計模式感受也是 將面向對象思想 再度抽象成現實中 某些特定模式
數據結構和算法
學習經常使用的排序搜索算法, 順序表,鏈表,棧,隊列,樹,堆 結構等等...
考驗你的 抽象思惟 和 數學功底了
將現實需求 抽象成 計算機代碼 的思惟能力
5 附加技能考察:
5.1 學習能力
- 持續學習的態度--博客, 筆記記錄
- 技術論壇活躍度高, 問答多
- GitHub開源項目參與
5.2 瞭解一門後端語言
- python, node.js, php等...
- 數據庫mysql,redis,mongodb. sql的操做語句, mongo的操做語句, redis操做語句
- node + express 搭建本地服務等
- egg()
5.3 系統編程
- Linux命令行操做, 系統文件管理
- 多任務, 多線程, 多進程, 協程, 併發, 並行, 串行, 同步, 異步等概念的理解