分类 JavaScript 下的文章

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


利用 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


ES6部分总结


var、let、const 比较

var 会有声明提升,并初始化为 undefined

console.log(a)  //  undefined
var a = 1
console.log(a)  //  1

console.log(b)  //  Uncaught ReferenceError: b is not defined
b = 3
console.log(b)  //  3
console.log(window.b)  //  3

疑问:

  • 为什么打印 b 会报错?
  • 为什么 window.bb 结果是一样的?


Notification 桌面通知


前几天,我们做了个小项目,然后去答辩。老师说能不能在Web端加一个通知信息的东西,比方说,我上传了新的文件上去,你们就能及时收到通知,知道班里有人上传新的文件了。我就想起facebook的桌面通知,所以就尝试着写起了demo

Notification 是什么?

简单的说就是浏览器上的桌面通知。如下图:

Notification就长这样!