(一) Web 技術(shù)演變

1. 靜態(tài)頁(yè)面階段

   • 頁(yè)面以HTML文件的形式存儲(chǔ)于服務(wù)器中中狂，瀏覽器請(qǐng)求直接返回該HTML文件。

2. 動(dòng)態(tài)頁(yè)面階段

   • ASP (C#)
   • JSP (Java)
   • PHP
   • 后端渲染過(guò)程

3. 動(dòng)態(tài)頁(yè)面（MVC）階段

   • SpringMVC （IoC盛险、OOM）
   • Controller苦掘、Model鸟蜡、View
   • 數(shù)據(jù)層關(guān)系映射

4. Ajax挺邀、jQuery 成為 Web 2.0的基礎(chǔ)

   • 異步請(qǐng)求端铛、局部刷新
   • JS操作DOM元素

5. React禾蚕、AngularJS

   • SPA （Single Page Application）
   • 組件化 (典型 React.js )
   • 數(shù)據(jù)綁定 (MVVM, Model-View-View-Model,典型 AngularJS)
   • 前后端分離
   • 自動(dòng)化測(cè)試狂丝、腳手架等(gulp,bower,grunt,webpack,babel...)
   • 驅(qū)動(dòng)開(kāi)發(fā)

6. Node.js

   • 打破JS在瀏覽器環(huán)境下的限制, V8的性能將JavaScript帶到了一個(gè)新的高度几颜、JS無(wú)所不能
   • 涉足廣泛：
     • Web端 (React.js蛋哭、AngularJS、AngularJS 2叛本、backbone.js彤钟、vue.js)
     • 移動(dòng)端 (Ionic <with Angular>逸雹，React Native<with React.js>、Weex<with vue.js>)
     • 服務(wù)器端 (Node.js剧防、Express.js)
     • 桌面端 NW.js, electron
     • 全面覆蓋解決方案(Meteor.js)
     • 其他
       • 游戲（WebGL）峭拘、AR狮暑、VR搬男、物聯(lián)網(wǎng)、硬件备埃、操作系統(tǒng)（OS.js）

7. Atwood's Law

   Any application that can be written in JavaScript, will eventually be written in JavaScript.

8. 參考資料：

   1. http://blog.csdn.net/zzzkk2009/article/details/9849431
   2. http://blog.jobbole.com/45170/

(二) JavaScript

1. JavaScript 語(yǔ)言的發(fā)展歷程

   ECMAScript 和 JavaScript 之間按脚，前者是后者的標(biāo)準(zhǔn)辅搬，后者是前者的實(shí)現(xiàn)堪遂；

   • 網(wǎng)景公司萌庆、微軟瀏覽器之爭(zhēng)踊兜，JavaScript勝出
   • 1997 -> ECMAScript 1.0
   • 1998 -> ECMAScript 2.0
   • 1999 -> ECMAScript 3.0 (成為JavaScript的通行標(biāo)準(zhǔn)，得到了廣泛支持)
   • 2007 -> ECMAScript 4.0
   • 2008 -> ECMAScript 5.0
   • 2011 -> ECMAScript 5.1 (成為ISO國(guó)際標(biāo)準(zhǔn))
   • 2015 -> ECMAScript 6.0 (ECMAScript 2015)
   • 2016 -> ECMAScript 7.0 (ECMAScript 2016)
   • ...

   ECMAScript現(xiàn)在每年發(fā)布一個(gè)新版規(guī)范于游，ECMAScript 2017已在制定之中

2. 特點(diǎn)

   • 基于原型的贰剥、直譯式的蚌成、弱類型的、動(dòng)態(tài)類型的腳本語(yǔ)言

3. 語(yǔ)言本身

   • 實(shí)際上JavaScript是由ECMAScript芹缔，DOM和BOM三者組成的

     • DOM -> Document Object Model(Map)
     • BOM -> Browser Object Model(Map) / Window Object Model

   • 嚴(yán)格模式（使用"use strict"聲明）

     function somefunction(){
         "use strict"
         //...
     }
     

   • 語(yǔ)句結(jié)尾分號(hào)

   • 數(shù)據(jù)類型

     • 基本數(shù)據(jù)類型：null最欠、undefined芝硬、bool轧房、number奶镶、string

     • 復(fù)雜數(shù)據(jù)類型：object

       • constructor
       • hasOwnProperty
       • isPrototypOf
       • prototypeIsEnumerable
       • toLocaleString
       • toString
       • valueOf

     • typeof 操作符

     typeof null == "object" // true
     null == undefined // true
     

     • 計(jì)算問(wèn)題
       • 浮點(diǎn)數(shù)計(jì)算問(wèn)題

       0.1 + 0.2 == 0.3 //false
       

       • Infinity实辑、-Infinity
       • NaN （Not a Number）
       • 不同類型的比較或者轉(zhuǎn)換藻丢，依次調(diào)用valueOf,toString
     • 位移操作
       • 有符號(hào)(>>悠反、<<)
       • 無(wú)符號(hào)(>>>,<<<)
     • 邏輯操作符（短路作用）
     • 關(guān)系操作符
       • == 強(qiáng)制類型轉(zhuǎn)換后斋否，再進(jìn)行比較
       • === 直接比較

       "55" == 55 // ture
       NaN != NaN // true
       null == undefined // true
       
       "55" === 55  // false
       null === undefined // false
       

     • 基本的語(yǔ)句
       • label with

   • 函數(shù)

     • 定義方式

     // 聲明方式 1
     var func1 = function(){
         console.log("Hello World");
     };
     // 聲明方式 2
     function func2 (){
         console.log("Hello World");
     }
     // 調(diào)用
     func1();
     func2();
     
     // 匿名函數(shù)茵臭、直接運(yùn)行
     (function(num){
         console.log(num+1);
     })(1);
     

     • 參數(shù)
       • 不限制傳遞的參數(shù)的多少
       • arguments對(duì)象（類似數(shù)組，與數(shù)組的區(qū)別）
       • 函數(shù)不能重載雏亚，后定義函數(shù)會(huì)覆蓋前面定義的

   • this 對(duì)象

     • 指向當(dāng)前運(yùn)行的對(duì)象摩钙，動(dòng)態(tài)指向
     • call(this,arg1,arg2,...), apply(this,[arg1,arg2,arg3,...])
     • bind() 新語(yǔ)法特性

   • 閉包胖笛、封裝

     function outer(){
         var in = 123; // 局部變量长踊，函數(shù)調(diào)用結(jié)束后可以被釋放
         return in;
     }
     outer(); // 123;
     /* JavaScript 中, 函數(shù)也是一個(gè)對(duì)象，若以函數(shù)的形式返回*/
     function outer(){
         var in = 123;    
         return function(){
             return in; 
         }
     }
     var func = outer();
     func(); // 123;
     

   • 對(duì)象及原型鏈

   • JSON數(shù)據(jù)結(jié)構(gòu)

     var jsonObj = {
         name : "value"
     }
     

   • 瀏覽器對(duì)象（BOM操作）

   • 文本對(duì)象（DOM操作)

     • 樹(shù)形結(jié)構(gòu)
       • 根節(jié)點(diǎn)日杈、元素節(jié)點(diǎn)莉擒、文本節(jié)點(diǎn)涨冀、屬性節(jié)點(diǎn)
     • DOM操作

     // 獲取元素
     var element = getElementById("name");
     var element = getElementsByTagName("name");
     var element = getElementsByClassName("name");
     // 獲取/設(shè)置元素屬性
     element.getAttribute(“title”)
     element.setAttribute(attribute,param)
     // 節(jié)點(diǎn)操作
     parentNode.childNodes()
     node.nodeType(元素節(jié)點(diǎn)鹿鳖、文本節(jié)點(diǎn)壮莹、屬性節(jié)點(diǎn))
     node.nodeValue
     parentNode.lastChild
     parentNode.firstChild
     // 創(chuàng)建命满、插入節(jié)點(diǎn)
     var element = createElement();
     parentNode.appenChild(element)
     parentNode.insertBefore(element);
     

     • 工具庫(kù)
       • jQuery

       //簡(jiǎn)單靈活的選擇器,簡(jiǎn)化屬性操作
       var value = $("#id").attr('name');
       $("#id").attr('name','newName');
       

       • prototype.js

   • 異步請(qǐng)求 Ajax、Promise對(duì)象

     • XMLHttpRequest對(duì)象

