首先说明一下,此篇文章不可能把该语言在此讲一遍,只是给个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借鉴了这一做法。