前端知识，温故知新

作者: MarcusMa | 来源:发表于2017-03-12 23:14 被阅读0次

(一) Web 技术演变

静态页面阶段
- 页面以HTML文件的形式存储于服务器中，浏览器请求直接返回该HTML文件。
动态页面阶段
- ASP (C#)
- JSP (Java)
- PHP
- 后端渲染过程
动态页面（MVC）阶段
- SpringMVC （IoC、OOM）
- Controller、Model、View
- 数据层关系映射
Ajax、jQuery 成为 Web 2.0的基础
- 异步请求、局部刷新
- JS操作DOM元素
React、AngularJS
- SPA （Single Page Application）
- 组件化 (典型 React.js )
- 数据绑定 (MVVM, Model-View-View-Model,典型 AngularJS)
- 前后端分离
- 自动化测试、脚手架等(gulp,bower,grunt,webpack,babel...)
- 驱动开发
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）
Atwood's Law

Any application that can be written in JavaScript, will eventually be written in JavaScript.
参考资料：
1. http://blog.csdn.net/zzzkk2009/article/details/9849431
2. http://blog.jobbole.com/45170/

(二) JavaScript

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已在制定之中
特点
- 基于原型的、直译式的、弱类型的、动态类型的脚本语言

语言本身

实际上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对象

参考资料：
1. http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/
2. http://www.w3school.com.cn/js/

(三) React.js

背景：
- 网页加载流程
  1. 转换IP地址 域名（网址）到IP地址的转换，依次从浏览器缓存、操作系统host文件、网络运营商、域名查询服务器
  2. 建立连接 三次握手、TCP协议
  3. 发送请求
  4. 接受请求
  5. 返回数据 MVC
  6. 解析html文档、渲染页面 网络上得到HTML的相应字节时，DOM树就开始构建；DOM树到渲染树
  7. 加载资源 js文件、css、图片、字体
  8. 执行JavaScript脚本
    （JS渲染过程）
主要内容
- 虚拟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)：组件判断是否重新渲染时调用
参考资料

(四) React Native

理念：

Learn Once Write Anywhere
- Web iOS Android
- Virtual DOM
- React（JS/JSX）
使用情况
- FaceBook
- 腾讯
- 百度
- 京东
优缺点
- 优点:
  1. 不使用WebView,性能提升;
  2. 热更新;
  3. 组件化，可复用；
  4. 布局灵活
- 缺点:
  1. 学习成本偏高（大量前端的知识）;
  2. react-native 官方版本不稳定，更新周期约2个星期一版;
  3. iOS和Android不能共用一套代码；（官方组件还是区分iOS版本和Android版本）
  4. 性能有待提升
学习地图
- 工具的使用, Node, NPM, react-native-cli, git, IDE使用
- 前端知识，（Javascript，Html，CSS）
- ES5 及 ES6 新特性
- React.js
- JSX语法、Flexbox布局
- 第三方组件
环境搭建

参考 http://reactnative.cn/docs/0.40/getting-started.html
- 安装 Node.js (npm)
- 安装 React Native的命令行工具（react-native-cli）
- 安装 Android Studio
- 安装 Watchman
- 安装其他
- IDE：Nuclide,VSCode,WebStorm等
- 特别注意网络环境问题
项目结构
- 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
  *
与Native的交互、通信

组件使用

编写自定义组件

//组件一般性模板（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

网络请求-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);
    });

自定义Native层组件和模块
- 自定义Native层组件向Javascript层暴露使用
- 自定义Native层接口函数
场景路由管理等
- navigator
- react-native-router-flux
真机调试
- 确保手机与开发环境（笔记本）在同一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文件，链接服务器的地址
- 黄色警告
- 红色错误
性能优化
- setNativeProp
- 分包
- 删除so、集成的类库
发布生产过程
- 编译，打包
- Native层控制
- JS版本发布服务器
- 相应的管理平台等
- 灰度发布等
- 第三方服务 Microsoft CodePush

(五) Weex

Coming Soon

前端知识，温故知新

(一) Web 技术演变

(二) JavaScript

(三) React.js

(四) React Native

(五) Weex

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读