4. 參考資料：

   1. http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/
   2. http://www.w3school.com.cn/js/

(三) React.js

1. 背景：

   • 網(wǎng)頁(yè)加載流程
     1. 轉(zhuǎn)換IP地址 域名（網(wǎng)址）到IP地址的轉(zhuǎn)換歼疮，依次從瀏覽器緩存韩脏、操作系統(tǒng)host文件赡矢、網(wǎng)絡(luò)運(yùn)營(yíng)商、域名查詢服務(wù)器
     2. 建立連接 三次握手痕檬、TCP協(xié)議
     3. 發(fā)送請(qǐng)求
     4. 接受請(qǐng)求
     5. 返回?cái)?shù)據(jù) MVC
     6. 解析html文檔梦谜、渲染頁(yè)面 網(wǎng)絡(luò)上得到HTML的相應(yīng)字節(jié)時(shí)袭景，DOM樹(shù)就開(kāi)始構(gòu)建；DOM樹(shù)到渲染樹(shù)
     7. 加載資源 js文件荒澡、css单山、圖片米奸、字體
     8. 執(zhí)行JavaScript腳本
        （JS渲染過(guò)程）

2. 主要內(nèi)容

   • 虛擬DOM
   • 組件化
   • JSX語(yǔ)法
   • 編寫component
     • 屬性（this.props）
     • 狀態(tài)（this.state）
     • 生命周期
       • 三種狀態(tài)
         • Mounting：已插入真實(shí) DOM
         • Updating：正在被重新渲染
         • Unmounting：已移出真實(shí) DOM
       • 五種處理函數(shù):
         • componentWillMount()
         • componentDidMount()
         • componentWillUpdate(object nextProps, object nextState)
         • componentDidUpdate(object prevProps, object prevState)
         • componentWillUnmount()
       • 兩種特殊處理函數(shù)
         • componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用
         • shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用

