解决Vue单页面应用在微信等APP里面无法设置title问题

作用

Vuejs 单页应用在 iOS 系统下部分 APP 的 webview 中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

安装

Vuejs 2.x

npm install vue-titles --save
ES6

main.js

Vue.use(require('vue-titles'));

使用场景 1 :单页面应用切换路由跳转更新 title

路由定义(只截取一部分)

// ...
const routes = [
  {
    name: 'Home',
    path: '/home',
    meta: {
      title: '首页'
    },
    component: require('../views/Home.vue')
  },
  {
    name: 'UCenter',
    path: '/ucenter',
    meta: {
      title: '用户中心'
    },
    component: require('../views/UCenter.vue')
  }
];
// ...

App.vue 建议全局只使用一次该指令 标题可用 vuex 或者 router 中定义 不要多处使用!!

<!-- 任意元素中加 v-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
<div v-title="$route.meta.title"></div>
<!--or-->
<router-view v-title="$route.meta.title"></router-view>

使用场景 2:同一个路由不同状态需要手动设置 title

// 需要的地方直接调用
this.$setTitle('厉害了我的哥!');

vue-mini-player 基于Vue的一个轻量级HTML5视频播放器

vue-mini-player

基于 Vue 的一个轻量级视频播放组件,适配 PC 和移动端

avatar

安装

$ npm install vue-mini-player -S

使用

# main.js
import vueMiniPlayer from 'vue-mini-player'
import 'vue-mini-player/lib/vue-mini-player.css'
Vue.use(vueMiniPlayer)

在项目中使用 vueMiniPlayer

<template>
  <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" @fullscreen="handleFullscreen" />
</template>
<script>
  export default {
    data () {
      return {
        video: {
            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
            cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
            muted: false,
            loop: false,
            preload: 'auto',
            poster: '',
            volume: 1,
            autoplay: false
        }
      }
    },
    computed(){
      $video(){
        return this.$refs.vueMiniPlayer.$video;
      }
    },
    methods:{
      handleFullscreen(){

      }
    }
  }
</script>

💡 特色

1.轻量级 HTML5 播放器,精美 UI 控件,简单易上手 Gzip 压缩不足 10k 2.提供以 npm 的形式安装提供全局组件 3.多格式视频配置,移动端+PC 通用模式

  • 多类型视频支持
  • 自定义海报
  • 多平台兼容
  • 静音开关
  • 播放时间进度
  • 全屏支持
  • 拖动播放
  • 倍速播放
  • MSE 支持
  • 弹幕支持

✈️ 参数

名称

默认值

描述

mutex

false

互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器

video

-

视频相关参数

video.url

-

视频播放源,支持 Array 形式传入多种视频格式

video.cover

-

视频海报

video.muted

false

是否静音播放

video.loop

false

视频是否循环播放

video.preload

‘auto’

视频预加载,可选值: ‘none’, ‘metadata’, ‘auto’

video.poster

-

原生视频默认海报暂不设置,只设置 video.cover

video.volume

1

默认音量

video.autoplay

false

视频自动播放

🚀 事件

名称

描述

fullscreen

全屏事件

ready

视频播放器准备好

clearMode

清洁模式执行

videoPlay

播放器执行 play 或者 pause

created

组件生命周期

mounted

组件生命周期

beforeDestroy

组件生命周期

destroyed

组件生命周期

GitHub:https://github.com/webweifeng/vue-mini-player

console 对象与控制台详解

console 对象

console对象是 JavaScript 的原生对象,它有点像 Unix 系统的标准输出stdout和标准错误stderr,可以输出各种信息到控制台,并且还提供了很多有用的辅助方法。 console的常见用途有两个。

  • 调试程序,显示网页代码运行时的错误信息。
  • 提供了一个命令行接口,用来与网页代码互动。

console对象的浏览器实现,包含在浏览器自带的开发工具之中。以 Chrome 浏览器的“开发者工具”(Developer Tools)为例,可以使用下面三种方法的打开它。

  1. 按 F12 或者Control + Shift + i(PC)/ Command + Option + i(Mac)。
  2. 浏览器菜单选择“工具/开发者工具”。
  3. 在一个页面元素上,打开右键菜单,选择其中的“Inspect Element”。

打开开发者工具以后,顶端有多个面板。

  • Elements:查看网页的 HTML 源码和 CSS 代码。
  • Resources:查看网页加载的各种资源文件(比如代码文件、字体文件 CSS 文件等),以及在硬盘上创建的各种内容(比如本地缓存、Cookie、Local Storage等)。
  • Network:查看网页的 HTTP 通信情况。
  • Sources:查看网页加载的脚本源码。
  • Timeline:查看各种网页行为随时间变化的情况。
  • Performance:查看网页的性能情况,比如 CPU 和内存消耗。
  • Console:用来运行 JavaScript 命令。

这些面板都有各自的用途,以下只介绍Console面板(又称为控制台)。 Console面板基本上就是一个命令行窗口,你可以在提示符下,键入各种命令。

console 对象的静态方法

console对象提供的各种静态方法,用来与控制台窗口互动。

console.log(),console.info(),console.debug()

console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。

console.log('Hello World')
// Hello World
console.log('a', 'b', 'c')
// a b c

console.log方法会自动在每次输出的结尾,添加换行符。

console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3

如果第一个参数是格式字符串(使用了格式占位符),console.log方法将依次用后面的参数替换占位符,然后再进行输出。

console.log(' %s + %s = %s', 1, 1, 2)
//  1 + 1 = 2

上面代码中,console.log方法的第一个参数有三个占位符(%s),第二、三、四个参数会在显示时,依次替换掉这个三个占位符。 console.log方法支持以下占位符,不同类型的数据必须使用对应的占位符。

  • %s 字符串

  • %d 整数

  • %i 整数

  • %f 浮点数

  • %o 对象的链接

  • %c CSS 格式字符串

    var number = 11 * 9;
    var color = ‘red’;

    console.log(‘%d %s balloons’, number, color);
    // 99 red balloons

上面代码中,第二个参数是数值,对应的占位符是%d,第三个参数是字符串,对应的占位符是%s。 使用%c占位符时,对应的参数必须是 CSS 代码,用来对输出内容进行 CSS 渲染。

console.log(
  '%cThis text is styled!',
  'color: red; background: yellow; font-size: 24px;'
)

上面代码运行后,输出的内容将显示为黄底红字。 console.log方法的两种参数格式,可以结合在一起使用。

console.log(' %s + %s ', 1, 1, '= 2')
// 1 + 1  = 2

如果参数是一个对象,console.log会显示该对象的值。

console.log({foo: 'bar'})
// Object {foo: "bar"}
console.log(Date)
// function Date() { [native code] }

上面代码输出Date对象的值,结果为一个构造函数。 console.infoconsole.log方法的别名,用法完全一样。只不过console.info方法会在输出信息的前面,加上一个蓝色图标。 console.debug方法与console.log方法类似,会在控制台输出调试信息。但是,默认情况下,console.debug输出的信息不会显示,只有在打开显示级别在verbose的情况下,才会显示。 console对象的所有方法,都可以被覆盖。因此,可以按照自己的需要,定义console.log方法。

