2019年頂級JavaScript 框架

avaScript 是開發(fā)領(lǐng)域的重要技術(shù)之一。根據(jù) Statista 的報告，JavaScript 是 2018 年開發(fā)人員使用的最流行的編程語言，在 2019 年亦是如此。

然而，在為項目選擇恰當?shù)?JavaScript 框架時，即使對于專業(yè) JavaScript 開發(fā)人員來說，這也是一項艱巨的任務(wù)。

今天，小編就整理了幾個好用又強大的JavaScript 框架，希望能幫助更多的JavaScript 開發(fā)人員。

AngularJS

AngularJS 是最強大、最高效、最開源的 JavaScript 框架之一。它為開發(fā)人員提供了將JavaScript 與 HTML 和 CSS 結(jié)合起來的最佳條件。有超過五十萬個網(wǎng)站如 google.com、youtube.com 等正在使用 Angular。

AngularJS 是一個開源框架，用于開發(fā)動態(tài) Web 應(yīng)用程序。這個結(jié)構(gòu)框架基于客戶端技術(shù)，它集成了 HTML、JavaScript 和 CSS 的功能。這使得開發(fā)人員可以基于 HTML 構(gòu)建模板。同樣，根據(jù)應(yīng)用程序中組件的需要，開發(fā)人員還可以擴展 HTML 語法。

ReactJS

ReactJS 是另一個 JavaScript 庫，它本質(zhì)上是開源的，用于為單頁面應(yīng)用程序開發(fā)用戶界面。通過使用 React JS，你可以處理移動和 Web 應(yīng)用程序的視圖層。使用 React JS 框架，你可以輕松地開發(fā)可重用的用戶界面組件。開發(fā)人員現(xiàn)在可以開發(fā)大型應(yīng)用程序，而無需重新加載頁面就可以更新數(shù)據(jù)。React JS 主要用于構(gòu)建功能強大、性能良好的企業(yè)應(yīng)用程序。Instagram 和 Facebook 等這樣的用戶界面強化了這一 JavaScript 框架。

Facebook 開發(fā)的 React 簡單、快速且可擴展。你甚至可以將它與其他 JavaScript 庫一起使用。與其他 JavaScript 框架相比，它的代碼被簡化了，因為它使用 JavaScript 擴展 JSX 來保持語法更簡潔。React 可以輕松地與流行的 Laravel PHP 框架結(jié)合起來進行應(yīng)用程序開發(fā)。

Vue.js

Vuejs 是一個漸進式 JavaScript 庫，本質(zhì)上是輕量級的。Vuejs 與 Virtual DOM 一起使用，并利用大多數(shù)常見的 Web 技術(shù)，根據(jù)用戶的需求構(gòu)建應(yīng)用程序。Vue 使用單個文件組件和基于純 HTML 的模板。通過使用 Vue JS 框架，開發(fā)人員可以編寫實際的 CSS。

Vue 堪稱為構(gòu)建交互式 Web 界面和用戶界面以及簡單快速的應(yīng)用程序的完美解決方案。通過使用 Vue，你甚至可以開發(fā)高級單頁面 Web 應(yīng)用程序。使用 Vue 的最大好處之一就是，你可以在呈現(xiàn)過程中自動跟蹤組件的依賴關(guān)系。同樣的，在狀態(tài)改變期間需要重新呈現(xiàn)的組件由 Vue 通知給系統(tǒng)。

Ember.js

Ember 是一個開源框架，別具一格，用于開發(fā)靈活的 Web 應(yīng)用程序。當你計劃構(gòu)建一個完整的開發(fā)堆棧，或者一個大型 Web 應(yīng)用程序，或者一個單頁面應(yīng)用程序時，Ember 可以被認為是一個完美的解決方案。

Ember 也是一個 MVC 框架。它包括一個模板和視圖引擎，保證了數(shù)據(jù)變化時的自動更新，就像 AngularJS，Backbone 和 React 一樣。它包括的概念 web 組件，讓你用自己的標簽來擴展 HTML（就像 AngularJS）。它也有一個路由和模型引擎，能夠和 RESTful API 協(xié)同工作。

