模块入门
面向对象的 keyword
keyword (关键字),是程序自己保留的字符串(我们不能占用来做变量名),程序 用关键字发挥固定的语法作用。
- class : 意思是 类 ,作用是声明一个类
- this: 意思是当前,作用是指代 当前对象
- new: 新建,作用是新建一个实例,或者说创建一个对象( object )
- constructor():构造函数,在新建对象的时候,自动被执行,作用是对对象进行 一些初始化操作
- extends:本意是扩展,作用就是实现类的继承( inherit )
- super(): 本意是超 ,作用就是执行父类的构造函数 实际中,子类的 constructor 之中,直接用 this 会报错,加 super() 就解决
通过对关键字的总结,我们回顾了 OOP 的基本概念,虽然还有一些概念没有讲到,但是有了 上面这些,就可以去读一些实际项目了。
模块入门
模块( module ),基本意思就是把一个大程序,切分成多个文件。这样,说白了,一个文件 就是一个模块。但是,在 js 编程领域,模块有自己的一些固定的使用语法。
根据模块中导入/导出语法的不同,模块可以分为多种,但是我们课程中要求大家掌握的就是两种:
- ES6 模块,在 ES6 环境下使用,前台写 React 的时候,都用 ES6 模块
- Commonjs 模块,在 Nodejs 环境下使用,后台写服务器端代码,暂时都用 commonjs 模块 未来随着 nodejs 对 ES6 支持越来越好,后台我们也可能会直接使用 ES6 模块
ES6 模块
nodejs modules ,或者叫 commonjs 模块,基本语法如下:
require('./path')
module.exports={}
这种方式,我们暂时放一放。先来瞄准,react 写前台的时候要用的 ES6 模块。
es6 module 基本语法如下:
export // (命名导出,默认导出)
import // 导入
ES6 模块到底帮我们解决什么问题
ES6 模块的引入,基于的现实是当前 Web 项目变得复杂了,所以 JS 文件会切分成
不同的多个文件,这样,没有模块之前,我们是使用 <script>
标签来导入多个 js
文件,但是,如果一个 html 文件中有几十个 script 标签来加载 js 文件,那么造成
的问题就是:
- 会发出多个 http 请求,影响页面加载速度
- 各个 JS 文件之间的依赖关系混乱,给项目管理带来了困难
于是 ES6 模块就是我们的救星。
模块默认隔离所有内容
比如我们有这样的程序
class Person {
sayHello(){
console.log('hello');
}
}
let i = 1;
let peter = new Person;
peter.sayHello();
console.log(i);
是这样,一个文件中我们定义一个变量(或者一个类,函数),那么它的作用范围一般 就是在整个文件内可以用了,这样的好处是使用方便,但是,当程序写大之后,变量名 冲突就会带来调试困难。针对这个问题,ES6 模块的默认行为是隔离,一个变量一旦 移动到模块中,那么即使我们导入模块文件,那么默认情况下,这个变量也不能在模块之外 的位置被访问到。
既然模块中的变量,默认是隔离的,那么就需要我们明文的去进行变量的导出了导入。有两种 形式:
- 如果只需要导出一个变量,那就用
export default Person;
配合import Person from './Person'
,这种叫做默认导出 - 如果有多个变量要导出,那就
export { Person,i};
,配合import { Person, i} from ./Person
,这种形式叫做命名导出
理解了导入导出方式,也就掌握了 ES6 模块。
安装第三方模块
实际项目中,我们还需要安装大量的第三方模块,一般都是从 npmjs.com 上下载。
安装,就是要在一个 nodejs 项目中(首先保证项目中有 package.json) 文件
npm install --save react
使用,要导入一个第三方的模块,就不需要写路径
import React from 'react';
好,模块的知识我们就介绍这些就够用了。
进入 React 部分
参考: http://haoqicat.com/react-baby
ES6 模块的 Hello World
结合一个 class 来看