什么是单例模式？

保证一个类仅有一个实例，并提供一个访问它的全局访问点

用一个变量标志当前是否已经为某个类型创建过对象，如果是，则下次直接返回之前创建的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var Singleton = function (name) {
  this.name = name;
  this.instance = null;
}

Singleton.prototype.getName = function () {
  console.log(this.name);
}

Singleton.getInstance = function (name) {
  if (!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
}

var a = Singleton.getInstance('Tony1');
var b = Singleton.getInstance('Tony2');

console.log(a === b); // true

通过 Singleton.getInstance来获取 Singleton 类的唯一对象，里边使用了 new 来获取，导致了这个类的“不透明性”。

当初次加载页面的时候，需要一些动画渐入，并且当滑动到当前内容时也会出现动画，之后就恢复正常，所以就用到了 WOW.js。

比如：RT-Thread

再比如设计师必备：sketchapp

# 需要定义一个最小值和一个最大值之间的随机数

1
2
3
4
5

function ourFunction(ourMin, ourMax) {
  return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;
}

ourFunction(1, 9);

前言

什么是前端路由

每次 GET 或者 POST 请求在服务端有一个专门的正则配置列表，然后匹配到具体的一条路径后，分发到不同的 Controller，进行各种操作，最终将 html 或数据返回给前端，这就完成了一次 IO。

前端路由的实现有两种：

• URL的hash，即锚点（#），js 通过 hashChange 事件监听 url 的变化
• HTML5 的 History 模式

优点：

• 页面持久性，如音乐网站
• 前后端彻底分离，如 Angular 的 ngRouter，React 的 ReactRouter，还有 Vue 的 vue-router

需要考虑的问题：

• 页面的拔插性
• 页面的生命周期
• 内存管理等

设置Cookie总结

前端工程化与webpack

前端工程化主要解决的问题：

• JavaScript、css 代码的合并与压缩
• CSS 预处理：Less、Sass、Stylus 的编译
• 生成雪碧图
• ES6 -> ES5
• 模块化等

webpack 的主要使用场景是单页面富应用（SPA），将一些诸如：typescript、less、jpg、vue等格式的文件通过特定的加载器（Loader）编译后，最终统一生成 .js、.css、.png等静态资源文件。

如何文件都可称为是一个模块。webpack就是处理模块间的依赖关系，并把他们进行打包。