web前端入門者的知識體系包括哪些東西呢?

来源:https://www.cnblogs.com/Aa123321/archive/2018/11/16/9969639.html
-Advertisement-
Play Games

入門者的知識體系包括哪些東西呢,下麵是我的個人看法,按照這個流程走不一定立刻成為大牛,至少能讓入門者抓住重點一步步走下去: 1. 基本工具使用Git/GitHub的熟練使用,編輯器(sublime、webstrom、atom、vscode)的體驗區分與使用,chrome開發調試工具的使用,Photo ...


入門者的知識體系包括哪些東西呢,下麵是我的個人看法,按照這個流程走不一定立刻成為大牛,至少能讓入門者抓住重點一步步走下去:

1. 基本工具使用
Git/GitHub的熟練使用,編輯器(sublime、webstrom、atom、vscode)的體驗區分與使用,chrome開發調試工具的使用,Photoshop的簡單使用,FQ軟體、筆記工具、流程圖工具、思維導圖工具的瞭解使用


2. 靜態頁面功底
doctype、亂碼、meta、字體原理、字體圖標、常見標簽的用法、HTML書寫規範、CSS選擇器使用及權重、CSS常見樣式的寫法、雪碧圖、inline-block特性與使用、line-height與vertical-align用法、盒模型種類、浮動的特性與應用(兩欄三欄佈局)、清除浮動clearfix、BFC、定位的特性與使用場景、z-index、浮動與負邊距的應用(聖杯佈局雙飛翼佈局)、常見的CSS Hack、邊框+偽元素+定位的應用(做三角、tooltip、繪製簡單的效果)、CSS編碼規範等。
掌握這些功底後力量上你可以用合理規範的方式寫出任何你看的到的靜態頁面,你有底氣把自己寫的HTML CSS代碼拿給任何一個大牛來評判,給你一個頁面你會無視效果直接審查元素指出源碼中的不足並提出改進意見。


3. JS與JQuery功底
頁面渲染基本原理、白屏與FOUC、數據類型與類型轉換、引用類型與基礎類型的區別、深淺拷貝、聲明前置、函數聲明與函數表達式、字元串的各種操作、正則的各種操作、貪婪模式與非貪婪模式、日期數學函數各種操作、作用域與作用域鏈的概念與應用、閉包的概念與應用、IIFE的封裝性、setTimeout相關概念、事件冒泡捕獲機制、綁定事件的相容性封裝、事件代理、ajax的原理與封裝、跨域的幾種方式與實現、jsonp的封裝、原生js實現常見效果的實現(懶載入、點擊載入、回到頂部、導航條、Dialog、Tab等)、jquery的語法與使用、jquery實現各種常見效果(懶載入、點擊載入、回到頂部、導航條、Modal模態框、Tab切換、各種輪播、瀑布流佈局、木桶佈局、懶載入+ajax+瀑布流的使用等)

做了這些後,你會對代碼的規範性和美感有一定的認識,會以寫出精簡、好看、復用性高的代碼為目標而不是以實現效果為目標。分析、拆解未知問題的能力有所提高,習慣於使用google搜索文檔並掌握一些搜索技巧、習慣看英文文檔、熟練使用調試工具定位錯誤解決問題,嘗試總結紀錄甚至分享心得。
到這裡,你的能力甚至能力超過一些所謂的一兩年甚至兩三年工作經驗的前端開發者。在交流群里慢慢的以準確、睿智的視角幫初學者解決問題。你開始發現代碼不管怎麼優化總是沒那麼滿意,你會為別人更優雅的解決方式嘆服抱怨自己太笨,你在空餘時間默默實現你在很久以前羡慕的效果,默默的開始美化自己的博客記錄心得,你開始覺得自己玩High了。對於找工作反而不急了。

4. JS進階
OOP的概念、構造函數創建對象的方式、原型與原型鏈(會畫圖)、繼承的寫法、功能模塊化的寫法、常見的設計模式(工廠、單例、發佈訂閱)、面向對象的應用(輪播組件、Tab組件、曝光組件、日曆組件、Dialog組件等)、JQurey插件的封裝、JQuery核心源碼解讀、HTTP&webserver相關知識點、CMD&AMD規範、模塊化寫法 (Requirejs或者webpack使用)、npm的使用、工程化概念與應用(gulp)、HTML5新功能、純CSS做一些有意思的特效和動畫(如按鈕、漸變特效、loading、CSS3輪播、3D輪播等)、響應式的應用(寫一個bootstrap的柵格系統)、CSS預處理等

