天地會珠海分舵注:隨著微信應(yīng)用號的呼之欲出，相信新一輪的APP變革即將發(fā)生。從獲得微信應(yīng)用號邀請的業(yè)內(nèi)人士發(fā)出來的一張開發(fā)工具源碼截圖可以看到，reacjs及其相應(yīng)的FLUX框架altjs很有可能會成為前端開發(fā)主流。作為行業(yè)內(nèi)人士，自己之前從來沒有做過web及webapp開發(fā)，所以這方面算是一名小白。這段時間在忙完工作之余準備儲備一下這方面的知識點，以免將來被微信應(yīng)用號的浪潮所淹沒。

本篇開始學(xué)習(xí)reactjs的FLUX框架altjs。學(xué)習(xí)最好的方法當然還是通過實例的閱讀和改造了，但是學(xué)習(xí)之前，我們必須先要確保這些代碼及其依賴的包是最新的，不然花了大時間而學(xué)習(xí)回來的是幾年前的陳舊的知識就無謂了。

待通過本章將官方實例支持上最新的依賴包和工具包之后，往后會準備開幾章來根據(jù)最新的altjs版本對代碼進行改造，以及將打包工具從browserify改裝成時下更流行的webpack，期待大家對techgogogo公眾號的持續(xù)關(guān)注。

注:開始之前希望大家對reactjs和FLUX有基本的了解，可以參考最后一小節(jié)。如果現(xiàn)在確實沒有時間去了解的，也可以先根據(jù)本章的描述將實例搭建運行起來，到時對著代碼修改調(diào)試，相信很多知識點就自然而然的通了。

1. altjs官方實例下載

---

altjs官方提供了相應(yīng)的入門實例，大家可以進入進入其官網(wǎng)查看：
http://alt.js.org/guide/

實例的源碼可以從github獲得：
https://github.com/goatslacker/alt-tutorial.git

我們首先將其clone下來:

git clone https://github.com/goatslacker/alt-tutorial.git

2. 官方實例依賴安裝

---

這是一個基于nodejs的項目，所有的依賴必然都是在項目的package.json中配置好的。

{"name": "alt-tutorial","version": "1.0.0", "description": "A simple flux tutorial built with alt and react", "main": "server.js", "dependencies": { "alt": "^0.16.0", "react": "^0.12.2" }, "devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " }, "author": "Josh Perez <josh@goatslacker.com>", "license": "MIT" }

所以源碼clone下來后我們首先要做的就是在項目中執(zhí)行npm install去安裝package.json中指定的依賴了。

npm install

3. 官方實例運行

---

依賴安裝完后我們返回來再看下package.json中的scripts那部分配置:

{"scripts": {"build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " }, }

可以看到整個項目是通過browserify來進行構(gòu)建管理的(往后我準備將其切換成更流行的webpack)，而在運行命令“start“中會自動調(diào)用“build“來進行構(gòu)建，構(gòu)建好后就直接在瀏覽器中打開index.html進行顯示。

所以我們現(xiàn)在直接調(diào)用“start“來構(gòu)建并運行：

npm run start

然后默認瀏覽器（我的是chrome）就會打開相應(yīng)的頁面，我們可以點擊“favorite“按鈕來將相應(yīng)的location加到Favorite下面：

玩了下會發(fā)現(xiàn)這個例子很簡單直觀，就是上面顯示相應(yīng)的一些地名Locations，然后通過點擊每個地名后面的Favorite按鈕可以將對應(yīng)的地名添加到下面的Favorites列表里面。

4. 依賴升級

---

4.1 依賴包升級狀態(tài)查看

從官方實例的修改歷史可以看到，該實例代碼有點老了，特別是在nodejs更新迭代如此快速的今天。

我們也可以通過npm來查看依賴模塊的版本情況：

npm outdate

其中:

• Package: 依賴包的名字
• Current: 當前安裝版本
• Wanted: Package.json中期望的版本
• Latest: 當前市面最新的版本

4.2 軟件運行依賴包升級

那么我們?nèi)绾螌⑦@些依賴包批量升級到最新版本呢？我找到的一個方法是，首先將package.json中”dependencies”或”devDependencies”的所有的依賴包項設(shè)置成＊號，然后再執(zhí)行npm update, 然后就會獲得最新版本。

我們先進行軟件運行依賴包dependencies的升級：

{"name": "alt-tutorial","version": "1.0.0", "description": "A simple flux tutorial built with alt and react", "main": "server.js", "dependencies": { "alt": "*", "react": "*" }, "devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " }, "author": "Josh Perez <josh@goatslacker.com>", "license": "MIT" }

