(一) Web 技术演变

1. 静态页面阶段

   • 页面以HTML文件的形式存储于服务器中，浏览器请求直接返回该HTML文件。

2. 动态页面阶段

   • ASP (C#)
   • JSP (Java)
   • PHP
   • 后端渲染过程

3. 动态页面（MVC）阶段

   • SpringMVC （IoC、OOM）
   • Controller、Model、View
   • 数据层关系映射

4. Ajax、jQuery 成为 Web 2.0的基础

   • 异步请求、局部刷新
   • JS操作DOM元素

5. React、AngularJS

   • SPA （Single Page Application）
   • 组件化 (典型 React.js )
   • 数据绑定 (MVVM, Model-View-View-Model,典型 AngularJS)
   • 前后端分离
   • 自动化测试、脚手架等(gulp,bower,grunt,webpack,babel...)
   • 驱动开发

6. Node.js

   • 打破JS在浏览器环境下的限制, V8的性能将JavaScript带到了一个新的高度、JS无所不能
   • 涉足广泛：
     • Web端 (React.js、AngularJS、AngularJS 2、backbone.js、vue.js)
     • 移动端 (Ionic <with Angular>，React Native<with React.js>、Weex<with vue.js>)
     • 服务器端 (Node.js、Express.js)
     • 桌面端 NW.js, electron
     • 全面覆盖解决方案(Meteor.js)
     • 其他
       • 游戏（WebGL）、AR、VR、物联网、硬件、操作系统（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 语言的发展历程

   ECMAScript 和 JavaScript 之间，前者是后者的标准，后者是前者的实现；

   • 网景公司、微软浏览器之争，JavaScript胜出
   • 1997 -> ECMAScript 1.0
   • 1998 -> ECMAScript 2.0
   • 1999 -> ECMAScript 3.0 (成为JavaScript的通行标准，得到了广泛支持)
   • 2007 -> ECMAScript 4.0
   • 2008 -> ECMAScript 5.0
   • 2011 -> ECMAScript 5.1 (成为ISO国际标准)
   • 2015 -> ECMAScript 6.0 (ECMAScript 2015)
   • 2016 -> ECMAScript 7.0 (ECMAScript 2016)
   • ...

   ECMAScript现在每年发布一个新版规范，ECMAScript 2017已在制定之中

2. 特点

   • 基于原型的、直译式的、弱类型的、动态类型的脚本语言

3. 语言本身

   • 实际上JavaScript是由ECMAScript，DOM和BOM三者组成的

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

   • 严格模式（使用"use strict"声明）

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

   • 语句结尾分号

   • 数据类型

     • 基本数据类型：null、undefined、bool、number、string

     • 复杂数据类型：object

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

     • typeof 操作符

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

     • 计算问题
       • 浮点数计算问题

       0.1 + 0.2 == 0.3 //false
       

       • Infinity、-Infinity
       • NaN （Not a Number）
       • 不同类型的比较或者转换，依次调用valueOf,toString
     • 位移操作
       • 有符号(>>、<<)
       • 无符号(>>>,<<<)
     • 逻辑操作符（短路作用）
     • 关系操作符
       • == 强制类型转换后，再进行比较
       • === 直接比较

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

     • 基本的语句
       • label with

   • 函数

     • 定义方式

     // 声明方式 1
     var func1 = function(){
         console.log("Hello World");
     };
     // 声明方式 2
     function func2 (){
         console.log("Hello World");
     }
     // 调用
     func1();
     func2();
     
     // 匿名函数、直接运行
     (function(num){
         console.log(num+1);
     })(1);
     

     • 参数
       • 不限制传递的参数的多少
       • arguments对象（类似数组，与数组的区别）
       • 函数不能重载，后定义函数会覆盖前面定义的

   • this 对象

     • 指向当前运行的对象，动态指向
     • call(this,arg1,arg2,...), apply(this,[arg1,arg2,arg3,...])
     • bind() 新语法特性

   • 闭包、封装

     function outer(){
         var in = 123; // 局部变量，函数调用结束后可以被释放
         return in;
     }
     outer(); // 123;
     /* JavaScript 中, 函数也是一个对象，若以函数的形式返回*/
     function outer(){
         var in = 123;    
         return function(){
             return in; 
         }
     }
     var func = outer();
     func(); // 123;
     

   • 对象及原型链

   • JSON数据结构

     var jsonObj = {
         name : "value"
     }
     

   • 浏览器对象（BOM操作）

   • 文本对象（DOM操作)

     • 树形结构
       • 根节点、元素节点、文本节点、属性节点
     • DOM操作

     // 获取元素
     var element = getElementById("name");
     var element = getElementsByTagName("name");
     var element = getElementsByClassName("name");
     // 获取/设置元素属性
     element.getAttribute(“title”)
     element.setAttribute(attribute,param)
     // 节点操作
     parentNode.childNodes()
     node.nodeType(元素节点、文本节点、属性节点)
     node.nodeValue
     parentNode.lastChild
     parentNode.firstChild
     // 创建、插入节点
     var element = createElement();
     parentNode.appenChild(element)
     parentNode.insertBefore(element);
     

     • 工具库
       • jQuery

       //简单灵活的选择器,简化属性操作
       var value = $("#id").attr('name');
       $("#id").attr('name','newName');
       

       • prototype.js

   • 异步请求 Ajax、Promise对象

     • XMLHttpRequest对象

