Vue、React、Angular 常被一起稱作三大框架、現代框架。三大框架是目前驅動前端項目底層的最常用的框架。隨著前端行業從業人員的增加，更易上手的 Vue 和 React 占據了更大部分市場。本章節不會探討這些框架的具體用法
2.1 相似之處React 和 Vue 都是 MVVM 框架，它們之間有很多相似之處：兩者都是用于創建 UI 的 JavaScript 庫；兩者的使用都快速輕便；兩者都是基礎組件式的開發；兩者都使用了虛擬 DOM。2.2 不同之處React 和 Vue 在某些方面也存在一定的差異：Vue 的數據可變的，通過對每一個屬性建立 Watcher 來監聽，當屬性變化的時候，響應式的更新對應的虛擬 DOM，而 React 則是基于數據不可變，React 需要通過 setState 來觸發渲染流程，同時可以通過 shouldComponentUpdate 來控制視圖是否更新;Vue 推薦使用模板語法，把 html、css、js 組合到一起，用各自的處理方式，通過模板引擎來處理。，而 React 則推薦使用 JSX 語法進行書寫，React 的思路是 all in js，通過js生成html;React 中的 state 對象是不可變的，我們不能被直接改變 state 的值，而是需要通過使用 setState() 的方法去更新狀態，在 Vue 中，state 并不是必須的，數據由 data 屬性進行管理，我們可以直接修改 data 屬性中的值。
作為一款跨平臺的優秀框架，顯然學會react native 也非常重要，所以我們也需要安裝一些相應插件，來加速我們的日常開發。
這是一個可以快速生成 react native 代碼塊的插件，使用非常簡單，上手之后，寫代碼就嗖嗖的快了。安裝步驟如下：類似的，關鍵字還有 rncc->rn文檔 cdm->componentDidMount ssc->StyleSheet.create等。更多細節詳見
這個插件可以讓我們只需要敲幾個字母即可生成大量react代碼，非常實用，安裝步驟類似，就不贅述了。
同樣css的插件也必不可少，react native 的 css 語法和普通的 css 還是有一點差別的，比如它是駝峰的寫法，比如 fontSize: 20，不過上手之后開發還是非?？斓?。類似的關鍵字還有：fs -> fontSizefw -> fontWeightminh -> minHeight...更多細節詳見
使用yarn刪除依賴的命令為 yarn remove ，此命令有幾個小技巧，給大家介紹一下。從當前項目中刪除依賴項：yarn remove lodash一次從所有工作空間中刪除一個依賴項：yarn remove lodash --all刪除所有以開頭的依賴項eslint-：yarn remove 'eslint-*'刪除@babel范圍內的所有依賴項：yarn remove '@babel/*'刪除所有匹配的依賴項react-dom或react-helmet ：yarn remove 'react-{dom,helmet}'
移動端應用也可以使用 JavaScript 進行開發，如 React Native 或者 Weex 等框架。Weex 框架
在學習 ECharts 之前你需要掌握一些基礎知識以便之后的學習能夠順利進展。HTML 的基本知識；JavaScript 的基本知識。當然，在客戶的進階部分我們也會對 Vue 與 React 這兩大框架 和 ECharts 的整合做一下講解。所以還需要你根據所需的了解一些 Vue 和 React 的內容。
import requestsr = requests.post('http://www.xianlaiwan.cn/search/hotwords')print(r.text)請求結果如下，格式為 Json：{"result":0,"data":["Vue","Python","Java","flutter","springboot","docker","React","\u5c0f\u7a0b\u5e8f"],"msg":"\u6210\u529f"}
日常工作除了比較火熱的三大框架，實際上我們還會接觸到一些使用量相對較少的框架。本章節主要講述了其他語言類的相關插件，比如 React Native，Flutter，MarkDown 等等。
實際項目中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，例如：/article/vue /article/react+------------------+ +-----------------+| Article | | Article || +--------------+ | | +-------------+ || | Vue | | +------------> | | React | || | | | | | | || +--------------+ | | +-------------+ |+------------------+ +-----------------+借助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系。在上一小節中我們學習了如何配置一個路由信息： { path: '路由地址', component: '渲染組件' }要配置嵌套路由，我們需要在配置的參數中使用 children 屬性： { path: '路由地址', component: '渲染組件', children: [ { path: '路由地址', component: '渲染組件' } ] }
響應頭部信息HTTP/1.1 200 OKDate:Sun, 23 Feb 2020 07:31:24 GMTConnection: keep-aliveContent-Encoding: gzipContent-Length: 129Content-Type: application/json; charset=UTF-8...返回了請求的狀態，200狀態碼對應的就是成功，還有一些鏈接狀態，內容的編碼，長度，媒體類型等。響應的正文{result: 0, data: ["Vue", "Python", "Java", "flutter", "springboot", "docker", "React", "小程序"],…}data: ["Vue", "Python", "Java", "flutter", "springboot", "docker", "React", "小程序"]msg: "成功"result: 0返回了消息的具體信息，這個消息有可能是一串 html 文本，也可能是 json 串，圖片，附件都有可能，一般是跟 content-type 對應。
本章節主要講的是目前非?；馃岬膔eactjs的相關插件，Facebook出品必屬精品。雖然經歷過一些風波，但是仍然擋不住眾多程序員對其的喜愛?，F在就跟著我來學習一下使用react過程中需要安裝什么插件。
可以看到，我們敲 cdm 然后按下tab鍵即可生成 相應代碼：js相關cdm ->componentDidMount: function() { //...},cwu ->componentWillUpdate: function(nextProps, nextState) { //... },ss ->this.setState({ : });...通過動圖，我們可以發現，react里面的方法等，我們只需要敲出幾個關鍵字母即可生成全部代碼。
使用 params 傳參數我們可以分為兩個步驟：定義路由以及路由接收的參數。路由跳轉時傳入對應參數。首先，我們先了解如何定義路由接收的參數：const routes = [ { path: '/detail/:name', name: 'detail', component: Detail },]使用 <router-link></router-link> 的方式跳轉路由： <!-- router-link 跳轉 --><router-link :to="{name: 'detail', params: {name: 'React 基礎學習'}}">2. React 基礎學習</router-link>具體示例：786代碼解釋：在 JS 代碼第 24 行，我們定義了路由 detail，他通過 params 接收一個參數 name。在組件 Article 中，我們使用 <router-link> 鏈接要跳轉的路由并將參數傳入。在組件 Detail 中，我們將傳入的課程名稱顯示出來。使用 $router 的方式跳轉路由： // $router 跳轉 this.$router.push({ name: 'detail', params: { name: 'Vue 教程' }})具體示例：787代碼解釋：在 JS 代碼第 31 行，我們定義了路由 detail，他通過 params 接收一個參數 name。在 JS 代碼第 19 行，我們定義了方法 getDetail，該方法通過 $router.push 跳轉到詳情頁面，并傳入 name 參數。在組件 Article 中，當我們點擊課程名稱的時候調用 getDetail 方法。在組件 Detail 中，我們將傳入的課程名稱顯示出來。
首先，我們在項目的根路徑下創建 vue.config.js 文件，并在文件中寫如下配置：module.exports = { devServer: { before(app) { app.get("/goods/list", (req, res) => { res.json({ data: [ {name: 'Vue 基礎教程'}, {name: 'React 基礎教程'} ] }); }); } }};我們通過 axios 來獲取接口數據。首先需要安裝 axios：npm install axios --save在組件中使用 axios 獲取 Mock 數據:<script>import axios from "axios";export default { name: "Home", created() { axios.get("/goods/list").then(res => { console.log(res); }); }, components: {}};</script>有時候，我們需要寫很多的 Mock 數據，把所有的數據都寫在 vue.config.js 文件中顯然是不合適的，這會使得文件變得非常大，并且難以維護。我們可以在項目中創建 Mock 文件夾，把所有數據放在 Mock 文件夾中維護。我們在 Mock 文件夾中創建 list.json[ {"name": "Vue 基礎學習"}, {"name": "React 基礎學習"}]然后，在 vue.config.js 文件中加載數據：const list = require("./mock/list.json");module.exports = { devServer: { before(app) { app.get("/goods/list", (req, res) => { res.json({ data: list }); }); } }};
本章節我們學習了如何安裝react相關的插件，以及如何使用。同樣還是那句話，快捷鍵那么多，我們只需要記住常用的那幾個就好了。最好還是學會手寫，不然萬一哪天去面試，發現componentDidMount不會寫那就尷尬無比了。我們要把寫代碼當成一種愛好，一種藝術，而不是混飯吃的一種差事。
分析我們的需求，想要一個拖拽組件，提煉出關鍵詞 drag，然后根據技術棧又可以提煉出關鍵詞 react，那么我們在搜索框中輸入的關鍵詞就應該是這樣一個組合：記得搜索的時候一定要選擇 All GitHub，不然你關鍵詞的查找范圍就這是在當前項目中。一看，搜索結果還挺多的，根據關鍵詞可以匹配到 2000 多個項目，接下來就需要我們進一步篩選。
ES5 不能滿足前端的復雜度，無論是 jQuery 這樣的庫，還是像 Vue 和 React 這樣的框架，都在使用一些降級的方案來解決現有的問題，所以 ES6 的引入就是為了解決 ES5 以前存在的各種問題。另外，ES6 是一個大換血的版本，也是一個分水嶺，標志著 JavaScript 向著更高的方向發展。ES6 也是對 ES5 的增強和升級。主流的瀏覽器都已經全面支持 ES6；行業內較新的前端框架都已經全面使用 ES6 的語法；微信小程序，uni-app 等都是基于 ES6 的語法；從就業出發，現在公司基本都在使用新的語法，增加必備技能獲得更好的offer。以上都是學習 ES6 的場景，也是大勢所趨。
我們學習一門新技術會關心它的生命力問題，如果這門技術在較短時間內就要被淘汰，那花費大量的時間學習也是不劃算的。TypeScript 能夠保持長久生命力的另一個原因，就是統治前端的三大框架對 TypeScript 的支持。Angular 是 TypeScript 最早的支持者，Angular 官方推薦使用 TypeScript 來創建應用。React 雖然經常與 Flow 一起使用，但是對 TypeScript 的支持也很友好。Vue3.0 正式版即將發布，由 TypeScript 編寫。從國內的氛圍來看，由前端三大框架引領的 TypeScript 熱潮已經涌來，很多招聘要求上也都有了 TypeScript 的身影。
如果你想搜索某個項目的代碼倉庫，那么就可以借助 GitHub 的搜索功能。例如我想搜索 “React” ，就可以在搜索框輸入關鍵詞并點擊 All GitHub：注意這里有個快速定位到你想要的結果的小技巧，就是利用搜索排序，我們一般選擇默認的 “Best match” 排序，這個排序方式一般是基于你的搜索關鍵詞進行一個綜合評估，然后得出的先后順序。或者基于 “Most stars” 排序，這個排序方式一般是基于代碼倉庫的 Stars 數量，毫無疑問，絕大多數情況下我們要找的代碼倉庫肯定是使用者最多，最出名的項目，所以選擇這種排序方式一般也可以快速定位到我們想要的結果。
在之前的章節中，我有提到過一點搜索的小訣竅，但是沒有細說。現在我將詳細講解一下怎么快速精準得定位到我們想要查找的內容，畢竟搜索是我們平時在使用 GitHub 的過程中是最常用的功能之一，提高搜索效率可以幫我們節省很多時間。接下來，我將用一個例子來一步步展現如何快速搜索到想要的內容：假設我的項目中要使用一個可以隨意拖拽的組件，而且我的項目是基于 React 技術棧，想在 GitHub 上面找下有沒有現成的組件可以使用。
6.1.1 直接給指定位置賦值通過下標，直接訪問到一個不存在的成員，然后進行賦值，就可以為數組增加一項。var arr = ['jquery', 'react'];arr[1] = 'vue';arr[2] = 'angular';console.log(arr[2]); // 輸出："angular"console.log(arr.length); // 輸出：36.1.2 push 方法push 方法接收任意個參數，這些參數會依次添加到數組的末尾，添加完后返回數組新的長度。var arr = [1];var length = arr.push(2, 3);console.log(arr); // 輸出：[1, 2, 3]console.log(length); // 輸出：3通常不會用到這個返回的長度，可以不需要接收返回值。6.1.3 unshift 方法unshift 接收任意個參數，這些參數會被添加到數組頭部，添加完后返回數組新的長度。var arr = [3];var length = arr.unshift(1, 2);console.log(arr); // 輸出：[1, 2, 3]console.log(length); // 輸出：3
第一個小程序的出現，帶動了許多應用推出“小程序”。主流的應用都有小程序，如 微信、支付寶、QQ、頭條等等。如果要每個應用主題下都實現一份相同的小程序，相當于維護四分代碼，每個平臺可能還不同邏輯等等，維護多個平臺的通過產品是非常耗費時間精力資源的事情。針對這個痛點，就衍生了許多的同構框架，即使用一套通用的代碼，生成各個平臺下的小程序代碼。這些框架結合主流框架(React、Vue等)，或者設計了一套統一的規范來統一多端的代碼。目前主流的方案有 Taro、uni-app、Chameleon 等，還有許多方案已經停止維護，不建議繼續使用。選擇框架盡量慎重，要綜合考慮，非短期的項目更是要考慮到整個項目的使用場景、開發人員來決定。
使用 query 傳參的方法相對簡單，只需要在對應路由跳轉的時候傳入參數即可：使用 <router-link></router-link> 的方式跳轉路由： <!-- router-link 跳轉 --><router-link :to="{path: '/detail', query: { id: 1 }}">2. React 基礎學習</router-link>具體示例：788代碼解釋：在組件 Article 中，我們使用 <router-link> 鏈接到要跳轉的路由并將參數傳入。在組件 Detail 中，我們通過 $route.query.id 將傳入的課程 ID 顯示出來。使用 $router 的方式跳轉路由： // $router 跳轉 this.$router.push({ path: '/detail', query: { id: 2 }})具體示例：789代碼解釋：在 JS 代碼第 19 行，我們定義了方法 getDetail，該方法通過 $router.push 跳轉到詳情頁面，并通過 query 傳入參數 id。在組件 Article 中，當我們點擊課程名稱的時候調用 getDetail 方法。在組件 Detail 中，我們通過 $route.query.id 把傳入的課程 ID 顯示出來。
數據視圖工具用于修改數據視圖，通過 toolbox.feature.dataView 項配置，點擊后可以以表格形式展示圖表中包含的數據信息；表格本身還支持簡單編輯功能，編輯后會即時更新圖表視圖。例如：1333示例效果：toolbox.feature.dataView 有兩個比較重要的配置項：optionToContent: 自定義數據視圖函數，可以通過該選項配置更豐富的展示方法，函數簽名： (option:Object) => HTMLDomElement|string；contentToOption: 用于定義如何將數據視圖結果轉換為圖表配置項。通過這兩個函數，可以做出許多復雜絢麗的效果，例如使用 react 渲染數據視圖：1334Tips：若 optionToContent 返回的是頁面中已經存在 DOM 元素時，ECharts 會將該元素剪切到數據視圖中，這以為著原來位置會丟失這部分 DOM！例如對于 optionToContent: document.getElementById('dataview')，一旦執行數據視圖功能，原來位置上的 dataview 元素將會被刪除。數據視圖工具只對使用 series.data 配置數據的方式有效，不能應用在 dataset 上。
接下來我們對上一小節的例子來做一個改造：在文章頁面，我們對文章進行分類，提供兩個鏈接按鈕 vue、react，點擊可以跳轉到對應的文章列表，具體代碼示例如下：760代碼解釋：HTML 代碼第 12-13 行，我們定義了兩個跳轉鏈接。HTML 代碼第 15 行，我們使用 <router-view></router-view> 組件來渲染匹配組件。JS 代碼第 5-7 行，我們定義了組件 Index。JS 代碼第 9-17 行，我們定義了組件 Article，組件內部使用 <router-link></router-link> 定義出來兩個跳轉鏈接，使用 <router-view></router-view> 來渲染匹配組件。JS 代碼第 19-21 行，我們定義了組件 VueArticle.JS 代碼第 23-25 行，我們定義了組件 ReactArticle。JS 代碼第 27-43 行，我們定義了路由數組，在 ‘/article’ 中配置來嵌套路由 childrenJS 代碼第 44-46 行，創建 router 實例，然后傳 routes 配置。JS 代碼第 49 行，通過 router 配置參數注入路由。
step1： 雙擊打開 PyCharm，點擊 Create New Project：step2：選擇 Pure Python，提供要創建項目的位置，我把這個項目放在了我電腦的這個路徑下 /User/xuxh/PycharmProjects/ 并給這個項目起名為 demo：上圖左側面板，列出了 PyCharm 支持的所有項目類型， 除了 Pure Python 我們最為常用的項目類型，也包括現在比較流行的 Web 框架 Django and Flask, 也支持 Google App Engine 框架， 同時也支持多種當前廣泛應用的前端 Web 框架， 比如Angular、React 等等?？傊?PyCharm 支持的項目類型是非常豐富的。點擊箭頭，Pycharm 會找到之前安裝的 Python 解釋器。選擇解釋器， 點擊 Create 按鈕。Tips : 關于解釋器后面有專門章節介紹，這里只需按上圖選擇系統解釋器 Python 3.7 即可。返回主頁面，看到初始的項目結構有三部分組成：step3：右擊項目名，新建一個 Python 文件： New -> Python File ：輸入文件名 “hello_world"，然后回車即可創建 hello_world.py 文件。step4：寫一個簡單的程序，打印 “hello world!!!”：step5：運行程序時需要右鍵點擊編輯區 ，選擇 Run 'hello_world'( 也可點擊菜單 Run -> Run 'hello_world')。step6：進入運行控制臺， 我們可以看到 PyCharm 已經輸出了 “Hello World!!!”。
這個技術在前面章節有獨立章節進行講解。事實上，$.ajax 是基于原生 XMLHttpRequest 進行了封裝，并且提供了一套高度統一的設計和編程接口。在我們的代碼中，我們一般都這樣寫：$.ajax({ method: 'POST', url: url, data: data, success: function () {}, error: function () {}});或者結合 deferred 的寫法：$.ajax({ url: url, method: 'GET', data : data}).done(data => { // code}).fail(err => { // code})不吹不黑，jQuery 提供的這一套 Ajax 工具方法真的非常優秀，并且經歷了這么多年的打磨，其穩定性、成熟度自然不必多言。關于 jQuery 的 Ajax 工具方法的優點，在前面章節已經講過。至少從使用體驗上來講，簡單易用，功能齊全，以至于我身邊至今依然有很多開發者在使用這一套工具函數。然而，隨著技術的發展，jQuery 也逐步走向一個衰弱的過程。越來越多的前端開發者開始使用諸如 Angular、React 和 Vue 這樣的新型框架。想像一下，如果我們在一個基本用不到 jQuery 的技術中進行前端開發，為了要使用 jQuery 的 Ajax 相關方法而強行引入整個 jQuery，這顯然是不現實也不可取的。在更新的技術中，我們將尋求體積更小，更為先進的類庫。
