【Angular專題】——(1)Angular,孤傲的變革者

来源:https://www.cnblogs.com/dashnowords/archive/2018/12/08/10087041.html
-Advertisement-
Play Games

[TOC] 一. 漫談Angular ,來自Google的前端 框架,與 ,`Vue 7.0 Angularjs1.0 jQuery Angular2.0 Angular`一直在用行動詮釋著自己的孤傲和才華。 非常喜歡引入和傳播思想層面的概念,它把那些被公認為正確優雅且有助於工程實踐的事物帶給前端, ...


目錄

一. 漫談Angular

Angular,來自Google的前端SPA框架,與React,Vue並稱前端框架的三駕馬車,前些日子剛發佈了7.0版本。它是一個十足的革命者,每一次亮相,都會把新的思想和軟體層面的實現提供給開發者,從Angularjs1.0時代推翻jQuery的統治地位,到Angular2.0時代基於Typescript的全面升級,再到現在每半年一個大版本的高速更新迭代,不斷革新著前端代碼的編寫方式,也推動著前端開發工程化和正規化的發展,可以說Angular一直在用行動詮釋著自己的孤傲和才華。

Angular非常喜歡引入和傳播思想層面的概念,它把那些被公認為正確優雅且有助於工程實踐的事物帶給前端,而並不在乎這些事物來自前端或者後端,也不在乎新的概念起源於哪個編程語言,它不發明概念,只是概念的搬運工,它似乎總是在說“這個想法是對的,那我們在Angular里實現它吧”,造成的直接結果就是學習曲線異常陡峭,許多初級和中級的開發者淺嘗輒止,直接棄坑投奔ReactVue陣營,所有的創新都會面臨這樣的窘境,但Angular似乎並不在乎,升級迭代的速度反而更快了。事實證明這種精英門檻思維是正確的,它的確讓很多初中級開發者無所適從,但同時也讓中高級前端開發者和從後端轉到前端開發的工程師受益,工程化的工具面向對象的思想高仿Java的語法強類型的限制,一個個特性都對開發團隊的整體素養提出了更高的要求,同時也讓代碼的質量也有了更多的保障。

Angular是有生命的,與其說它是一個框架,倒不如說它是一個老師,不僅教授編程,也傳播思想,嚴厲卻有活力。如果說Vue能激發開發者的興趣,讓你快速上手拿出作品,React能夠強迫開發者深耕javascript語言本身的特性和組件化思想,那麼Angular帶給前端開發者的,更多的是正統的面向對象開發和軟體工程的思維方式,它逼迫你改變散漫的編程習慣,強迫你學習新的實現方式,漸漸地你甚至忘記了自己是一個前端,那麼恭喜你,說明你已經脫離了初級水平。

如果一件事情是軟體工程師應該懂的,那麼你就應該懂。在我眼裡,這才是Angular帶給前端開發者最有價值的思想,因為內心深處的自我認知和定位會決定一個人未來所能達到的高度。

二. 如果你還在使用Angularjs

提到Angular體系,許多開發者由於入行較晚的緣故,很有可能還在使用Angularjs1.X版本進行開發或維護,並沒有必要覺得自卑或者沮喪。Angular的開發者並不見得就比Angularjs1.X的開發者更厲害,不誇張的說,Angularjs1.X中所包含的精華知識對很多開發者來說可能一輩子都學不完,你需要關註其底層原理,把知識點延伸開去學習,而不只是每天沒完沒了地寫頁面綁事件發請求然後自我陶醉。

Angularjs1.X被認為是模塊化的開發框架,而Angular,Vue,React被認為是組件化的框架,從常見語法的角度來看的確是這樣,但這並不代表Angularjs1.X不能進行組件化開發,只是門檻略高,Angularjs1.X中組件化的實現是基於自定義指令的,1-2年經驗卻未嘗試過使用自定義指令的開發者比比皆是,造成的直接結果就是常常一個controller中的代碼好幾千行,代碼里混合著各種DOM操作,不僅性能很難保障,維護難度也是噩夢級別的。

如果面對這樣的情況你還沒有解決思路,那我並不建議你開始Angular技術棧的學習,而應該先去搞清楚如何在自己最熟悉的框架中來應用組件化開發的思想。比如面對一個4000行的controller,先考慮一下自己能不能通過拆分子路由和組合視圖將其重構為3-4個大模塊,這樣每個大模塊就有約1000行代碼,再考慮一下能否把大模塊拆分成3-4個小模塊,controller只傳入必要的啟動參數,然後在小模塊中實現業務自治,並通過controller來實現不同小模塊之間的通訊,這樣每個模塊的代碼量基本就可以做到小於500行,接著把DOM操作儘量整合進指令的link函數中,配合框架自身的生命周期特點來運行。如果上面的描述你不知道如何做,那麼就靜下心好好查查資料,學習實踐一下。如果你已經知道該怎麼實現,那麼就可以開啟Angular2的學習了,你會在其中看到很多很多自己熟悉的東西。