3. 參考資料

   1. http://www.cocoachina.com/webapp/20150721/12692.html
   2. https://github.com/tsrot/study-notes/blob/master/React%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%B1%87%E6%80%BB.md
   3. http://wiki.jikexueyuan.com/project/react/

(四) React Native

1. 理念：

   Learn Once Write Anywhere

   • Web iOS Android
   • Virtual DOM
   • React（JS/JSX）

2. 使用情況

   • FaceBook
   • 騰訊
   • 百度
   • 京東

3. 優(yōu)缺點(diǎn)

   • 優(yōu)點(diǎn):
     1. 不使用WebView,性能提升;
     2. 熱更新;
     3. 組件化悴晰，可復(fù)用铡溪；
     4. 布局靈活
   • 缺點(diǎn):
     1. 學(xué)習(xí)成本偏高（大量前端的知識(shí)）;
     2. react-native 官方版本不穩(wěn)定棕硫，更新周期約2個(gè)星期一版;
     3. iOS和Android不能共用一套代碼袒啼；（官方組件還是區(qū)分iOS版本和Android版本）
     4. 性能有待提升

4. 學(xué)習(xí)地圖

   • 工具的使用, Node, NPM, react-native-cli, git, IDE使用
   • 前端知識(shí)瘤泪，（Javascript，Html，CSS）
   • ES5 及 ES6 新特性
   • React.js
   • JSX語(yǔ)法髓棋、Flexbox布局
   • 第三方組件

5. 環(huán)境搭建

   參考 http://reactnative.cn/docs/0.40/getting-started.html

   • 安裝 Node.js (npm)
   • 安裝 React Native的命令行工具（react-native-cli）
   • 安裝 Android Studio
   • 安裝 Watchman
   • 安裝 其他

   ---

   • IDE：Nuclide,VSCode,WebStorm等
   • 特別注意網(wǎng)絡(luò)環(huán)境問(wèn)題

6. 項(xiàng)目結(jié)構(gòu)

   • package.json // 項(xiàng)目配置的說(shuō)明

     {
         "name": "WithReactNative",
         "version": "0.0.1",
         "private": true,
         "scripts": {
             "start": "node node_modules/react-native/local-cli/cli.js start",
             "test": "jest"
         },
         "dependencies": {
             "flow-bin": "^0.39.0",
             "react": "^15.4.2",
             "react-native": "0.40.0"
         },
         "jest": {
             "preset": "jest-react-native"
         },
         "devDependencies": {
             "babel-jest": "17.0.2",
             "babel-preset-react-native": "1.9.0",
         }
     }
     

   • node_modules // 第三方依賴

     根據(jù)package.json里的描述，將依賴包下載到該文件夾下管理

   • .babelrc //babel.js的配置文檔恬吕，用于將ES6語(yǔ)法轉(zhuǎn)為ES5

     http://babeljs.cn/docs/usage/babelrc/

   • .flowconfig // Flow 工具配置文件

     Flow是一個(gè)用于靜態(tài)類型檢查的JavaScript的開(kāi)發(fā)庫(kù)铐料。Flow依賴于類型推導(dǎo)來(lái)檢測(cè)代碼中可能的類型錯(cuò)誤豺旬，并且允許逐步向現(xiàn)存的項(xiàng)目中添加類型聲明族阅。如果需要使用Flow，只需要用如下的命令：flow check
     *