['log', 'info', 'warn', 'error'].forEach(function(method) {
  console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("出错了!");
// 2014-05-18T09:00.000Z 出错了!

上面代码表示,使用自定义的console.log方法,可以在显示结果添加当前时间。

console.warn(),console.error()

warn方法和error方法也是在控制台输出信息,它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角,表示警告;error方法输出信息时,在最前面加一个红色的叉,表示出错。同时,还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。

console.error('Error: %s (%i)', 'Server is not responding', 500)
// Error: Server is not responding (500)
console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)

可以这样理解,log方法是写入标准输出(stdout),warn方法和error方法是写入标准错误(stderr)。

console.table()

对于某些复合类型的数据,console.table方法可以将其转为表格显示。

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

上面代码的language变量,转为表格显示如下。

(index)

name

fileExtension

0

“JavaScript”

“.js”

1

“TypeScript”

“.ts”

2

“CoffeeScript”

“.coffee”

下面是显示表格内容的例子。

var languages = {
  csharp: { name: "C#", paradigm: "object-oriented" },
  fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

上面代码的language,转为表格显示如下。

(index)

name

paradigm

csharp

“C#”

“object-oriented”

fsharp

“F#”

“functional”

console.count()

count方法用于计数,输出它被调用了多少次。

function greet(user) {
  console.count();
  return 'hi ' + user;
}

greet('bob')
//  : 1
// "hi bob"

greet('alice')
//  : 2
// "hi alice"

greet('bob')
//  : 3
// "hi bob"

上面代码每次调用greet函数,内部的console.count方法就输出执行次数。 该方法可以接受一个字符串作为参数,作为标签,对执行次数进行分类。

function greet(user) {
  console.count(user);
  return "hi " + user;
}

greet('bob')
// bob: 1
// "hi bob"

greet('alice')
// alice: 1
// "hi alice"

greet('bob')
// bob: 2
// "hi bob"

上面代码根据参数的不同,显示bob执行了两次,alice执行了一次。

console.dir(),console.dirxml()

dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。

console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// Object
//   f1: "foo"
//   f2: "bar"
//   __proto__: Object

上面代码显示dir方法的输出结果,比log方法更易读,信息也更丰富。 该方法对于输出 DOM 对象非常有用,因为会显示 DOM 对象的所有属性。

console.dir(document.body)

Node 环境之中,还可以指定以代码高亮的形式输出。

console.dir(obj, {colors: true})

dirxml方法主要用于以目录树的形式,显示 DOM 节点。

console.dirxml(document.body)

如果参数不是 DOM 节点,而是普通的 JavaScript 对象,console.dirxml等同于console.dir

console.dirxml([1, 2, 3])
// 等同于
console.dir([1, 2, 3])

console.assert()

console.assert方法主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。这样就相当于提示用户,内部状态不正确。 它接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会提示有错误,在控制台输出第二个参数,否则不会有任何结果。

console.assert(false, '判断条件不成立')
// Assertion failed: 判断条件不成立

// 相当于
try {
  if (!false) {
    throw new Error('判断条件不成立');
  }
} catch(e) {
  console.error(e);
}

下面是一个例子,判断子节点的个数是否大于等于500。

console.assert(list.childNodes.length < 500, '节点个数大于等于500')

上面代码中,如果符合条件的节点小于500个,不会有任何输出;只有大于等于500时,才会在控制台提示错误,并且显示指定文本。

console.time(),console.timeEnd()

这两个方法用于计时,可以算出一个操作所花费的准确时间。

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
// Array initialize: 1914.481ms

time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后,控制台会显示“计时器名称: 所耗费的时间”。

console.group(),console.groupEnd(),console.groupCollapsed()

console.groupconsole.groupEnd这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。

console.group('一级分组');
console.log('一级分组的内容');

console.group('二级分组');
console.log('二级分组的内容');

console.groupEnd(); // 二级分组结束
console.groupEnd(); // 一级分组结束

上面代码会将“二级分组”显示在“一级分组”内部,并且“一级分组”和“二级分组”前面都有一个折叠符号,可以用来折叠本级的内容。 console.groupCollapsed方法与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。

console.groupCollapsed('Fetching Data');

console.log('Request Sent');
console.error('Error: Server not responding (500)');

console.groupEnd();

上面代码只显示一行”Fetching Data“,点击后才会展开,显示其中包含的两行。

console.trace(),console.clear()

console.trace方法显示当前执行的代码在堆栈中的调用路径。

console.trace()
// console.trace()
//   (anonymous function)
//   InjectedScript._evaluateOn
//   InjectedScript._evaluateAndWrap
//   InjectedScript.evaluate

console.clear方法用于清除当前控制台的所有输出,将光标回置到第一行。如果用户选中了控制台的“Preserve log”选项,console.clear方法将不起作用。

控制台命令行 API

浏览器控制台中,除了使用console对象,还可以使用一些控制台自带的命令行方法。 (1)$_ $_属性返回上一个表达式的值。

2 + 2
// 4
$_
// 4

(2)$0 - $4 控制台保存了最近5个在 Elements 面板选中的 DOM 元素,$0代表倒数第一个(最近一个),$1代表倒数第二个,以此类推直到$4。 (3)$(selector) $(selector)返回第一个匹配的元素,等同于document.querySelector()。注意,如果页面脚本对$有定义,则会覆盖原始的定义。比如,页面里面有 jQuery,控制台执行$(selector)就会采用 jQuery 的实现,返回一个数组。 (4)$$(selector) $$(selector)返回选中的 DOM 对象,等同于document.querySelectorAll。 (5)$x(path) $x(path)方法返回一个数组,包含匹配特定 XPath 表达式的所有 DOM 元素。

$x("//p[a]")

上面代码返回所有包含a元素的p元素。 (6)inspect(object) inspect(object)方法打开相关面板,并选中相应的元素,显示它的细节。DOM 元素在Elements面板中显示,比如inspect(document)会在 Elements 面板显示document元素。JavaScript 对象在控制台面板Profiles面板中显示,比如inspect(window)。 (7)getEventListeners(object) getEventListeners(object)方法返回一个对象,该对象的成员为object登记了回调函数的各种事件(比如clickkeydown),每个事件对应一个数组,数组的成员为该事件的回调函数。 (8)keys(object)values(object) keys(object)方法返回一个数组,包含object的所有键名。 values(object)方法返回一个数组,包含object的所有键值。

var o = {'p1': 'a', 'p2': 'b'};

keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]

(9)monitorEvents(object[, events]) ,unmonitorEvents(object[, events]) monitorEvents(object[, events])方法监听特定对象上发生的特定事件。事件发生时,会返回一个Event对象,包含该事件的相关信息。unmonitorEvents方法用于停止监听。

monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])

上面代码分别表示单个事件和多个事件的监听方法。

monitorEvents($0, 'mouse');
unmonitorEvents($0, 'mousemove');

