RN(二)--JavaScript、ES6、Node

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

参考:
React Native中文网
MDN(Mozilla开发者网络)
ECMAScript 6 入门(阮一峰)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,140评论 7 35
  • JavaScript 模块化编程 网站越来越复杂,js代码、js文件也越来越多,会遇到什么问题? 命名冲突; 文件...
    magic_pill阅读 1,408评论 0 1
  • 个人入门学习用笔记、不过多作为参考依据。如有错误欢迎斧正 目录 简书好像不支持锚点、复制搜索(反正也是写给我自己看...
    kirito_song阅读 2,449评论 1 37
  • 实在不好意思,题目起的太大了,这里只是对Masnory的实现仿照写一个最简单的demo.把实现思路简单阐述一下,共...
    长若执念阅读 1,780评论 8 20
  • 一晃暑假过去半个月了。从放了假开始上班,日子和流水似的说溜走就溜走。这半个月,好充实。新的工作,接触一个新...
    Ada秦小念阅读 382评论 2 0