7. 與Native的交互愧沟、通信

8. 組件使用

   • 編寫自定義組件

     //組件一般性模板（ES6規(guī)范）
     import React, { Component } from 'react'; // 引入react相關(guān)的組件
     import {
         StyleSheet,
         View,
         Text
     } from 'react-native'; // 引入react-native相關(guān)的組件
     
     // 定義組件,繼承Component類
     export default class TplView extends Component {
     
         static defaultProps = {
             // 默認(rèn)屬性  
         };
     
         static propTypes = {
             // 組件屬性的類型要求
         };
         
         //構(gòu)造函數(shù)
         constructor(props) {
             super(props);
             this.state = {
                 //TODO
             };
         }
     
         componentWillMout(){
             // 組件將要加載時(shí)的處理函數(shù)
         }
     
         render() {
             //渲染函數(shù)
             return (
                 <Text> Hello World </Text>
             );
         }
     
         componentDidMount() {
             // 組件已經(jīng)加載到界面上
         }
     
     }
     // 定義樣式
     const styles = StyleSheet.create({ 
     
     })
     

   • prop 和 state

     • prop
       保存組件的調(diào)用者傳入的數(shù)據(jù)
     • state
       組件記錄組件內(nèi)部的自定義狀態(tài)變量

     通過(guò)setState()方法觸執(zhí)行render函數(shù)以更新視圖

   • Flex 布局（彈性布局）

     • flex

       • 定義組件間權(quán)重

     • flexDirection

       • row沐寺、column兩個(gè)值芽丹，定義主軸方向

     • alignItems

       • 子組件在垂直方向上的對(duì)齊方式
       • flex-start拔第、flex-end场钉、center、stretch

     • justifyContent

       • 子組件在水平方向上的對(duì)齊方式
       • flex-start泳猬、flex-end得封、center指郁、space-between闲坎、space-around

     參考 http://www.runoob.com/cssref/css3-pr-align-items.html

   • 原生組件茬斧、API使用

     見(jiàn)官網(wǎng)

   • 第三方組件

     • github.com 上搜索 “react-native-*”
     • https://github.com/jondot/awesome-react-native

9. 網(wǎng)絡(luò)請(qǐng)求-fetch

   // fetch(url,{option}).then().then()
   fetch(
       requestUrl,
       {
           method:method,
           headers:{
               'Accept' : 'application/json; charset=utf-8'
           }
       })
       .then((responseData)=>{
           if (responseData.status < 400 ){
               return responseData.json(); 
           }
           else{
               throw new Error(responseData.message,responseData.status);
           }
       })
       .then(function(json){
           console.log(json);
       });
   
   

10. 自定義Native層組件和模塊

    • 自定義Native層組件向Javascript層暴露使用
    • 自定義Native層接口函數(shù)

11. 場(chǎng)景路由管理等

    • navigator
    • react-native-router-flux

12. 真機(jī)調(diào)試

    • 確保手機(jī)與開(kāi)發(fā)環(huán)境（筆記本）在同一wifi下

    cd project                 //進(jìn)入到項(xiàng)目根目錄
    react-native run-android   //編譯并運(yùn)行 
    

    • 開(kāi)啟懸浮窗權(quán)限
    • dev工具菜單 （搖一搖）
      • Reload // 觸發(fā)下載刷新代碼
      • Debug JS Romotely // 在Chrome里查看console.log等內(nèi)容，配合Chrome里的
      • Enable Live Reload // 自動(dòng)重載
      • Enable Hot Reloading // 監(jiān)控更多內(nèi)容慷彤，如新建文件
      • Show Perf Monitor // 顯示界面幀率
      • Dev Settings // 設(shè)置開(kāi)啟debug,最小化js文件底哗，鏈接服務(wù)器的地址
    • 黃色警告
    • 紅色錯(cuò)誤

13. 性能優(yōu)化

    • setNativeProp
    • 分包
    • 刪除so、集成的類庫(kù)

14. 發(fā)布生產(chǎn)過(guò)程

    • 編譯唉侄，打包
    • Native層控制
    • JS版本發(fā)布服務(wù)器
    • 相應(yīng)的管理平臺(tái)等
    • 灰度發(fā)布等
    • 第三方服務(wù) Microsoft CodePush

(五) Weex

Coming Soon