Meteor

Meteor.js 也稱為 Meteor Magic，是一個全棧 JavaScript 框架。你可以使用 Meteor 構(gòu)建功能豐富的應(yīng)用程序，因為它提供了廣泛的庫和包。這個框架需要較少的編碼，并且非常靈活。這意味著你將會擁有 bug 更少的、高質(zhì)量的應(yīng)用程序。

Meteor 為數(shù)據(jù)庫管理、后端開發(fā)和前端渲染提供了支持。通過使用這個完整的全棧框架，你將能夠創(chuàng)建完全用 JavaScript 編碼的端到端 Web 和移動應(yīng)用程序。你也可以根據(jù)實際需求來使用這些包和庫。只需花費更少的時間與精力，數(shù)據(jù)庫中所做的所有更改都會轉(zhuǎn)移到用戶界面。

Aurelia

Aurelia 是一個對開發(fā)人員友好的、先進的 JavaScript 框架。它被稱為“下一代用戶界面框架”。Aurelia 是許多開源 JS 模塊的集合，這些模塊基本上是用 ECMAScript 編寫的。

通過使用 Aurelia 框架，開發(fā)人員可以使用普通的 JavaScript 或 TypeScript 來開發(fā)組件。Aurelia 框架是完全模塊化的，因為它附帶了一組庫，這些庫使用定義良好的接口來運行。由于 Aurelia 遵循 MV* 方法，因此無需指定試圖模型的控制器。

最近，這個框架考慮了包括服務(wù)器端呈現(xiàn)、用戶體驗開發(fā)和狀態(tài)管理等改進。下一個版本很有可能完全轉(zhuǎn)向 TypeScript。

Polymer

2013 年 5 月，Google 推出了 Polymer。這個 JavaScript 庫是開源的，藉由這個框架，開發(fā)人員可以利用它的 Web 組件來開發(fā) Web 應(yīng)用程序。在實際意義上來說，Polymer 的設(shè)計方式是這樣的：它可以利用新的 Web 組件的規(guī)范，以便讓開發(fā)人員創(chuàng)建自定義元素。開發(fā)人員使用 Web 組件來為瀏覽器的內(nèi)置元素開發(fā)可重用的自定義元素。為了編寫出更清晰的代碼，你可以把應(yīng)用程序分解成易于維護、成本更低的模塊。

就 JavaScript 庫的角度來看，Polymer 是第一個利用組件組合來支持交互式應(yīng)用程序開發(fā)的類型。Polymer 的兩大主要優(yōu)點是框架和結(jié)構(gòu)設(shè)計過程的組成部分。為了體驗更多基于組件的 Web 開發(fā)，開發(fā)人員可以將 Polymer 和 React 組合在一起進行開發(fā)。Polymer 將組件解釋為 HTML 文件。Polymer 是 JavaScript 框架之一，允許開發(fā)人員使用 Spring Boot REST 資源。

Backbone.js

Backbone.js 于 2010 年發(fā)布，被認為是一個非常輕量級的 JavaScript 框架。通過使用這個框架，開發(fā)人員可以創(chuàng)建在 Web 瀏覽器中運行的單頁面應(yīng)用程序和客戶端應(yīng)用程序，具有更好的靈活性。同時保持控制器為可選的選項，

Backbone 提供了一個完整的 MVC 框架和路由。該模型允許鍵-值綁定和處理數(shù)據(jù)變化的事件。Models（和 Collections）可以連接到 RESTful API 中。Views 可以聲明事件處理，而路由器則可以非常出色地處理 URL 和狀態(tài)管理。在建立一個不提供太多功能和非必要復雜功能的單頁面應(yīng)用時，能提供你所需的所有功能。

jQuery