然后執(zhí)行npm update –save來安裝最新的版本并記錄到package.json里面

npm update --save

安裝完成后執(zhí)行 npm oudate

npm outdate

可以看到dependencies的依賴已經(jīng)更新到最新的版本（所以沒有顯示出來，因為這個命令是查看是否需要更新的）。但是開發(fā)工具相關(guān)的依賴devDependencies還沒有更新，因為我們剛才只是將dependencies相關(guān)的依賴設(shè)置成＊號來進行批量更新。

最后查看package.json可以看到dependencies已經(jīng)更新到最新版本:

{"name": "alt-tutorial","version": "1.0.0", "description": "A simple flux tutorial built with alt and react", "main": "server.js", "dependencies": { "alt": "^0.18.6", "react": "^15.3.2" }, "devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " }, "author": "Josh Perez <josh@goatslacker.com>", "license": "MIT" }

4.3 軟件開發(fā)依賴包升級

---

接下來我們將開發(fā)工具包devDependencies也一并更新了。同理，我們先將package.json中devDependencies相關(guān)的依賴項設(shè)置成＊：

{"name": "alt-tutorial","version": "1.0.0", "description": "A simple flux tutorial built with alt and react", "main": "server.js", "dependencies": { "alt": "^0.18.6", "react": "^15.3.2" }, "devDependencies": { "browserify": "*", "reactify": "*" }, "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " }, "author": "Josh Perez <josh@goatslacker.com>", "license": "MIT" }

這次我們使用npm update –save-dev命令來更新開發(fā)依賴包

npm update --save-dev

最后我們將會發(fā)現(xiàn)package.json中的devDependencies的依賴項也全部更新了過來：

{"name": "alt-tutorial","version": "1.0.0","description": "A simple flux tutorial built with alt and react", "main": "server.js", "dependencies": { "alt": "^0.18.6", "react": "^15.3.2" }, "devDependencies": { "browserify": "^13.1.0", "reactify": "^1.1.1" }, "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " }, "author": "Josh Perez <josh@goatslacker.com>", "license": "MIT" }

這時再通過npm outdate命令將不會看到有需要升級的依賴包。到此，我們的全部依賴包都已經(jīng)升級到最新。

5. AltContainer依賴包找不到錯誤

---

此時志得意滿(原諒我用這個詞，小白都是比較容易滿足的)的我準備npm run start來一氣呵成的運行起整個實例的時候，卻發(fā)現(xiàn)根本跑不起來：

根據(jù)提示，應(yīng)該是src/component下的web組件有使用到alt的AltContainer這個包，而在升級依賴包后，這個包卻找不到了。

我們首先看下代碼中引用到AltContainer的地方，根據(jù)提示，打開項目的src/components文件夾，可以看到下面有一個Locations.jsx文件，打開后看到文件最開始有對AltContainer的引用:

var React = require('react');
var AltContainer = require('alt/AltContainer');

根據(jù)經(jīng)驗，出現(xiàn)這種問題的時候無非是兩個原因：

1. 這個依賴包沒有正確安裝
2. 升級后的依賴包調(diào)用/引用方式變了。