上面代码表示如何停止监听。 monitorEvents允许监听同一大类的事件。所有事件可以分成四个大类。

  • mouse:”mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”

  • key:”keydown”, “keyup”, “keypress”, “textInput”

  • touch:”touchstart”, “touchmove”, “touchend”, “touchcancel”

  • control:”resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

    monitorEvents($(“#msg”), “key”);

上面代码表示监听所有key大类的事件。 (10)其他方法 命令行 API 还提供以下方法。

  • clear():清除控制台的历史。
  • copy(object):复制特定 DOM 元素到剪贴板。
  • dir(object):显示特定对象的所有属性,是console.dir方法的别名。
  • dirxml(object):显示特定对象的 XML 形式,是console.dirxml方法的别名。

debugger 语句

debugger语句主要用于除错,作用是设置断点。如果有正在运行的除错工具,程序运行到debugger语句时会自动停下。如果没有除错工具,debugger语句不会产生任何结果,JavaScript 引擎自动跳过这一句。 Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。

for(var i = 0; i < 5; i++){
  console.log(i);
  if (i === 2) debugger;
}

上面代码打印出0,1,2以后,就会暂停,自动打开源码界面,等待进一步处理。

参考链接

JavaScript 错误机制处理

Error 实例对象

JavaScript 解析或运行时,一旦发生错误,引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例。

var err = new Error('出错了');
err.message // "出错了"

上面代码中,我们调用Error构造函数,生成一个实例对象errError构造函数接受一个参数,表示错误提示,可以从实例的message属性读到这个参数。抛出Error实例对象以后,整个程序就中断在发生错误的地方,不再往下执行。 JavaScript 语言标准只提到,Error实例对象必须有message属性,表示出错时的提示信息,没有提到其他属性。大多数 JavaScript 引擎,对Error实例还提供namestack属性,分别表示错误的名称和错误的堆栈,但它们是非标准的,不是每种实现都有。

  • message:错误提示信息
  • name:错误名称(非标准属性)
  • stack:错误的堆栈(非标准属性)

使用namemessage这两个属性,可以对发生什么错误有一个大概的了解。

if (error.name) {
  console.log(error.name + ': ' + error.message);
}

stack属性用来查看错误发生时的堆栈。

function throwit() {
  throw new Error('');
}

function catchit() {
  try {
    throwit();
  } catch(e) {
    console.log(e.stack); // print stack trace
  }
}

catchit()
// Error
//    at throwit (~/examples/throwcatch.js:9:11)
//    at catchit (~/examples/throwcatch.js:3:9)
//    at repl:1:5

上面代码中,错误堆栈的最内层是throwit函数,然后是catchit函数,最后是函数的运行环境。

原生错误类型

Error实例对象是最一般的错误类型,在它的基础上,JavaScript 还定义了其他6种错误对象。也就是说,存在Error的6个派生对象。

SyntaxError 对象

SyntaxError对象是解析代码时发生的语法错误。

// 变量名错误
var 1a;
// Uncaught SyntaxError: Invalid or unexpected token

// 缺少括号
console.log 'hello');
// Uncaught SyntaxError: Unexpected string

上面代码的错误,都是在语法解析阶段就可以发现,所以会抛出SyntaxError。第一个错误提示是“token 非法”,第二个错误提示是“字符串不符合要求”。

ReferenceError 对象

ReferenceError对象是引用一个不存在的变量时发生的错误。

// 使用一个不存在的变量
unknownVariable
// Uncaught ReferenceError: unknownVariable is not defined

另一种触发场景是,将一个值分配给无法分配的对象,比如对函数的运行结果或者this赋值。

// 等号左侧不是变量
console.log() = 1
// Uncaught ReferenceError: Invalid left-hand side in assignment

// this 对象不能手动赋值
this = 1
// ReferenceError: Invalid left-hand side in assignment

上面代码对函数console.log的运行结果和this赋值,结果都引发了ReferenceError错误。

RangeError 对象

RangeError对象是一个值超出有效范围时发生的错误。主要有几种情况,一是数组长度为负数,二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。

// 数组长度不得为负数
new Array(-1)
// Uncaught RangeError: Invalid array length

TypeError 对象

TypeError对象是变量或参数不是预期类型时发生的错误。比如,对字符串、布尔值、数值等原始类型的值使用new命令,就会抛出这种错误,因为new命令的参数应该是一个构造函数。

new 123
// Uncaught TypeError: number is not a func

var obj = {};
obj.unknownMethod()
// Uncaught TypeError: obj.unknownMethod is not a function

上面代码的第二种情况,调用对象不存在的方法,也会抛出TypeError错误,因为obj.unknownMethod的值是undefined,而不是一个函数。

URIError 对象

URIError对象是 URI 相关函数的参数不正确时抛出的错误,主要涉及encodeURI()decodeURI()encodeURIComponent()decodeURIComponent()escape()unescape()这六个函数。

decodeURI('%2')
// URIError: URI malformed

EvalError 对象

eval函数没有被正确执行时,会抛出EvalError错误。该错误类型已经不再使用了,只是为了保证与以前代码兼容,才继续保留。

总结

以上这6种派生错误,连同原始的Error对象,都是构造函数。开发者可以使用它们,手动生成错误对象的实例。这些构造函数都接受一个参数,代表错误提示信息(message)。

var err1 = new Error('出错了!');
var err2 = new RangeError('出错了,变量超出有效范围!');
var err3 = new TypeError('出错了,变量类型无效!');

err1.message // "出错了!"
err2.message // "出错了,变量超出有效范围!"
err3.message // "出错了,变量类型无效!"

自定义错误

除了 JavaScript 原生提供的七种错误对象,还可以定义自己的错误对象。

function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

上面代码自定义一个错误对象UserError,让它继承Error对象。然后,就可以生成这种自定义类型的错误了。

new UserError('这是自定义的错误!');

throw 语句

throw语句的作用是手动中断程序执行,抛出一个错误。

if (x <= 0) {
  throw new Error('x 必须为正数');
}
// Uncaught ReferenceError: x is not defined

上面代码中,如果变量x小于等于0,就手动抛出一个错误,告诉用户x的值不正确,整个程序就会在这里中断执行。可以看到,throw抛出的错误就是它的参数,这里是一个Error实例。 throw也可以抛出自定义错误。

function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

throw new UserError('出错了!');
// Uncaught UserError {message: "出错了!", name: "UserError"}

上面代码中,throw抛出的是一个UserError实例。 实际上,throw可以抛出任何类型的值。也就是说,它的参数可以是任何值。

// 抛出一个字符串
throw 'Error!';
// Uncaught Error!

// 抛出一个数值
throw 42;
// Uncaught 42

// 抛出一个布尔值
throw true;
// Uncaught true

// 抛出一个对象
throw {
  toString: function () {
    return 'Error!';
  }
};
// Uncaught {toString: ƒ}

对于 JavaScript 引擎来说,遇到throw语句,程序就中止了。引擎会接收到throw抛出的信息,可能是一个错误实例,也可能是其他类型的值。

try…catch 结构

一旦发生错误,程序就中止执行了。JavaScript 提供了try...catch结构,允许对错误进行处理,选择是否往下执行。

try {
  throw new Error('出错了!');
} catch (e) {
  console.log(e.name + ": " + e.message);
  console.log(e.stack);
}
// Error: 出错了!
//   at <anonymous>:3:9
//   ...

上面代码中,try代码块抛出错误(上例用的是throw语句),JavaScript 引擎就立即把代码的执行,转到catch代码块,或者说错误被catch代码块捕获了。catch接受一个参数,表示try代码块抛出的值。 如果你不确定某些代码是否会报错,就可以把它们放在try...catch代码块之中,便于进一步对错误进行处理。

try {
  f();
} catch(e) {
  // 处理错误
}

上面代码中,如果函数f执行报错,就会进行catch代码块,接着对错误进行处理。 catch代码块捕获错误之后,程序不会中断,会按照正常流程继续执行下去。

try {
  throw "出错了";
} catch (e) {
  console.log(111);
}
console.log(222);
// 111
// 222

上面代码中,try代码块抛出的错误,被catch代码块捕获后,程序会继续向下执行。 catch代码块之中,还可以再抛出错误,甚至使用嵌套的try...catch结构。

var n = 100;

try {
  throw n;
} catch (e) {
  if (e <= 50) {
    // ...
  } else {
    throw e;
  }
}
// Uncaught 100

上面代码中,catch代码之中又抛出了一个错误。 为了捕捉不同类型的错误,catch代码块之中可以加入判断语句。

try {
  foo.bar();
} catch (e) {
  if (e instanceof EvalError) {
    console.log(e.name + ": " + e.message);
  } else if (e instanceof RangeError) {
    console.log(e.name + ": " + e.message);
  }
  // ...
}

上面代码中,catch捕获错误之后,会判断错误类型(EvalError还是RangeError),进行不同的处理。

finally 代码块

try...catch结构允许在最后添加一个finally代码块,表示不管是否出现错误,都必需在最后运行的语句。

function cleansUp() {
  try {
    throw new Error('出错了……');
    console.log('此行不会执行');
  } finally {
    console.log('完成清理工作');
  }
}

cleansUp()
// 完成清理工作
// Uncaught Error: 出错了……
//    at cleansUp (<anonymous>:3:11)
//    at <anonymous>:10:1

上面代码中,由于没有catch语句块,一旦发生错误,代码就会中断执行。中断执行之前,会先执行finally代码块,然后再向用户提示报错信息。

function idle(x) {
  try {
    console.log(x);
    return 'result';
  } finally {
    console.log('FINALLY');
  }
}

idle('hello')
// hello
// FINALLY

上面代码中,try代码块没有发生错误,而且里面还包括return语句,但是finally代码块依然会执行。而且,这个函数的返回值还是result。 下面的例子说明,return语句的执行是排在finally代码之前,只是等finally代码执行完毕后才返回。

var count = 0;
function countUp() {
  try {
    return count;
  } finally {
    count++;
  }
}

countUp()
// 0
count
// 1

上面代码说明,return语句里面的count的值,是在finally代码块运行之前就获取了。 下面是finally代码块用法的典型场景。

openFile();

try {
  writeFile(Data);
} catch(e) {
  handleError(e);
} finally {
  closeFile();
}

上面代码首先打开一个文件,然后在try代码块中写入文件,如果没有发生错误,则运行finally代码块关闭文件;一旦发生错误,则先使用catch代码块处理错误,再使用finally代码块关闭文件。 下面的例子充分反映了try...catch...finally这三者之间的执行顺序。

function f() {
  try {
    console.log(0);
    throw 'bug';
  } catch(e) {
    console.log(1);
    return true; // 这句原本会延迟到 finally 代码块结束再执行
    console.log(2); // 不会运行
  } finally {
    console.log(3);
    return false; // 这句会覆盖掉前面那句 return
    console.log(4); // 不会运行
  }

  console.log(5); // 不会运行
}

var result = f();
// 0
// 1
// 3

result
// false

上面代码中,catch代码块结束执行之前,会先执行finally代码块。 catch代码块之中,触发转入finally代码快的标志,不仅有return语句,还有throw语句。

function f() {
  try {
    throw '出错了!';
  } catch(e) {
    console.log('捕捉到内部错误');
    throw e; // 这句原本会等到finally结束再执行
  } finally {
    return false; // 直接返回
  }
}

try {
  f();
} catch(e) {
  // 此处不会执行
  console.log('caught outer "bogus"');
}

//  捕捉到内部错误

上面代码中,进入catch代码块之后,一遇到throw语句,就会去执行finally代码块,其中有return false语句,因此就直接返回了,不再会回去执行catch代码块剩下的部分了。 try代码块内部,还可以再使用try代码块。

try {
  try {
    console.log('Hello world!'); // 报错
  }
  finally {
    console.log('Finally');
  }
  console.log('Will I run?');
} catch(error) {
  console.error(error.message);
}
// Finally
// consle is not defined

上面代码中,try里面还有一个try。内层的try报错,这时会执行内层的finally代码块,然后抛出错误,被外层的catch捕获。

参考连接 #

分析微信公众号-LocalStorage 缓存机制

微信公众号的阅读体验非常流畅,作为一名程序员很好奇他具体实现套路是什么,相比于我们常规开发用了什么黑科技? 于是下意识的打开浏览器控制台一探究 奇怪!Network里面没有发起任何请求,那文章数据哪里来呢?

假设:服务端渲染机制

通过请求得到的HTML文件发现并不是,只拿到了标题,很显然这个假设否定❌ 继续查找发现js文件都没有返回,那么就只肯定是本地localStorage 我这菜鸟也暂时想不到其他的可能了, 看到 Local Storage 里密密麻麻的 js 文件,我就放心了这确实也是一种前端加载优化策略。

通过网上的相关文章和本地分析,梳理一下大概实现的方案

缓存更新机制

项目在迭代开发的过程中,难以避免需要更新资源文件,常用的方法有文件名${md5}.js或者在资源 url 后面加上特定后缀的方式 etc.,而在微信做法中以 \_MOON__pages/report.js_ 为例,其版本信息使用 key 为 \_MOON__pages/report.js_ver_ 的存储项保存:

__MOON__pages/report.js_ver: //res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/report3b8dd6.js

我们不直接使用这个 value 动态插入 script 节点来加载该文件,而是根据后端提供的配置信息,判断是选择使用缓存的 \_MOON__pages/report.js_ 文件,还是重新发起加载请求。

搭建更新代码的脚手架

(加载 combo 化)使用基于 localStorage 的缓存机制,就需要一个脚手架来管理资源文件的读取和写入,不难看出微信使用的是自己开发的脚手架 _moon.js_,阅读其源码代价较大,暂不分析。

资源配置信息

前端在进行资源更新时需要后端提供一份依据供前端用于判断哪些资源需要更新,并且脚手架 moon.js 需要该资源配置信息才能正常工作,所以配置信息一定要在 moon.js 的 script 标签前输出:

window.moon_map = {"new_video/player.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/new_video/player.html3b8dd6.js","biz_wap/zepto/touch.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/zepto/touch34c264.js","biz_wap/zepto/event.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/zepto/event34c264.js","biz_wap/zepto/zepto.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/zepto/zepto34c264.js","page/pages/video.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/pages/video.css3b8dd6.js","a/appdialog_confirm.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/appdialog_confirm.html34f0d8.js","widget/wx_profile_dialog_primary.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/widget/wx_profile_dialog_primary.css34f0d8.js","appmsg/emotion/caret.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/caret278965.js","new_video/player.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/new_video/player3b8ecd.js","a/appdialog_confirm.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/appdialog_confirm34c32a.js","biz_wap/jsapi/cardticket.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/jsapi/cardticket34c264.js","biz_common/utils/emoji_panel_data.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/emoji_panel_data3518c6.js","biz_common/utils/emoji_data.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/emoji_data3518c6.js","appmsg/emotion/textarea.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/textarea353f34.js","appmsg/emotion/nav.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/nav278965.js","appmsg/emotion/common.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/common3518c6.js","appmsg/emotion/slide.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/slide2a9cd9.js","pages/loadscript.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/loadscript39aac6.js","pages/music_report_conf.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/music_report_conf39aac6.js","pages/report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/report3b8dd6.js","pages/player_adaptor.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/player_adaptor39d6ee.js","pages/music_player.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/music_player3af14e.js","appmsg/emotion/dom.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/dom31ff31.js","appmsg/comment_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/comment_tpl.html36c376.js","biz_wap/utils/fakehash.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/fakehash38c7af.js","biz_common/utils/wxgspeedsdk.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/wxgspeedsdk3518c6.js","a/video.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/video3b8ecd.js","a/sponsor.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/sponsor3b86a9.js","a/app_card.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/app_card393ef4.js","a/ios.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/ios393966.js","a/android.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/android393966.js","a/profile.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/profile31ff31.js","a/cpc_a_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/cpc_a_tpl.html3b540a.js","a/sponsor_a_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/sponsor_a_tpl.html36c7cf.js","a/a_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a_tpl.html3b86a9.js","a/mpshop.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/mpshop311179.js","a/wxopen_card.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/wxopen_card3a95b8.js","a/card.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/card311179.js","biz_wap/utils/position.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/position34c264.js","a/a_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a_report393966.js","appmsg/my_comment_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/my_comment_tpl.html36906d.js","appmsg/cmt_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/cmt_tpl.html369d00.js","sougou/a_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/sougou/a_tpl.html2c6e7c.js","appmsg/emotion/emotion.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/emotion353f34.js","biz_wap/utils/wapsdk.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/wapsdk34c264.js","biz_common/utils/report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/report3518c6.js","appmsg/open_url_with_webview.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/open_url_with_webview3145f0.js","biz_common/utils/http.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/http3518c6.js","biz_common/utils/cookie.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/cookie3518c6.js","appmsg/topic_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/topic_tpl.html31ff31.js","pages/weapp_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/weapp_tpl.html36906d.js","biz_common/utils/monitor.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/monitor3518c6.js","appmsg/weapp_common.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/weapp_common3af55a.js","pages/voice_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/voice_tpl.html38518d.js","pages/kugoumusic_ctrl.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/kugoumusic_ctrl393e3a.js","pages/qqmusic_ctrl.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/qqmusic_ctrl39b68c.js","pages/voice_component.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/voice_component3af14e.js","pages/qqmusic_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/qqmusic_tpl.html393e3a.js","new_video/ctl.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/new_video/ctl2d441f.js","a/testdata.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/testdata3b86a9.js","appmsg/reward_entry.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/reward_entry3b1cff.js","appmsg/comment.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/comment3944ad.js","appmsg/like.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/like375fea.js","pages/version4video.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/version4video3a9bef.js","a/a.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a3b8ecd.js","rt/appmsg/getappmsgext.rt.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/rt/appmsg/getappmsgext.rt2c21f6.js","biz_wap/utils/storage.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/storage34c264.js","biz_common/tmpl.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/tmpl3518c6.js","appmsg/share_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/share_tpl.html36906d.js","appmsg/img_copyright_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/img_copyright_tpl.html2a2c13.js","pages/video_ctrl.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/video_ctrl36ebcf.js","biz_common/ui/imgonepx.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/ui/imgonepx3518c6.js","biz_common/utils/respTypes.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/respTypes3518c6.js","biz_wap/utils/log.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/log34c264.js","sougou/index.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/sougou/index36913b.js","biz_wap/safe/mutation_observer_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/safe/mutation_observer_report34c264.js","appmsg/fereport.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/fereport3b9457.js","appmsg/report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/report3404b3.js","appmsg/report_and_source.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/report_and_source3a7477.js","appmsg/page_pos.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/page_pos3a95b8.js","appmsg/cdn_speed_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/cdn_speed_report3097b2.js","appmsg/wxtopic.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/wxtopic31a3be.js","appmsg/new_index.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/new_index36906d.js","appmsg/weapp.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/weapp3af55a.js","appmsg/weproduct.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/weproduct3af55a.js","appmsg/voicemsg.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/voicemsg3b1748.js","appmsg/autoread.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/autoread3af14e.js","appmsg/voice.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/voice38518d.js","appmsg/qqmusic.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/qqmusic39dc43.js","appmsg/iframe.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/iframe39ab71.js","appmsg/product.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/product393966.js","appmsg/review_image.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/review_image3af55a.js","appmsg/outer_link.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/outer_link275627.js","appmsg/copyright_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/copyright_report2ec4b2.js","appmsg/async.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/async3b27d5.js","biz_wap/ui/lazyload_img.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/ui/lazyload_img3af55a.js","biz_common/log/jserr.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/log/jserr3518c6.js","appmsg/share.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/share3b4418.js","appmsg/cdn_img_lib.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/cdn_img_lib38b7bb.js","biz_common/utils/url/parse.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/url/parse36ebcf.js","page/appmsg/not_in_mm.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/not_in_mm.css36906d.js","page/appmsg/page_mp_article_improve_combo.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_combo.css3b86a9.js","page/appmsg_new/not_in_mm.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg_new/not_in_mm.css36f05c.js","page/appmsg_new/combo.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg_new/combo.css3b86a9.js","biz_wap/jsapi/core.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/jsapi/core3b0568.js","biz_common/dom/event.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/dom/event3a25e9.js","appmsg/test.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/test354009.js","biz_wap/utils/mmversion.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/mmversion34c264.js","appmsg/max_age.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/max_age2fdd28.js","biz_common/dom/attr.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/dom/attr3518c6.js","biz_wap/utils/ajax.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/ajax38c31a.js","appmsg/log.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/log300330.js","biz_common/dom/class.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/dom/class3518c6.js","biz_wap/utils/device.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/device34c264.js","biz_common/utils/string/html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/string/html3518c6.js","appmsg/index.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/index3b1748.js"};

存在 XSS 安全隐患

\_MOON__pages/report.js_ 文件的入口处加入代码 alert(‘Helo World’); 刷新页面后弹出提示 “Hello World”,说明使用基于 localStorage 的缓存机制存在一些安全隐患,并且微信尚未对这些攻击漏洞进行处理。

关于使用 localStorage 进行资源缓存其他思考

  1. 如果先输出 html 然后用 js 从本地缓存读取样式再插入会出现严重的阻塞和闪烁问题

  2. 这种解决方案更加适合单页面应用否则容易产生冗余

  3. 存在浏览器兼容性问题(隐身模式 etc.)(微信具有自己的X5内核完美解决该问题)

  4. 网络速度快,协商缓存的响应延迟可能比 LS读取+eval 更小

  5. 浏览器对于单次 set 和对 LS(本质是 SQL lite)的总容量存在限制

  6. 可以节省流量,并且可以用于 A/B test

  7. 移动端的浏览器缓存经常会被清理且网络状态通常较差,更加适合这种解决方案

    大概就是这么个意思,不过要快速构建到已有的项目中还没仔细考虑,后面再讨论。 https://github.com/mtjs/mt (腾讯开源专注于移动端的、带有增量更新特色的js模块管理框架)

Git学习再入门-命令清单

我每天使用 Git ,但是很多命令记不住。 一般来说,日常使用只要记住下图6个命令,就可以了。但是熟练使用,恐怕要记住60~100个命令。 下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。

  • Workspace:工作区
  • Index / Stage:暂存区
  • Repository:仓库区(或本地仓库)
  • Remote:远程仓库

一、新建代码库

# 在当前目录新建一个Git代码库
$ git init

# 新建一个目录,将其初始化为Git代码库
$ git init [project-name]

# 下载一个项目和它的整个代码历史
$ git clone [url]

二、配置

Git的设置文件为.gitconfig,它可以在用户主目录下(全局配置),也可以在项目目录下(项目配置)。

# 显示当前的Git配置
$ git config --list

# 编辑Git配置文件
$ git config -e [--global]

# 设置提交代码时的用户信息
$ git config [--global] user.name "[name]"
$ git config [--global] user.email "[email address]"

三、增加/删除文件

# 添加指定文件到暂存区
$ git add [file1] [file2] ...

# 添加指定目录到暂存区,包括子目录
$ git add [dir]

# 添加当前目录的所有文件到暂存区
$ git add .

# 添加每个变化前,都会要求确认
# 对于同一个文件的多处变化,可以实现分次提交
$ git add -p

# 删除工作区文件,并且将这次删除放入暂存区
$ git rm [file1] [file2] ...

# 停止追踪指定文件,但该文件会保留在工作区
$ git rm --cached [file]

# 改名文件,并且将这个改名放入暂存区
$ git mv [file-original] [file-renamed]

四、代码提交

# 提交暂存区到仓库区
$ git commit -m [message]

# 提交暂存区的指定文件到仓库区
$ git commit [file1] [file2] ... -m [message]

# 提交工作区自上次commit之后的变化,直接到仓库区
$ git commit -a

# 提交时显示所有diff信息
$ git commit -v

# 使用一次新的commit,替代上一次提交
# 如果代码没有任何新变化,则用来改写上一次commit的提交信息
$ git commit --amend -m [message]

# 重做上一次commit,并包括指定文件的新变化
$ git commit --amend [file1] [file2] ...

五、分支

# 列出所有本地分支
$ git branch

# 列出所有远程分支
$ git branch -r

# 列出所有本地分支和远程分支
$ git branch -a

# 新建一个分支,但依然停留在当前分支
$ git branch [branch-name]

# 新建一个分支,并切换到该分支
$ git checkout -b [branch]

# 新建一个分支,指向指定commit
$ git branch [branch] [commit]

# 新建一个分支,与指定的远程分支建立追踪关系
$ git branch --track [branch] [remote-branch]

# 切换到指定分支,并更新工作区
$ git checkout [branch-name]

# 切换到上一个分支
$ git checkout -

# 建立追踪关系,在现有分支与指定的远程分支之间
$ git branch --set-upstream [branch] [remote-branch]

# 合并指定分支到当前分支
$ git merge [branch]

# 选择一个commit,合并进当前分支
$ git cherry-pick [commit]

# 删除分支
$ git branch -d [branch-name]

# 删除远程分支
$ git push origin --delete [branch-name]
$ git branch -dr [remote/branch]

六、标签

# 列出所有tag
$ git tag

# 新建一个tag在当前commit
$ git tag [tag]

# 新建一个tag在指定commit
$ git tag [tag] [commit]

# 删除本地tag
$ git tag -d [tag]

# 删除远程tag
$ git push origin :refs/tags/[tagName]

# 查看tag信息
$ git show [tag]

# 提交指定tag
$ git push [remote] [tag]

# 提交所有tag
$ git push [remote] --tags

# 新建一个分支,指向某个tag
$ git checkout -b [branch] [tag]

七、查看信息

# 显示有变更的文件
$ git status

# 显示当前分支的版本历史
$ git log

# 显示commit历史,以及每次commit发生变更的文件
$ git log --stat

# 搜索提交历史,根据关键词
$ git log -S [keyword]

# 显示某个commit之后的所有变动,每个commit占据一行
$ git log [tag] HEAD --pretty=format:%s

# 显示某个commit之后的所有变动,其"提交说明"必须符合搜索条件
$ git log [tag] HEAD --grep feature

# 显示某个文件的版本历史,包括文件改名
$ git log --follow [file]
$ git whatchanged [file]

# 显示指定文件相关的每一次diff
$ git log -p [file]

# 显示过去5次提交
$ git log -5 --pretty --oneline

# 显示所有提交过的用户,按提交次数排序
$ git shortlog -sn

# 显示指定文件是什么人在什么时间修改过
$ git blame [file]

# 显示暂存区和工作区的差异
$ git diff

# 显示暂存区和上一个commit的差异
$ git diff --cached [file]

# 显示工作区与当前分支最新commit之间的差异
$ git diff HEAD

# 显示两次提交之间的差异
$ git diff [first-branch]...[second-branch]

# 显示今天你写了多少行代码
$ git diff --shortstat "@{0 day ago}"

# 显示某次提交的元数据和内容变化
$ git show [commit]

# 显示某次提交发生变化的文件
$ git show --name-only [commit]

# 显示某次提交时,某个文件的内容
$ git show [commit]:[filename]

# 显示当前分支的最近几次提交
$ git reflog

八、远程同步

# 下载远程仓库的所有变动
$ git fetch [remote]

# 显示所有远程仓库
$ git remote -v

# 显示某个远程仓库的信息
$ git remote show [remote]

# 增加一个新的远程仓库,并命名
$ git remote add [shortname] [url]

# 取回远程仓库的变化,并与本地分支合并
$ git pull [remote] [branch]

# 上传本地指定分支到远程仓库
$ git push [remote] [branch]

# 强行推送当前分支到远程仓库,即使有冲突
$ git push [remote] --force

# 推送所有分支到远程仓库
$ git push [remote] --all

九、撤销

# 恢复暂存区的指定文件到工作区
$ git checkout [file]

# 恢复某个commit的指定文件到暂存区和工作区
$ git checkout [commit] [file]

# 恢复暂存区的所有文件到工作区
$ git checkout .

# 重置暂存区的指定文件,与上一次commit保持一致,但工作区不变
$ git reset [file]

# 重置暂存区与工作区,与上一次commit保持一致
$ git reset --hard

# 重置当前分支的指针为指定commit,同时重置暂存区,但工作区不变
$ git reset [commit]

# 重置当前分支的HEAD为指定commit,同时重置暂存区和工作区,与指定commit一致
$ git reset --hard [commit]

# 重置当前HEAD为指定commit,但保持暂存区和工作区不变
$ git reset --keep [commit]

# 新建一个commit,用来撤销指定commit
# 后者的所有变化都将被前者抵消,并且应用到当前分支
$ git revert [commit]

# 暂时将未提交的变化移除,稍后再移入
$ git stash
$ git stash pop

十、其他

# 生成一个可供发布的压缩包
$ git archive

本文转载之阮一峰老师的文章。特此声明。

Git学习再入门-基础篇

Git和GitHub有啥关系?

答:Git是版本控制工具,GitHub是基于Git工具流的一个项目托管平台 顺便提一下这里只温习一下Git的相关知识,关于SVN(集中式管理系统)这里不做对比也不去做详细的描述。具体了解两者的区别可以去这里:https://www.shiyanlou.com/questions/2999/

常用配置

–system #系统级别
–global #用户全局
–local #单独一个项目
git config –global user.name “xxxx” #用户名
git config –global user.email “xxxx@xxx.com“ #邮箱
git config –global core.editor vim #编辑器
git config –global alias.st status #按这种方法,配置别名
git config -l #列举所有配置

文件直接比较差异Diff

git diff git diff#比较工作区与暂存区文件的差异
git diff –cached # 比较暂存区和版本库差异

git diff <$id1> <$id2> # 比较两次提交之间的差异
git diff..# 在两个分支之间比较分支
git branch -r #查看远程分支
git branch new_branch_name #新建一个分支
git branch –merged #查看已经被合并到当前分支的分支
git branch –no-merged #查看未被合并到当前分支的分支

git checkout branch_name #切换分支
git checkout -b branch_name #创建分支并切换

git branch -d branch_name #删除分支
git branch -D branch_name #强制删除分支
git push origin :branch-name #删除远程分支(先在本地删除该分支),原理是把一个空分支push到server上,相当于删除该分支。

#从远程clone一个项目,虽然远程上该项目是有分支的,但clone下来后发现只有master分支,解决:
git checkout -b not_master_branch origin/not_master_branch #本地创建一个分支,指向对应的远程分支
git pull origin not_master_branch #将远程的not_master_branch分支pull下来
git push origin not_master_branch #将修改后的not_master_branch分支push到远程的not_master_branch

Git中3种状态的一些操作

#将工作区的修改提交到暂存区
git add
git add .

#——————————————

#将暂存区的内容提交到版本库
git commit
git commit .
git commit -a #包括git add/ git rm /git commint 这三个操作,所有一般在操作工作区的时候,直接删除了文件,而不是使用git rm的,最后提交是可以用这个,如下
#git commit -am “提交信息”

git commit -amend #修改最后一次提交的信息

#——————————————

# 抛弃工作区修改(使用当前暂存区的内容状态去覆盖工作区,从而达到抛弃工作区修改的作用)
git checkout
git checkout .

#——————————————

#改变暂存区的修改(其实是重置HEAD,将指定版本库的内容状态去覆盖暂存区,从而达到暂存区的改变)
git reset#从暂存区恢复到工作区(不指定版本id,则默认为最后一次提交的版本id)
git reset . #从暂存区恢复到工作区
git reset $id # 恢复到指定的提交版本,该$id之后的版本提交都恢复到工作区
git reset –hard $id #恢复到指定的提交版本,该$id之后的版本提交全部会被抛弃,将不出现在工作区

#注:如果不小心使用了错误的HEAD重置,会发现HEAD指向了重置的版本id,该版本之后的版本提交都不见了,使用git log也无法找到,那么怎么恢复呢?使用下面两个命令
git reflog show master | head #会显示所有的版本记录
git reset –hard $id #重新重置,至于–hard,请根据你时候将改变的内容放到工作区还是直接抛弃进行选择

#——————————————

#恢复某次提交(其实是某提提交的回滚操作,不影响其他的提交,所产生的效果创建一个新版本提交去回滚将指定的提交删除,包括产生的差异文件不会出现在工作区,而是直接被抛弃)
git revert <$id>
git revert HEAD

#这里有一个很好的讲解revert与reset的差异:git reset 是把HEAD向后移动了一下,而git revert是HEAD继续前进,只是新的commit的内容和要revert的内容正好相反,能够抵消要被revert的内容。

#——————————————

#删除文件的几种方法(貌似Git2.0后有了变化)

#第一种直接在工作区删除
rm your_file #直接在工作区删除文件
git add -u . #将有改动的都提交到暂存区(包括修改的,删除的等操作),貌似git2.0 不加 -u 参数也可以
git commint -m “message” #提交版本库

#第二种方法直接在工作区删除
rm your_file #直接在工作区删除文件
git commit -am “message” #这个在前面提过,直接可以提交版本库,-a会包括包括git add/ git rm /git commint 这三个操作

#第三种方法使用git rm
git rm#不仅在工作区将文件删除,同时将该删除操作提交到暂存区
git commint -m “message” #提交版本库

#关于git rm的其他补充
git rm –cached#从暂存区中除去该文件,git将不再跟踪该文件的变更,但仍然在工作区内,在需要.gitignore时经常用到

Tag

git tag v1.0.0 [SHA]

#打一个轻量级的tag,只是一个commit的指向引用,[SHA]是可选择值(某个commit的SHA),指定为哪个commit打tag,如果没写则直接为最后一个commit打tag

git tag -a v1.0.0 -m “你的附注信息” [SHA]

#一个带附注信息的tag,不是一个简单的引用,而是单独的一个对象,[SHA]是可选择值(某个commit的SHA),指定为哪个commit打tag,如果没写则直接为最后一个commit打tag

git tag #列出所有的tag
git show v1.0.0 #打印指定tag的信息
git tag -d v1.0.0 #删除本地指定tag
git push origin :refs/tags/v1.0.0 #删除远程tag

远程

git remote -v # 查看远程服务器地址和仓库名称
git remote show origin # 查看远程服务器仓库状态
git remote add origin git@github:robbin/robbin_site.git # 添加远程仓库地址
git remote set-url origin git@github.com:robbin/robbin #修改远程地址
git remote rm #删除远程创库地址

从远程拉取内容,提交内容到远程

git pull #=git fetch + git merge
git fetch #拉取
git merge #合并

git push # push所有分支
git push origin master # 将本地主分支推到远程主分支
git push -u origin master # 将本地主分支推到远程(如无远程主分支则创建,用于初始化远程仓库)
git push origin# 创建远程分支, origin是远程仓库名
git push origin <local_branch>:<remote_branch> # 创建远程分支
git push origin :#先删除本地分支(git br -d),然后再push删除远程分支

暂存管理

git stash #将工作区做的修改暂存到一个git栈中
git stash list #查看栈中所有暂存
git stash apply <暂存编号> #回复对应编号暂存到工作区,如果不指定编号为栈顶的,注意:这些暂存还在栈中
git stash pop #将栈顶的暂存,恢复到工作区,并从栈中弹出
git stash clear #清空暂存栈

创建远程库

git clone –bare git_url_path #clone的时候,将其创建成远程创库
git –bare init #初始化项目的时候,创建成远程创库

eslint配置参考中文解释

package.json文件中eslint的配置(以下是vue-cli的默认配置)

"eslintConfig": {
     "root": true,////此项是用来告诉eslint找当前配置文件不能往父级查找
     "env": {
       "node": true//此项指定环境的全局变量,下面的配置指定为node环境
     },
     "extends": [// 此项是用来配置vue.js风格,就是说写代码的时候要规范的写,如果你使用vs-code我觉得应该可以避免出错
       "plugin:vue/essential",
       "@vue/standard"
     ],
     "rules": {//规则配置写在这里
       "indent": [1, 4]
     },
     "parserOptions": {
       "parser": "babel-eslint"//此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使其与ESLint解析
     }
   },

rules: {
    "规则名": [规则值, 规则配置]
}

"off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告(不影响退出代码) "error"或者2 //把规则作为一个错误(退出代码触发时为1) eslint 规则配置参数

"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++,--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var,用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with

"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super,派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件

大型项目前端架构详谈

目录:

  • 1、综合
  • 1.1、使用场景
  • 1.2、核心思想
  • 1.3、切入角度
  • 1.4、其他
  • 2、基础层设计
  • 2.1、自建Gitlab
  • 2.2、版本管理
  • 2.3、自动编译发布Jenkins
  • 2.4、纯前端版本发布
  • 2.5、统一脚手架
  • 2.6、Node中间层
  • 2.7、埋点系统
  • 2.8、监控和报警系统
  • 2.9、安全管理
  • 2.10、Eslint
  • 2.11、灰度发布
  • 2.12、前后端分离
  • 2.13、Mock
  • 2.14、定期备份
  • 3、应用层设计
  • 3.1、多页和单页
  • 3.2、以应用为单位划分前端项目
  • 3.3、基础组件库的建设
  • 3.4、技术栈统一
  • 3.5、浏览器兼容
  • 3.6、内容平_台建设
  • 3.7、权限管理平_台
  • 3.8、登录系统设计(单点登录)
  • 3.9、CDN
  • 3.10、负载均衡
  • 3.11、多端共用一套接口
  • 4、总结

1、综合

我在2年之前,写过一篇中小型项目的前端架构浅谈。随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了。 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发,分析为什么要这么做,这些设计能解决什么问题,成本和收益如何。 由于作者能力有限,可能会有所缺漏或者部分错误,欢迎读者指出。

1.1、适用场景:

本篇文章,适用于单个/多个大型项目、拥有超过10个以上的前端开发的场景。 前端项目的规模不同,成本收益比也会有所差别。通常来说,人员越多、项目复杂度越高,那么收益/成本的比值越大。 对于人数较少、项目简单的开发团队,可能有部分措施不适用,因此应该根据具体情况来选用。

1.2、核心思想:

【1】解决问题:前端架构的设计,应是用于解决已存在或者未来可能发生的技术问题,增加项目的可管理性、稳定性、可扩展性。 【2】人效比:对于需要额外开发工作量的事务(本文中存在一些需要一定开发量的内容),我们在决定是否去做的时候,应该考虑到两个要素:第一个是花费的人力成本,第二个是未来可能节约的时间和金钱、避免的项目风险与资损、提高对业务的支撑能力以带来在业务上可衡量的更高的价值、以及其他价值。 【3】定性和定量:架构里设计的内容,一定要有是可衡量的意义的,最好是可以定量的——即可以衡量带来的收益或减少的成本,至少是可以定性的——即虽然无法用数字阐述收益,但我们可以明确这个是有意义的,例如增加安全性降低风险。 【4】数据敏感:专门写这一条强调数据作为依据的重要性。当我们需要说服其他部门/上级管理者,以推动我们设计的内容时,只有数据——特别是跟钱有关的数据,才是最有说服力的证明。 由于篇幅所限,本文很难直接给出定量的值,因此建议架构设计者,先确保项目中设计使用2.7里的埋点系统,根据埋点系统获取的数据,对项目效果进行定量分析,并以此写成PPT和其他部门/上级管理者进行协调。

1.3、切入角度:

分为基础层和应用层。 基础层偏基础设施建设,与业务相关性较低。 应用层更贴近用户,用于解决某一个问题。 部分两个都沾边的,根据经验划分到其中一个。

1.4、其他

由于已经谈到架构层级,因此很多内容,并不仅仅只属于前端领域,有很多内容是复合领域(前端、后端、运维、测试),因此需要负责架构的人,技术栈足够全面,对未来发展有足够的前瞻性。 文章的内容结构为:【项目】—>【解决的问题和带来的好处】—>【项目的实际意义】

2、基础层设计

2.1、自建Gitlab

这个是基础的基础了。本不应该提的,不过考虑到我最近面试的几家公司,有的公司(人数并不少)并没有使用Gitlab,因此专门提一下,并且使用这个的难度非常低。 强烈建议使用Gitlab进行版本管理,自建Gitlab难度并不大,方便管理,包括代码管理、权限管理、提交日志查询,以及联动一些第三方插件。 意义: 公司代码是公司的重要资产,使用自建Gitlab可以有效保护公司资产。

2.2、版本管理

版本管理的几个关键点:

  • 发布后分支锁死,不可再更改:指当例如0.0.1版本成功发布后,不可再更改0.0.1分支上的代码,否则可能会导致版本管理混乱。
  • 全自动流程发布;指应避免开发者提交后,手动编译打包等操作,换句话说,开发人员发布后,将自动发布到预发布/生产环境。开发人员不和相关环境直接接触。实现这个需要参考下面的2.3。
  • 多版本并存;指当例如发布0.0.2版本后,0.0.1版本的代码应仍保存在线上(例如CDN),这样当出现线上bug时,方便快速回滚到上一个版本。

意义: 提高项目的可控性。

2.3、自动编译发布Jenkins

这个工具用于在代码发布后,执行一系列流程,例如自动编译打包合并,然后再从Gitlab发布到CDN或者静态资源服务器。 使用这个工具,可以让一般研发人员不关心代码传到Gitlab后会发生什么事情,只需要专心于开发就可以了。 意义: 让研发人员专心于研发,和环境、运维等事情脱钩。

2.4、纯前端版本发布

纯前端版本发布分为两步:

  • 前端发布到生产环境——此时可以通过外网链接加正确的版本号访问到新版本的代码,但页面上的资源还是旧版本;
  • 前端通过配置工具(或者是直接更新html文件),将html中引入的资源,改为新版本。

解决的问题是:当前端需要发布新版本时,可以不依赖于后端(根据实际情况,也可以不依赖于运维)。毕竟有很多需求并不需要后端介入,单纯改个前端版本后就要后端发布一次,显然是一件非常麻烦的事情。 这个需要专门的工具,用于配置版本发布,我最近就在写这个。 意义: 提高发布效率,降低发布带来的人员时间损耗(这些都是钱),也可以在前端版本回滚的时候,速度更快。 文章链接: juejin.im/post/5d0714…

2.5、统一脚手架

适用场景:有比较多独立中小项目。好处:

  • 可以减少开发人员配置脚手架带来的时间损耗(特殊功能可以fork脚手架后再自行定制);
  • 统一项目结构,方便管理,也降低项目交接时带来的需要熟悉项目的时间;
  • 方便统一技术栈,可以预先引入固定的组件库;

意义: 提高开发人员在多个项目之间的快速切换能力,提高项目可维护性,统一公司技术栈,避免因为环境不同导致奇怪的问题。

2.6、Node中间层

适用场景:需要SEO且前端使用React、vue,或前端介入后端逻辑,直接读取后端服务或者数据库的情况。

  • SEO:仁者见仁智者见智,虽然很多公司已经不做了,但通常认为,还是有一定意义的(特别是需要搜索引擎引流的时候),因此React或者Vue的同构是必须的。并且同构还可以降低首页白屏时间;
  • 前端读取后端服务/数据库:好处是提高前端的开发效率和对业务的支持能力,缺点是可能导致P0级故障。

意义: 让前端可以侵入后端领域,质的提升对业务的支持能力。

2.7、埋点系统

强烈推荐前端做自己的埋点系统。这个不同于后端的日志系统。 前端埋点系统的好处:

  • 记录每个页面的访问量(日周月年的UV、PV);
  • 记录每个功能的使用量;
  • 捕捉报错情况;
  • 图表化显示,方便给其他部门展示;

埋点系统是前端高度介入业务,把握业务发展情况的一把利剑,通过这个系统,我们可以比后端更深刻的把握用户的习惯,以及给产品经理、运营等人员提供准确的数据依据。当有了数据后,前端人员就可以针对性的优化功能、布局、页面交互逻辑、用户使用流程。 埋点系统应和业务解耦,开发人员使用时注册,然后在项目中引入。然后在埋点系统里查看相关数据(例如以小时、日、周、月、年为周期查看)[原创水印-作者:零零水(王冬),微信:qq20004604]。 意义: 数据是money,数据是公司的生命线,数据是最好的武器。

2.8、监控和报警系统

监控和报警系统应基于埋点系统而建立,在如以下场景时[原创水印-作者:零零水(王冬),微信:qq20004604]触发:

  • 当访问量有比较大的变化(比如日PV/UV只有之前20%以下)时,自动触发报警,发送邮件到相关人员邮箱;
  • 比如报错量大幅度上升(比如200%或更高),则触发报警;
  • 当一段时间内没有任何访问量(不符合之前的情况),则触发报警;
  • 每过一段时间,自动汇总访问者/报错触发者的相关信息(例如系统、浏览器版本等);

建设这个系统的好处在于,提前发现一些不容易发现的bug(需要埋点做的比较扎实)。有一些线上bug,因为用户环境特殊,导致无法被开发人员和测试人员发现。但其中一部分bug又因为不涉及资金,并不会导致资损(因此也不会被后端的监控系统所发现),这样的bug非常容易影响项目里某个链路的正常使用。 意义: 提高项目的稳定性,提高对业务的把控能力。降低bug数,降低资损的可能性,提前发现某些功能的bug(在工单到来之前)。

2.9、安全管理

前端的安全管理,通常要依赖于后端,至于只跟单纯有关系的例如dom.innerHTML= ‘xxx ‘这种太基础,就不提了。 安全管理的很难从架构设计上完全避免,但还是有一定解决方案的,常见安全问题如下:

  • XSS注入:对用户输入的内容,需要转码(大部分时候要server端来处理,偶尔也需要前端处理),禁止使用eval函数;
  • https:这个显然是必须的,好处非常多;
  • CSRF:要求server端加入CSRF的处理方法(至少在关键页面加入);

意义: 减少安全漏洞,避免用户受到损失,避免遭遇恶意攻击,增加系统的稳定性和安全性。

2.10、Eslint

Eslint的好处很多,强烈推荐使用:

  • 降低低级bug(例如拼写问题)出现的概率;
  • 增加代码的可维护性,可阅读性;
  • 硬性统一代码风格,团队协作起来时更轻松;

总的来说,eslint推荐直接配置到脚手架之中,对我们提高代码的可维护性的帮助会很大。可以考虑在上传到gitlab时,硬性要求eslint校验,通过的才允许上传。 意义: 提高代码的可维护性,降低团队协作的成本。

2.11、灰度发布

灰度发布是大型项目在发布时的常见方法,指在发布版本时,初始情况下,只允许小比例(比如1~5%比例的用户使用),若出现问题时,可以快速回滚使用老版本,适用于主链路和访问量极大的页面。 好处有以下几点:

  • 生产环境比开发环境复杂,灰度发布时可以在生产环境小范围尝试观察新版本是否可以正常运行,即使出问题,也可以控制损失。
  • 对于大版本更新,可以先灰度一部分,观察埋点效果和用户反馈(即所谓的抢先试用版)。假如效果并不好,那么回滚到老版本也可以及时止损;
  • 当我们需要验证某些想法或问题的时候,可以先灰度一部分,快速验证效果如何,然后查漏补缺或者针对性优化;

灰度发布通常分为多个阶段:【1】1%;【2】510%;【3】3050%;【4】全量推送(100%)。灰度发布一定要允许配置某些IP/账号访问时,可以直接访问到灰度版本。 意义: 降低风险,提高发布灵活度。

2.12、前后端分离

这个并不是指常见的前后端分离,而是指在分配前后端管控的领域。 中小项目常见的情况是后端只提供接口和让某个url指向某个html,前端负责html、css、js等静态资源。 但大型项目并不建议这么做,建议前端负责除html以外的静态资源,而html交给后端处理,理由有很多:

  • 后端进行渲染,方便统一插入一些代码和资源,例如埋点js,监控js,国际化文本资源,页面标识符等。这些通常是后端通过调用某些服务直接写入的;
  • 当页面需要统一的头尾时(参考淘宝里我的淘宝页面),前端不应该关注这些跟当前页面无关的东西;
  • 某些东西,如果通过html来管理,那么耦合度太高了,违背了解耦和分离的原则;
  • 前端版本发布在后端引入某种功能模块后,可以从单独的页面控制前端发布内容,比更新html更方便,也利于灰度发布;

意义: 更规范的进行页面管理,降低页面和功能的耦合度,减少复杂页面的环境配置时间。

2.13、Mock

Mock也是常见前端系统之一,用于解决在后端接口未好时,生成返回的数据。 我个人不太建议开发一个专门的系统来Mock,更好的Mock手法是直接嵌入到脚手架之中。思路如下:

  • 当在开发环境下,访问链接通常是localhost:8000/index.html,此时加入后缀 ?debug=true;
  • 封装好的异步请求在发现当前链接有以上标志时,认为是测试环境,访问/userinfo 时,不去读取线上的数据(因为也读取不到),去本地环境读取 src/test_ajax/userinfo.json,并将内容返回给用户;
  • 异步请求正常拿到数据,在页面中显示[原创水印-作者:零零水(王冬),微信:qq20004604];
  • 当线上接口可以获取到数据后,从network里找到返回的数据,放入/ src/test_ajax/userinfo.json中,此时再次本地调试的话,相当于使用的是线上的真实数据。

这种处理,可以降低mock的复杂度,随时更改mock时返回的数据,比单独开发一个mock系统性价比更高。 意义: 在前后端并行开发时,降低沟通交流成本,方便开发完毕后直接对接。

2.14、定期备份

备份是常被忽略的一件事情,但当我们遇见毁灭性场景时,缺少备份带来的损失是非常大的,常见场景:

  • 服务器损坏,导致存在该服务器上的内容全部完蛋;
  • 触发某致命bug或者错误操作(例如rm -f),导致文件和数据全部消失;
  • 数据库出现错误操作或出现问题,导致用户数据、公司资产遭受严重损失;

总的来说,没人想遇见这样的场景,但我们必须考虑这种极端情况的发生,因此需要从架构层面解决这个问题。常见方法是定期备份、多机备份、容灾系统建设等。 意义: 避免在遭遇极端场景时,给公司带来不可估量的损失。

3、应用层设计

3.1、多页和单页

除了特殊场景,通常推荐使用多页架构。理由如下:

  • 多页项目,页面和页面之间是独立的,不存在交互,因此当一个页面需要单独重构时,不会影响其他页面,对于有长期历史的项目来说,可维护性、可重构性要高很多;
  • 多页项目的缺点是不同页面切换时,会有一个白屏时间,但通常来说,这个时间并不长,大部分现有大公司的线上网页,都是这样的,因此认为是可以接受的;
  • 多页项目可以单次只更新一个页面的版本,而单页项目如果其中一个功能模块要更新(特别是公共组件更新),很容易让所有页面都需要更新版本;
  • 多页项目的版本控制更简单,如果需要页面拆分,调整部分页面的使用流程,难度也会更低;
  • 灰度发布更友好;

之前面试的一家,采用了单页的形式,之前因为种种原因,同时采用了ng和react。由于项目历史也比较久(3年以上),结果导致目前继续维护更新的难度很大,即使想部分重构,也很麻烦。 意义: 降低长期项目迭代维护的难度,

3.2、以应用为单位划分前端项目

在项目比较大的时候,将所有页面的前端文件放入到同一个代码仓库里,我之前参与过一家企业的前端项目开发,发现其就是这么做的。根据使用经验来看[原创水印-作者:零零水(王冬),微信:qq20004604],存在很多问题:

  • 会极大的增加代码的维护难度;
  • 项目会变得很丑陋;
  • 不方便权限管理,容易造成页面误更改或代码泄密;
  • 任何人都有权利改任何他能看到的页面(在合并代码的时候,管理人员并不能确定他本次修改的页面是否是需求里他应该改的页面);
  • 发布成本高,即使改一个页面,也需要发布所有资源;

因此,我们应该避免这种现象的发生,个人推荐以应用为单位进行开发、发布。所谓应用即指一个业务涉及到的前后端代码,好处很多:

  • 方便进行管理,当某个业务有需求变更时,可以只给研发人员该业务前端应用的developer权限;
  • 在需要发布某业务时,只需要发布该业务的所属应用即可;

意义: 规范项目,增加代码的安全性,降低项目维护成本。

3.3、基础组件库的建设

这个蛮基础的,对于组件库的建设,不建议研发人员较少时去做这件事情,专职前端开发人数少于10人时,建议使用比较靠谱的第三方UI库,例如Antd,这样性价比更高。 设计基础组件库的前提,是要求统一技术栈,这样才能最大化基础组件库的效益。组件库建议以使用以下参考标准:

  • 使用ts;
  • 可扩展性强;
  • 适用程度高;
  • 文档清楚详细;
  • 版本隔离,小版本优化加功能,大改需要大版本更新;
  • 和UI协调统一,要求UI交互参与进来;

总的来说,建设起来后,利大于弊,但是需要专人维护,因此还是有一定成本的。 意义: 统一不同/相同产品线之间的风格,给用户更好的体验,减少单次开发中写UI组件时浪费的时间和人力,提高开发效率。

3.4、技术栈统一

前端有三大主流框架,还有兼容性最强jQuery,以及各种第三方库,UI框架。因此项目需求如果复杂一些,很容易形成一个大杂烩。因此前端的技术栈必须统一,具体来说,建议实现以下举措:

  • 三大框架选型其一,团队水平一般推荐Vue、水平较好推荐React,对外项目选React或者ng;
  • 需要兼容IE8或更老版本时,建议使用jQuery;
  • 组件库自建或者统一选择一个固定的第三方;
  • 一些特殊第三方库统一使用一个版本,例如需要使用地图时,固定使用高德或百度或腾讯地图;
  • 基础设施建设应避免重复造轮子,所有团队尽量共用,并有专门的前端平_台负责统一这些东西,对于特殊需求,可以新建,但应当有说服力;

总的来说,技术栈统一的好处很多,可以有效提高开发效率,降低重复造轮子产生的成本。 意义: 方便招人,简化团队成员培养成本,以及提高项目的可持续性。

3.5、浏览器兼容

常见的问题是IE6、7、8,以及部分小众浏览器(PC和手机)产生的奇怪问题。因此应该考虑统一解决方案,避免bug的重复产生。常见解决方案有:

  • 配置postcss,让某些css增加兼容性前缀;
  • 写一个wepback的loader,处理某些特殊场景;
  • 规范团队代码,使用更稳定的写法(例如移动端避免使用fixed进行布局);
  • 对常见问题、疑难问题,总结解决方案并团队共享;
  • 建议或引导用户使用高版本浏览器(比如chrome);

意义: 避免浏览器环境产生的bug,以及排查此类bug所浪费的大量时间。

3.6、内容平_台建设

为了提高公司内部的沟通效率,总结经验,以及保密原因。应建设一个内部论坛+博客站点。其具备的好处如下:

  • 可以记录公司的历史;
  • 研发同学之间分享经验;
  • 总结转载一些外界比较精品的文章,提高大家的眼界;
  • 增加公司内部同学的交流,有利于公司的团队和文化建设;
  • 对某些技术问题可以进行讨论,减少因没有达成共识带来的沟通损耗;

众所周知,大型互联网公司通常都有这样一个内部论坛和博客站点。其降低了公司的沟通和交流成本,也增加了公司的技术积累。 意义: 博客增强技术积累,论坛增强公司内部沟通能力。

3.7、权限管理平_台

当公司内部人员较多时,应有一个专门的平_台,来管理、规范用户的权限以及可访问内容[原创水印-作者:零零水(王冬),微信:qq20004604]。权限管理平_台有几个特点:

  • 必然和Server端天然高耦合度,因此需要有专门的控制模块负责处理权限问题(负责Server端开发处理,或者前端通过中间层例如Node层介入处理);
  • 自动化流程控制,即用户创建、申请、审批、离职自动删除,都应该是由系统推进并提醒相关人士,必要时应能触发报警;
  • 权限应有时效性,减少永久性权限的产生;
  • 审批流程应清晰可见,每一阶段流程应具体明确;
  • 应与公司流程紧密结合,并且提高可修改性,方便公司后期进行流程优化;

意义: 使得公司内部流程正规化、信息化。

3.8、登录系统设计(单点登录)

当公司内部业务线比较复杂但相互之间的耦合度比较高时,我们应该考虑设计添加单点登录系统。具体来说,用户在一处登录,即可以在任何页面访问,登出时,也同样在任何页面都失去登录状态。SSO的好处很多:

  • 增强用户体验;
  • 打通了不同业务系统之间的用户数据;
  • 方便统一管理用户;
  • 有利于引流;
  • 降低开发系统的成本(不需要每个业务都开发一次登录系统和用户状态控制);

总的来说,大中型web应用,SSO可以带来很多好处,缺点却很少。 意义: 用户体验增强,打通不同业务之间的间隔,降低开发成本和用户管理成本。

3.9、CDN

前端资源的加载速度是衡量用户体验的重要指标之一。而现实中,因为种种因素,用户在加载页面资源时,会受到很多限制。因此上CDN是非常有意义的,好处如下:

  • 用户来自不同地区,加入CDN可以使用户访问资源时,访问离自己比较近的CDN服务器,降低访问延迟;
  • 降低服务器带宽使用成本;
  • 支持视频、静态资源、大文件、小文件、直播等多种业务场景;
  • 消除跨运营商造成的网络速度较慢的问题;
  • 降低DDOS攻击造成的对网站的影响;

CDN是一种比较成熟的技术,各大云平_台都有提供CDN服务,价格也不贵,因此CDN的性价比很高。 意义: 增加用户访问速度,降低网络延迟,带宽优化,减少服务器负载,增强对攻击的抵抗能力。

3.10、负载均衡

目前来看,负载均衡通常使用Nginx比较多,以前也有使用Apache。当遇见大型项目的时候,负载均衡和分布式几乎是必须的。负载均衡有以下好处:

  • 降低单台server的压力,提高业务承载能力;
  • 方便应对峰值流量,扩容方便(如举办某些活动时);
  • 增强业务的可用性、扩展性、稳定性;

负载均衡已经是蛮常见的技术了,好处不用多说,很容易理解。 意义: 增强业务的可用性、扩展性、稳定性,可以支持更多用户的访问。

3.11、多端共用一套接口

目前常见场景是一个业务,同时有PC页面和H5页面,由于业务是一样的,因此应避免同一个业务有多套接口分别适用于PC和H5端。因此解决方案如下:

  • 后端提供的接口,应该同时包含PC和H5的数据(即单独对一个存在亢余数据);
  • 接口应当稳定,即当业务变更时,应尽量采取追加数据的形式;
  • 只有在单独一端需要特殊业务流程时,设计单端独有接口;

多端共用接口,是减少开发工作量,并且提高业务可维护性的重要解决方案。 意义: 降低开发工作量,增强可维护性。

2019最新前端知识梳理(周边部分)-面试宝典

八、编程题

1 写一个通用的事件侦听器函数

// event(事件)工具集,来源:github.com/markyun
markyun.Event = {

// 视能力分别使用 dom0||dom2||IE 方式 来绑定事件
// 参数: 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(‘on’ + type, function() {
handler.call(element);
});
} else {
element[‘on’ + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent(‘on’ + type, handler);
} else {
element[‘on’ + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因为 IE 不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
}

2 如何判断一个对象是否为数组

function isArray(arg) {
if (typeof arg === ‘object’) {
return Object.prototype.toString.call(arg) === ‘[object Array]‘;
}
return false;}

3 冒泡排序

  • 每次比较相邻的两个数,如果后一个比前一个小,换位置

var arr = [3, 1, 4, 6, 5, 7, 2];function bubbleSort(arr) {for (var i = 0; i < arr.length - 1; i++) {
for(var j = 0; j < arr.length - i - 1; j++) {
if(arr[j + 1] < arr[j]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}}return arr;}console.log(bubbleSort(arr));

4 快速排序

  • 采用二分法,取出中间数,数组每次和中间数比较,小的放到左边,大的放到右边

var arr = [3, 1, 4, 6, 5, 7, 2];function quickSort(arr) {
if(arr.length == 0) {
return []; // 返回空数组
}

var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];

for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
} else {
r.push(arr[i]);
}
}

return quickSort(l).concat(c, quickSort(r));}console.log(quickSort(arr));

