JS下的面向对象


借助构造函数

// 父类
function Parent () {
  this.name = 'parent'
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20

借助原型链

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = new Parent()

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数

组合形式 1

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = Parent.prototype

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数
console.log(obj.constructor) // Parent,我们希望的是 Child

组合形式 2

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = Object.create(Parent.prototype)
// 修正 constructor 指向
Child.prototype.constructor = Child

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数
console.log(obj.constructor) // Child


axios 文档


axios

Promise based HTTP client for the browers and Node.js

install axios

npm i -S axios

发送请求

// index.js

let axios = requrie('axios')

// get 请求
axios.get('/user?id=123')
    .then(res => console.log(res))
    .catch(err => console.log(err))

// 或者这样 
axios.get('/user', {
    params: {
        id: 123
    }
})
.then(res => console.log(res))
.catch(err => console.log(err))

// post 请求
axios.post('/user', {
    name: 'tao',
    age: 20
})
.then(res => console.log(res))
.catch(err => console.log(err))

// 使用 Promise.all() 发送多个并发请求
function getName() {
    return axios.get('/user/123/name')
}

function getAge() {
    return axios.get('/user/123/age')
}

axios.all([getName(), getAge()])
    .then(axios.spread((acct, perms) => {

    }))


Flexbox 布局


Flexbox 最适合是沿单个轴分布元素,那么是水平方向的,那么是垂直方向的。
Grid 它是二维的,也就是说水平和垂直方向都可以排列元素。

  • 一维布局,布局根据内容元素自适应:Flexbox
  • 二维布局,复杂非线性页面布局:Grid

拥抱自适应性

与浮动和其他传统布局不同的是,Flexbox 和 Grid 布局的出现是为了解决多设备出现的问题。

父元素和子元素

定义一个父容器:

.container{
    display: flex; /* 或者 display: inline-flex; */
}

容器里的子元素:

.item{
    order: {Int}; /* 设置排列顺序的权值 */
}

父容器的属性

flex-direction
  • row(默认值): 行排列,从左到右。
  • row-reverse: 反向,从右到左。
  • column: 列排列,从上到下。
  • column-reverse: 从下到上。
flex-wrap

一行或列不够放,多出的那一行/列要怎么放,用它 flex-wrap

  • nowrap(默认值): 单行显示。
  • wrap: 多行显示。
  • wrap-reverse: 多行显示。


利用 react-router 创建一个单页应用


使用 create-react-app 创建一个新的项目

# 创建新项目 spa
create-react-app spa
# 进入该文件夹,并安装 react-router-dom 包
cd spa
npm i -S react-router-dom

note: 可能 npm 安装不了 react-router-dom 我下午尝试了多次,最后改用 yarn 才安装上。。然后没安装 create-react-app 的话,要先安装该包。

去掉我们不要的文件,最初的工作

清空 publicsrc 这两个文件夹的文件。然后新建一个 index.htmlpublic 文件夹里头。

<!-- ./public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
  <title>SPA</title>
</head>
<body>
  <div id="root">
    
  </div>
</body>
</html>

新建一个 index.js 文件,在 src 文件夹里头。

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

import Main from './Main'

ReactDOM.render(
    <Main />, 
    document.getElementById('root')
);


利用 React 写一个 TodoList


写一个 TodoList 小应用

安装 create-react-app 模块

# -g 代表全局安装
npm install -g create-react-app

这个模块可以帮助我们更快的创建 React 应用。如果你的用了淘宝的 npm 镜像,安装过程大概要一两分钟吧。

创建一个 todolist 应用

在你想创建该应用的文件夹里,打开终端。我用的终端是 git bash 输入如下命令行:

# 我们会在终端当前路径下,创建一个文件夹 todolist 这就是一个 React 应用了。
create-react-app todolist
# 家里网络不好,还报错了,我创建了两次才成功。。。

启动该应用

# 进入创建的项目文件
cd todolist
# 启动成功后会打开浏览器访问 localhost:3000
npm start