模块入门

面向对象的 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 来看