5 编写一个方法 求一个字符串的字节长度

  • 假设:一个英文字符占用一个字节,一个中文字符占用两个字节

function GetBytes(str){

var len = str.length;

var bytes = len;

for(var i=0; i<len; i++){

if (str.charCodeAt(i) > 255) bytes++;

}

return bytes;

}alert(GetBytes(“你好,as”));

6 bind 的用法,以及如何实现 bind 的函数和需要注意的点

  • bind的作用与callapply相同,区别是callapply是立即调用函数,而bind是返回了一个函数,需要调用的时候再执行。 一个简单的bind函数实现如下

Function.prototype.bind = function(ctx) {
var fn = this;
return function() {
fn.apply(ctx, arguments);
};};

7 实现一个函数 clone

可以对JavaScript中的 5 种主要的数据类型,包括NumberStringObjectArrayBoolean)进行值复

  • 考察点 1:对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
  • 考察点 2:是否知道如何判断一个变量是什么类型的
  • 考察点 3:递归算法的设计

// 方法一:
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === “object” ? this[e].clone() : this[e];
}
return o;
}

//方法二:
/**
* 克隆一个对象
* @param Obj
* @returns
*/
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; //创建一个空的数组
var i = Obj.length;
while (i–) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {}; //创建一个空对象
for (var k in Obj) { //为这个对象添加新的属性
buf[k] = clone(Obj[k]);
}
return buf;
}else{ //普通变量直接赋值
return Obj;
}
}

