javascript - 如果我有jQuery背景,“在AngularJS中思考”?



7 Answers

勢在必行→陳述性

在jQuery中, 選擇器用於查找DOM元素,然後將事件處理程序綁定/註冊到它們。 當事件觸發時,執行(命令性)代碼以更新/更改DOM。

在AngularJS中,您需要考慮視圖而不是DOM元素。 視圖是包含AngularJS 指令的 (聲明性)HTML。 指令為我們幕後設置了事件處理程序,並為我們提供了動態數據綁定。 選擇器很少使用,因此對ID(以及某些類型的類)的需求大大減少。 視圖與模型相關 (通過範圍)。 視圖是模型的投影。 事件更改模型(即數據,範圍屬性)以及投影這些模型的視圖會“自動”更新。

在AngularJS中,考慮模型,而不是jQuery選擇的DOM元素來保存您的數據。 將視圖視為這些模型的投影,而不是註冊回調來操縱用戶看到的內容。

關注點分離

jQuery使用不引人注目的JavaScript - 行為(JavaScript)與結構(HTML)分離。

AngularJS使用控制器和指令(每個控制器和指令可以有自己的控制器和/或編譯和鏈接函數)來從視圖/結構(HTML)中刪除行為。 Angular還提供服務過濾器,以幫助分離/組織您的應用程序。

另請參見https://stackoverflow.com/a/14346528/215945

應用設計

設計AngularJS應用程序的一種方法:

  1. 想想你的模特。 為這些模型創建服務或您自己的JavaScript對象。
  2. 想想你想要如何展示你的模特 - 你的觀點。 為每個視圖創建HTML模板,使用必要的指令來獲取動態數據綁定。
  3. 將控制器連接到每個視圖(使用ng-view和routing,或ng-controller)。 讓控制器只查找/獲取視圖完成其工作所需的任何模型數據。 使控制器盡可能薄。

原型繼承

你可以在不知道JavaScript原型繼承如何工作的情況下使用jQuery做很多事情。 在開發AngularJS應用程序時,如果您對JavaScript繼承有很好的理解,就可以避免一些常見的陷阱。 推薦閱讀: AngularJS中範圍原型/原型繼承的細微差別是什麼?

javascript jquery angularjs

假設我熟悉在jQuery開發客戶端應用程序,但現在我想開始使用AngularJS 。 你能描述一下必要的範式轉變嗎? 以下是一些可能有助於您確定答案的問題:

  • 如何以不同方式構建和設計客戶端Web應用程序? 最大的區別是什麼?
  • 我應該停止做什麼/使用什麼; 我應該開始做什麼/使用什麼呢?
  • 有任何服務器端考慮因素/限制嗎?

我不是在尋找jQueryAngularJS之間的詳細比較。




你能描述一下必要的範式轉變嗎?

勢在必行與陳述

使用jQuery,您可以一步一步地告訴DOM需要發生什麼。使用AngularJS您可以描述您想要的結果,但不能描述如何執行此操作。更多關於here。另外,請查看Mark Rajcok的答案。

如何以不同方式構建和設計客戶端Web應用程序?

AngularJS是一個使用MVC模式的完整客戶端框架(查看其圖形表示)。它非常注重關注點的分離。

最大的區別是什麼? 我應該停止做什麼/使用什麼; 我應該開始做什麼/使用呢?

jQuery是一個庫

AngularJS是一個漂亮的客戶端框架,高度可測試,它結合了許多很酷的東西,如MVC,依賴注入,數據綁定等等。

它側重於關注點和測試(單元測試和端到端測試)的分離,這有助於測試驅動的開發。

最好的方法是通過他們的精彩教程。你可以在幾個小時內完成這些步驟; 但是,如果你想掌握幕後的概念,它們包含了無數的參考資料以供進一步閱讀。

有任何服務器端考慮因素/限制嗎?

您可以在已經使用純jQuery的現有應用程序上使用它。但是,如果您想充分利用AngularJS功能,可以考慮使用RESTful方法對服務器端進行編碼。

這樣做將允許您利用他們的資源工廠,它創建服務器端RESTful API的抽象,並使服務器端調用(獲取,保存,刪除等)非常容易。




jQuery的

jQuery製作了一些可笑的長命令,比如getElementByHerpDerp簡短和跨瀏覽器。

AngularJS