jQuery是最古老的 JS 框架之一。這個框架已經(jīng)存在了 13 年之久，而且它仍然很強大。

jQuery 是一個快速而簡潔的 JavaScript 庫，由 John Resig 在2006年創(chuàng)建，它有一個很好宗旨：寫得少，做得多。它是一個跨瀏覽器的 JavaScript 庫，旨在簡化 HTML 的客戶端腳本。目前有超過 1900 萬個網(wǎng)站正在使用jQuery！WordPress、Facebook、Google、IBM 和其他許多公司都依賴 jQuery 提供獨一無二的網(wǎng)絡(luò)瀏覽體驗。

免責聲明：內(nèi)容和圖片源自網(wǎng)絡(luò)，版權(quán)歸原作者所有，如有侵犯您的原創(chuàng)版權(quán)請告知，我們將盡快刪除相關(guān)內(nèi)容。

IT行業(yè)、互聯(lián)網(wǎng)、開發(fā)語言（Java、前端HTML5、Python、UI/UE、云計算、自動化測試、大數(shù)據(jù)、人工智能、物聯(lián)網(wǎng)、游戲開發(fā)、網(wǎng)絡(luò)安全、GO語言、PHP）相關(guān)資訊，大連千鋒會第一時間送到大家身邊，也可以關(guān)注微信公眾號【dalianqianfengjiaoyu】了解相關(guān)行業(yè)資訊。

ue 使用基于 HTML 的模板語法，讓開發(fā)者能夠聲明式地將其組件實例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上。所有的 Vue 模板都是語法層面合法的 HTML，均可被符合規(guī)范的瀏覽器和 HTML 解析器解析。

Vue 核心機制中會將模板編譯成高度優(yōu)化的 JavaScript 代碼。結(jié)合響應(yīng)式系統(tǒng)，當應(yīng)用狀態(tài)變更時，Vue 能夠智能地計算出應(yīng)用需要最少的 DOM 操作并重新渲染的組件。

文本數(shù)據(jù)綁定#

數(shù)據(jù)綁定最基本的形式是使用的是“{{xxx}}”語法 (即雙大括號)：

<div id="app">{{ message }}</div>

{{xxx}}標簽會被替換為相應(yīng)組件實例中 message 屬性的值。同時每次 message 屬性更改時它也會同步更新。

原始 HTML#

{{xxx}}會將數(shù)據(jù)解釋為純文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>歡迎使用Vue3: {{ outHtml }}</p>
<p>使用 v-html 指令: <span v-html="outHtml"></span></p>

歡迎使用Vue3: <span style="color: red">This should be red.</span>

使用v-html 指令: This should be red.

這里我們遇到了一個新的概念。這里看到的 v-html 屬性被稱為一個指令。指令由 v- 作為前綴，表明它們是一些由 Vue 提供的特殊屬性，你可能已經(jīng)猜到了，它們將為渲染的 DOM 應(yīng)用特殊的響應(yīng)式行為。這里我們做的事情簡單來說就是：在當前組件實例上，將此元素的 innerHTML 與 outHtml 屬性保持同步。

span 的內(nèi)容將會被替換為 outHtml 屬性的值，差值為純 HTML——數(shù)據(jù)綁定將會被忽略。注意，你不能使用 v-html 來拼接組合模板，因為 Vue 不是一個基于字符串的模板引擎。在使用 Vue 時，應(yīng)當使用組件作為 UI 重用和組合的基本單元。

安全警告

在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為這非常容易造成 XSS 漏洞。請僅在內(nèi)容安全可信時再使用 v-html，并且永遠不要使用用戶提供的 HTML 內(nèi)容。

屬性綁定#

{{xxx}}不能在 HTML 屬性中使用。想要響應(yīng)式地綁定一個屬性，應(yīng)該使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 將元素的 id 屬性與組件的 dynamicId 屬性保持一致。如果綁定的值是 null 或者 undefined，那么該屬性將會從渲染的元素上移除。

簡寫#