8 下面这个 ul,如何点击每一列的时候 alert 其 index

 考察闭包

  • 这是第一条
  • 这是第二条
  • 这是第三条

// 方法一:
var lis=document.getElementById(‘2223’).getElementsByTagName(‘li’);
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
}

//方法二:
var lis=document.getElementById(‘2223’).getElementsByTagName(‘li’);
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
alert(a);
}
})(i);
}

9 定义一个 log 方法,让它可以代理 console.log 的方法

可行的方法一: function log(msg) {
console.log(msg);
}

log(“hello world!”) // hello world!

如果要传入多个参数呢?显然上面的方法不能满足要求,所以更好的方法是:

function log(){
console.log.apply(console, arguments);
};

10 输出今天的日期

YYYY-MM-DD的方式,比如今天是 2014 年 9 月 26 日,则输出 2014-09-26

var d = new Date();
// 获取年,getFullYear()返回 4 位的数字
var year = d.getFullYear();
// 获取月,月份比较特殊,0 是 1 月,11 是 12 月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? ‘0’ + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? ‘0’ + day : day;
alert(year + ‘-‘ + month + ‘-‘ + day);

11 用 js 实现随机选取 10–100 之间的 10 个数字,存入一个数组,并排序

var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100));
}
iArray.sort();

12 写一段 JS 程序提取 URL 中的各个 GET 参数

