本来文章起名是叫“中年危机”的。思考了一下觉得不妥，“中年”不一定危机呢。“人到中年”像是一句还没说完的话，人到中年会怎么样呢？不同的人有不同的答案，把这个思考留给大家吧。

你觉得 人到中年 应该是怎么样的生活和状态呢？

我不是一个喜欢喜欢贩卖焦虑的人，甚至很讨厌。因为生活已经很难了；

但这个世界，这个社会，这个环境，周边的人，总会漫不经心的触碰到你。

要对未来充满自信和希望。

前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。

一、为什么要处理异常？

异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。

1.增强用户体验；
2.远程定位问题；
3.未雨绸缪，及早发现问题；
4.无法复线问题，尤其是移动端，机型，系统都是问题；
5.完善的前端方案，前端监控系统；

序

在写这篇文章之前，我有写一篇 Vue 预渲染的教程 以及 在线示例，有需要的可以看一下~

Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。我们在软件开发过程中，有构建、测试、部署这些必不可少的步骤，而这些会花掉我们很多的时间。为了提高软件开发的效率，现在涌现了很多自动化工具。Travis CI 是目前市场份额最大的一个，而且有很详细的文档以及可以和 Github 很好的对接。

背景

在 Node 生态系统中，依赖通常安装在项目的 node_modules 文件夹中。然而，这个文件的结构和实际依赖树可能有所区别，因为重复的依赖可以合并到一起。npm 客户端把依赖安装到 node_modules 目录的过程具有不确定性。这意味着当依赖的安装顺序不同时，node_modules 目录的结构可能会发生变化。这种差异可能会导致类似“我的电脑上可以运行，别的电脑上不行”的情况，并且通常需要花费大量时间定为与解决。

有时候就会遇到这种情况，完整可运行的项目上传到 git 上，别人 pull 下来以后，npm install 会报错。

Yarn 一开始的主要目标是解决由于语义版本控制而导致的 npm 安装的不确定性问题。虽然可以用 npm shrinkwrap 来实现可预测的依赖关系树，但它并不是默认选项，而是取决于所有的开发人员指导并启用这个选项。

简介

关于 Vue 的 SPA 说的已经太多太多了，它为我们带来了极速的开发体验，极强的开发效率。可能唯一有些许不足的就是，当我们对 SEO 很在乎的时候，我们如何去处理 SEO 的需求。

关于 SEO ，Vue 也有现成的解决方案： Vue 服务端渲染

在 JavaScript 中，函数中的 this 指向，很多同学总是理不清楚【这必然会带来一些问题】。确实，JavaScript 中，函数的 this 指向比较复杂多变。它和你调用的方式有关系，和 严格模式 或者 非严格模式 有关系，和你是否使用了箭头函数有关系，和你在使用函数时是否传入了 this 有关系，和你是否主动修改了调用对象有关系。

• 在绝大多数情况下，函数的调用方式决定了 this 的值。this 不能再执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，关于bind和call可以看我的文章，而不用考虑函数如何被调用的，ES2015 引入了支持 this 词法解析的箭头函数（它在闭合的执行上下文内设置 this 的值）。

• 与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在 严格模式 和 非严格模式之间也会有一些差别。

有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app，如果下载不了它，也是非常糟糕的体验。如今虽然已经有很多种技术去尝试着解决这一问题。而随着离线页面的出现，一些问题已经得到了解决。有一个叫做 APP Cache 的 API 可以提供离线体验，但它的问题比较多。最重要的问题是，仍然没有一个好的统筹机制对资源缓存和自定义的网络请求进行控制。

Service worker

于是 HTML5 提出了 Service Worker，Service worker 提供了很多新的能力，使得 web app 拥有与 nativeapp 相同的离线体验、消息推送体验。

在使用 electron 构建桌面应用的时候，在 package.json 里面的 scripts 字段是这样的

1
2
3

"scripts": {
  "start": "electron ."
},