因為 v-bind 非常常用，我們提供了特定的簡寫語法：

<div :id="dynamicId"></div>

開頭為 : 的屬性可能和一般的 HTML 屬性看起來不太一樣，但它的確是合法的屬性名稱字符，并且所有支持 Vue 的瀏覽器都能正確解析它。此外，他們不會出現(xiàn)在最終渲染的 DOM 中。簡寫語法是可選的，但相信在你了解了它更多的用處后，你應(yīng)該會更喜歡它。

接下來的指引中，我們都將在示例中使用簡寫語法，因為這是在實際開發(fā)中更常見的用法。

布爾型 #

布爾型依據(jù) true / false 值來決定屬性是否應(yīng)該存在于該元素上。disabled 就是最常見的例子之一。

v-bind 在這種場景下的行為略有不同：

<button :disabled="isButtonDisabled">Button</button>

當 isButtonDisabled 為真值或一個空字符串 (即 <button disabled="">) 時，元素會包含這個 disabled 屬性。而當其為其他價值時屬性將被忽略。

動態(tài)綁定多個值#

如果你有像這樣的一個包含多個屬性的 JavaScript 對象：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通過不帶參數(shù)的 v-bind，你可以將它們綁定到單個元素上：

<div v-bind="objectOfAttrs"></div>

使用 JavaScript 表達式#

至此，我們僅在模板中綁定了一些簡單的屬性名。但是 Vue 實際上在所有的數(shù)據(jù)綁定中都支持完整的 JavaScript 表達式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

這些表達式都會被作為 JavaScript ，以組件為作用域解析執(zhí)行。

在 Vue 模板內(nèi)，JavaScript 表達式可以被使用在如下場景上：

在文本插值中 (雙大括號)
在任何 Vue 指令 (以 v- 開頭的特殊屬性) 的值中

僅支持表達式#

每個綁定僅支持單一表達式，也就是一段能夠被求值的 JavaScript 代碼。一個簡單的判斷方法是是否可以合法地寫在 return 后面。

因此，下面的例子都是無效的：

<!-- 這是一個語句，而非表達式 -->
{{ var a = 1 }}

<!-- 條件控制也不支持，請使用三元表達式 -->
{{ if (ok) { return message } }}

調(diào)用函數(shù)#

可以在綁定的表達式中使用一個組件暴露的方法：

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

TIP

綁定在表達式中的方法在組件每次更新時都會被重新調(diào)用，因此不應(yīng)該產(chǎn)生任何副作用，比如改變數(shù)據(jù)或觸發(fā)異步操作。

受限的全局訪問#

模板中的表達式將被沙盒化，僅能夠訪問到有限的全局對象列表。該列表中會暴露常用的內(nèi)置全局對象，比如 Math 和 Date。

沒有顯式包含在列表中的全局對象將不能在模板內(nèi)表達式中訪問，例如用戶附加在 window 上的屬性。然而，你也可以自行在 app.config.globalProperties 上顯式地添加它們，供所有的 Vue 表達式使用。

指令 #

指令是帶有 v- 前綴的特殊屬性。Vue 提供了許多內(nèi)置指令，包括上面我們所介紹的 v-bind 和 v-html。

指令屬性的期望值為一個 JavaScript 表達式 (除了少數(shù)幾個例外，即之后要討論到的 v-for、v-on 和 v-slot)。一個指令的任務(wù)是在其表達式的值變化時響應(yīng)式地更新 DOM。以 v-if 為例：

<p v-if="seen">Now you see me</p>

這里，v-if 指令會基于表達式 seen 的值的真假來移除/插入該 <p> 元素。

參數(shù) Arguments#

某些指令會需要一個“參數(shù)”，在指令名后通過一個冒號隔開做標識。例如用 v-bind 指令來響應(yīng)式地更新一個 HTML 屬性：

<a v-bind:href="url"> ... </a>

<!-- 簡寫 -->
<a :href="url"> ... </a>