有这样一个URLhttp://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:'1', b:'2', c:'', d:'xxx', e:undefined}

function serilizeUrl(url) {
var result = {};
url = url.split(“?”)[1];
var map = url.split(“&”);
for(var i = 0, len = map.length; i < len; i++) {
result[map[i].split(“=”)[0]] = map[i].split(“=”)[1];
}
return result;
}

13 写一个function,清除字符串前后的空格

使用自带接口trim(),考虑兼容性:

if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, “”).replace(/\s+$/,””);
}}

// test the function
var str = “ \t\n test string “.trim();
alert(str == “test string”); // alerts “true”

14 实现每隔一秒钟输出 1,2,3…数字

for(var i=0;i<10;i++){
(function(j){
setTimeout(function(){
console.log(j+1)
},j*1000)
})(i)}

15 实现一个函数,判断输入是不是回文字符串

function run(input) {
if (typeof input !== ‘string’) return false;
return input.split(‘’).reverse().join(‘’) === input;}

16、数组扁平化处理

实现一个flatten方法,使得输入一个数组,该数组里面的元素也可以是数组,该方法会输出一个扁平化的数组

function flatten(arr){
return arr.reduce(function(prev,item){
return prev.concat(Array.isArray(item)?flatten(item):item);
},[]);}

九、其他