我们可以执行 npm start ，那么它就会执行 electron . 这个命令。
那么如果我们直接执行 electron .
由于我们没有将 electron 加入到全局，所以不行。
那么为什么 npm start 可以执行呢？

什么是 gulp

gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。

为什么要用 gulp

与 grunt 相比，gulp 无需写一大堆繁杂的配置参数，API（中文 API） 也非常简单，学习起来很容易，而且 gulp 使用的是 nodejs 中 stream 来读取和操作数据，其速度更快。
gulp 有庞大的生态圈，且每天都在发展。依靠成千上万可供选择的插件，你可以利用 gulp 自动完成几乎任何事。

如何使用 gulp

Installing Gulp

新版的 gulp 命令行工具已经改名为 gulp-cli 。
如果你之前安装了全局的 gulp 。在使用新的 gulp-cli 之前，执行命令
npm rm --global gulp ，将之前的全局 gulp 卸掉。

当我们了解了 CommonJS 以后，CommonJS 规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。
由于 Node.js 主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以 CommonJS 规范比较适用。
但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式。为什么呢？

CommonJS 规范与实现

正如当年为了统一 JavaScript 语言标准，人们制定了 ECMAScript 规范一样，如今为了统一 JavaScript 在浏览器之外的实现，CommonJS 诞生了。CommonJS 试图定义一套普通应用程序使用的 API，从而填补 JavaScript 标准库过于简单的不足。CommonJS 的终极目标是制定一个像 C++ 标准库一样的规范，使得基于 CommonJS API 的应用程序可以在不同的环境下运行，就像用 C++ 编写的应用程序可以使用不同的编译器和运行时函数库一样。为了保持中立，CommonJS 不参与标准库实现，其实现交给像 Node.js 之类的项目来完成。下图是 CommonJS 的各种实现。

之前做了一个谷歌浏览器的插件开发，它会打开一个链接，然后收集数据并上传。依次循环，但是跑的时间久了，内存就变得很高，然后浏览器就会变卡，慢慢的影响这个插件的运行，最后浏览器也会崩溃。

什么是内存泄漏

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在 C++ 中，因为是手动管理内存，内存泄露是经常出现的事情。而现在流行的 C# 和 Java 等语言采用了自动垃圾回收方法管理内存，正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有 bug，会产生内存泄露。

简介

低级语言，比如C，有低级的内存管理基元，像 malloc()，free()。另一方面，JavaScript 的内存基元在变量（对象，字符串等等）创建时分配，然后在他们不再被使用时“自动释放”。后者被称为垃圾回收。这个“自动”是混淆并给 JavaScript （和其他高级语言）开发者一个错觉：他们可以不用考虑内存管理。

Respond.js 让不支持 css3 Media Query 的浏览器包括 IE6-IE8 等其他浏览器支持媒体查询。

Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width特性，实现响应式网页设计（Responsive Web Design）。

简介

HTML5shiv is a javascript workaround to provide support for the new HTML 5 elements in IE Browsers older than IE 9.

• 越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6，IE7，IE8。
• 而IE6，IE7，IE8是不能识别 HTML5 标签的。
• 这里提供一种让 IE 浏览器支持 HTML5 的方法，那就是使用 HTML5Shiv。
• HTML5Shiv 主要解决 HTML5 提出的新的元素不被IE6-8识别。

禁用页面的右键菜单

1
2
3
4
5

$(document).ready(function(){  
  $(document).bind("contextmenu",function(e){  
    return false;  
  });  
});

新窗口打开页面

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery.js"></script>
</head>
<body>
  <a href="https://www.google.com">google_新窗口</a>
  <a href="https://www.google.com" rel="external">google_新窗口</a>
  <a href="demo1.html">当前窗口</a>
<script>
  $(function(){
    $('a[href^="http://"]').attr("target","_blank");
  });
</script>
</body>
</html>

输入框文字获取和失去焦点【推荐】

探讨核心： 我们不编写代码，我们只是国外优秀框架的搬运工。

Sass： (Syntactically Awesome StyleSheets)

sass简介

来自于官网的简介：
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.