這里 href 就是一個參數(shù)，它告訴 v-bind 指令將表達式 url 的值綁定到元素的 href 屬性上。在簡寫中，參數(shù)前的一切 (例如 v-bind:) 都會被縮略為一個 : 字符。

另一個例子是 v-on 指令，它將監(jiān)聽 DOM 事件：

<a v-on:click="doSomething"> ... </a>

<!-- 簡寫 -->
<a @click="doSomething"> ... </a>

這里的參數(shù)是要監(jiān)聽的事件名稱：click。v-on 有一個相應(yīng)的縮寫，即 @ 字符。我們之后也會討論關(guān)于事件處理的更多細節(jié)。

動態(tài)參數(shù)#

同樣在指令參數(shù)上也可以使用一個 JavaScript 表達式，需要包含在一對方括號內(nèi)：

<!--
注意，參數(shù)表達式有一些約束，
參見下面“動態(tài)參數(shù)值的限制”與“動態(tài)參數(shù)語法的限制”章節(jié)的解釋
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>

這里的 attributeName 會作為一個 JavaScript 表達式被動態(tài)執(zhí)行，計算得到的值會被用作最終的參數(shù)。舉例來說，如果你的組件實例有一個數(shù)據(jù)屬性 attributeName，其值為 "href"，那么這個綁定就等價于 v-bind:href。

相似地，你還可以將一個函數(shù)綁定到動態(tài)的事件名稱上：

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 簡寫 -->
<a @[eventName]="doSomething">

在此示例中，當 eventName 的值是 "focus" 時，v-on:[eventName] 就等價于 v-on:focus。

動態(tài)參數(shù)值的限制#

動態(tài)參數(shù)中表達式的值應(yīng)當是一個字符串，或者是 null。特殊值 null 意為顯式移除該綁定。其他非字符串的值會觸發(fā)警告。

動態(tài)參數(shù)語法的限制#

動態(tài)參數(shù)表達式因為某些字符的緣故有一些語法限制，比如空格和引號，在 HTML 屬性名稱中都是不合法的。例如下面的示例：

<!-- 這會觸發(fā)一個編譯器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要傳入一個復雜的動態(tài)參數(shù)，我們推薦使用計算屬性替換復雜的表達式，也是 Vue 最基礎(chǔ)的概念之一，我們很快就會講到。

當使用 DOM 內(nèi)嵌模板 (直接寫在 HTML 文件里的模板) 時，我們需要避免在名稱中使用大寫字母，因為瀏覽器會強制將其轉(zhuǎn)換為小寫：

<a :[someAttr]="value"> ... </a>

上面的例子將會在 DOM 內(nèi)嵌模板中被轉(zhuǎn)換為 :[someattr]。如果你的組件擁有 “someAttr” 屬性而非 “someattr”，這段代碼將不會工作。單文件組件內(nèi)的模板不受此限制。

修飾符 #

修飾符是以點開頭的特殊后綴，表明指令需要以一些特殊的方式被綁定。例如 .prevent 修飾符會告知 v-on 指令對觸發(fā)的事件調(diào)用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form>

之后在講到 v-on 和 v-model 的功能時，你將會看到其他修飾符的例子。

常用指令

什么是指令

指令（Directives）是帶有v- 前綴的特殊特性。
指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)的作用于DOM。

示：點擊上方"WEB網(wǎng)頁設(shè)計自學平臺"↑ 可以訂閱噢！

摘要 51RGB官方微信在學習CSS制作知識之前，我們必須需要認識的HTML什么基礎(chǔ)知識。

一、必知HTML基礎(chǔ)-CSS教程系列

搞清瀏覽器作用
搞清什么是HTML
html作用
html我們涉及哪些基礎(chǔ)知識
常見html單詞及單詞功能作用有哪些
html結(jié)構(gòu)
html與CSS關(guān)系

1、搞清瀏覽器作用