三. 我計劃這樣學習Angular技術棧

說實話,我接觸Angular才2個禮拜,但是我很喜歡它,嚴謹,優雅,最重要的是VSCode的主題很漂亮。我的學習計劃大約是這樣,如果感興趣,歡迎一起行動起來:

  • 1.慕課網的免費教程里有一個Angular的課程和一個Angular-Cli的課程,可以帶你快速入門。(已完成)

  • 2.閱讀官方文檔:Angular中文網地址:https://www.angular.cn/

    官方文檔特別詳細,至少需要通讀一次,然後在實際開發中遇到相關問題時再來查詢。

  • 3.針對概念和原理進行專題學習

    針對概念關鍵詞展開學習是我一貫的做法,在【一統江湖的大前端(7)React.js-從開發者到工程師】中就有提及。“學習一個框架,做一個TodoList,然後就沒有然後了”,這是很多人對於新技術的學習方式,你會發現它其實並沒有什麼卵用,因為過半個月,你就會不記得自己做過什麼了(別問我怎麼知道的)。如果有實戰項目,那是最好的,實戰中的學習是最快的;如果沒有實戰項目,那麼你應該關註它的核心概念和原理,響應式編程是什麼東西,新的Angular中的DI系統有什麼變化,修飾器是如何工作的等等,框架和實現細節或許會變化,但經典思想一般都是很穩定的,你只需要反覆研究去理解它就可以了。

  • 4.分享以及撰寫技術博客

    寫博文並不是什麼高大上的事情,只是一種習慣,一種輔助自己思考和總結的習慣。最重要的是,它可以提高你打字的速度,如果你用80%的時間敲完別人100%時間才能敲完的代碼,那不就有20%的時間去學習新東西或者去寫博客了麽,我的時間基本就是這樣擠出來的。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 記錄看到或者用到的js代碼,長期更新! 判斷是否是正整數 解析: number 0 轉換成數字,再通過位移運算(|)判斷是否跟原數字相等 安全檢查javascript的類型 ps: 上述方法適用於基本的數據類型和內置對象,而對於自定義對象是無效的。 判斷一個值是否可用做數字 如果是有限數值,或者可以 ...
  • 一、說一下 首先保證node環境已經安裝完畢,npm能正常使用,安裝可自行百度,比較簡單,在此不做贅述。 二、直接開碼 安裝 註釋: express:安裝express框架 express-generator:安裝express生成器,可快速生成一個應用的骨架 -g:全局安裝 註釋: -e:簡寫,全 ...
  • echarts繪製地圖時,提供了js內部註冊,也提供了json數據手動註冊,這兩種都可以繪製對應地圖,但有一點不同的是,js內部只註冊了中國地圖和世界地圖,而json數據提供了世界,中國,中國城市的數據 手動註冊:引入json數據,使用 echarts.registerMap('china', ch ...
  • 在javascript中,當系統載入構造函授後 ,會自動在記憶體中增加一個對象,這個對象就是原型對象。構造函數和原型對象在記憶體中表現為相互獨立,但兩者之間還存在聯繫,構造函數的prototype是原型對象,而原型對象的constructor是構造函數。 創建對象的方法 字面量、構造函數、Object. ...
  • 記錄一下上傳文件時將文件數據轉為Base64的方法 通過 FileReader對象創建一個實例,然後使用 readAsDataURL方法將數據轉為Base64格式 註意: 讀取過程是非同步的 綁定onload事件,該事件在數據讀取完成後觸發 具體代碼(react項目中): const reader = ...
  • 事件委托 1. 事件流 事件流描述的是從頁面中接收事件的順序。 JS高級程式設計(第3版) 規定的事件流有三個階段:①事件 捕獲 階段、②處於 目標 階段、③事件 冒泡 階段 2. 事件委托 當需要添加的事件過多時,可以使用 事件委托 ,而事件委托實際上利用了事件 冒泡 的特性。 使用事件委托還需了 ...
  • 前端之常用標簽的使用、邊界圓角、精靈圖以及盒模型的佈局 前言 上篇博客介紹了組合選擇器,包括四種,分別是群組選擇器、後代(子代)選擇器、兄弟(相鄰選擇器)及交集選擇器;a 標簽的四大偽類選擇器,a:link、a:hover、a:active、a:visited,其中 hover 和 active 也 ...
  • 編碼 我們現在來做一個最簡單的時鐘,通過小練習來學習 Date,複習定時,然後再練習一下函數的封裝具體需求如下: 在頁面中顯示當前日期及時間,按秒更新 格式為 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss 註意位數的補齊,比如:-- 假設時間為2008年10月10日星期一的12點12 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...