AngularJS允許您創建自己的HTML標記/屬性,這些標記/屬性可以很好地處理動態Web應用程序(因為HTML是為靜態頁面設計的)。

編輯:

說“我有一個jQuery背景我如何在AngularJS中思考?” 就像說“我有一個HTML背景我如何在JavaScript中思考?” 您提出問題的事實表明您很可能不理解這兩種資源的基本目的。這就是為什麼我選擇通過簡單地指出基本區別來回答問題,而不是通過列表說“AngularJS使用指令,而jQuery使用CSS選擇器來創建一個jQuery對象來執行此操作等等......” 。這個問題不需要冗長的答案。

jQuery是一種使瀏覽器中的JavaScript編程更容易的方法。更短,跨瀏覽器的命令等

AngularJS擴展了HTML,因此您不必<div>為了創建應用程序而將所有地方放在一起。它使HTML實際上適用於應用程序而不是它的設計目標,即靜態的教育網頁。它使用JavaScript以迂迴的方式實現這一點,但從根本上說它是HTML的擴展,而不是JavaScript。




這些是一些非常好的,但冗長的答案。

總結一下我的經歷:

  1. 控制器和提供者(服務,工廠等)用於修改數據模型,而不是HTML。
  2. HTML和指令定義佈局和與模型的綁定。
  3. 如果您需要在控制器之間共享數據,請創建服務或工廠 - 它們是在應用程序中共享的單例。
  4. 如果需要HTML小部件,請創建指令。
  5. 如果您有一些數據,現在正在嘗試更新HTML ...停止!更新模型,並確保您的HTML綁定到模型。



他們是蘋果和橘子。你不想比較它們。他們是兩件不同的事。AngularJs已經內置了jQuery lite,它允許你執行基本的DOM操作,甚至不包括完整的jQuery版本。

jQuery是關於DOM操作的。它解決了所有跨瀏覽器的痛苦,否則你將不得不處理,但它不是一個允許你將你的應用程序劃分為AngularJS等組件的框架。

AngularJs的一個好處是它允許您在指令中分離/隔離DOM操作。有內置指令可供您使用,例如ng-click。您可以創建自己的自定義指令,其中包含所有視圖邏輯或DOM操作,因此您最終不會將DOM操作代碼混合在應該處理業務邏輯的控制器或服務中。

Angular將您的應用分解為 - 控制器 - 服務 - 視圖 - 等

還有一件事,就是指令。它是一個可以附加到任何DOM元素的屬性,你可以在其中使用jQuery,而不必擔心你的jQuery會與AngularJs組件發生衝突或者與它的架構混淆。

我從參加過的聚會中聽到,Angular的一位創始人表示他們非常努力地將DOM操作分開,所以不要試圖將它們包括在內。




我發現這個問題很有意思,因為我第一次認真接觸JavaScript編程的是Node.js和AngularJS。我從來沒有學過jQuery,我想這是件好事,因為我不需要忘記任何事情。事實上,我主動避免jQuery解決方案來解決我的問題,而只是尋找一種“AngularJS方式”來解決它們。所以,我想我對這個問題的回答基本上歸結為“想像一個從未學過jQuery的人”,並避免任何直接合併jQuery的誘惑(顯然AngularJS在某種程度上在幕後使用它)。




作為一個JavaScript MV *初學者,純粹關注應用程序架構(而不是服務器/客戶端問題),我肯定會推薦以下資源(我很驚訝還沒有提到):JavaScript設計模式,作者:Addy Osmani ,作為不同JavaScript設計模式的介紹。本答案中使用的術語來自上面的鏈接文檔。我不打算在接受的答案中重複措辭。相反,這個答案鏈接到為AngularJS(和其他庫)提供動力的理論背景

像我一樣,你會很快意識到AngularJS(或者Ember.js,Durandal和其他MV *框架)是一個複雜的框架,它匯集了許多不同的JavaScript設計模式。

我發現它也更容易,以測試(1)天然的JavaScript代碼和(2)對於這些模式中的每一個更小的文庫分別潛水成一個全球框架之前。這使我能夠更好地理解框架所針對的哪些關鍵問題(因為您個人面臨問題)。

例如:

注意:這個列表不完整,也不是'最好的圖書館'; 它們恰好是我使用的庫。這些庫還包括更多模式,提到的模式只是它們的主要焦點或原始意圖。如果您覺得此列表中缺少某些內容,請在評論中提及,我將很樂意添加它。






Related