瀏覽器主要作用是瀏覽網(wǎng)頁作用，在DIV+CSS制作開發(fā)時候仍然是瀏覽我們制作開發(fā)重構(gòu)網(wǎng)頁作用。瀏覽器可測試我們開發(fā)的CSS網(wǎng)頁兼容性、網(wǎng)頁效果、因開發(fā)疏忽導致錯誤等作用。

在CSS測試（CSS工具）里常用瀏覽器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、蘋果Safari、Opera主流瀏覽器。至于傲游、360瀏覽器因為他們使用你系統(tǒng)自帶的IE內(nèi)核，所以不必考慮，只要支持你瀏覽器版本即支持類似這2款瀏覽器

需要兼容瀏覽器有哪些？http://www.51rgb.com/css-tool/t86.shtml

2、搞清什么是HTML

html是hypertext markup language的縮寫，即超文本標記語言。可以這樣理解，HTML文件是一定規(guī)則規(guī)律以html\htm等命名后綴名的文本文件。

3、html作用

HTML作用，通過一定html自身語法結(jié)構(gòu)（html結(jié)構(gòu)），顯示文字、圖片、動畫（flash）、視頻或音頻音樂。而CSS則是配合html實現(xiàn)漂亮的各式各樣的頁面內(nèi)容。

4、html我們涉及哪些基礎(chǔ)知識

Html擴展名、html源代碼、DOCTYPE、html結(jié)構(gòu)、head標簽、charset

5、常見html單詞及單詞功能作用有哪些

a、B(strong)：加粗

b、P：換行實例：<p>我是第一段內(nèi)容</p><p>我是第二段內(nèi)容</p>

c、Br：提行實例：我是第一排<br />我是第二排內(nèi)容

d、px：像素、長度寬度單位

實例：width:30px; 寬度30像素

e、ul、ol、li列表標簽實例：

<ul> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ul> 
<ol> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ol>

f、div與span：都是html標簽

實例：<div>我占一行</div><span>我多長占多長位置</span>

兩者區(qū)別：DIV占用1整排，而SPAN所占位置是內(nèi)容多少占用多長長度

g、img：圖片引用標簽

<img src="/css-images/css-logo.gif" />圖片標簽

h、dl dt dd：CSS的另類表格組合

實例：

<dl>

</dl>

j、title：標題標簽

實例：<title>標題</title>

特點，在一個網(wǎng)頁內(nèi)只能使用一次（只能出現(xiàn)一次）

6、html結(jié)構(gòu) - TOP

這里Html結(jié)構(gòu)可用于每次新建制作網(wǎng)頁模板使用。

舊html結(jié)構(gòu)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIVCSS5標題</title>

</head>

<body>

具體網(wǎng)頁呈現(xiàn)內(nèi)容

</body>

</html>

經(jīng)過CSS教程網(wǎng)的DIVCSS5優(yōu)化后的HTML結(jié)構(gòu)（可用于每次新建HTML模板）：

<!DOCTYPE html>

<html>

內(nèi)容www.divcss5.com提供

7、html與CSS關(guān)系 - TOP

搞清楚html與CSS關(guān)系很重要，也是認識CSS基礎(chǔ)。html與CSS關(guān)系解釋：HTML內(nèi)放置顯示網(wǎng)頁要顯示的具體內(nèi)容（圖片、文字、動畫等）而CSS是控制HTML內(nèi)這些具體內(nèi)容的怎么顯示、怎么排版、顏色、大小、寬度、高度、左右布局等顯示樣式。

以上7點是學習CSS的html基礎(chǔ)，可能還不完善，但是在以后運用的時候DIVCSS5會給大家詳細、本簡單CSS教程分為15節(jié)，此節(jié)DIV CSS教程以文字內(nèi)容為主，以后會穿插更多實例和圖例、跟我做的內(nèi)容希望對大家能有幫助。

在線咨詢

上一篇：js截取網(wǎng)頁任意區(qū)域圖片？
下一篇：HTML添加背景音樂(embed、audio)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商