1 负载均衡

多台服务器共同协作,不让其中某一台或几台超额工作,发挥服务器的最大作用

  • http重定向负载均衡:调度者根据策略选择服务器以 302 响应请求,缺点只有第一次有效果,后续操作维持在该服务器 dns 负载均衡:解析域名时,访问多个ip服务器中的一个(可监控性较弱)
  • 反向代理负载均衡:访问统一的服务器,由服务器进行调度访问实际的某个服务器,对统一的服务器要求大,性能受到 服务器群的数量

2 CDN

内容分发网络,基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。

3 内存泄漏

定义:程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题。

js 中可能出现的内存泄漏情况

结果:变慢,崩溃,延迟大等,原因:

  • 全局变量
  • dom清空时,还存在引用
  • ie中使用闭包
  • 定时器未清除
  • 子元素存在引起的内存泄露

避免策略

  • 减少不必要的全局变量,或者生命周期较长的对象,及时对无用的数据进行垃圾回收;
  • 注意程序逻辑,避免“死循环”之类的 ;
  • 避免创建过多的对象 原则:不用了的东西要及时归还。
  • 减少层级过多的引用

4 babel 原理

ES6、7代码输入 -> babylon进行解析 -> 得到AST(抽象语法树)-> plugin用 babel-traverseAST树进行遍历转译 ->得到新的AST树->用babel-generator通过AST树生成ES5代码