發(fā)生這種事情，第一時間想到的肯定是去altjs的官網(wǎng)查看了。在官網(wǎng)的API Documentation中(鏈接：http://alt.js.org/docs/components/altContainer/)，很明顯AltContainer的引用方式已經(jīng)變了:

引用的不再是’alt/AltContainer’，而是’alt-Container’，至于官網(wǎng)提示中使用的關(guān)鍵字’import’，猜想應(yīng)該是es6最新導(dǎo)入方式，現(xiàn)在先不管，今后學(xué)習(xí)過程中有可能將這個項目的代碼轉(zhuǎn)換成es6，敬請期待。

所以我們這里只需要根據(jù)官網(wǎng)提示將引用方式改成以下就好了：

var React = require('react');
var AltContainer = require('alt-container');

當然，我們還是需要將這個依賴包給裝上的：

npm install alt-container --save

這時我們再構(gòu)建運行：

npm run start

會發(fā)現(xiàn)依然有報錯，但是已經(jīng)不是AltContainer引用找不到的錯誤了。

6. chromeDebug模塊找不到錯誤

---

從以上命令的輸出我們可以看到這次的錯誤是模塊alt下的utils中找不到chromeDebug這個引用：

這此在altjs官網(wǎng)沒有找到相應(yīng)的解決辦法，但是問了下google，發(fā)現(xiàn)原來chromeDebug已經(jīng)改成在alt-utils這個獨立的模塊的lib之下，所以只需要將相應(yīng)的引用代碼改一改就好了。

根據(jù)提示，找到出現(xiàn)問題的代碼是在src/alt.js代碼中：

var Alt = require('alt');
var alt = new Alt(); var chromeDebug = require('alt/utils/chromeDebug') chromeDebug(alt); module.exports = alt;

這里我們需要將chromeDebug的引用改成”alt-utils/lib/chromeDebug”:

var Alt = require('alt');
var alt = new Alt(); var chromeDebug = require('alt-utils/lib/chromeDebug') chromeDebug(alt); module.exports = alt;

然后我們安裝上alt-utils模塊并將依賴保存到package.json下面

npm install alt-utils --save

這時再跑“ npm run start“的時候就不會再報任何錯誤。

7. React.render沒定義錯誤

---

但是這時打開的是空白網(wǎng)頁，打開chrome的開發(fā)者工具查看時發(fā)現(xiàn)錯誤如下：

原因是在最新的reactjs版本中，渲染函數(shù)應(yīng)該調(diào)用的是react-dom模塊中的render，而非調(diào)用react模塊中的render。

追查后發(fā)現(xiàn)問題是處在src/App.jsx文件中：

var React = require('react');
var Locations = require('./components/Locations.jsx'); React.render( <Locations />, document.getElementById('ReactApp') );

這里我們需要改成:

var React = require('react');
var ReactDOM = require('react-dom'); var Locations = require('./components/Locations.jsx'); ReactDOM.render( <Locations />, document.getElementById('ReactApp') );

安裝react-dom依賴模塊:

npm install react-dom --save

然后構(gòu)建運行：

npm run build

8. dispatch 函數(shù)未定義錯誤

---

這時我們查看打開的網(wǎng)頁，可以看到Locations和Favorites兩個列表的標題都已經(jīng)顯示出來，但是Locations下面的內(nèi)容卻沒有顯示。

打開chrome開發(fā)調(diào)試工具：

發(fā)現(xiàn)是LocationActions.js中，每個action都調(diào)用了dispatch方法:

var alt = require('../alt');class LocationActions {updateLocations(locations) {this.dispatch(locations); } fetchLocations() { this.dispatch(); } locationsFailed(errorMessage) { this.dispatch(errorMessage); } favoriteLocation(location) { this.dispatch(location); } } module.exports = alt.createActions(LocationActions);

查看altjs官網(wǎng)得知，最新版本中我們不應(yīng)該顯式調(diào)用dispatch來將action分發(fā)到store，而是應(yīng)該通過return來達成。所以最終的代碼應(yīng)該改成：

var alt = require('../alt');class LocationActions {updateLocations(locations) {return locations; } fetchLocations() { return null; } locationsFailed(errorMessage) { return errorMessage; } favoriteLocation(location) { return location; } } module.exports = alt.createActions(LocationActions);

運行npm run start命令后我們可以看到整個頁面能夠正常顯示和操作：

9. 小結(jié)

---

作為一名小白，通過這次的實踐，這里主要有幾個地方需要小結(jié)下以便給自己提個醒:

• 通過npm outdate查看當前依賴包的版本狀況
• 通過將package.json的依賴包的版本信息設(shè)置成＊號，然后通過“npm update –save“ 或者“npm update –save-dev“ 可以批量將所有的依賴包升級到最新版本（這里如果有其它更好的辦法的請在評論中指教）
• 官方的reactjs-tutorial實例并沒有及時更新，稍不留神就可能學(xué)到的是一些陳舊的知識
• 碰到問題時可以先考慮去官網(wǎng)找答案，效率往往會比去google來得快且準確

本章的相關(guān)代碼已經(jīng)放到github，本人fork了alt-tutorial到alt-tutorial-webpack，大家可以clone出來然后切換到01這個branch來查看本篇文章涉及的相應(yīng)代碼修改。

github地址：https://github.com/kzlathander/alt-tutorial-webpack.git

10. 準備知識

---

如果對reactjs和flux的基本概念不清楚的，請先查看阮一峰網(wǎng)絡(luò)日記中的相應(yīng)文章：

• reactjs基本概念：請參考阮一峰的《Flux 架構(gòu)入門教程》
• flux基本概念：請參考阮一峰的《React 入門實例教程》

<<未完待續(xù)>>

轉(zhuǎn)載于:https://www.cnblogs.com/techgogogo/p/5900602.html

總結(jié)

以上是生活随笔為你收集整理的微信应用号开发知识贮备之altjs官方实例初探的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。