4. 参考资料：

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

(三) React.js

1. 背景：

   • 网页加载流程
     1. 转换IP地址 域名（网址）到IP地址的转换，依次从浏览器缓存、操作系统host文件、网络运营商、域名查询服务器
     2. 建立连接 三次握手、TCP协议
     3. 发送请求
     4. 接受请求
     5. 返回数据 MVC
     6. 解析html文档、渲染页面 网络上得到HTML的相应字节时，DOM树就开始构建；DOM树到渲染树
     7. 加载资源 js文件、css、图片、字体
     8. 执行JavaScript脚本
        （JS渲染过程）

2. 主要内容

   • 虚拟DOM
   • 组件化
   • JSX语法
   • 编写component
     • 属性（this.props）
     • 状态（this.state）
     • 生命周期
       • 三种状态
         • Mounting：已插入真实 DOM
         • Updating：正在被重新渲染
         • Unmounting：已移出真实 DOM
       • 五种处理函数:
         • componentWillMount()
         • componentDidMount()
         • componentWillUpdate(object nextProps, object nextState)
         • componentDidUpdate(object prevProps, object prevState)
         • componentWillUnmount()
       • 两种特殊处理函数
         • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
         • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

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. 优缺点

   • 优点:
     1. 不使用WebView,性能提升;
     2. 热更新;
     3. 组件化，可复用；
     4. 布局灵活
   • 缺点:
     1. 学习成本偏高（大量前端的知识）;
     2. react-native 官方版本不稳定，更新周期约2个星期一版;
     3. iOS和Android不能共用一套代码；（官方组件还是区分iOS版本和Android版本）
     4. 性能有待提升

4. 学习地图

   • 工具的使用, Node, NPM, react-native-cli, git, IDE使用
   • 前端知识，（Javascript，Html，CSS）
   • ES5 及 ES6 新特性
   • React.js
   • JSX语法、Flexbox布局
   • 第三方组件

5. 环境搭建

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

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

   ---

   • IDE：Nuclide,VSCode,WebStorm等
   • 特别注意网络环境问题

6. 项目结构

   • package.json // 项目配置的说明

     {
         "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 // 第三方依赖

     根据package.json里的描述，将依赖包下载到该文件夹下管理

   • .babelrc //babel.js的配置文档，用于将ES6语法转为ES5

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

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

     Flow是一个用于静态类型检查的JavaScript的开发库。Flow依赖于类型推导来检测代码中可能的类型错误，并且允许逐步向现存的项目中添加类型声明。如果需要使用Flow，只需要用如下的命令：flow check
     *

7. 与Native的交互、通信

8. 组件使用

   • 编写自定义组件

     //组件一般性模板（ES6规范）
     import React, { Component } from 'react'; // 引入react相关的组件
     import {
         StyleSheet,
         View,
         Text
     } from 'react-native'; // 引入react-native相关的组件
     
     // 定义组件,继承Component类
     export default class TplView extends Component {
     
         static defaultProps = {
             // 默认属性  
         };
     
         static propTypes = {
             // 组件属性的类型要求
         };
         
         //构造函数
         constructor(props) {
             super(props);
             this.state = {
                 //TODO
             };
         }
     
         componentWillMout(){
             // 组件将要加载时的处理函数
         }
     
         render() {
             //渲染函数
             return (
                 <Text> Hello World </Text>
             );
         }
     
         componentDidMount() {
             // 组件已经加载到界面上
         }
     
     }
     // 定义样式
     const styles = StyleSheet.create({ 
     
     })
     

   • prop 和 state

     • prop
       保存组件的调用者传入的数据
     • state
       组件记录组件内部的自定义状态变量

     通过setState()方法触执行render函数以更新视图

   • Flex 布局（弹性布局）

     • flex

       • 定义组件间权重

     • flexDirection

       • row、column两个值，定义主轴方向

     • alignItems

       • 子组件在垂直方向上的对齐方式
       • flex-start、flex-end、center、stretch

     • justifyContent

       • 子组件在水平方向上的对齐方式
       • flex-start、flex-end、center、space-between、space-around

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

   • 原生组件、API使用

     见官网

   • 第三方组件

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

9. 网络请求-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层接口函数

11. 场景路由管理等

    • navigator
    • react-native-router-flux

12. 真机调试

    • 确保手机与开发环境（笔记本）在同一wifi下

    cd project                 //进入到项目根目录
    react-native run-android   //编译并运行 
    

    • 开启悬浮窗权限
    • dev工具菜单 （摇一摇）
      • Reload // 触发下载刷新代码
      • Debug JS Romotely // 在Chrome里查看console.log等内容，配合Chrome里的
      • Enable Live Reload // 自动重载
      • Enable Hot Reloading // 监控更多内容，如新建文件
      • Show Perf Monitor // 显示界面帧率
      • Dev Settings // 设置开启debug,最小化js文件，链接服务器的地址
    • 黄色警告
    • 红色错误

13. 性能优化

    • setNativeProp
    • 分包
    • 删除so、集成的类库

14. 发布生产过程

    • 编译，打包
    • Native层控制
    • JS版本发布服务器
    • 相应的管理平台等
    • 灰度发布等
    • 第三方服务 Microsoft CodePush

(五) Weex

Coming Soon