到這裡之後,基本功已經很牢靠了,可以去看node教程、去看ES6語法、去嘗試用express搭建個博客、去跑跑React Angular里的Demo,在一番體驗後你清楚的知道它們的應用場景與利弊之道哪些需要深入哪些需要瞭解。

在學的同時在去多關註些大牛博客前端社區(瞭解跟進新技術),需要找工作的可以多做做筆試面試題(查缺補漏),如果是應屆生需要抽空補一補數據結構演算法。網路上東西太多太雜,在自己有一定判斷力之後在去吸收些精華,否則很容易陷入迷茫不知道如何入手。那些所謂的讓人眼花繚亂的新技術在基礎扎實的前提下很容易快速介入,不要捨本逐末,丟了西瓜撿芝麻。

關於看書
在無人指導的情況下,看書是一種學習途徑。比如《JS高級程式設計》《權威指南》是前端開發者必看書籍。但對於入門的同學來說看著費勁很難看懂、而且太枯燥很難堅持下去。我的建議是好的書籍是學習的補充,在有一定積累後可以把書作為查漏補缺的工具,平時偶爾翻一翻,對知識點不是很清楚可以針對性翻一翻。書是買來看的,不是找心理安慰的,一本一本買,一本一本看。對不喜歡看書的同學,也不要盲目跟風強迫自己做不喜歡的事失去了對前端的樂趣

關於入門學習資料
學習資料和看書一樣,不要上去就收集一大堆自己永遠都不會在看第二眼的資料(雖然裡面有很多精華)。 HTML CSS可以從MDN看起CSS | MDN  。 在學習的時候 心裡一定有個知識體系脈絡圖,參考我上面寫的知識體系。一個知識點一個知識點的去學習去查找,如果這個資料沒有在去google下一個資料,這個時候很多大牛的博客很多推薦資料才真的對你有價值,不至於自己在一些無關緊要的地方浪費大量時間和精力而不自知。

 推薦下我自己創建的web前端資料分享群606721798,這是web前端學習交流的地方,不管你是小白還是大牛,小編都歡迎,不定期分享乾貨,包括我整理的一份適合零基礎學習web前端的資料和入門教程。 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前面說了Bootstrap4的下載和簡單使用,現在我們接著往下學習,Bootstrap4的響應式佈局主要依靠柵格系統來實現的。面老K先來講解一下Bootstrap4的柵格系統,讓你能夠更快的瞭解Bootstrap4.(PS:更詳細的介紹請訪問原K先生的博客) Bootstrap4柵格系統 柵格系統是 ...
  • 有時候,我們需要在實例創建過程中進行一些初始化的工作,以幫助我們完成項目中更複雜更豐富的需求開發,針對這樣的需求,Vue提供給我們一系列的鉤子函數。 vue生命周期 beforeCreate 在實例初始化之後,數據觀測 (data observer) 和 event/watcher 事件配置之前被調 ...
  • 日期插件rolldate.js的使用 下載地址:http://www.jq22.com/jquery-info19834 效果: 代碼: ...
  • 1.起因 在上個項目中,客戶希望時間選擇插件可以是ios風格的那種,但是找了很久,發現並沒有用vue的ios風格時間插件,於是自己便自己造了一個輪子. 2.插件效果 3.插件依賴以及安裝使用 插件依賴於better-scroll和vue,安裝流程如下: 4.源碼查看與調試 可以在我的Github上查 ...
  • 效果圖 (通過js實現對時間處理); 這是時間處理的函數, 代碼註釋說明的也還清楚, 這是文件鏈接,可以直接打開,保存一下 https://blog-static.cnblogs.com/files/yk95/commonFunc.js 頁面數據是自己模擬的 接著頁面中去使用 時間處理的函數 和 假 ...
  • 什麼是JavaScript JavaScript的起源 JavaScript的組成 ...
  • css部分 .ovfHiden{ overflow: hidden; height: 100%; } js部分 $(".btn1").click(function(){ $('html,body').addClass('ovfHiden'); //使網頁不可滾動 $(".layer").show() ...
  • css中url(../images/1.jpg)路徑是相對於index.css的 js中url(images/1.jpg)路徑是相對於index.html的,並不是相對於index.js ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...