RN（二）--JavaScript、ES6、Node
2018-01-02 本文已影响61人
doudo
首先说明一下，此篇文章不可能把该语言在此讲一遍，只是给个JavaScript的简单介绍以及学习途径。
一、JavaScript
JavaScript 是一门跨平台、面向对象的轻量级脚本语言。 在宿主环境（例如 web 浏览器）中， JavaScript 能够通过其所连接的环境提供的编程接口进行控制。
1. 背景
- 最初Netscape 发明了 JavaScript脚本语言，但当时有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性。
于是，不同版本的草案被提交给欧洲计算机制造商协会（ECMA）来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。 - 尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）
2.学习途径
- 网上教程：MDN（Mozilla开发者网络)
- 书：二选一
JavaScript 权威指南（第6版），俗称“犀牛书”，页数：1019
JavaScript 高级程序设计（第3版），俗称“红宝书”，页数：730
二、ES6基础
ES6，即ECMAScript 6 (2015)。
1.先列举一下我们最常用到的语法（接着后边会详细说明）
- 变量和常量声明
let greeting = 'hi';
const answer = 42; - 箭头函数
(a,b)=>a+b; - 扩展运算符
数组扩展：Math.max(...array);
对象扩展：var extended = { ...obj, a: 10 }; - 类
class C extends Component - 解构
var { isActive, style } = this.props; - 模块的导入导出
import React, { Component } from 'react'; - 对象方法的简写
var obj = { method() { return 10; } }; - 对象属性的简写
var name = ‘reactnativecn'; var obj = { name }; - 字符串模板
var who = 'world'; var str = 'Hello ${who}'; - 数组的新增方法（map、includes）
- Async函数 ？
async function doStuffAsync() { const foo = await doOtherStuffAsync(); };
2. 变量的声明
- 有两种： var 或者 let
var和let有如此……这般的不同等等，
虽然绝大部分现有的代码是var，总之你始终用let就好了
- 常量的声明使用const
const number = 1;
let title = ‘详情页’, name = ‘reactnative’;
没有声明或声明后没有赋值的变量值为 undefined
3. 箭头函数
(x)=>2*x，即参数=>返回值
我们只需记住箭头函数的两种写法：
- class外部
let 函数名=(参数)=>{逻辑实现}; - class内部
class SomeComponent extends Component {
方法名 = (参数) => {� // 内部逻辑
};
}
区别，即class内部不写let。
务必还要记住一个坑：
如果箭头函数的代码块部分使用了大括号，则此时切莫忘了使用return语句返回：
() => 1 // 返回1
() => { 1 } // 返回 undefined
() => { return 1; } // 返回1
4. 扩展运算符...
...扩展运算符好比是把压缩包解压到当前目录。
// 数组
let a = [1, 2, 3]
console.log(...a) // 1 2 3
console.log(1, ...a, 5) // 1 2 3 4 5
// 对象
let z = { a: 3, b: 4 };
let n = { ...z };
console.log(n) // { a: 3, b: 4 }
5. 解构
赋值更简单：
//数组
let a[a,b,c] = [1,2,3];
console.log(a,b,c) //1,2,3
//对象
var props = {checked: false, data: {count: 3, price: 100}};
var {checked, {data: {count}}} = props;
console.log(checked, count); //false 3
5. 模块的导入导出
1. import HomePage from '???'
- 'a'，此时会去第三方库中找a目录，引用node_modules/a/index.js，或是node_modules/a/package.json中main字段所指定的js文件。
- './a'，引用同级目录下的a.js文件。.js后缀可写可不写。
- '../a/b'，引用父级目录中的a目录下的b.js文件，如果b为目录则引用b目录中的index.js文件。
2. import HomePage from './a'与import {moduleA，moduleB} from './a'
//b.js文件
import HomePage from './a'
//a.js文件
export default HomePage；//重点：有且只能有一个default
//b.js文件
import {moduleA，moduleB} from './a'
//a.js文件
export moduleA; //重点，没有default
export moduleB; //重点，没有default
6. 数组新增方法（map，includes）
- includes，数组查找元素，返回true、false
[1, 2, 3].includes(3); //true
[1, 2, 3].includes(4); //false
//字符串也可以用
'hello'.includes('hel'); //true
- map，返回等长的新数组
let a = [1, 2, 3];
let b = a.map(i => i+1); //[2, 3, 4];
//还有个用处，可以返回多个组件
let a = ['a', 'b', 'c'];
let tags = a.map(n => <Text>{n}<Text>);
7. 更多ES6详细内容
以上只是主要的一些，更多内容可以去ECMAScript 6 入门（阮一峰）学习。
三、Node基础
1. React Native为什么需要Node.js
- 提供React Packager运行的环境
- 提供npm包管理器来安装第三方模块（node_modules）
- 提供一些可参考的代码规范（commonjs）
2. npm怎么用
我们只需要一条命令，npm install。但是它有两个重要的参数，需要我们记住：
- -g，安装可在命令行直接执行的模块（如：react-native-cli）
- --save(注意是两个-)或-S（一个-，大写S），安装模块，并写把模块名写入package.json文件。
3. Package.json和node_modules
Package.json文件为需要用到的第三方库的列表，类似于iOS中Podfile文件。
node_modules用于存放下载的第三方库。
但是使用时，需要注意以下几点：
- 执行npm install命令，必须在有package.json文件的目录中进行。
- 一个正常创建的项目中已经包括package.json文件，不过你也可以通过npm init创建一个空的package.json（混编原生时）。
npm使用小结：
1.复制或下载的项目，第一反应是执行npm install（不带参数）。
2.想要新加第三方模块通过npm install 库名 --save。
3.node_modules原则上不复制、不修改、不上传，随用随装。
4. 什么是commonjs规范
- js本来没有模块的概念，没有办法相互引用。
- Node.js指定了commonjs模块规范，便于分拆、引用。
- React Native借鉴了这一做法。