5 js 自定义事件

三要素: document.createEvent() event.initEvent()``element.dispatchEvent()

// (en:自定义事件名称,fn:事件处理函数,addEvent:为 DOM 元素添加自定义事件,triggerEvent:触发自定义事件)window.onload = function(){
var demo = document.getElementById(“demo”);
demo.addEvent(“test”,function(){console.log(“handler1”)});
demo.addEvent(“test”,function(){console.log(“handler2”)});
demo.onclick = function(){
this.triggerEvent(“test”);
}}Element.prototype.addEvent = function(en,fn){
this.pools = this.pools || {};
if(en in this.pools){
this.pools[en].push(fn);
}else{
this.pools[en] = [];
this.pools[en].push(fn);
}}Element.prototype.triggerEvent = function(en){
if(en in this.pools){
var fns = this.pools[en];
for(var i=0,il=fns.length;i<il;i++){
fns[i]();
}
}else{
return;
}}

6 前后端路由差别

  • 后端每次路由请求都是重新访问服务器
  • 前端路由实际上只是JS根据URL来操作DOM元素,根据每个页面需要的去服务端请求数据,返回数据后和模板进行组合

十、综合

1 谈谈你对重构的理解

  • 网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下,对网站进行优化, 在扩展的同时保持一致的 UI
  • 对于传统的网站来说重构通常是:
    • 表格(table)布局改为DIV+CSS
    • 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对 IE6 有效的)
    • 对于移动平台的优化
    • 针对于SEO进行优化

2 什么样的前端代码是好的

  • 高复用低耦合,这样文件小,好维护,而且好扩展。
  • 具有可用性、健壮性、可靠性、宽容性等特点
  • 遵循设计模式的六大原则

3 对前端工程师这个职位是怎么样理解的?它的前景会怎么样

  • 前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近
    • 实现界面交互
    • 提升用户体验
    • 基于 NodeJS,可跨平台开发
  • 前端是最贴近用户的程序员,前端的能力就是能让产品从 90 分进化到 100 分,甚至更好,
  • 与团队成员,UI设计,产品经理的沟通;
  • 做好的页面结构,页面重构和用户体验;

4 你觉得前端工程的价值体现在哪

  • 为简化用户使用提供技术支持(交互部分)
  • 为多个浏览器兼容性提供支持
  • 为提高用户浏览速度(浏览器性能)提供支持
  • 为跨平台或者其他基于 webkit 或其他渲染引擎的应用提供支持
  • 为展示数据提供支持(数据接口)

5 平时如何管理你的项目

  • 先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;
  • 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
  • 标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
  • 页面进行标注(例如 页面 模块 开始和结束);
  • CSSHTML 分文件夹并行存放,命名都得统一(例如style.css);
  • JS 分文件夹存放 命名以该JS功能为准的英文翻译。
  • 图片采用整合的 images.png png8 格式文件使用 - 尽量整合在一起使用方便将来的管理

6 组件封装

目的:为了重用,提高开发效率和代码质量 注意:低耦合,单一职责,可复用性,可维护性 常用操作

  • 分析布局
  • 初步开发
  • 化繁为简
  • 组件抽象
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×