声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记

目录：

• 1.单例模式的特点和定义
• 2.传统面向对象语言的单例模式
  • 2.1传统语言描述的单式JavaScript实现
  • 2.2透明的单例模式：
  • 2.3引入代理实现单例模式
• 3.JavaScript的单例模比
  • 3.1惰性单例的例子
  • 3.2通用的单例模式例子
• 总结：

1.单例模式的特点和定义

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

2.传统面向对象语言的单例模式

2.1传统语言描述的单例模式JavaScript实现

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

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

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

    return this.instance;
};

var a = Singleton.getInstance('seven1');
var b = Singleton.getInstance('seven2');

或者使用闭包的形式创建单例模式,同时符合惰性单例的特性

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

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

//利用闭包的特性创建单例,同时符合惰性单例的特性
Singleton.getInstance = (function(name) {
    var instance;
    return function(name){
        if (!instance) {
            instance = new Singleton(name);
        }
    }
})();

var a = Singleton.getInstance('seven1');
var b = Singleton.getInstance('seven2');

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

2.2透明的单例模式：

//反面的单例模式的例子

var CreateDiv = (function() {
    var instance;
    var CreateDiv = function(html) {
        if (instance) {
            return instance;
        }
        this.html = html;
        this.init();
        return instance = this;
    };

    CreateDiv.prototype.init = function() {
        var div = document.createElement('div');
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }

    return CreateDiv;

})();

var a = new CreateDiv('seven1');
var b = new CreateDiv('seven2');

这样编写单例模式的缺点：

为了把instance封装起来，我们使用了自执行的匿名函数和闭包，并且让这个匿名函数返回真正的Singleton构造方法，这增加了一些程序的复杂度。

CreateDiv的构造函数负责了两件事情。1.创建对像和执行初始化init方法，第二是保证只有一个对象。不符合设计模式中的单一职责的概念。

2.3引入代理实现单例模式

var CreateDiv = function(html) {
    this.html = html;
    this.init();
};

CreateDiv.prototype.init = function() {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
}

var ProxySingletonCreateDiv = (function() {
    var instance;
    return function(html) {
        if (!instance) {
            instance = new CreateDiv(html);
        }
        return instance;
    }
})();

var a = new ProxySingletonCreateDiv('seven1');
var b = new ProxySingletonCreateDiv('seven2');

引入代理实现单例模式的特点：

我们负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中。这样一来，CreateDiv就变成了一个普通的类，他跟ProxySingletonCreateDiv组合起来可以达到单例模式的效果。

3.JavaScript的单例模式对比

在以上的代码中实现的单例模式都混入了传统面向对象语言的特点。而没有利用JavaScript这们语言的特点来实现一个单例模式。

3.1惰性单例的例子

概念描述：

惰性单例指的是在需要的时候才创建对象的实例。惰性单例是单例模式的重点。

var createLoginLayer=(function(){
    var div;
    return function(){
        if(!div){
            div=document.createElement('div');
            //创建一个登录框
        }
        return div;
    }
})();

document.getElementById('loginBtn').onclick=function(){
    var loginLayer=createLoginLayer();
    loginLayer.style.display='block';
};

代码解析：
这里的对惰性单例的实现主要是只有单例了网页上的登录按钮，才会去创建，登录框的dom节点，并且只是创建一次。

3.2通用的单例模式例子

根据3.1的代码示例，我们的单例对像，但是并不是通用的，比如我们要创建的不是div而是iframe，那要怎么办呢？

//获取单例
var getSingle = function(fn){
    var result;
    return function (){
        return result || (result=fn.apply(this,arguments));
    };
};

//创建div登录框
var createLoginLayer=function (){
    var div= document.createElement('div');
    div.innerHTML='我是登录框';
    document.body.appendChild(div);
    return div;
};

//创建iframe的dom节点
var createIframe=function(){
    //创建irame节点的代码
}

var createSingleLoginLayer = getSingle(createLoginLayer);
var createSingleIframe=getSingle(createIframe);

var loginLayer1 = createSingleLoginLayer();
var loginLayer2 = createSingleLoginLayer();

var iframe1=createSingleIframe();
var iframe2=createSingleIframe();

console.log(loginLayer1 === loginLayer2);

通用的单例创建的例子就是通过封装一个getSingle需要实现单例模式的对象。而且只是会只创建一次。因为使用了闭包的原因通过getSingle创建的result会在内存中一直存在不会销毁（除非页面关闭，或者手动释放）。

总结：

单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对像，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。

关于微信小程序之前只是听说，并没有引起我太大的兴趣。周一被小程序刷屏，然后就顺手搜索了解了一下。发现小程序已经火遍了整个程序员圈子。刚好团队内部有个需求需要微信小程序。就紧急对微信小程序进行了调研，阅读过开发者文档后总结了以下的几个开发者比较关心的问题：

1. 微信小程序提供给开发者的能力有哪些；
2. 在微信小程序易忽略的知识点和代码安全问题；
3. PassFE和PassRD的学习和开发成本；

注意：这篇文章删除了一些跟我当前业务相关的一些内容。如果有兴趣小程序开发的我们可以一起交流哈。

1.首先看微信小程序提供给开发者的能力有哪些？

• Request请求

• 上传，下载

• Websocket请求

• 媒体

  • 图片选择（获取图片信息）
  • 录音
  • 音频播放控制
  • 音乐播放控制
  • 文件的相关操作
  • 数据存储（跟h5的一样）

• 设备

  • 获取用户的地理位置信息
  • 获取用户的设备信息（网络，系统，重力感应，罗盘，拨打电话，扫码）

• 界面

  • 交互反馈，设置导航条样式，导航，动画
  • 绘图，下拉刷新

• 开放的接口

  • 登录，获取用户信息，微信支付，模板消息

2.微信小程序中页面运行环境和登录可能面临的安全问题。

• 小程序的运行环境是微信客户端提供的类浏览器（WebView）运行环境。小程序相当于运行在一个浏览器环境中。
• 小程序的请求都必须是https的请求。支持常用的HTTP协议的方法，比如：PUT,GET,POST等；因为所有的请求都是由NA转发的，所以不会存在跨域的问题（微信小程序的设置页面可以设置）。小程序的网络请求的referer是不可以设置，格式是固定的格式。
• 小程序运行在微信的渲染引擎中是不支持window和document对象。所以无法使用这两个对象操作cookie操作。开发者可以通过 wx.setStorage等方法在客户端存储数据操作；
• 是否可以收集用户的敏感信息。当前只是可以获取用户的地理位置，头像，昵称信息。其它信息不能够获取。（首先微信的登录接口不提供这样的能力，第二微信有审核机制，如果我们有这样的代码，小程序可能审核不通过）
• 出现安全问题后，从修复问题到上线的响应时长的问题。暂时没有上线经历，没办法给出这个时间；
• 微信小程序的代码包大小当前限制是1MB。所以页面引用的图片或者是文件必须以外链的方式；

3.微信小程序的学习和开发成本

3.1已经有的页面样式是否可以复用到微信小程序中

微信小程序有自己的设计规范，需要UI同学按照微信小程序的设计规范评估我们当前的UI是否符合微信的设计规范，否则会存在审核不通过的可能。

微信小程序的UI规范地址：https://mp.weixin.qq.com/debug/wxadoc/design/?

3.2小程序的开发**

微信小程序借鉴了当前非常流行的前端框架react和vue的开发**，组件化的开发方式。一个页面就是一个组件，一个组件由以下4个部分组成：

所以在开发微信小程序的过程中我们需要学习微信小程序的wxml语法。个人认为wxml的语法相对还是比较容易掌握的。而wxss的语法就是我们熟知的css的语法，只是不支持一些高级的css选择器。

3.3对后端工程师的影响

通过下图了解小程序的页面的渲染过程

由上面的流程可以知道在小程序的渲染引擎渲染页面的时候，页面需要的数据都是通过接口获取的。而我们现在的开发模式基本都是后端php渲染smarty模板，渲染过程中会将某些前端需要的变量或者是参数写到Html页面中。如果以后要在小程序中拓展Pass的能力，后端会有一定的开发成本；

如果你当前的开发模式跟我们的一样，如果想要在小程序中开发自己的页面，也是会有一定的后端开发成本的；

以上就是对支持产品线在微信小程序中登录面临的问题的调研结果和对我们当前服务能力的影响。大家如果对微信小程序有兴趣可以跟我交流哈。

前端开发sublimeconfig

mac配置

此文件目录中文件主要是关于sublime的插件配置，快捷键配置，主题和字体配置。

插件列表

所有插件都可以使用Package Control安装，具体的安装方法可以自行谷歌安装，不在本文的介绍范围之内。也可以是使用git 手动安装。

1.autoprefixer

该插件主要使编写css更加的方便和快捷，可以配置快捷键给标签属性添加浏览器厂商前缀。安装前需要确定电脑安装node。

配置快捷键如下：

    //autoprefixer快捷键设置
    { "keys": ["command+alt+p"], "command": "autoprefixer" }

具体配置和文档请参看官方文档

比如我在编写 CSS 的时候是不用关心哪些属性是需要添加厂商前缀的，当我需要保存测试的时候，只需要按下快捷键，该插件会自动给需要添加厂商前缀的属性添加前缀，如下：

{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

当然该插件也可以加入到自己开发项目的自动化工具中去，比如：Gulp ，Grunt

2.babel

ES6终将是要取代 ES5 的但是在从 ES5 到 ES6 过度的过程中，各个浏览器厂商对 ES6 支持的也不是很好。
主要是将ES6的代码编译为ES5。至于为什么要这么做，不是本文的内容，可以自行谷歌了解。

3.Better Completion

javascript ,jQuery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。

安装完以后它的配置文件可以配置自己需要补全的库

{
  // --------------------
  // sublime-better-completions-Package (sbc package)
  // --------------------
  // API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
  // After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
  //
  // Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
  //
  // --------------------
  // APIs Setup
  // --------------------
  // `true` means enable it.
  // `false` means disable it.
  "completion_active_list": {
    // build-in completions
    "css-properties": false,
    "gruntjs-plugins": false,
    "html": false,
    "lodash": false,
    "javascript": false,
    "jquery": false,
    "jquery-sq": false, // Single Quote
    "php": false,
    "phpci": false,
    "sql": false,
    "twitter-bootstrap": false,
    "twitter-bootstrap-less-variables": false,
    "twitter-bootstrap3": false,
    "twitter-bootstrap3-sass-variables": false,
    "underscorejs": false,
    "react": false,

    // Your own completions?
    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings
    "my-angularjs": false,

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings
    "my-glossary": false,

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings
    "my-html": false,

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings
    "my-javascript": false
  }
}

4.BracketHighlighter

括号高亮匹配插件。
借用一张官网的截图：

5.Color Highlighter

该插件可以显示在CSS文件中说使用的颜色的色值。包括HTML中嵌套的css样式也可以显示。
如下图：

还可以调节显示的样式，比如当我鼠标放到颜色上的时候

具体的可以参考官网的说明。

6.css3

该插件可以对css3属性进行高亮和自动补全。
具体效果如下：

安装完以后的设置如下：

View → Syntax → Open all with current extension as... → CSS3

7.DocBlockr

这个插件可以非常智能对js文件添加注释,这个非常的方便。
参考一张官网的截图：

8.Emmet

传说中快速的编写html代码的“神器”。具体的就不再介绍了。网上的教程一搜一大坨啊。

9.FileDiffs

文件差异对比插件。

10.html-css-jsprettify

之前格式化 js，css 文件使用的都是 JsFormat 和 CSSFormat。每次在不同的文件中都要去使用两个不同的插件。后来找到一个可以支持三种语言格式化的插件。

对Html，css，js文件进行格式化。

    //html-css-jsprettify插件快捷键
    {"keys": ["command+alt+l"],"command": "htmlprettify"},

11.jade

如果平时模板语言使用 jade 的话还是安装一个吧，这个可以让 Sublime 的显示更加的友好。jade相关插件，代码高亮

12.javascript next - ES6 syntax

javascript ES6 语法高亮的支持。

13.jQuery

这个插件主要包括 jQuery 语法高亮，代码段。

14.Sass和SCSS

这两个插件主要是平时使用 scss 或者是 sass 这些预编译语言有用，支持语法高亮。

工具插件

1.SFTP

这个插件还是很有用的。当我们在跟后端联调的时候，通常都会有一台开发机，暂时存放我们的代码，这个时候如果我们要做一些修改。通常的步骤是：
1.上传 svn 2.登上开发机 svn up 一下。这个过程中很浪费时间

如果我们使用 SFTP 插件就可以保存的时候自动上传到服务器。配置方法：
1.在项目根目录建立 sftp-config.json 文件
2.配置该文件，详细配置如下图

2.SideBarEnhancements和SideBarFolders

Sublime 侧边栏增强插件。

3.SublimeCodeIntel

语法，函数跳转。但是我在使用的过程中觉得这个插件并不怎么好用。

4.Markdown Extended

这个插件主要使 Sublime 对 markdown 语法的高亮支持。效果如下图：

5.TrailingSpaces

去除代码末尾的空格键

语法检查插件列表

1.SublimeLinter

安装完以后需要，另外安装需要检测语言的插件。

2.SublimeLinter-jshint

在安装完SublimeLinter 后安转该插件对 JavaScript 语言进行语法检测。

3.SublimeLinter-csslint

在安装完SublimeLinter 后安转该插件对 css 语言进行语法检测。

主题插件

1.Theme-soda

该插件主要能够使sublime 兼容mac的retina屏幕

需要在自己的配置文件内启动

{
    "theme": "Soda Light 3.sublime-theme"
}

2.Monokai Extended

如果您觉得不错，请访问 github（点我） 地址给我一颗星。谢谢啦！

前言

这篇文章的内容如题目一样，主要分为两个部分，

1. 谈谈业内主流的移动端适配解决方案
2. 点5像素的由来和实现方法

建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》，因为这些文章涉及的很多概念在这篇文章中都会提到。

1.再谈移动端适配

1.1百分比解决方案的缺点

在我们的项目中大量的使用百分比来解决页面在宽度上的自适应，其实在高度上并没有很好的自适应。所以在我们的前端页面会出现一些比较奇怪的问题。比如下面这样：

还有一个比较明显的问题就是：在任何机型上我们的按钮的高度是不会变化自适应的，所以小屏手机我们的按钮看起来很臃肿。

1.2一些常用单位的概念解析

在谈我为什么在我们的项目中引入rem单位的时候，先来详细的了解几个常用的单位概念。

1. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的（也就是说是跟物理设备有关的）。拿高清屏和普通屏来做对比就是普通屏幕的1个像素点就是1个物理像素点，而高清屏的1个像素点是4个物理像素点。
2. em相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em单位的特点：1. em的值并不是固定的；2. em会继承父级元素的字体大小。
3. rem相对长度单位。rem是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。为了简化font-size的换算，需要在css中的html选择器中声明font-size=62.5%，这就使rem值变为 16px*62.5%=10px, 这样12px=1.2rem, 10px=1rem, 也就是说只需要将原来的px数值除以10，然后换上rem作为单位就行了。

注意：当我们在根节点<html>上设置了font-size基准值以后，在文档中有使用rem单位的属性值都是相对于根节点font-size的一个相对值。比如说一些元素的属性如width height margin等。也正是这个原因，现在很多网站的移动端网站都在使用rem单位作为适配工具。

在使用rem的时候比较麻烦的就是px和rem换算的问题。上面的除10的方案是比较简单的。但是根据设置基准值的不同换算方法也不一样。如果我们使用scss来写我们的样式表的话，解决方法就比较简单了，代码如下：

@function px2rem($px){
    @return ($px/10)/2 + rem;  //  相当于$px/20  +rem
}

width:px2rem(100px);   //5rem
height:px2rem(200px);  //10rem

1.3为什么引入 rem 单位

由上面的内容已经知道百分比单位在多屏幕适配上的缺点和rem单位的优点。那么rem单位能为我们的开发带来什么呢？来看一个常见的多列布局，淘宝移动端的商品列表页，如下图：

设计稿（不管是iphone6的二倍稿还是iphone5的二倍稿）中给展示商品的坑位的宽高比是固定的。为了能够使这个列表在不同的屏幕上达到最佳的显示效果，需要保持宽度和高度比一致。如果使用百分比肯定是满足不了这个需求的，因为高度上我们没有办法控制。

iphone6和iphone5的屏幕宽度和高度比不一样，当我们使用百分比做多列布局的时候就会出现下面的这种情况：

所以为了满足商品坑位在不同屏幕上的宽高比一致，淘宝使用的是rem的解决方案，也是目前最好的解决方案。

1.3为什么将计算根元素的font-size值的js放在head标签中

设置根节点font-size值的方法，第一种是使用css的Media queries，示例代码如下：

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

上面的这种方式在我之前做过的项目中使用了一段时间。上面的设置方法有一个很明显的问题font-size是在一个屏幕宽度的区间上有一个基准值。像安卓手机种类的繁多，屏幕大小就更多的情况下，上面的方法很鸡肋。

第二种解决方案，就是使用JavaScript根据当前屏幕的宽度动态计算font-size值，这种方法可以保证屏幕宽度连续变化的时候，font-size基准值也是连续变化的。

计算方法可以参考这篇文章《根据iPhone6设计稿动态计算rem值》

那么最后一个问题也来了：为什么将计算rem单位的js放在head标签里面？

一句话总结：在浏览器中文档流是从上往下加载渲染的。为了保证发生不必要的_重绘_或者是_重排_肯定是越早给根节点设置font-size值越好。

1.4什么情况下使用rem来布局和注意的问题

1. 整体的布局还是使用百分比
2. 使用rem的最佳场景是,遇到例如多列带有图片的列表,常常需要图片固定宽高比例
3. 研究了一些网站，比如淘宝，对字体字体一般情况建议使用px
4. 出现1px像素线的地方，仍旧使用border-width:1px;而不是border-width:.1rem;

2.点5像素的由来

在前言中推荐阅读的那篇文章中已经知道在 高清屏(Retina)中控制显示的最小的物理单元包括4个基本的像素点，而普通屏幕1个点像素就是1个物理像素单元。所以在高清屏（Retina）出来之前，就算我们在css中写 0.5px，对于显示屏幕也是不识别的。但是在高清屏（Retina）中我们可以通过间接的方法实现0.5px的效果。

下面的这张图可能能让我们迅速回忆上篇文章的内容

来看一段简单的示例代码加深理解：

<div class="item1"></div>
<div class="item2"></div>

css代码如下：

.item1{
    width:100px;
    height:50px;
    border-top:1px solid #000;
    float: left;
    margin-top:10px;
}

.item2{
    width:100px;
    height:50px;
    margin-top:10px;
    border-top:.5px solid #de1dfb;
    float: left;
}

chrome中的显示效果如下图：

我把这张图截取下来放到 PS 中放大可以很明显的看到一些问题。就是高清屏实际上是用了两排的物理像素点来显示1px的像素线。且不做特殊处理的话1px和0.5px的在Chrome浏览器中显示效果是相同的。也就是说Chrome浏览器不识别0.5px。

但是相同的代码我在 safari浏览器中的效果却是下面的效果：

下面的效果是我在PS中做了放大后的效果。

所以，我们可以得出一个结论：对于0.5px不同浏览器对它的识别是存在差异的。

以下这张图是一位网友对一些常用设备是否识别0.5px做的统计：

其实从视觉的感受上来说0.5px像素的显示效果确实是比1px的显示效果要好很多。大多数情况下也更符合设计稿上的1px线的效果。那么我们有没有办法可以让1px在不同的浏览器和设备中显示真正的1像素的效果呢？

答案是肯定定的。

2.1传统的实现方法，也就是我们的项目中正在使用的方法：

伪元素 + css3的缩放巧妙地实现；

基本步骤就是：

1. 设置目标元素定位参照
2. 给目标元素添加一个伪元素before或者after，并设置绝对定位
3. 给伪元素添上1px的边框
4. 设置伪元素的宽高为目标元素的2倍
5. 缩小0.5倍（变回目标元素的大小）
6. 使用border-box把border包进来

先来看一个1像素和0.5像素的显示效果，下面的截图是在chrome中：

实现的代码如下：

<div class="item4">测试用的边框</div>
<div class="item5">测试用的边框</div>

.item4, .item5 {
    width: 200px;
    height: 100px;
    position: relative;
}

.item4 {
    border: 1px solid #000;
}

.item5::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
}

可以很明显的看到缩放前和缩放后的效果。在ps中把上面的截图放大很多倍以后我们可以看到显示细节。**缩放以后确实是使用的最小的物理像素单元来显示边框。**如下图：

注意：按照css3 transform 的scale的定义，理论上边框可以任意细（1/n px）。但是上图中已经是物理设备能够使用的最小的物理单元了，那么我们继续缩放会有什么现象呢？

使用一下代码

<div class="item6">测试用的边框</div>

.item6::before {
    content: '';
    position: absolute;
    width: 400%;
    height: 400%;
    border: 1px solid #000;
    transform-origin: 0 0;
    transform: scale(0.25, 0.25);
    box-sizing: border-box;
}

chrome中显示效果如下，可以很明显的看到颜色变浅了，但是是否变得更细了我们肉眼无法分辨：

在PS中放大以后的效果：

很明显可以看到线并没有变细，但是线的颜色确实是变浅了。这样的结果也符合我们的预期，就是已经到了物理设备能够显示一块颜色的最小的物理单元了。

2.2js动态设置viewport的方案

一些大厂（所谓的淘宝）的解决方案就是使用js动态获取屏幕的设备像素比，然后动态设置viewport。当然也是我认为目前最好的解决方案。

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

我们知道，一般我们获取到的视觉稿大部分是iphone6的，所以我们看到的尺寸一般是双倍大小的，在使用rem之前，我们一般会自觉的将标注/2，其实这也并无道理，但是当我们配合rem使用时，完全可以按照视觉稿上的尺寸来设置。

1. 设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏，也即是设备像素比(device pixel ratio)dpr比较大，所以显示的像素较为清晰。
2. 一般手机的dpr是1，iphone4，iphone5这种高清屏是2，iphone6s plus这种高清屏是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr，所以iphone6给的视觉稿大小是（*2）750×1334了。
3. 拿到了dpr之后，我们就可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content例如（这里之所以要设置viewport是因为我们要实现border1px的效果，在scale的影响下，高清屏中就会显示成0.5px的效果）

总结：

由以上两个部分的内容可以知道，不管是在做多终端适配还是实现点5像素的线，都是存在css和js两种解决方案的。两种方案相比来说，我都认为使用JavaScript的解决方案都胜一筹。唯一的缺点就是会在html的head标签中引入一段js代码 。

记得刚入行的时候，业内有一个叫“雅虎军规”的东西，是好多前端做页面优化参考的标准。其中有一条就是要将js文件放在body标签的底部。到现在很多年了，时代在变化，我们的网络带宽也在提升，“雅虎军规”中的一些内容，可能有些已经不适合我们现在应用开发的场景。而且我觉的做技术不应该拘泥于已有的一些规定，而应该按照我们的场景选择适合我们的技术和解决方案。

纵然有瑕疵，有些也是可以通过技术手段来解决的。比如在head标签中引入计算font-size和检测设备独立像素比的js的时候，会担心js的执行阻塞页面的渲染。而我们完全可以通过review的方式确定js代码的执行不会出现阻塞，而影响文档流的加载。

还是那句话：没有十全十美的技术方案，只有适合不合适当前业务场景的技术方案。。

参考文章

css3的字体大小单位[rem]到底好在哪？
移动端高清、多屏适配方案
使用Flexible实现手淘H5页面的终端适配
lib-flexible源代码

• 引子：
• 1.JavaScript 中的变量类型和类型检测
  • 1.1原始类型
  • 1.2引用类型
  • 1.3內建类型的实例化
  • 1.4函数的字面形式
  • 1.5正则表达式的字面形式
  • 1.6类型检测
    • 1.6.1原始类型的检测
    • 1.6.2鉴别引用类型
    • 1.6.3鉴别数组
    • 1.6.4原始封装类型
• 2.JavaScript 中的函数
  • 2.1定义函数的两种方式
    • 2.1.1函数声明
    • 2.1.2函数表达式
  • 2.2JavaScript函数的参数
  • 2.3函数的重载
  • 2.4函数使用最重要的3个点
    • 2.4.1 this的使用
    • 2.4.2 call和apply的使用
    • 2.4.3 bind的使用

引子：

最近看了两本书，书中有些内容对自己还是很新的，有些内容是之前自己理解不够深的，所以拿出来总结一下，这两本书的名字如下：

• JavaScript 面向对象精要
• JavaScript 启示录

如果对于 JavaScript 面向对象编程理解不够深的话，第一本书还是强烈推荐的。第二本书比较适合初中级的开发者阅读。对各种知识点都有代码示例。内容中规中矩。
#1.JavaScript 中的变量类型和类型检测

C#和Java等编程语言用栈存储原始类型，用堆存储引用类型，JavaScript则完全不同：它使用一个变量对象追踪变量的生存期。原始值被直接保存在变量对象内，而引用值则作为一个指针保存在变量对象内，该指针指向实际对象在内存中的存储位置。

1.1原始类型

在 JavaScript 中有5中原始类型，分别如下：

Symbol是ES6引入的基本类型，主要为了解决对对象属性的命令出现重复的情况。比如自己声明的类继承了一个其它的类，自己的类的属性可能会跟父类重复。所以ES6中对象属性的类型有 字符串和Symbol类型

所有原始类型的值都有字面形式，字面形式是不被保存在变量中的值。

//string

var name='zhiqiang';
var selection='a';

//number

var count=235;
var cost=1.51;

//boolean

var found=true;

//null

var object=null;

//undefined

var flag=undefined;
var ref;

console.log(ref);  //undefined

原始类型的变量直接保存原始值（而不是一个指向对象的指针）。当将原始值赋值给一个变量时，该值将被复制到变量中。也就是说，如果你使一个变量等于另一个时，每个变量有它自己的一份数据拷贝。

示例代码如下：

var color1='red';
var color2=color1;

内存中的保存形式，如下图：

1.2引用类型

引用类型是在JavaScript中找到最能接近类的东西。引用值是引用类型的实例，也是对象的同义词。属性包含键（始终是字符串）和值。如果一个属性的值是函数，它就被称为方法。JavaScript中函数其实是引用值，除了函数可以运行以外，一个包含数组的属性和一个包含函数的属性没有区别。

创建引用类型的两种方式看下面的一段代码：

//第一种使用new操作符
var obj1 = new Object();  //
var obj2 = obj1;

//第二种
var obj3 = {}

以上两种创建对象的方式并没有本质的区别，是等价的。

那么当我们创建了一个对象，且发生了赋值的时候，在内存中发生了什么呢？

看下图：

1.当发生了new操作的时候，先在内存中开辟一块空间，存放创建的对象，并且使obj1指向这块开辟的空间；

2.引用类型发生赋值的时候，仅仅是引用地址指向了内存中的同一块区域；

JavaScript语言有"垃圾回收"功能，所以在使用引用类型的时候无需担心内存分配。但是为了防止"内存泄露"还是应该在不实用对象的时候将该对象的引用赋值为null。让"垃圾回收"器在特定的时间对那一块内存进行回收。

1.3內建类型的实例化

JavaScript中的內建类型如下：

內建引用类型有字面形式。字面形式允许你在不需要使用new操作符和构造函数显式创建对象的情况下生成引用值。（包括字符串，数字，布尔，空类型和未定义）；

1.4函数的字面形式

创建函数的三种方式：

//第一种函数声明
function abc(){
    console.log(1);
}

//使用构造函数的形式
var value = new Function('','console.log(1)');

//函数表达式
var a = function(){
    console.log(1);
};

使用构造函数的方式创建函数，不易读，且调试不方便，不建议使用这种方式创建函数。

1.5正则表达式的字面形式

在JavaScript中使用正则表达式有两种方式：

var a1 = /\d+/g;//使用字面形式
var a2 = new RegExp('\\d+','g');//使用构造函数的形式

在JavaScript中建议使用字面形式的正则表达式，因为不需要担心字符串中的转义字符。比如上面示例代码中字面形式使用\d而构造函数使用的是\\d；

1.6类型检测

1.6.1原始类型的检测

使用typeof运算符可以完成对原始类型的检测，看下面的一段代码：

上面的代码中有一段比较特殊就是

typeof null   //object

这里其实是不准确的，如果我们要判断一个值是否为空类型的最佳的方式是直接和null进行比较

console.log(value === null);

==和===之间的最主要的区别就是前者在进行比较的时候会进行类型转化，而后者不会；

console.log(5==5);//true
console.log('5'==5);//false
console.log('5'===5);//fasle

1.6.2鉴别引用类型

JavaScript中对于引用类型的检测较为复杂。对于函数类型的引用使用typeof返回的是Function，而对于非函数的引用类型返回的则是object。所以在JavaScript中鉴别引用类型的类型引入了instanceof。

instanceof操作符以一个对象和一个构造函数作为参数；

function a (){}
var b = {};
var c =[];

typeof a   // function
typeof b  //object
typeof c //object

a instanceof Function //true
b instanceof Object  //true
c instanceof Array   //true

1.6.3鉴别数组

有前一小结可以知道鉴别数组类型可以使用instanceof。但是在ECMAScript5中，Array对象提供了更好的方式来鉴别一个变量是不是数组类型。

var a = [];
var b =3;
Array.isArray(a);  //true
Array.isArray(b); //false

注意：IE8及更早的IE不支持该方法

1.6.4原始封装类型

JavaScript中的原始封装类型共有3种。这些特殊引用类型的存在使得原始类型用起来和对象一样方便。当读取字符串，数字，布尔类型时，原始封装类型被自动创建。

var a ='qwer';
var firstChar = a.chatAt(0);
console.log(firstChar);//  q

在JavaScript引擎中发生了如下的过程：

var a ='qwer';
var temp = new String(a);
var firstChar = temp.chatAt(0);
temp =null;
console.log(firstChar);//  q

由于要把字符串当成对象使用，JavaScript引擎创建了一个字符串实体让charAt可以工作，字符串对象（temp）的存在仅仅用于该语句（temp.chatAt(0)）,随后便被销毁(temp =null)。

我们可以简单测试一下

var a ='qwer';
a.temp ='122';
console.log(a.temp);  //undefined

上面代码的过程如下：

var a ='qwer';
var temp = new String(a);
temp.temp ='122';
temp=null;

var temp = new String(a);
console.log(a.temp);  //undefined
temp=null;

由上面的代码我们可以看到我们实际上是在一个立刻就会被销毁的对象上而不是字符串上添加了一个新属性。当试图访问这个属性时，另一个不同的临时对象被创建，而新属性并不存在。虽然原始封装类型会被自动创建，但是在这些值上进行instanceof检查对应类型的返回值却都是false;

var a ='1234';
var num = 10;

a instanceof String //false
num instanceof Number //false

这是因为临时对象仅在值被读取的时候创建，随即被销毁。instanceof操作符并没有读取到任何东西，也没有临时对象的创建，因此它告诉我们这些值并不属于原始封装类型；

但是我们可以手动创建原始封装类型，但是此时使用typeof没办法检测对象的实际类型,只能够使用instanceof来检测变量类型；

2.JavaScript 中的函数

在JavaScript中函数就是对象。函数不同于其他对象的决定性特点是，函数存在一个被称为[[Call]]的内部属性。内部属性无法通过代码访问而是定义了代码执行时的行为。ECMAScript为JavaScript的对象定义了多种内部属性，这些内部属性都用双重中括号来标注。

[[Call]]属性是函数独有的，表明该对象可以被执行。由于仅函数拥有该属性，ECMAScript定义了typeof操作符对任何具有[[Call]]属性的对象返回**function**>

2.1定义函数的两种方式

2.1.1函数声明

函数声明是以function关键字开头，这也是区别函数声明和函数表达式的一个重要的方法。函数声明会在编译期对整个作用域内的变量名字进行查询，函数声明的变量被提升至上下文的顶部，也就是说可以先使用函数后声明它们。

abc();
function abc(){
    console.log(2);
}

2.1.2函数表达式

函数表达式是function关键字后边不需要加上函数的名字。这种函数被称为匿名函数。因为函数对象本身没有名字，所以函数表达式通常会被一个变量或者属性引用。

abcd()
var abcd=function(){
    console.log(1)
};

var aaa={
    abc:function(){

    }
}

函数表达式只能通过变量引用，无法提升匿名函数的作用域。在使用函数表达式之前必须先创建它们，否则代码会报错。看示例代码的运行结果：

2.2JavaScript函数的参数

JavaScript函数参数与很多语言函数参数不一样。你可以给函数传递任意数量的参数却不造成错误。那是因为函数实际上被保存在一个被称为arguments的类似数组的对象中。arguments可以自由增长来包含任意个数的值，这些值可以通过数字索引来引用。arguments的length属性会告诉你目前有多少个值（函数接受了多少个参数）。

arguments是一个类数组对象，它本身并不具有JavaScript数组应该具有的全部的属性和方法。

这里我们思考一个问题，我们怎么将一个类数组转化为真正的数组？

1. 最基本的我们应该想到的是创建一个原始的空数组，使用for循环将类数组中的每一项添加到新的数组中；
2. 如果使用Zepto或者jQuery的话，会有一个toArray()的方法可以使用；
3. ES6有Array.from(arrayLike[, mapFn[, thisArg]])可以将类数组转化为数组对象；
4. 最后一种也是最高级的一种方法就是使用原型的方式；

借用原型的方式把一个类数组转化为真正的数组的示例代码：

function abc(){
    console.log(arguments);
    var arrTemp = [].slice.apply(arguments);   //相当于Array.prototype.slice == [].slice
    console.log(arrTemp);
    console.log(Array.isArray(arrTemp));
}

abc(1,2,3);

输出结果：

2.3函数的重载

依稀的记得在学习的从C# 的时候，这些强类型语言对重载的定义：函数名相同，参数不同，或者是参数类型不同都可以叫做函数的重载。

但是在JavaScript这样的语言中因为 arguments的存在，JavaScript的函数根本就不存在所谓的签名，所以重载在JavaScript中实际是不存在的。

但是我们可以根据arguments传入函数体的参数个数来模拟_函数重载_：

function abc(){
    if (arguments.length ===1){
        //A
    }
    if(arguments.length ===2){
        //B
    }
}

abc(11);
abc(11,22);

这里主要是满足某些特殊场合的需求吧。

2.4函数使用最重要的3个点

1. this;
2. apply()和call();
3. bind();

关于this，call，apply，bind这几个概念在之前博客文章已经介绍过很多遍了。在这里还是做一下简单的介绍。

2.4.1 this的使用

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象;

this指向的对象是在代码的运行期决定的。既上面说的，谁调用了它，就指向谁。一个很简单的总结就是，在函数中使用this，当前this指向的是当前window对象。在对象的方法中使用this,this指向的是当前对象（这个也是最容易出错的地方）。

2.4.2 call和apply的使用

关于这两个概念，之前的博客文章也介绍多很多次。这里也简单总结介绍一下。call和apply主要是在执行某个对象的方法的时候来改变当前this的指向。主要用在对象继承的时候。

2.4.3 bind的使用

bind也是改变对象this指向的一个方法。这个方法是ECMAScript5中新添加的一个方法。但是bind和call,apply的主要区别就是bind的第一个参数是要传给新函数的this的值。其它所有参数代表需要被永久设置在新函数中的命名参数。可以在之后继续设置任何非永久参数。

来看一段示例代码：

function abc (lab){
    console.log(lab + this.name);
}

var person1 = {
    name:'xiaogang'
}

var person2={
    name:'zhiqiang21'
}

var sayNamePer1 =abc.bind(person1);
sayNamePer1('person1');


var sayNamePer2 =abc.bind(person2,'person2');
sayNamePer2();

person2.sayName = sayNamePer1;
person2.sayName('person2');

上面的代码中：

sayNamePer1在绑定的时候没有传入参数，所以仍需要后续执行sayNamePer1来传入lab参数；sayNamePer2不仅绑定了this为person2，还绑定了输入的第一个参数是person2。意味着可以可以直接执行sayNamePer2()。最后一个是将sayNamePer1设置位person2的sayName方法。由于其this的值已经绑定，所以虽然sayNamePer1是person2的方法，但是输出的仍然是person1.name的值。

其实总结一句话call,apply和bind的主要区别就是：

call和apply是绑定既执行。bind是有返回值的，先绑定后执行。

26年来，终于有机会拨打了一次110的感受。

1.事发原因篇

2016年09月17日，下午五点四十左右我将车子停到了小区地下车库中。20点50左右我去推车，发现车子不见了。第一个想到的可能是车子被盗了。当时内心还想，“喔槽，终于被盗了！”。

在车库找了一圈没有找到后，看到车库出口有监控。遂想是不是可以查下监控。虽然我当时已经不抱着能找回来的心态了。想到如果自己去物业查监控，仅仅凭借自己丢车的一口说词不知道行不行。想着还是打110找警察叔叔来比较好一些。说实话，虽然从开始上小学就学习，火警119，匪警110，救护车112。但是26年中却重来没有用过其中任何一个。这次终于有机会用其中的一个了。如果说当时内心还是有点儿小激动不知道你们会不会相信。😅

2.报警篇

21点7分左右接通北京110指挥中心电话。我跟值班民警叔叔讲了我遇到的情况。民警叔叔电话登记后说，后续会有辖区民警联系我。我说好。大约20分钟后接到辖区派出所民警的电话，问了我具体的位置。大约15分钟民警叔叔开着一辆现代伊兰特，前排座位坐一辅警哥哥，就到了我所在的小区。

3.与警察叔叔“斗智斗勇篇”

首先民警叔叔让我带他去我丢车的车库去，中间打开了身上的录音装置。到了我丢车的位置后，民警叔叔重点问了我几个问题，大致如下：

👮：大概几点停的车？

🙁：五点四十左右。

👮：几点发现丢车的？

🙁：八点五十左右。

👮：车子什么牌子，多少钱买的，有发票么？

🙁：捷安特，4000＋，有发票

👮：你现在想怎么办？

🙁：我想查查监控。

然后就有小区的保安队长带着我们去了小区物业查看监控录像。进了物业办公室后，警察叔叔让我先找个凳子坐下，然后教了我三句话。

👮：要求查监控，决定登记处理，如果发现有人推我车子的情况，会及时跟警察叔叔联系。

🙁：好……

👮：再次打开身上的录音装置……

🙁：我个人要求查看物业监控……及时跟警察叔叔联系。

👮：警察叔叔又拿了笔记本，要我把刚才说的话写在笔记本上，让我签字。

🙁：我个人要求查看物业监控……及时跟警察叔叔联系。（中间夸我字写的比他漂亮😓）

然后警察叔叔就跟物业大哥说，让他帮我按照我说的时间给我调取录像。

👮：那个小伙子，你先看监控，如果发现情况，就及时跟我电话联系……我先去处理其它事情了……

然后警察叔叔就开车走了……

4.查看监控篇

当我开始认认真真的开始看录像的时候才发现他妈的好好的监控不拍门口，竟然拍路面，具体情况就是只有正对着车库入口才可以拍到，在车库入口左右两边都是死角，肯本什么也看不到，对小区物业无语……结果是可想而知的，最后什么也没有发现。

对于这次报警感受：我个人还是能够接受的，在整个过程中，警察叔叔跟我说话态度很好，征求我的想法，然后帮我解决我想看监控的问题。我也能够理解最后这种处理方式，毕竟也就是丢一辆车子，价值也不是很高。

由前段时间大学生被骗学费猝死也可以想象得到。帝都警察叔叔处理这些经济损失不高的案件方式就是这样，更不用说在农村基层派出所了。并不是说警察处理问题的方式有问题，在某些情况下也许这是正常的，正确的处理方式。

4千块对我来说我心理上是可以承受，但是对于很多学生来说，这肯定是一大笔钱。这一路走来，见识过人性的善良，也见识过人性的丑陋。好事也都不能全部发生在自己一个人身上，这个世界有阴暗就会有阳光，有小偷，骗子就会有警察，虽然警察叔叔有时候不一定好使。

结果：

车子终究是丢了，依赖的警察叔叔也没能帮上什么忙，也只能安慰自己：“塞翁失马，焉知非福！”。

经典的"粘连"footer布局

参考文章链接在文章末尾，简单的语言总结如下：

经典的“粘连”footer布局就是。我们有一块内容<main>。当<main>的高度足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。当<main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<footer>元素能够“粘连”在屏幕的底部。如下图所示：

当main足够长时

当main比较短时

上面布局的实现方法在参考文章中已经有提到。下面主要探讨我们项目中遇到的情况：

我们需要实现的布局就是 按钮“提交”所在的区域能够自由伸缩。当屏幕较低时，最就是“提交”按钮和表单所在的区域接触或者有一定的间隙。 示例图就是下面的：

当屏幕足够高的时候

当屏幕比较低的时候

上面的布局在移动端需要考虑以下因素对布局的影响：

1. 安卓上键盘弹起会对absolute和fixed产生影响；
2. 我们的绝对定位的元素是使用的bottom相对于屏幕的底部定位；

为了解决以上的两个问题的解决方案：

1. 使用正常文档流的元素包裹绝对定位的元素；
2. 绝对定位元素的父级元素应该有一个min-height防止，父级元素太低时，绝对定位元素“溢出”父级元素；(min-height >= 绝对定位元素 + bottom)；

根据“粘连”footer布局的**，结合弹性盒布局。我们需要的这种布局可以有两种方式，分别介绍如下：

1.使用vh单位

先来了解下vh和vw这两个单位。

1. vh相对于视口的高度。视口被均分为100单位的vh。
2. vw相对于视口的宽度。视口被均分为100单位的vw。

上面两个单位通俗的意义就是在css中获取当前屏幕的高度和宽度（不通过js计算）。

示例代码如下：

<body>
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3">
        <div class="btn-item">你好</div>
    </div>
</body>

css代码如下：

* {
    margin: 0;
    padding: 0;
}

body {
    /*主要就是这里获取视窗口的高度*/
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.item1 {
    height: 100px;
    background-color: #ddd
}

.item2 {
    height: 300px;
    background-color: #fea0a0
}

.item3 {
    /*防止绝对定位的元素溢出父级元素*/
    min-height: 30px !important;
    border: 1px solid #481eff;
    position: relative;
    height: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-height: 100%;
}

.btn-item {
    position: absolute;
    bottom: 10px;
    border: 1px solid #000;
}

以上就是完全使用css来实现我们项目中布局的方法，但是这个方法有一个很明显的缺点就是vh单位的兼容性问题。兼容列表如下：

因为兼容性问题，纯css的方法在我们的项目中使用还是不现实。但是我们想下问题的本质：在使用弹性盒的基础上，我们唯一需要做的就是知道弹性盒元素的高度（就是我们项目中屏幕的高度）。

2.js简单计算满足兼容问题。

就是在dom树渲染完成以后给body设置高度未屏幕的高度。为了避免不必要的“重绘”或者是“重排”在head标签中添加如下js。

var callback = function(){
    document.body.style.height=window.screen.height+'px';
};

//是否是页面加载触发绑定了事件
if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) {
    callback();
} else {
    //DOMContentLoaded 仅支持ie9+ 和移动端  <=ie8 使用 onreadystatechange  可以监听dom是否加载完毕
    document.addEventListener("DOMContentLoaded", callback);
}

使用 jQuery 或者是 Zepto 的方法，仍然在head标签中添加如下js。

$(function(){
    $('body').height($(window).height());
})

所以在我们的项目中结合弹性盒布局和添加简单的动态js计算屏幕的高度。就可以完美实现我们项目中需要的布局。

body {
    /*使用js动态计算就可以不使用vh单位*/
    /*min-height: 100vh;*/
    display: flex;
}

参考文章：

因为是一个

cssstickyfooter.com
ryanfait.com/sticky-footer
css-tricks.com/snippets/css/sticky-footer
pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way
mystrd.at/modern-clean-css-sticky-footer

前言

做移动端h5开发很久了，从开始入行到现在。很多知识和工具都是在用前辈留下的遗产，都没有深入的研究过原因，了解为什么要这么去做。

也许自己也是过了交给自己做什么就做什么的阶段了。在国庆节有一个大块的时间，把最近看到的知识总结一下，也算是对这方面的知识划上一个句号。想想着实把国庆节过成了劳动节，没办法，自己就是这样的一个人，“应该去做的，而且有能力做的，如果不去做，心里面总是不舒服”。

这篇文章的内容主要分为两个部分：

1. 高清屏（Retina）相关概念解析和高清屏（Retina）与前端开发的关系；
2. 前端开发过程中使用什么手段区分高清屏和普通屏幕，并且衍生出的适配方案；

注：本篇文章的所有图片来源于网络，如有侵权请告知。

高清屏（Retina）概念解析和前端开发的关系

1. 高清屏概念解析

高清屏（Retina）概念的兴起主要是从乔帮主发布 Retina 设备开始兴起。主要功能如下：

具备足够高的物理像素密度而使人体肉眼无法分辨其中单独像素点的液晶屏。

特点如下：

1. 一种具备超高像素密度的液晶屏；
2. 同样大小屏幕上显示的像素点由一个变为多个；

看一张乔帮主当年发布 **高清屏（Retina）**时的一张照片：

由乔帮主背后的那两张图可以发现，高清屏和普通平的主要区别：高清屏（Retina）和普通屏相比，相同区域的物理像素点数，高清屏是普通屏的4倍。

2.物理像素点和css的关系

先来看一张图：

由上面的图我们可以知道，当我们使用css设置了一个区域以后，高清屏含有的像素点数是普通屏的4倍。而css设置的像素值（px）属于普通像素点，或者是标准像素点。

那么我们平时在普通屏幕中正常显示的位图图像放在高清的屏幕上会有什么问题呢？由上面的知识可以知道，普通屏幕的1个CSS像素点对应4个高清屏幕的像素点，1个分成4个，不够分的情况下，颜色会取近似值。所以在高清屏上，在普通屏幕正常显示的图片会变的模糊。

可以看下图来加深理解：

这就是为什么我们现在的设计稿为什么都会设计成2倍稿的原因。为了兼容高清屏幕的图片高清晰显示，我们的裁切图是2倍图，在css中使用的时候会使用css压缩2倍。

比如，我们有一个icon.png的文件，切图大小是 200x200 。而我们使用的时候却是使用css设置其大小为100x100。这样基本上就会保证普通屏和高清屏显示一致。

css压缩真的能保证完全一致么？

看了一些网友的文章。css压缩会使图片边缘的锐度减小。

下面是我做的一个简单的实验，比如说我现在有一个276x90的图标文件。我直接把它设置为一个div的背景，在浏览器中看效果：

代码如下：

<div class="item3"></div>

.item3{
    height:45px;
    width:138px;
    background:url(./4.png) no-repeat center;
    background-size:100% 100%;
}

在网页中的效果如下图：

我把这张图截取下来放到 PS 中放大，之后的效果如下图，可以明显看到在有颜色的字体边缘的颜色变浅，图像周围的锐度减小。

其实，在我们的开发过程中完全没有必要去在意这里的这个细节问题，图像边缘的锐度也是在 PS 中放大了好多倍以后才看出来的，如果是人的肉眼是根本看不出来的。

2. 高清屏（Retina）和前端开发的关系

由上面的知识可以知道。当我们在高清屏中使用普通图片的时候，相当于图片被放大了一倍（可以这么理解：普通屏幕的1px相当于高清屏的2px）。

因为安卓产品的参差不齐和厂商对屏幕制造标准的标准不一样。这个放大的比例并不是固定的。还好我们有一个叫设备像素比的东西来检测当前屏幕是不是属于高清屏幕。

设备像素比的英文单词为devicePixelRatio。它有一个计算公式如下：

devicePixelRatio=屏幕物理像素/设备独立像素

devicePixelRatio其实就是window对象的一个属性，它被大多数的webkit浏览器所支持。看下图是我在我的MacBook Pro上的Chrome中做的测试。很明显是属于高清屏哈ヾ(=^▽^=)ノ

上面是对设备像素比的东西 做了一个简单的了解，下面就来详细了解下几个比较重要的概念。

**设备独立像素（device independent pixels）**又叫dip或者是dp。它可以用来辅助区分高清屏幕和非高清屏幕。

我们可以通过两个典型的手机来理解上面的概念。iphone3gs和iphone4的屏幕最大的区别就是前者是普通屏幕而后者是使用了高清的retina屏幕。以下是我查到的一些参数信息：

下面的是iphone3gs屏幕信息：

下面是iphone4s屏幕信息：

在iphone3gs垂直的时候，屏幕的宽度为320物理像素。当我们使用<meta name="viewport" content="width=device-width">的时候，会设置视窗布局宽度为屏幕的宽度320px，于是页面就很自然的覆盖在屏幕上。

所以在iphone3gs上屏幕的物理像素位320像素，独立像素也是320像素。因此window.devicePixelRatio=1。

而对于iphone4s来说，当屏幕纵向显示的时候，屏幕的物理像素是640像素，而视区宽度不是640像素而是320像素。

这样在iphone4s上，屏幕的物理像素为640像素，独立像素还是320像素，因此window.devicePixelRatio=2。

由上面的举例相信已经对设备的物理像素和独立像素有了一个认识，那么总结如下：

• 设备的物理像素（也叫设备像素），就是屏幕显示颜色的最小的物理单元，也就是我们经常看到的手机分辨率所描述的数字；
• 设备独立像素（与密度无关的像素），就是我们手机的实际的视窗口的大小。具体来说可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

怎么区分高清屏和普通屏幕及其适配方案

通过对于第一部分的了解，我们可能已经知道怎么区分高清屏和普通屏了。网上网友总结的结论如下：

通过计算 devicePixelRatio 的值，是可以区分普通显示屏和高清显示器，当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏，当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。

那么这部分，就来简单的了解下我们平时在开发过程中，对于我们使用的图片怎么适配高清屏和普通屏。

原理也很简单，就是根据不同的设备像素比来加载不同的图片:

1. 针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张1倍的图片
2. 针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0)，加载一张2倍大的图片

1.Media Queries的解决方案

根据屏幕的设备像素比来加载不同图片可以使用css 的media queries来解决，当然使用css来解决也是兼容性最好的解决方案（其实意味这我们要切两套图片1倍图和2倍图）。

示例的demo如下：

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

CSS Media Queries的优点

• 只有对应的目标元素才会下载图片资源
• 跨浏览器兼容
• 像素可以精确控制

  CSS Media Queries的缺点

• 单调无味的实现过程，特别是大型项目中
• 只能通过HTML元素的背景图片来实现，无任何语义化可言

2.JavaScript的解决方案

使用js对“window.devicePixelRatio”进行判断，然后根据对应的值给Retina屏幕选择图像。

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

Javascript查询的优点

• 易于实施
• 非Retina屏幕不用下载过大的资源
• 像素精确控制

  Javascript查询的缺点

• Retina屏幕下必须下载标准备和高精密度的两个资源
• Retina屏幕下图像交互可见
• 浏览器兼容性不强

3.使用SVG矢量图像

SVG矢量图的优点

• 一个资源适合所有设备
• 易于维护
• 面向未来的:可伸缩向量图形

  SVG矢量图的缺点

• 没有像素那样有精度
• 由于文件大小，不适合复杂的图形
• 不支持IE7-8和早期的安卓版本

参考文章：

• 高清显示屏原理及设计方案
• 设备像素比devicePixelRatio简单介绍

背景：

前段时间大部门下新成立了一个推广百度OCR、文字识别、图像识别等科技能力在金融领域应用的子部门。因为部门刚成立，基础设施和人力都是欠缺的。当时分到我们部门的任务是抽调一个人做新部门主站前端开发工作。本来说的是只负责页面的开发工作。当我参加过需求品审会后，了解到新部门人力不足，而我今年主要任务又是在我们部门做基于Nodejs的前端后端分离的架构升级工作。

在这之前就是用Nodejs写了两个内部系统，并没有大型的线上Web开发经验，也想趁着这个机会锻炼下。然后就主动的跟老板商量了这件事，老板非常支持。之后又跟新部门的产品商量，本来就缺人手的他们也非常乐意我这边承担更多的开发任务。

这篇文章和自己之前的文章的风格会有很大的区别，不会再去写一些具体技术点和遇到问题的具体解决办法，主要谈的是我整个开发过程中遇到的一些问题和思考解决他们的方法。

内容列表

• 技术选型的思考
• 相关服务申请
• 前端工程
• 技术目标
• Web安全
• 内网机器访问外网
• 发送邮件
• 网络优化
• 收获

技术选型的思考

在文章的最开头背景介绍中大概说了网站后端采用Nodejs的开发。为了突出科技能力，网站要求了一些特效。因为我要用CSS3来写这些特效，跟产品PK后结果是浏览器兼容性是IE8.0以上，特效满足大多数主流浏览器即可。那么基于Nodejs的其它技术选型如下：

以下选择这些技术的原因：

• yog2（点击到达主页））是百度公司内部基于Express开发的比较成熟的Nodejs Web框架。提供的能力都是跟公司内部的基础服务（同机房访问、运维、日志等）接轨的，而且有一些部门已经在线上大规模使用，如果遇到问题可以有很多经验可以借鉴。
• swig是yog2默认支持的模板引擎。
• 因为Nodejs的语法是遵循CMD规范的。而且在百度内部提倡的也是使用FIS3和Mod.js。所以就选择了公司内部的FIS3（点击到达主页）和Mod.js（点击到达主页）。FIS3不仅有百度自己内部在用，也有很多的外部公司在用，比如滴滴等。
• 因为交互要求兼容一些低版本浏览器和一些奇葩的国产浏览器。为了保证开发时间的可控就选择了自己熟悉的jQuery；

相关服务的申请

确定了技术选型之后就是开始申请服务，主要包括以下相关内容：

• 域名申请
• 服务器申请
• Mysql数据库申请
• bos存储服务（使用的是百度云的bos存储）

以上都是走的公司的内部流程，具体的就不介绍了。主要介绍下一些服务的作用。一个在网络上运行的网站肯定是需要一个域名的，能让网站跑起来很定是需要线上服务器的。存储用户的注册数据需要数据库。因为使用OCR进行人脸识别，要满足识别一张图片上的多张脸。是需要对用户的图片裁切。因为网站是部署在多台机器上，肯定不能存储在网站运行的服务器上需要将裁切好的图片存储在专门的存储服务器上，并且返回给网站图片链接，

前端工程

使用Nodejs开发的话，前端的工程的概念可能还要广一些会涉及到Nodejs相关的工程化。这部分分两部分介绍：

1.前端

目标：

• 将不同页面的公共模块开发成组件，以方便在不同页面间进行引用；
• 使用 SASS 来做css的模块化管理，并且实时编译成css，生成map文件便于本地调试；
• 将使用 CMD 规范编写的组件和模块化的代码打包编程供页面的业务代码引用；
• 给需要加厂商前缀的css属性自动加厂商前缀；
• 能够实时的将代码部署到测试环境，以方便QA测试；

以上的这些目标都可以使用 FIS3和相关插件来实现。

拆分公共模块为组件

当我们观察一个页面的时候可以发现一个页面的这几块是不同页面间可以公用的。我把这些页面的js、css（scss）、html（tpl）写在一个目录以方便管理他们。就是我没一次一次就可以在所有页面应用自己的修改。

组织组件的目录：

当我在不同页面间使用相同的nav 和footer的时候，只需要include一次就可以了。

2.后端

因为我们线上大规模使用的Nodejs版本是6.x版本。但是开发过程中处理异步又是使用async和await。所以需要借助编译引擎将这些es7的语法编译成6.x支持的语法。

另外就是借助process.env.NODE_ENV可以读取环境变量的特性，来区分配置一些线上和线下的配置，比如：

const YOG_DEBUG = process.env.YOG_DEBUG;
const PANSHI_DEBUG = process.env.PANSHI_DEBUG;

let mysqlConf;

if (PANSHI_DEBUG === 'true') {
    mysqlConf = {
        host: '10.00.00.00',
        user: 'ppui',
        password: 'ppui',
        database: 'excel',
        port: '5003'
    };
} else if (YOG_DEBUG === 'true') {
    mysqlConf = {
        host: '127.0.0.1',
        user: 'root',
        password: '',
        database: 'pass_panshi',
        port: '3306'
    };
}

技术目标

这里主要谈一些前端的技术目标

1.样式显示和dom操作分离

之前开发过程中经常遇到的情况是我需要该一个html节点的样式，不小心改了class类名。而js又恰恰使用了这个class操作了dom。这个时候页面运行的时候肯定会报错的，增加了项目的维护成本。

有两种方案可以有效的解决这种问题，第一就是添加自定义属性，比如<div class="section" node-type="pagesecond"></div>当我需要操作dom的时候就通过jQuery的属性选择器来操作这个dom而不会去使用class。这样在我调整样式、需要修改class名称的时候也不会影响js代码。第二种就是根据大家经常说的使用-来做html 类名的连接符，而我们就规定一个规范就是使用下划线（_）来标记我要操作dom节点的名称，比如<div class="section _pagesecond"></div>。

这两种方式，如果是在开发多人维护的项目是都是需要提前预定规范，我在项目中是使用的前者。

2.业务代码和功能代码分离

在前面已经介绍过就是使用cmd规范来组织前端代码。比如为了能够满足我使用属性选择器来作为操作dom的需求。我特地自己封装了一些代码段，比如在base.js文件中有一段这样的代码：

/**
 * 根据node-type获取节点信息
 *
 * @param {any} params 获取节点元素
 * @param {any} context 上下文环境
 * @returns
 */
exports.nodeTypeDom = function (params, context) {
    if (context && context !== '') {
        return $('[node-type="' + params + '"]', $('[node-type="' + context + '"]'));
    } else {
        return $('[node-type="' + params + '"]');
    }
};

我在其他文件中需要使用这个代码段的时候，只需要像下面这样就可以了。

var baseJs = require('../libjs/base');
var node = baseJs.nodeTypeDom;

// ��需要选择 dom 的地方，直接传入自定义属性的�值

node('pagesecond').xxxx

除了一些常用的代码段这样封装，一些组件也按照这样的方式封装。比如：轮播图组件、文件上传组件、表单校验组件、tab滚动组件。

以上两种方式的好处都能够极大的提高代码的可维护性、阅读性。

Web安全

我在开发过程中关注的Web安全主要是

• sql注入
• 接口攻击

1.防范sql注入

sql注入简单些说就是指一些违法用户拼接一个特殊的用户名或者是密码，因为我们要把用户名和密码插入数据库，肯定会根据这个用户名和密码拼接一个sql语句。而违法用户的这个特殊用户名语句有可能删掉我们数据库的所有数据。

因为使用的是mysql数据库。Nodejs模块使用的也是npm上使用最多的Mysql模块。本身这个模块已经提供了访问mysql集群的能力和防注入的能力。

具体方法可以参考官方文档点击这里直达

2.防范接口攻击

这里要做的就是有些违法用户拿到我们接口的时候，写一个循环频繁的访问我们的接口。为了防止有些违法用户就是给请求加token。就是在向服务端发起请求的时候返回给前端的一个token，前端请求后端的时候带上这个token。如果token在后端校验通过就销毁这个token 。还有比如验证请求的源IP，这里注意的是我们验证IP的时候应该获取的是HTTP协议header字段中的x-forwarded-for属性的值。（这两种方法可以一起使用）

不过后来从后端RD那边了解到公司有专门的服务可以用来做反作弊，而且策略更全面些。目前在研究准备接入。

内网机器访问外网

关于跨机房访问、同机房访问和内网访问外网，这些基本上都会涉及到运维的话题。百度内部有现成的服务接入文档。各个公司可能提供能力的方式不一样。这里不多介绍。

这里谈一些小的细节点。先看下面的一张图：

一句话总结：当一条请求到达接入层之前是不知道要访问内网环境下那个机房的服务器的。相反的内网的机器上如果有一条请求外网的链接，比如：http://weibo.com 。需要通过一个proxy访问外网服务器。

访问接口我使用request模块。配合promise npm上有request-promise由名字我们就知道他的每个方法或者是调用结果返回的是什么了。这个模块默认已经提供了代理参数的相关配置。具体的可以参考文档点击直达

这里涉及的知识比较多，比如代理隧道、https请求的代理。在阅读官方配置文档的时候搜索一些关键字了解一些其它相关知识即可。

如果有相关的需求，可以参考我的配置，如果我的配置不能解决你的问题，请仔细阅读官方文档哈。、

let options = {
        'url': params.url,
        'encoding': 'binary',
        'rejectUnauthorized': false   // 取消https证书的校验
    };

    // 解决代理https请求的行为 测试机需要配置环境变量 PANSHI_HTTPS_PROXY
    if (process.env.PANSHI_DEBUG !== 'true' || PANSHI_HTTPS_PROXY) {
        options.tunnel = false;
        options.proxy = 'http://xxxx.proxy.com:8080';
    }

发送邮件

到这里关于开发相关介绍已经完毕。这里介绍的就是运营和产品需求的一些功能开发。每天将注册的用户发送给相应的责任人。

如果要满足这个功能需要有邮件服务器。这个在公司内部有公用的可以很容易找到。其它就是配置服务的crontab定时执行脚本查询数据库发送邮件。

这里主要使用了nodejs模块nodemailer。具体的相关配置和发送邮件的方法可以参考官方文档配置点击直达

网络优化

• 静态文件cdn部署；
• 合并静态文件；
• 缓存静态文件；
• icon使用Base64

上面列举的是比较典型的几个点。比如像css放head标签头部，script标签放到body标签底部。这些应该属于一个前端工程师的常识吧。

静态文件部署CDN这个不多介绍，每个公司都会自己的一套方法。这里主要介绍下合并静态文件和缓存静态文件。

1.合并静态文件

默认FIS3是有插件支持合并静态文件的。因为我这次开发的页面较多（总共11个主站页面），且因为采用的分块开发加载模块和静态文件。如果不做合并的话，一个页面加载完需要有10-20条的静态文件的请求。会影响页面的加载速度。

当我准备使用FIS3的插件来合并静态文件的时候发现还是有些麻烦的需要一个页面一个页面去配置要打包合并的静态文件。最后请教了下其它部门的同事使用我们接入层服务器提供的comb功能，由服务器帮我们合并静态文件（其实就是Nginx 的concat模块提供的功能）。这里也不做过多的介绍，自行搜索文章了解就可以了。

2.缓存静态文件

先来看下一张图

上图中红色框出来的都是跟静态文件缓存有关的http协议的字段。如果对这些字段的概念比较模糊可以阅读这篇文章加深下印象《HTTP缓存》点击直达

不管使用express还是koa（koa可以使用koa-static-cache中间件）都用相应的静态文件服务的中间件提供配置这几个字段的能力。express可以通过一下方式配置（具体的可以阅读express文档）

const express = require('express')

// 配置与静态文件相关的参数
express.static('xxxxx')

收获

最后就是谈谈这次开发的收获

• 这个项目开发上线以后，刚好到了大部门的年中总结会，因为自己独立负责了前后端的开发工作，获得了大部门的“闪耀之星”奖励和一些物质奖励（虽然还没见到影😂😂）。
• 对公司内部申请相关服务流程的熟悉和使用这些服务的方法，以及对整个公司后端服务体系的了解；
• 这次开发还是遇到很多坑的，也被别人说过代码写的“烂”，但我觉得最主要的原因就是不具有后端思维吧。想写好Nodejs就是用后端思维去写Nodejs，这个需要多写，多踩坑。

在这个过程经历的好多事情，心态上也是考验。既然下决心做一件事情了，自己不放弃自己，就没有人能够有放弃自己。

抱歉，在这里发issue，麻烦之后close掉。
因为最近遇到了rsa的问题，看到了这篇文章微信小程序开发rsa加密，所以希望可以参考下你的相关代码，谢谢

人生下半场，当所有的心高气傲被磨平，是时候接纳平凡的自己了。

在写这篇文章的时候我特地翻看了下自己博客的文章记录，确实是很久没有写文章了。最近的一篇文章还是2017年7月份写的年中总结----《工作三年小结----我依然是那个不变初心的少年_20170710》，看名字就知道当初的意气风发。当我开始在键盘上敲下这篇文章题目的时候，我知道这将是一个横跨两年的漫长的自我总结的故事。

这两年自己经历了很多事情，很多都涉及到了自身的个人发展，多么希望当时的自己思考问题能够更加的成熟些，忍耐力更加的强大些。这篇文章里我会写下当时面临这些事情时没有跟同事或者朋友说过的最终做出那样的决定的真实想法，也许那都是错的。

文章开始前我想说，我不是想表达我多么牛逼炫耀多么厉害。那就是真实的我，当时的环境和个人条件让做出了那样的选择。如果不幸被大佬看到这篇文章请理性对待。

第一节----百度尾声

现在觉的重大的、无法忍受的事情，那是因为你的心胸还不够强大到容纳它。不同的人生阶段，不同的心理承受能力，不同的选择结果。有些事，你越是在乎，痛的就越厉害，放开了，看淡了，慢慢就淡化了。

一年多过去了我想我已经想明白了当初发生的一些事情，能够平平淡淡的记录下它们。当我现在开始写下它们的时候我想我已经能够真正的放下它们，我可以不用再去想它们，我对他们的看法都停留在了文章里。

我是在2018年2月底也就是刚过完年回到北京上班的第一天办理的离职手续。当时在ERP提离职和办理离职手续的时候是很不舍的，这家教会我很多东西，给了我很多机会的公司我真的不舍得离开，但是现在我却真的要离开了。我认为我是带着遗憾离开的。

这段经历是从2016年5月份开始的，那时我从新浪微博离职，抱着对BAT光环的渴望进入了百度。刚入职的我，在工作上犯了一些的错误，多谢部门同事和领导的宽容，帮我一步一步融入到工作中去。

在入职之后5个月的时候，因为上线合并代码的时候冲突没有处理干净，导致了线上故障。这个问题应该是程序员最不应该犯的低级的错误了。当时被大领导通报批评。那次事件后切切实实的给自己上了一课。也对我之后的上线操作起到了警醒作用。

在2017年2月份百度春季晋升的时间节点，自己刚入职10个多月的时候，竟然在部门指标有限的情况下老板帮我提了晋升，并且晋升成功。这也就意味着不到一年自己就升职加薪了。

背后有很多故事，不然好运不可能平白无故的降临到我身上。我是一个能在工作中发现别人发现不了的问题，肯自己花费时间去解决这些问题。遇到工作中影响工作效率的事情，肯花费时间专研解决这些问题，并且分享给同事，提高同事的工作效率。这些事情使得大家都很认可我。记得那个时候自己是上6天班的，周六自己会自动加班一天。周围同事认可，技术能力强，能解决别人解决不了的问题。自恋的说自己应该是部门“自带光环”的人物。

当然更高的职位代表着更多的责任（其实也不算高）。当时我们部门前端有很多业务痛点，老板破格晋升我也是看到我是有能力来改变这些事情的人。所以整个17年我的主要精力都是在解决这些事情。比如：技术架构升级，以及技术架构升级之后所带来的周围同事对新技术应用的技术培训和指导。另外为了满足新技术架构所要开发的衍生技术产品。

技术架构升级并不是说哪个技术好玩我们就用哪个技术。**技术选型是要结合当前业务的特点以及升级技术架构能不能解决当前业务开发的瓶颈来做的。**所以我自己做了很多技术调研，过程中我自己摸索、学习了很多东西。

当我觉得一切都成熟的时候我开始在我们的线上项目做实践。结合当时我们部门的业务特点使用MVVM框架（业内代表React或者是Vue）和Nodejs是最佳的解决方案。第一个实践的项目是百度账号检测的项目。如果是使用旧的技术开发可能不需要多少时间，但是上了新的业务架构后，我不仅仅要解决业务问题还要解决应用新框架之后的问题。

前面我说是**“当我觉得”**。自我感觉良好应该是大多数人都会犯的错误。是的我也犯了这样的错误。其实我当时做调研得到的信息并不能完全解决我在实际业务开发过程中的所有问题。**解决这些问题需要更多的知识储备，当然也就要更多的时间去学习自己陌生的领域。**那段时间对于我来说是辛苦的、煎熬的。因为是线上业务需求，产品对于上线是有最终的DeadLine的。记得有几次为了解决问题我都在公司通宵了。虽然延期但是最后业务还是上线了，并且运行还算稳定。这次虽然业务模块不大，但是在公司走通了应用新业务框架的流程，比如：开发模式、上线机制、CDN机制、线上Nodejs报警机制、线上Nodejs服务部署机制等。

后续我又接手独立开发了我们部门线上一个核心的业务重构工作。当然这次是涉及到一块业务的整个流程的重构。开发量大而且业务较为复杂。过程是艰辛的，自己遇到了很多问题，都是边学习边开发。当然不仅仅是能够开发完就行了，还要考虑性能问题。而且这块流程主要是跑在移动端，万恶的安卓系统上总会遇到各种各样的问题。解决这些兼容性问题让我心力交瘁了。当时应该是延期2-3周将项目上的线。让人欣慰的是，项目上线后性能和业务稳定性都很高。之前这块流程线上客诉率很高，新框架上线后大大的降低了客诉率。

这次项目开发对我个人想法影响很大，之前我认为我个人能力强可以自己搞定一切。现在我发现靠我一个人的力量来推动部门的技术升级是不够的。那段时间我的精神和肉体的压力（加班、熬夜）让我喘不过气来。我想要协调部门前端的人力资源来做技术升级分担我一个人的压力。但是恰巧的是现在前端的主要负责人是跟我同级别的另外一个比我来的早的同事。所以我想做的事情就有了局限性----我不可能越过她去调配人力做事情。那段时间我们的关系很微妙也很复杂。

工作上的压力和环境的压抑让我慢慢的有了看看新机会的想法。后续就接连看了新机会，在年前的时候就拿个几个不错的offer。京东，腾讯，搜狗等。因为提前就跟直属领导沟通过，他也有劝过不要走继续做事情，但是那个时候的工作状态让我的态度很坚决。按照百度的流程，会有一个总监面谈了解离职的原因以及哪些因素导致的离职。在聊之前我的直属领导已经提前沟通过，当时我们聊了很长时间，过程中我get到的信息，我的直属领导还是不希望我走，而且对我的工作能力评价很高。当我表达出对部门和对公司的不舍时，她也建议我转岗到其它部门去。当时外部的offer中的条件对我的诱惑很大，最终还是选择了离职。

如果让现在的我做决定，我应该是不会选择离开的。因为这一年我得到的远远比我失去的要多得多。如果当时我的忍耐力再大一些，我的心再柔软一些，现在的我可能会更加的强大。

第二节----短暂的搜狗经历

工作之外还有生活。生活上的压力也会让人不得不改变。

从百度离职之后我去了搜狗。我当时考虑去搜狗的原因很简单，钱给的最多。当时我想先挣更多的钱。工作之外自己好好的沉静两年，把自己的技术功底更加的深化一下。

当时进入的是搜狗搜索APP这个部门，这个部门的技术负责人和周围的同事还是很nice的。跟技术负责人沟通的过程中了解到他也是一个爱折腾的人，当前部门的很多技术应用都是他率先搭建起来的，而且做了相关服务化的工作。但是我来之后不久他就离职创业了，这也对我之后考虑离职的有一定的影响。

当时我主要负责做搜狗号的相关开发工作。当时做的工作还是很杂的，前端页面，后端Nodejs，服务端数据库等都需要自己来写代码。当然这些都难不倒我，过去的经历能够让我在大多数的前端工作面前游刃有余。后来又做了2018年世界杯预测的一个活动项目。这个过程中让我了解公司的职能部门以及他们的特点。

搜狗作为一个在美股上市的公司，我认为整体还是很不错的。作为一个搜索为主流业务的公司要说好肯定没有百度的技术氛围浓厚，要说不好肯定比小公司（创业公司）的业务稳定，技术栈稳定。但是目前公司其实并没有一款产品在业内占有绝对的优势，我当时就发现搜狗做的东西，百度很久都做了，不知道谁做的早还是晚，但是百度的产品用户占有率还是高。这是一家中规中矩的公司。

在北京上班的朋友肯定体会过早上乘坐公共交通的痛苦。当时我是从我住的地方开车到五道口上班。因为公司自己没有停车位，我到目的地之后面对的一个主要的问题就是怎么停车，其实只能停收费停车场。如果去的晚的话可能收费停车场也没得停，着急上班的话，只能随便找个地方停车。所以在短短的2-3个月时间我交了接近2k的违章停车罚款。后来我干脆放弃了开车上班，坐公共交通上班。但是我住的小区附近没有直达的公交和地铁只能通过中间换站的方式到公司。

在这种状态下，我就开始想找一个离家近上班停车方便的公司。做程序员的应该都收到过猎头的电话。在猎头的推荐下我的**开始松动了，后来我面试了滴滴和小米的职位，并且都拿到了offer。我之所以最后选择了滴滴。是因为我对这家颠覆了一个行业的公司一直很感兴趣。我想要去体验下这家公司的公司文化。

这段经历很短暂，但是让我明白了每个公司都会有自己的文化，相应的会体现在每个员工身上。比如说话和做事的方式。搜狗可能不是一家很厉害的公司但是还是一家不错的公司。

第三节----并不顺利的滴滴

事情不总会朝着自己预期的方向发展。不幸的事情可能会突然降临。

我在2018年7月份入职了滴滴。这家公司对我的印象整体还是很好的。唯一我觉得有问题的地方就是加班文化。公司9点之后是提供免费打车服务的。有一个很特别的现象，一些家远的同学会选择每天到9点后打车回家，但老板每天走的也很晚。慢慢的就造成了整个部门都走的很晚。在这种环境中，就算平时想早走也会不自觉的考虑到大家也都还没走。

**“四十二岁了，还是程序员，刚辞职，发现工作不好找了。怎么破？”**这是之前在脉脉上看到的。当时刚好是在换工作的时间段，看到后感触很深，就把它记下来了。

年龄越大做的一些不慎重的决定，可能需要自己做更多的事儿或者是要经历好几年才能够弥补，有些甚至永远也弥补不了。以前做决定，认为年轻就是资本，不行老纸从头再来。不知不觉发现从头再来真的好辛苦。不是自己变得懒惰了，只是自己离年轻这个词越来越远了。

滴滴要裁员这个新闻应该是2019年初互联网圈比较大的新闻了。对于我这个局内人来说很突然。后来知道我所在的部门在公司今年的战略上属于“关停”状态，裁员将是重灾区就更加突然----突然自己就要被裁了。

新闻上说的这波裁员滴滴给的补偿还是很丰厚的。确实是，我能拿大概10w左右的补偿。这些钱对我来说真的挺多的。本来我是准备拿着补偿走的，也想要拿着补偿走，因为我知道按照我的能力出去找工作肯定不是问题。

在裁员的同时，公司也提供了转岗到其它部门的机会。一个偶然的机会有个其它部门的同事联系到问我愿不愿意到他们部门去。当时我的想法是就先聊下呗，如果感觉不错就过去，不行的话就拿补偿走人。现在我是选择了到那个部门去。

我到滴滴的时间还很短，如果现在出去，虽然我可以得到一些经济上的收益，但是对我个人的职业发展并不是特别好。在我的简历上会显示在很短的一段时间内我换了两份工作，虽然其中一次是因为不可抗因素。但是时间久了别人可能看不到这些。

之前对我人生比较重要的一次决定，在利益和发展上我选择了短暂的获取利益。让后来的我吃了很多亏。一时的利益带来的快感总是短暂的。我认为我在滴滴还有很大的发展空间，这次我要跟随自己的内心留下来。

这次裁员让我思考的另外一个问题是，如果这次真的是被裁掉而且是必须走，对于现阶段的我来说影响不大。我还年轻，出去找工作也能找到更好的工作。但是如果我已经40岁或者是更大50岁的时候，突然被宣布自己要被公司裁掉。自己的心情一定会非常复杂。当自己因为年龄而渐渐失去竞争力的时候，自己身上其它的软素质能不能让自己在面对裁员是更加坦然一些呢？其实我很庆幸在我还年轻的时候经历了这次裁员，知道了生活的残酷。让我更加坚定了在不幸面前人人平等，如果想要在不幸降临时，更加的坦然。唯有让自己更加强大。

总结：

过去的一年或是两年自己经历了很多事情。让自己想明白了很多人生道理。它们对自己的人生有影响的同时，也让自己收获很多。人生之事岂能尽如我意，哭笑皆由人，悲喜自己定。经历过，体会过，有所感悟就不妄自己的人生。

你说，生活就是一场将就，
将就彼此，将就着过。
你说，生活就是一场苟且，
既无远方，也无诗歌。
其实，生活就是一碗面，
即便匆匆，亦不失落。

1.改变页面标题的内容

有时候我们开发 h5页面的时候需要动态的去更新title 的名字，这个时候使用

    document.title='修改后的名字';

就可以解决我们的问题。

或者使用

    //当前firefox对 title 参数不支持
    history.pushstate(state,title,url);

这种方法不仅能够修改 title 而且能够修改 url 的值，并且将这些信息存储到浏览器的历史堆栈中，当用户使用返回按钮的时候能够得到更加好的体验。
当我们在做一个无刷新更新页面数据的时候，可以使用这种方法来记录页面的状态，使得页面能够回退。

2.日志记录同步发送请求

有这样的一个场景：
在做电商类的产品的时候，我们要对每个产品的点击数进行统计（其实就是出发一个ajax请求）。PC端的交互大多数是点击商品后新开页面。这个时候ajax是同步发送或者异步发送对统计没有影响。
但是嵌套在客户端中，长长是在当前 tab 中跳页。如果我们仍旧使用异步的ajax 请求，有请求会被阻断，统计结果不准确。

3.JavaScript 中 this 相关

这部分内容之前也是看过很多次，但是都不能够理解深层次的含义。后来看的多了，也就理解了。

var ab = {
    'a': 1,
    'b': 2,
    'c': 3,
    abc:function(){
        // 对象的方法中，this是绑定的当前对象
        var that=this;

        console.log('abc');
        var aaa=function(){
            //that指向的是当前对象
            console.log(that.a);
            //函数中this的值绑定的是全局的window对象
            console.log(this);
        };

        aaa();
    }
};
console.log('---------');
ab.abc();

以上代码浏览器中输出结果如下：

    var BBB=function(){
        var a=0;
        this.b=1;
        return this;
    }

    var bb= new BBB();

在浏览器中输入一下的内容查看输出：

我们对代码做一下修改，如下：

    var BBB=function(){
        var a=0;
        this.b=1;
    }

    var bb= new BBB();

与之上相同的输入，查看一下输出是什么

由上可知 new 操作符的执行过程：

1. 一个新对象被创建。它继承自BBB.prototype。

2. 构造函数 BBB 被执行。执行的时候，相应的传参会被传入，同时上下文this会被指定为这个新实例。new BBB 等同于new BBB(), 只能用在不传递任何参数的情况。

3. 如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new出来的结果为步骤1创建的对象。

   一般情况下构造函数不返回任何值，不过用户如果想覆盖这个返回值，可以自己选择返回一个普通对象来覆盖。当然，返回数组也会覆盖，因为数组也是对象。

4.JavaScript 中闭包相关

定义在闭包中的函数可以“记忆”它创建时候的环境。

var test=function(string){
    return function(){
        console.log(string);
    }
};
var tt=test();
tt();

//li列表点击每一行 显示当前的行数 
var add_li_event=function(node){
    var helper=function(i){
        return function(e){
            alert(i);
        }
    };

    for (var i = 0, len =node.length; i < len; i++) {
       node[i].onclick=helper(i); 
    }
};

5.销毁事件绑定

我自己在写 js 的事件绑定的时候也经历了一个过程，刚开始的时候onclick，bind，live，delegate,on 这样一个过程。

之所以会有这样的需求就是因为我们页面上的 DOM 是动态更新。比如说，某块内容是点击页面上的内容显示出来，然后在这块新出现的内容上使用click肯定是满足不了需求的。

live 和delegate 属于较早版本的事件委托（代理事件）的写法。最新版本的 jquery 都是使用on 来做代理事件。效率上比 live 和 delegate更高。

live是将事件绑定到当前的document ，如果文档元素嵌套太深，在冒泡的过程中影响性能。
而 delegate和on 的区别就是

    jQueryObject.delegate( selector , events [, data ], handler )
    //或者
    jQueryObject.delegate( selector, eventsMap )

    jQueryObject.on( events [, selector ] [, data ], handler )
    //或者
    jQueryObject.on( eventsMap [, selector ] [, data ] )

由此可知，使用on的话，子代元素的选择器是可选的。但是 delegate的选择器是必须的。on比delegate更加的灵活。

很多时候我们都是只声明事件绑定，而不管事件的销毁。但是在编写前端插件的时候，我们需要提供事件销毁的方法，提供给插件使用者调用。这样做的好处就是使，使用者对插件更加可控，释放内存，提供页面的性能。

    var that={};
    $('.event_dom').on('click','.childK_dom',function(){});
    $(window).on('scroll',scrollEvent);
    var scrollEvent=function(){};
    //事件销毁
    that.desrory=function(){
        $('.event_dom').off();
        //window 方法的销毁必须使用事件名称和回调函数,主要是 window 上可能绑定这系统自定义的事件和回掉
        $(window).off('scroll',scrollEvent);
    };

2016年6月29日补充：
最近做了一些与表单相关的项目，使用了h5的input控件，在使用过程中遇到了很多的坑。也包括与这篇文章相关的。

首先我们应该知道使用h5新提供的属性getUserMedia这个属性，是可以调取系统的摄像头进行拍照或者是摄像的，但是兼容性支持的不好，所以当我们需要获取系统的多媒体权限时我们都不会采用这个属性。

使用标签我们可以间接的呼起系统选择文件的窗口，来读取系统文件。但是在WebView中，因为安卓权限的问题，我们是没办法直接获取读取文件这个操作的。而在原生的浏览器中是不存在这个问题的。所以选择使用这个input的时候一定要注意自己的页面是主要运行在webview中还是浏览器中。如果注意运行在客户端的webvie中，是需要客户端的同学支持的。

在IOS的某些系统版本中也会出现这个问题。具体的可以参考下面的参考文章。
参考文章：
http://blog.csdn.net/hvkcoder/article/details/51365191

https://forums.developer.apple.com/thread/22726

http://www.cnblogs.com/soaringEveryday/p/4495221.html

http://stackoverflow.com/questions/25942676/ios-8-sdk-modal-uiwebview-and-camera-image-picker

引子：

最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与native 交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生浏览器，如：safari）呼起系统的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。

第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库**jsqrcode**。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫getUserMedia的属性。该属性移动端的浏览器支持的都不是很好，所以只能间接的上传图片的方式解析二维码。

**getUserMedia**属性兼容浏览器列表：

首先感谢 jsqrcode 的开发者，提供这么优秀的解析二维码的代码，为我减少了很大的工作量。jsqrcode 地址：点我

我的代码库地址：点我

1.解决的问题：

1.能够在微博客户端呼起摄像头扫描二维码并且解析;
2.能够在原生浏览器和微信客户端中扫描二维码并且解析;

2.优点：

web端或者是 h5端可以直接完成扫码的工作；

3.缺点：

图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近)，相对于 native 呼起的摄像头解析会有1-2秒的延时。

说明：

此插件需要配合zepto.js 或者 jQuery.js使用

使用方法：

**1.**在需要使用的页面按照下面顺序引入lib目录下的 js 文件

    <script src="lib/zepto.js"></script>
    <script src="lib/qrcode.lib.min.js"></script>
    <script src="lib/qrcode.js"></script>

**2.**自定义按钮的 html 样式
为自定义的按钮添加自定义属性，属性名称为node-type
为 input 按钮添加自定义的属性, 属性名称为node-type

因为该插件需要使用<input type="file" /> ，该 html 结构在网页上面是有固定的显示样式，为了能够自定义按钮样式，我们可以按照下面的示例代码结构嵌套代码

    <div>
        <div class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
        </div>
    </div>

然后设置 input 按钮的 css 隐藏按钮，比如我使用的是属性选择器

input[node-type=jsbridge]{
    display:none;
}

这里我们只需要按照自己的需要定义class="qr-btn"的样式即可。

**3.**在页面上初始化 Qrcode 对象

    //初始化扫描二维码按钮，传入自定义的 node-type 属性
    $(function() {
        Qrcode.init($('[node-type=qr-btn]'));
    });

主要代码解析

(function($) {
    var Qrcode = function(tempBtn) {
        var _this_ = this;
        var isWeiboWebView = /__weibo__/.test(navigator.userAgent);

        if (isWeiboWebView) {
            if (window.WeiboJSBridge) {
                _this_.bridgeReady(tempBtn);
            } else {
                document.addEventListener('WeiboJSBridgeReady', function() {
                    _this_.bridgeReady(tempBtn);
                });
            }
        } else {
            _this_.nativeReady(tempBtn);
        }
    };

    Qrcode.prototype = {
        nativeReady: function(tempBtn) {
            $('[node-type=jsbridge]',tempBtn).on('click',function(e){
                e.stopPropagation();
            });

            $(tempBtn).bind('click',function(e){
                $(this).find('input[node-type=jsbridge]').trigger('click');
            });

            $(tempBtn).bind('change', this.getImgFile);
        },
        bridgeReady: function(tempBtn) {
            $(tempBtn).bind('click', this.weiBoBridge);
        },
        weiBoBridge: function() {
            window.WeiboJSBridge.invoke('scanQRCode', null, function(params) {
                //得到扫码的结果
                $('.result-qrcode').append(params.result + '<br/>');
            });
        },
        getImgFile: function() {
            var _this_ = this;
            var inputDom = $(this).find('input[node-type=jsbridge]');
            var imgFile = inputDom[0].files;
            var oFile = imgFile[0];
            var oFReader = new FileReader();
            var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

            if (imgFile.length === 0) {
                return;
            }

            if (!rFilter.test(oFile.type)) {
                alert("选择正确的图片格式!");
                return;
            }

            oFReader.onload = function(oFREvent) {

                qrcode.decode(oFREvent.target.result);
                qrcode.callback = function(data) {
                    //得到扫码的结果
                    $('.result-qrcode').append(data + '<br/>');
                };
            };

            oFReader.readAsDataURL(oFile);
        },
        destory: function() {
            $(tempBtn).off('click');
        }
    };

    Qrcode.init = function(tempBtn) {
        var _this_ = this;

        tempBtn.each(function() {
            new _this_($(this));
        });
    };
    window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery);

样例展示

1.呼起前的页面

2.呼起后的页面

前言

作为程序员平时主要是使用 shadowsocks 作为代理工具的。shadowsocks 有个很明显的优点儿就是可以设置白名单和黑名单。白名单是会走shadowsocks的自动代理模式。

遇到的问题：

shadowsocks 代理是分白名单和黑名单的。当我访问某个网站，而恰好这个网站的域名和静态文件域名都在白名单里，访问这个网站的http请求就会自动走代理模式；

如果访问某个网站的域名没有在白名单里，就需要手动设置 全局代理模式 ；这有一个缺点就是电脑的所有的网络访问都会走代理，如果这个时候访问国内的网站，就会很慢或者是打不开。

最好的办法就是编辑shadowsocks的.ShadowsocksX/gfwlist.js文件。将没办法走自动代理模式的域名添加到这个文件里面。但是一个网站的在显示完全，需要访问的域名不止一个，那么手动添加就会很麻烦。那么可不可以使用程序来实现呢？

需求分析：

1. 将网站的所有请求访问的域名分类导出；
2. 可以导出为.txt的文件，也可以直接打印在控制台；

怎么将所有的网络请求导出

1.打开chrome的开发者模式，并且将shadowsocks 设置为全局代理模式访问自动代理模式无法访问的网站；

2.在chrome的network面板，右键导出 har文件，保存到自己想要的位置；

如下图：

程序怎么运行：

按照提示运行程序：

运行效果展示：

代码分析：

因为 har 文件的内容就是一个json格式文件。所以就是读取文件的内容，并且将文件内容转化为json，将所有的请求的url分类写入一个数组，最后选择方式输出；

python主要代码如下：

with open(filePath, 'r') as readObj:
        harDirct = json.loads(readObj.read())
        requestList = harDirct['log']['entries']

        for item in requestList:
            urlString = (item['request']['url'])

            start = urlString.index('://')
            tempStr = urlString[start + 3:]
            end = tempStr.index('/')
            resultStr = tempStr[:end]

            # 判断是否是www开头的域名
            if 'www' in resultStr:
                resultStr = resultStr[4:]
            if resultStr not in hostList:
                hostList.append(resultStr)

    if str(outputType) is '1':
        with open(outputPath, 'w') as ff:
            for item in hostList:
                ff.write('"' + item + '",' + '\n')
    else:
        print '=============host start=============='
        for item in hostList:
            print '"' + item + '",'

        print '=============host end================'

声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记

装饰者模式的定义：

** 装饰者(decorator) **模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

装饰者模式的特点：

可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象；

继承的一些缺点：

1. 继承会导致超类和子类之间存在强耦合性，当超类改变时，子类也会随之改变；
2. 超类的内部细节对于子类是可见的，继承常常被认为破坏了封装性；

传统面向对象的装饰者和JavaScript装饰者对比：

1.模拟传统面向对象语言的装饰者模式

//模拟传统语言的装饰者

//原始的飞机类
var Plan = function () {
};

Plan.prototype.fire = function () {
    console.log('发射普通子弹');
};


//装饰类
var MissileDecorator = function (plan) {
    this.plan = plan;
}

MissileDecorator.prototype.fire = function () {
    this.plan.fire();
    console.log('发射导弹!');
};

var plan = new Plan();
plan = new MissileDecorator(plan);
plan.fire();

2.JavaScript中的装饰者模式

装饰者模式将一个对象嵌入到另一个对象之中，实际上相当于这个对象被另一个对像包装起来，形成一条包装链。请求随着这条包装链依次传递到所有的对象，每个对象都有处理这条请求的机会。

var Plan1 = {
    fire: function () {
        console.log('发射普通的子弹');
    }
};

var missileDecorator= function () {
    console.log('发射导弹!');
};

var fire = Plan1.fire;

Plan1.fire=function () {
    fire();
    missileDecorator();
};

Plan1.fire();

装饰函数

在JavaScript中可以很方便的给某个对象扩展属性和方法，但却很难在不改动某个函数源代码的情况下，给该函数添加一些额外的功能。也就是在代码运行期间，我们很难切入某个函数的执行环境。

1.使用装饰者模式例子

//对window.onload的处理

window.onload=function () {
    console.log('test');
};

var  _onload= window.onload || function () {};

window.onload=function () {
    _onload();
    console.log('自己的处理函数');
};

2.使用AOP（面向切面编程）装饰函数

主要是以为在JavaScript中会存在随着函数的调用，this的指向发生变化，导致执行结果发生变化。

2.1.封装的before函数

在需要执行的函数之前执行某个新添加的功能函数

//是新添加的函数在旧函数之前执行
Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存旧函数的引用
    return function () {                           //返回包含旧函数和新函数的“代理”函数
        beforefn.apply(this,arguments);            //执行新函数,且保证this不被劫持,新函数接受的参数
                                                    // 也会被原封不动的传入旧函数,新函数在旧函数之前执行
        return _this.apply(this,arguments);
    };
};

2.2.封装的after函数

在需要执行的函数之后执行某个新添加的功能函数

//新添加的函数在旧函数之后执行
Function.prototype.after=function (afterfn) {
    var _this=this;
    return function () {
        var ret=_this.apply(this,arguments);
        afterfn.apply(this,arguments);
        return ret;
    };
};

2.3.不污染Function原型的做法

var before=function (fn, before) {
    return function () {
        before.apply(this,arguments);
        return fn.apply(this,arguments);
    };
};

function func1(){console.log('1')}
function func2() {console.log('2')}

var a=before(func1,func2);

// a=before(a,func1);
a();

装饰者模式用法示例：

1.ajax动态添加参数

使用装饰者模式动态的改变ajax函数，传输的参数

//是新添加的函数在旧函数之前执行
Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存旧函数的引用
    return function () {                           //返回包含旧函数和新函数的“代理”函数
        beforefn.apply(this,arguments);            //执行新函数,且保证this不被劫持,新函数接受的参数
        // 也会被原封不动的传入旧函数,新函数在旧函数之前执行
        return _this.apply(this,arguments);
    };
};


var func = function (param) {
    console.log(param);
};

func = func.before(function (param) {
    param.b = 'b';
});

func({b:'222'});


//给ajax请求动态添加参数的例子
var ajax=function (type,url,param) {
    console.log(param);
};

var getToken=function () {
    return 'Token';
};


ajax=ajax.before(function (type, url, param) {
    param.token=getToken();
});

ajax('get','http://www.jn.com',{name:'zhiqiang'});

2.表单验证并且提交

装饰者模式分离表单验证和提交的函数

Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存旧函数的引用
    return function () {                           //返回包含旧函数和新函数的“代理”函数
        beforefn.apply(this,arguments);            //执行新函数,且保证this不被劫持,新函数接受的参数
        // 也会被原封不动的传入旧函数,新函数在旧函数之前执行
        return _this.apply(this,arguments);
    };
};

var validata=function () {
    if(username.value===''){
        alert('用户名不能为空!')
        return false;
    }
    if(password.value===''){
        alert('密码不能为空!')
        return false;
    }
}

var formSubmit=function () {
    var param={
        username=username.value;
        password=password.value;
    }

    ajax('post','http://www.mn.com',param);
}

formSubmit= formSubmit.before(validata);


submitBtn.onclick=function () {
    formSubmit();
}

总结：

装饰者模式和代理模式的区别：

1. 代理模式的目的是，当直接访问本体不方便或者不符合需要时，为这个本体提供一个代替者。本体定义了关键功能，而代理提供了或者拒绝对他的访问，或者是在访问本体之前做一些额外的事情。
2. 装饰者模式的作用就是为对象动态的加入某些行为。

背景：

项目上线前是专门针对 webpack 打包做了优化的，但是在之后做网络优化的时候通过webpack-bundle-analyzer这个插件发现一些公共的js文件重复打包进了业务代码的js中。这些代码体积虽然很小，但是为了将优化做到极致还是想要将其优化一下。这个过程最大的收获就是让自己对 webpack4.x 相关配置项更加的熟悉，能够使用 webpack 游刃有余的实现自己想要的打包方式。

记得之前的一位前辈同事说过一句前端优化的话：前端优化就是权衡各种利弊后做的一种妥协。

优化结果：

这里先看下优化结果，因为项目是多入口打包的模式（项目脚手架点击这里）每一个页面一个链接且每一个页面都会有自己的一个js文件。

结果如下：

• js代码体积减少： 20kb+
• 网络连接时长缩短： 500ms+

移动端项目能够在原有的基础上减少20kb已经不小了，而且这20kb是属于重复打包产生的。网络优化方面通过我们公司内部监控平台看到的数据也非常明显，项目上线后统计3天内平均数据，页面加载时间节省了接近800ms（上面的500ms是一个保守的写法，因为会存在网络抖动等不可抗因素）。

优化前的数据统计

优化后的数据统计

优化网络解析时长和执行时长

1、添加DNS预解析

在 html 的 head 标签中通过 meta 标签指定开启DNS 预解析和添加预解析的域名，实例代码如下：

    <!--告诉浏览器开启DNS 预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <!--添加需要预解析的域名-->
    <link rel="dns-prefetch" href="//tracker.didiglobal.com">
    <link rel="dns-prefetch" href="//omgup.didiglobal.com">
    <link rel="dns-prefetch" href="//static.didiglobal.com">

先来看下添加上面的代码之前，页面中静态资源的解析时间

添加了DNS 预解析的代码之后与上面的图片比较之后可以明显发现tracker.didiglobal.com 这个域名在需要加载的时候已经提前完成了预解析。如果这个js文件是影响页面渲染的（比如按需加载的页面），可以提高页面的渲染性能。

2、延时执行影响页面渲染的代码

平时移动端开发过程中我们都会引用一些第三方的js依赖，比如说调用客户端 jsbridge 方法的 client.js和接入打点服务的console.log.js。

通常的方法也是比较暴力的方法就是将这些依赖的第三方js加入到 head 标签中，在 dom 解析到 head 标签的时候提前下载这些js并且在之后需要的时候能够随时的调用。但是这些放在head 标签中的js下载时间和执行时间无疑会影响页面的渲染时间。

下面的那张图是我们的项目优化前的一个现状，浅绿色的竖线是开始渲染的时间。从下面的图种可以发现我们引用客户端方法的 fusion.js 和打点的 omega.js （这两个js都是放在head标签中的）都影响了页面的渲染的开始时间。

其实我们的业务场景在页面渲染出来之前是不需要这些js的执行结果的，那我们为什么不能将这些js做成异步加载呢？

js的异步加载就是选择合适的时机，使用动态创建 script标签的方式，将需要的js加载到页面中来。我们的项目使用的是 vue ，我们选择在 vue 的生命周期 mounted 中将需要打点的js给加载进来，在我们需要调用客户端方法的地方去加载 fusion.js 通过异步加载库回调的方式，当js加载完之后执行用户的操作。

下面是一段简单的示例代码：

export default function executeOmegaFn(fn) {
    // 动态加载js到当前的页面中来，并且当js加载完之后执行回调，注意需要判断js是否已经在当前环境加载过了
    scriptLoader('//xxx.xxxx.com/static/tracker_global/2.2.2/xxx.min.js', function () {
        fn && fn();
    });
}

// 异步加载 需要加载的js
mounted() {
    executeOmegaFn();
},

下图是修改之后的效果，可以发现，页面开始渲染的时间提前了，页面渲染完成的时间也比上面图种的渲染完成的时间提前了 2s 左右。可以很明显的看出页面的渲染和下载执行 omega 的时间是互不影响的。

总结：

1. 在html模板文件中添加域名 DNS 预解析代码块，使浏览器提前预解析需要加载的静态文件的域名。当需要下载静态资源时，加快静态文件的下载速度。
2. 通过将首屏渲染不需要的js文件延时加载和执行，将页面开始渲染的时间提前，以提高首屏渲染速度。

优化webpack产出

1、优化代码重复打包

默认的 webpack4.x 在 production 模式下会对代码做 tree shaking。但是看完这篇文章之后会发现大多数情况下，tree shaking 并没有办法去除重复的代码。 你的Tree-Shaking并没什么卵用

在我的项目中有个lib目录下面放着根据业务需要自己编写的函数库，通过 webpack-bundle-analyzer 发现它重复的打包进了我们的业务代码的js文件中。下面的图是打包后业务代码包含的js文件，可以看到 lib 目录下的内容重复打包了

看到这种情况的时候就来谈谈自己的优化方案：

• 将node_modules目录下的依赖统一打包成一个vendor依赖；
• 将lib和common目录下的自己编写的函数库单独打包成一个 common ；
• 将依赖的第三方组件库按需打包，如果使用了组件库中体积比较大的组件，比如 cube-ui 中的 date-picer 和 scroll 组件。如果只使用一次就打包进入自己引用页面的js文件中，如果被多个页面引用就打包进入 common 中。后面优化第三方依赖会详细的介绍下这部分的优化和打包策略。

先来看下我的 webpack 关于拆包的配置文件，具体看注释：

splitChunks: {
    chunks: 'all',
    automaticNameDelimiter: '.',
    name: undefined,
    cacheGroups: {
        default: false,
        vendors: false,
        common: {
            test: function (module, chunks) {
                // 这里通过配置规则只将 common lib  cube-ui 和cube-ui 组件scroll依赖的better-scroll打包进入common中
                if (/src\/common\//.test(module.context) ||
                    /src\/lib/.test(module.context) ||
                    /cube-ui/.test(module.context) ||
                    /better-scroll/.test(module.context)) {
                    return true;
                }
            },
            chunks: 'all',
            name: 'common',
            // 这里的minchunks 非常重要，控制cube-ui使用的组件被超过几个chunk引用之后才打包进入该common中否则不打包进该js中
            minChunks: 2,
            priority: 20
        },
        vendor: {
            chunks: 'all',
            test: (module, chunks) => {
                // 将node_modules 目录下的依赖统一打包进入vendor中
                if (/node_modules/.test(module.context)) {
                    return true;
                }
            },
            name: 'vendor',
            minChunks: 2,
            // 配置chunk的打包优先级，这里的数值决定了node_modules下的 cube-ui 不会打包进入 vendor 中
            priority: 10,
            enforce: true
        }
    }
}

在项目中写了一个 js 将整个项目需要使用的 cube-ui 组件统一引入。具体的代码看这里，调用方法看这里。

这里需要注意下，就是不要将使用频率低的体积大的组件在这个文件中引入，具体的原因可以看下面代码的注释。

/**
 * @file cube ui 组件引入统一配置文件 建议这里只引入每个页面使用的基础组件，对于复杂的组件比如scroll datepicer组件
 * 在页面中单独引入，然后在webpack中同过 minChunk 来指定当这些比较大的组件超过 x 引用数时才打进common中否则单独打包进页面的js中
 * @date 2019/04/02
 * @author [email protected]
 */

/* eslint-disable  */
import Vue from 'vue';
import {
    Style,
    Toast,
    Loading,
    // 这里去除 scroll是在页面中单独引入，以使webpack打包时可以根据引用chunk选择是否将该组件打包进入页面的js中还是选择打包进入common中
    // Scroll,
    createAPI
} from 'cube-ui';


export default function initCubeComponent() {
    Vue.use(Loading);
    // Vue.use(Scroll);
    createAPI(Vue, Toast, ['timeout'], true);
}

项目中目前只有pay_history这个页面使用了 cube-ui 的 scroll 组件，单独打包进业务代码的js中所以该页面的js较大。

当有超过两个页面使用了 scroll 这个组件的时候，根据 webpack 的配置会自动打包进入common中。下图是打包结果，页面的js大小缩小了，commonjs文件的体积变大了。

总结：

• 优化对于第三方依赖组件的加载方式，减少不必要的加载和执行时间的损耗。

2、去掉不必要的import

有时候我在写代码的时候没有注意，通过 import 引用了一个第三方依赖但是最后没有使用它或者是上线的时候并不需要将执行的表达式注释掉，而没有注释掉 import 语句 ，打包结果也会包含这个import的js的。比如以下代码：

import VConsole from 'vconsole';
// 测试的时候我们可能打开了下面的注释，但是在上线的时候只是注释了下面的代码，webpack打包的时候仍然会将vconsole打包进目标js中。
// var vConsole = new VConsole();

总结：

• 确定无效的 import 语句，如果没有使用 import 导入的函数或者是表达式就直接将 import 语句注释掉或者是删除掉。

3、babel-preset-env 和 autoprefix 配置优化

目前使用 babel + ES6 组合编写前端代码已经很少使用 babel-polyfill 了。 主要是它会污染全局变量，而且是全量引入 polyfill ，打包后的目标js文件会非常的大。

现在大多数情况下都会使用 babel-preset-env 来做 polyfill。更智能或是高级的做法是使用在线的polyfill服务，参考链接

在使用 preset-env 的时候，大多数情况都会忽略去配置兼容的 browsers 列表。或者直接从网络上搜索到配置，不深究其产出结果直接复制、粘贴使用。其实这里的配置会影响我们的js文件的大小。

如果使用 autoprefix 给css自动添加厂商前缀时，也是需要配置一个 browsers 列表。这个配置列表也是会影响css文件大小的。 browserslist官方文档

举个例子，现在 windows phone 手机几乎绝迹，对于现在的移动端项目是不需要考虑兼容 pc 和 wp手机的，那我们在添加 polyfill 或是 css 厂商前缀时是不是可以去掉 -ms- 前缀呢，那么该怎么配置呢？

我的配置如下：

"browsers": [
    "> 1%",
    "last 2 versions",
    "iOS >= 6.0",
    "not ie > 0",
    "not ie_mob  > 0",
    "not dead"
]

这里简单提一下，正确使用css新特性的重要性。下面这段代码是我在我们的一个比较旧的项目中看到的。其实咋一看没有什么问题，但是在现代浏览器中浏览却出现了问题？

.example {
    display: flex;
    display: -webkit-box;
}

.test {
   flex:1
}

这总写法就是对 flex 布局 解析不一致导致的问题。 在chrome 中 .example生效的是 display: -webkit-box 这个弹性盒布局过渡期的写法。 在 .test 中生效的是 flex:1 而这个是新标准的写法。导致布局显示出现问题。

autoprefix之后的代码

.example {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-box;
}

.test {
   -webkit-box-flex:1;
       -ms-flex:1;
           flex:1
}

同样的也会导致上面没有 autoprefix 之前的问题，布局发生错误。

总结：

1. 根据自己的业务场景，添加具体的polyfill配置。
2. 如果使用了css3 的新特性，且使用了 autoprefix 做自动添加厂商前缀的处理，只需要在原始代码中使用最新标准写法就行了。

4、webpack runtime文件inline

使用webpack编译代码，当代码生成了多个chunk时，webpack是怎么加载这些chunk呢？

webpack 自己实现了一个模块加载器来维护不同模块间的关系（webpack 文章中称它为 runtime 模块）。标识不同模块是通过一串数字来做标识的（具体的可以写个简单的demo来看下编译结果）。

当修改了一个文件的代码，在 runtime 模块中这串数字会发生变化，如果在webpack 打包时对这部分代码不做处理，它会默认的产出到我们的 vendor 代码中。导致只要修改代码，生成的 vendor 文件的hash就会发生变化，没办法充分利用浏览器缓存。

webpack 已经提供了配置可以将这部分代码单独抽离出来生成一个文件。因为这部分代码经常发生变化，而且代码体积很小，为了减少 http 请求可以在打包的时候选择将这部分代码内联进html模板文件中。

在webpack4.x中可以通过以下配置实现 optimization.runtimeChunk: 'single'。如果想要将生产的runtime代码内联进入html，可以使用这个webpack插件inline-manifest-webpack-plugin。

5、 去除不必要的async语句

async和await语法糖能够很好的解决异步编程问题。在编写前端代码的过程中也可以使用该语法糖。不管是使用 babel 和 typescript 编译代码其实都是将 async和 await 编译成了 generator。

如果对代码体积有极致的需求，我是不太建议在前端代码中使用 async 和await的。因为现在很多第三方依赖处理异步的方式都是使用 Promise ，我们使用的 node_modules依赖一般也都是编译后的 ES5 的源文件，都是对 Promise 做了 Polyfill 的。而且我们自己的 babel 配置也会对 Promise 做 Polyfill， 如果混合使用 async 和 await ，babel又会增加相关 generator run time 代码。

看一个真实的代码案例：以下代码中出现了一个 async 表达式，但是在任何调用这个方法地方的时候都没有使用await ，通过阅读代码也确定这里不需要使用 async 表达式

添加了一个async表达式后，编译结果如下图。可以发现在产出的目标文件中多了一个generaotr runtime 的代码，而且这部分代码的体积还是比较大的

这是编译前的文件大小

去掉这个不必要的 async 表达式后，下图可以看到编译后的文件大小，代码体积缩小了将近 3KB。

6、优化第三方依赖

在第一小节中已经简单了介绍了优化第三方依赖的打包方法了，这里再做下总结：

• 如果第三方依赖支持后编译，使用后编译，且按需加载的方式使用第三方依赖，不要将组件库全量引入；
• 如果第三方依赖某个组件体积较大，且在项目中使用次数较少，页面又是按需加载，可以选择配置规则，当引用次数超过多少次之后才将该组件打包进入公共的 common 中，否则将该组件直接打包进入业务代码中；
• 通过script标签和链接引入第三方依赖时，这些链接尽量不要写入 head 标签中，可以选择按需加载引入；

后编译，就是在使用的时候编译，可以解决代码重复打包的问题。按需引入是指，假如我使用的cube-ui有20个组件但是我只使用了其中的一个 alert 组件，避免全部引入，增加产出文件的体积；

7、lodash按需引入

lodash这个库确实挺好用的，但它有个缺点，全量引入打包后体积较大。那么lodash能不能按需引入呢？

当然是可以的，可以在 npm上搜索 lodash-es这个模块，然后根据文档执行命令可以将 lodash 导出为 es6 modules。 然后就可以通过 import 方式单独导入某个函数的方式使用。

其实lodash到底怎么优化，有没有必要优化，这个也是有一些争议的，具体的可以阅读下百度高T灰大的这篇文章 lodash在webpack中的各项优化的尝试。灰大的这篇文章也论证了文章开头所说的，优化就是根据业务需求做了各种权衡后的一种妥协。

webpack 重要知识总结

1、hash、contenthash、chunkhash的区别

hash 是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值；

chunkhash 采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash。chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

contenthash 使用 webpack 编译代码时，我们可以在js文件里面引用css文件的。所以这两个文件应该共用相同的chunkhash值。但是有个问题，如果js更改了代码，css文件就算内容没有任何改变，由于是该模块发生了改变，导致css文件会重复构建。这个时候，我们可以使用 extra-text-webpack-plugin 里的 contenthash 值，保证即使css文件所处的模块里其它文件内容改变，只要css文件内容不变，那么就不会重复构建。

2、splitChunks详解

目前网络上能够查询到的 webpack4.x 的文档对于 splitChunks 并没有完整的中文翻译，如果对于英文阅读没有障碍，可以直接去阅读官方文档，如果英文不好可以参考下面的参数和中文释义：

首先 Webpack4.x 会根据下述条件自动进行代码块分割：

• 新代码块可以被共享引用或者这些模块都是来自node_modules文件夹里面
• 新代码块大于30kb（min + gziped之前的体积）
• 按需加载的代码块，最大数量应该小于或者等于5
• 初始加载的代码块，最大数量应该小于或等于3

// 配置项解释如下
splitChunks: {
    // 默认作用于异步chunk，值为all
    //initial模式下会分开优化打包异步和非异步模块。而all会把异步和非异步同时进行优化打包。也就是说moduleA在indexA中异步引入，indexB中同步引入，initial下moduleA会出现在两个打包块中，而all只会出现一个。
    // all 所有chunk代码（同步加载和异步加载的模块都可以使用）的公共部分分离出来成为一个单独的文件
    // async 将异步加载模块代码公共部分抽离出来一个单独的文件
    chunks: 'async',
    // 默认值是30kb 当文件体积 >= minsize 时将会被拆分为两个文件 某则不生成新的chunk
    minSize: 30000,
    // 共享该module的最小chunk数  （当>= minchunks时才会被拆分为新的chunk）
    minChunks: 1,
    // 最多有5个异步加载请求该module
    maxAsyncRequests: 5,
    // 初始话时最多有3个请求该module
    maxInitialRequests: 3,
    // 名字中间的间隔符
    automaticNameDelimiter: '~',
    // 打包后的名称，如果设置为 truw 默认是chunk的名字通过分隔符（默认是～）分隔开，如vendor~ 也可以自己手动指定
    name: true,
    // 设置缓存组用来抽取满足不同规则的chunk, 切割成的每一个新的chunk就是一个cache group
    cacheGroups: {
        common: {
            // 抽取的chunk的名字
            name: 'common',
            // 同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取
            chunks: 'all',
            // 可以为字符串，正则表达式，函数，以module为维度进行抽取，
            // 只要是满足条件的module都会被抽取到该common的chunk中，为函数时第一个参数
            // 是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组
            test(module, chunks) {
                // module.context 当前文件模块所属的目录 该目录下包含多个文件
                // module.resource 当前模块文件的绝对路径

                if (/scroll/.test(module.context)) {
                    let chunkName = ''; // 引用该chunk的模块名字

                    chunks.forEach(item => {
                        chunkName += item.name + ',';
                    });
                    console.log(`module-scroll`, module.context, chunkName, chunks.length);
                }
            },
            // 优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中， 数值打的优先被选择
            priority: 10,
            // 最少被几个chunk引用
            minChunks: 2,
            //  如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码 (当module未发生变化时是否使用之前的Module)
            reuseExistingChunk: true,
            // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
            enforce: true
        }
    }
};

参考文章

• 用 webpack 实现持久化缓存

目录

[toc]

引子

每次写这样总结性文章的时候，开头的引子都会花费好多时间和心思去写。而且是写了改，改了写。本来开头是想写写老狼的《青春无悔》的，想写写前段时间看的电视剧《白鹿原》的，想写写最近读的一本书《历史在你我身边》的。反反复复的写了几次结果是都放弃了。

上周末去看了《战狼2》，很不错的电影，满满的爱国情怀。看着非洲人民的生活环境真的是水深火热，体会到了有国才有家这句话的含义。第二天早上看了习大大的沙场点兵。明白我们的祖国再也不是那个任人欺负的**了。

写自己好也罢，写自己不好也罢，反正这篇文章的目的就是对这一年发生在自己身上的事情的反思。

1.人生中的几个关键点

• 2013年12月20号来北京面试实习生，凌晨5点多北京西站下的火车，然后坐52路去***广场看的升旗。当时听到公祖坟、军事博物馆、南礼士路，心里暗暗欣喜终于到皇城北京了。
• 2014年7月4号毕业入职新浪；
• 2016年5月4号入职百度；
• 2017年7月4号自己工作整三年；

现在看这些时间点跟巧合似的，发生的那么接近。刚到北京一切都是新奇的，从对BAT的仰望，到现在身处其中。一路走来明白“怒力”、“奋斗”这些词语的意义。

“只要自己不怀疑自己，自己不放弃自己，谁都不能够放弃你”。

从去年的年中到现在还是发生了好多事情，有些在16年年终的时候记录了，这里就简单的谈谈2017年这半年。

2017年5月3号是入职现在公司整一年的日子。

• 3月份自己完成t4->t5的专业晋升，谢谢在自己成长过程中给过我帮助的所有人；
• 4-5月份大部分精力都在做一些Nodejs基础服务，中间做了很多调研，过程中使用Koa2和Express写了一些工具。最后在项目中落地使用了公司FEX团队的 yog2 。在这个过程中提升了自己工程化的能力和对一些框架原理的理解；
• 6月份全部精力投入到了公司一个新部门的主站建设中去。过程中自己使用Nodejs完成了前后端的所有开发工作。是目前自己收获最多的一个项目。

感谢在这个过程中我的老板，给我提供了充足的空间和时间让我去尝试。

2.总有些故事让人动容

前段时间看了一部电视剧----《白鹿原》。明白了陈忠实老先生的《白鹿原》为什么�被国内外热爱**文学的人所熟知。陈忠实老先生笔下的�“白鹿原”就是旧**人民大众的一个缩影，一个真实的旧**。电视剧结尾的几张插画也是很有时代感。对，那就是我们的“旧**”。

被故事本身吸引之外最喜欢的�还是朱先生。朱先生身上凝缩着狭义和豪情。记得有一段朱先生带白嘉轩到清兵大营说服主帅方升退兵时的场景。满山遍野的清军帐篷，彼时彼景朱先生哼唱起王维的**“劝君更近一杯酒，西出阳关无故人！”**充满着一股悲壮。

从毕业到到现一直在强迫自己没有放弃一个习惯----每月读1-2本书（非专业类的）。记忆犹新的两本书是孙皓晖先生的《大秦帝国》和大冰的《乖，摸摸头》。

对大秦帝国的钟情，是因为孙先生把战国的列国人物写活了。通过文字能够感受到历史中的人物就在眼前。苏秦的“配六国相印”，张仪的“以舌取国”读起来让人热血沸腾。

《乖，摸摸头》是一本非常接地气的书，书中的故事应该都是真实的。有些生活感觉离自己很遥远，但是确实是每时每刻都有人在经历着。书中有赵雷，有大鹏有一些自己熟悉的人。印象最深刻的的一个故事是《一个叫木头，一个叫马尾》。还记得故事开头的那个介绍：

毛毛捏着木头的手，对我说：“……五年前的一天，我陪她逛街，我鞋带松了，她发现了，自自然然地蹲下来帮我系上……我吓了一跳， 扭头看看四周，此时此刻这个世界没有人在关注我们，我们不过是两个最普通的男人和女人……我对自己说，就是她了，娶她娶她！”

平凡的故事，读起来总能让人不自觉的动容。

3.看新机会的动机

经常�收到一些猎头的电话。这里想谈谈自己选择看新机会或者是新工作的动机。

第一点也是最重要的一点：这里的人和做的事都让我不爽，我一分钟都不想待了。不过到目前为止还没有遇到过这种情况。

刚来北京的时我想我和大多数人想的一样“也许我在这个城市也就呆个两三年吧”。没想到现在已经三个年头，而且已经有了扎根下去的迹象。杭州、深圳、“魔都”都是自己曾经向往过的城市，想要去闯一闯，多看看这个世界的精彩。随着自己的年龄越来越大，从最开始想着能在这个城市活着就好。到现在觉得自己在这个城市还可以活的更好。慢慢的对这个城市�有了依赖感。

�说实话每次看一些招聘岗位和薪资的时候，自己会心动、**会动摇。想要去挣更多的钱。也相信以自己的能力和做事的态度，在新的岗位也一定能够做的很好。但最后还是放弃了。

随着时间的推移，自身会跟周围的人和事儿产生融合。慢慢的都会有一些东西让自己不是那么容易的放下。比如说，信任，影响力，朋友圈。这也就是为什么看到一个好的机会但我仍会选择留在一家公司的原因吧。

其实是信仰也好，是梦想也好，甚至说矫情也罢。做自己，就是最好的。

4.做事情总是会碰壁的

前半年在团队做成了一些事情，得到了团队和老板的肯定。现在来看这些事情，都已经尘埃落定做成了。但是在事情开始和过程中自己是不知道自己能不能做好、做成的。有时候自己会怀疑自己，也能清楚的认识到有些事情和当前自己的“能力”不符。但既然选择去做，选择了去拼一把，那有什么理由中途掉链子呢？。

要做出一些成绩�你就会碰壁。清楚的记的，过程中有人毫无保留的当面提出过质疑“这些事情，我觉的你搞不定，你不用做了。”。“我们是要写线上服务，不是要你写个玩具上线的。我不知道你们听到这样质疑的时候心里会怎么想，反正我的内心肯定是不好受的。

现在想想自己做的最正确的一件事情就是能够放低自己的心态，你既然说我写的是玩具，那就帮我review代码吧。既然遇到这么多困难，那就一件一件解决该找谁找谁呗。

要做成一件有挑战的事情肯定是会碰壁的。再牛的人也有自己陌生的领域和知识，大牛也是一点一点学习进步变成大牛的。做这些事情的过程中遇到的困难是巨大的，最后的结果收获也是巨大的。

有一种力量，无能能挡，他永不言败，生来倔强。

5.工作与职场

工作和职场好像没有区别。但是好像有有一些不一样，工作就是具体的做哪些事情。职场更广泛些是指一种文化，做好事情处理好同事关系的文化。

每次当我要认真开始做一件事情的时候，就会发现，这件事情的工作量远远超出了我的预期。一方面跟自己过高的高估自己的能力有关，另一方面也跟自己的规划能力不足有关（大多数时候还是不上心吧）。目前自己也在努力的改善这些问题。

当开始思考一劳永逸解决重复劳动并且开始行动的时候，就是一个人能力开始提高的时候。所以思考和总结是个人能力提高的软素质，值得庆幸的是自己在这方面一直做的不错。在处理问题或者是工作中如果不能正确面对别人的质疑我认为也是不能够做好事情的。

有时候感觉自己就像一个职场新人。前段时间跟一个朋友聊天，聊到了职场文化这个话题。她说：“你的努力和优秀如果给周围人带来的是有利的影响，毫无疑问你做的是对的，而且大家也会认可你。如果你的努力和优秀成为了别人的负担，你就应该思考是不是应该换种方式让大家接受你的优秀。特别是在职场，更应该思考处理这种关系的方式”。

6.面试心得体会

以前经常在知乎看一个话题，“是什么让毕业三四年之后，同学之间的差距会拉大？”。体制内教育下，大家的起跑线基本都是一样的。学一样的课本，上一样的课。这个阶段主要是拼智商。毕业后，就是八仙过海各显神通了，之前很多学习不是很好但是**活跃的人可能会很快脱颖而出。

最近面试了一些人，有一些是名校的硕士毕业生。但是面试过程中所表现出的技术水平却与面试前我的预期差距很大。大多数都是毕业后进入一家公司，然后做一些边边角角的工作。其实站在过来人的角度来看，边边角角的工作并不是主要因素，主要是没有自己对工作的思考，没有实践过自己的一个想法。印象最深刻的一个候选人，名校本硕毕业。在一家公司维护一个数据提交的表单做了一年，我面试他大概有30分钟都在给我讲这个表单。我觉得挺可惜的。

但是也有些能够很明显的感觉到能力、主动性还是很不错的。可能是目前公司的环境和自己技术视野的狭窄限制了个人的发展。如果有一个正确的学习方向还是有很大的发展潜力的。对于这些人我想对你们说：

别放弃自己，如果你不放弃自己，谁也不能放弃你。

7.最近读书单

最近读了一些书。

• 长安十二时辰（1-2）
• 历代经济变革得失
• 大败局（1-2）

长安十二时辰是马王爷的新书，自从读完他的《古董局中局》就爱上了这位作家的写过手法。根据书名也可以看出来整个故事的时间线是发生在十二个时辰中的。第一本书时间感很紧凑，恨不得一口气读完，到第二部的时候，根据史实已经能够大概猜出结局，时间感慢了好多。不过当做故事书来读还不错。

说实话看到《大败局》这书封皮的时候，有种地摊山寨书的感觉。不过读起来之后发现内容还是相当不错的，文章内容是作者尽量采访当事人和参考一些权威资料所写成的。在书中见识了在幼时就熟悉的一些公司和品牌，怎么慢慢从自己的视野中消失的。比如：健力宝，999，三株等。见识了用几百箱火车皮山货换苏联飞机的牛B故事。

1979年改革开发以后，邓爷爷说的“摸着石头过河”是有特殊的时代意义的。因为将来的**怎么走，改革层没有经验不知道，只能走一步说一步。所以当时存在很多法律的灰色地带（法制不健全）。真的有人可以一夜暴富。包括我们现在所熟知的一些企业，步步高、哇哈哈、脑白金等都是在那个时代的经济变革的产物。后来网上了解了下作者吴晓波，著名的高产财经作家，写了好多高质量的财经书籍，比如最近出版的《腾讯传》。

8.人都是会变的

写到末尾的时候又再次去看了下去年的年中总结。看看去年的自己和今天的自己有什么不一样。很明显的两个方面是：

1. 在克服拖延症上好很多；
2. 工作中面对一些不满意的地方能自我驱动去改变；

前段时间看了TED上的一个关于拖延症的视频。在具有拖延症的一类人大脑中都住着一只“猴子”。造成“拖延”的根本原因就是人在决定做一些事情的时候，往往被这只猴子给“捣乱”、“勾搭”去做了其它没有意义的事情。最后主讲人也给出了克服拖延症的方法：要给自己不断的设定deadline，给自己制造恐惧。

按照我个人的体会就是生活、工作中大多数事情不会朝着预期的方向或既定的目标发展。有了目标就立即着手去做，考虑的太多只会停止不前，最终可能会演变成不了了之。这样只会让自己养成拖延的习惯。

去年说的要培养自己的独挡一面的能力。我觉的自己用一些事情的结果证明了自己已经有了独挡一面的能力。工作中看到一些不好的地方，能坚持自己的想法并且肯花费时间去做一些事情。能够独立的承担大的项目，能解决一些比较棘手的问题。有的可能对团队有些影响，有的可能没有影响。结果并不重要，重要的是自己做了。

这是自己工作三年做的最好也是自己最满意的两件事情。自己正在朝着自己的人生目标“优秀的程序员，优秀的架构师，优秀的人”努力。

尾声

“你为什么那么拼？”有时候自己也会问自己。周末的时候经常会去公司写会儿代码，想想一周七天大概有六天都会呆在公司。前段时间在回家的路上听广播，听到一段李宗盛评价自己的话“才气不足，努力不止”（抱歉，原话记不住了）。

作为华语音乐界的泰山北斗，我不知道李宗盛是不是真的才气不足，靠自己后天奋斗才有了现在歌坛的地位。但我知道我肯定是一个平凡的人。平凡的人总被生活推着走，平凡的人才需要更加的努力。

**IT业始终是年轻人的天下，工作几年的人永远比不过刚毕业的小伙子。都说自己能力强，其实我自己心里特清楚，我就是比别人付出的多了一点。自己离30岁还有两年，身体上还有拼一拼的资本，让自己的知识和事业在30岁之前上升一个高度。如果在30岁有了家庭和孩子以后，自己还需要把大部分的时间花费在写代码上，那对于自己来说我的人生是失败的。希望30岁以后的自己是因为兴趣而继续写代码。

人这一辈子，最怕某一天突然听懂了一首歌。

也许我们从未成熟

还没能晓得 就快要老了

尽管心里活着的还是那个 年轻人

因为不安而频频回首

无知地索求 羞耻于求救

不知疲倦地翻越 每一个山丘

....

• 前言：
• 1.做事情
• 2.工作第二年工作盘点
  • 没有完成的事情
  • 做了的一些事情
• 3.“大浪”文化和“狼性”文化
• 4.勿忘初心，不负梦想
  • 遥远的北漂梦
  • 后北漂时代
• 5.做一个会思考的人
• 6.获取知识的方式的思考
• 7.坏习惯的思考
• 8.我要做一个什么样的人？
• 后记：

前言：

转眼又是一年，2016年7月3号是自己正式参加工作两年，入职一家新公司工作两个月的日子。每年到这个时间点，总是想要写点儿什么总结一下。前半年除了学习提高专业技能外，主要读了几本书《余罪》，沉默的羔羊系列。这里我想说《余罪》原著比现在爱奇艺播出的网剧真的好看一百倍。我是先看完书，再看了2集电视剧，然后真的看不下去了，因为张一山刻画的余罪跟自己心中的那个余罪落差太大。我甚至觉得夏雨来主演会更好一些。ಥ_ಥ

1.做事情

对于现阶段的自己来说，更多的是想在工作上有一些突破，能够做一些有意义和对团队发展有利的事情，能够得到同事和周围人的认可。每天经历的事情都会让自己有一些感触，大多数时候都是在微博，朋友圈或者QQ空间发一两句话感叹一下，也就过去了。像这种专门的总结下来，然后写成文章真的很少了。现在每年有动力必须去写的两篇文章就是** “工作xx年小结” 和** “XXXX年年终总结”** 了。因为前者是对自己离开大学以后，每年变化的总结，后者是对这一年自己的工作和生活的总结。

每次开始敲下这些文章第一个字的时候，都有一种“无力”和“恐惧”。因为又要开始对这一年的自己开始复盘了，做了什么，哪些是有意义的，哪些是想做而没有做完的或者说根本就是一点儿没有做的。每当复盘完以后才会发现，自己远远没有成为心中预期的那个自己是有原因的。

在面试中感触最深的一个问题：“你在这个项目中做了什么？”，“你在这家公司做了什么？”。刚开始的时候也会被问的哑口无言，这恰恰证明了自己虽然参加了某项目或者是在某家公司做了两年，但是自己的工作是没有意义的，自己都没有认可自己。后来直到自己认真的去总结了，才发现做了一两件自己说的出口的事情，比做了一些事情重要。

所以一直希望自己每年不管是对自己还是对工作，都能做出一两件自己和周围人都认可事情。

2.工作第二年工作盘点

没有完成的事情

1. 2015年初定的读书计划：《JavaScript高级编程》读一遍，并且总结10篇文章，2016年过去了大半这个计划仍旧没有完成；
2. 2015年末给自己定了2016年的工作学习计划，到现在都没有制定完，还一直在变化；

做了的一些事情

• 2015年4月成为了一名全职的前端工程师；
• 2015年9月底完成了西宁->塔尔寺->环青海湖的骑行；
• 在Github上维护两个人私人仓库，并且star数都快接近了100；
• 成为了CSDNJavaScript知识库的编辑；
• 帮助CSDN绘制了html5和css3知识图谱，并且得到了一些稿费报酬；
• 2015年4月完成北京->秦皇岛->葫芦岛骑行；
• 换了一个新的工作环境；
• 在CSDN 《程序员》杂志表了自己的html5学习指南文章，并且收到了一些稿费；
• ...

对于没有完成的事情:

很大一部分是因为自己身上的惰性在作怪，也有一部分是这些内容不是自己当前工作所迫切需要的。优先级就被其它事情所代替了。之所一直把它们放在自己未完成事情列表里面，还是觉得做了后对自己还是有很大的意义的。

对于已经做了的一些事情：

1.骑行是自己热爱的一项运动，爱上她有很多理由。当前找不到合适的语言来形容，借用网上的一句话：

骑行是一件看上去风光无限的事情。一路爬坡无数，风餐露宿。那些累，那些苦只有自己才真正体会。向勇敢的骑行者致敬！

2.关于在CSDN社区做的一些事情，自己并没有刻意的去做什么。只是定时的更新一些自己平时开发总结。然后就是刚好在那个时间点，有了那个机会，刚好自己有那个能力，才被找去做那些事情。所以这句话反过来就是，当自己想要去做一些事情的时候，首先要有能力，然后在恰好的时间点有了个机会。

3.受刚工作时导师的影响，很早就了解到开源的重要性。鉴于之后工作中Github对自己工作内容和工作效率的提高，自己慢慢变成了一个热爱开源，崇尚开源精神的人。

3.“大浪”文化和“狼性”文化

“大浪”的公司文化：“一切由你开始！”，“狼厂”的文化：“简单可依赖。”。这俩家公司的公司文化都着重强调的是人，但是“大浪”作为一家老牌的业务成熟的互联网公司，当前在移动互联网崛起的浪潮下又没有新的业务突围，在我工作的两年中看到很多公司同事离职，人才流失很严重。“狼厂”在注重个人发展上面我认为比“大浪”要好很多（我觉得是业务线多,赚钱的部门也多吧）。

强调个人能力，先有信任才有可依赖。

在参加新员工培训的课上，讲师讲的“事后验证”和“以结果为导向”都在强调着在这家公司做事情的重要性。“少承诺，多兑现，证明自己，用结果说话！”都在强调着这家公司需要实干家不是空想家。这也就是为什么之前了解的“狼厂”加班比较严重，其实大家在这样的氛围下都知道对自己做的事情有一个好的结果的重要性，这样才可以得到同事和领导的认可。

当然关于“加班”这里持保留态度，我相信在很多互联网公司加班都是跟自己负责的业务当前的进度有关的。还有工作之外自己做的一些事情（当前对于工作内容的思考，想要做一个产品解决当前工作中经常遇到的问题）。

对于外界对“狼厂”的评价我持保留态度，但是这些对工程师影响真的很小，可以说根本没有，大家每天想着还是做好自己的事情，在新闻上看到一些负面新闻也仅仅是了解一下。但是不得否认的是“狼厂”给工程师提供的发展机会真的很多，如果你有想法都可以去实践。

听多数人的意见，和少数人商量，自己做决定！

这里我只是想表达自己眼中看到的，我热爱我毕业后的第一家公司，同样也热爱我现在的公司，也想做些有意义的事情实现个人价值。

4.勿忘初心，不负梦想

这是在参加新员工培训时，在一些老前辈的故事中听到的。从他们的真实的故事中，自己开始反思自己的初心和梦想。

遥远的北漂梦

自己并不是一个善于学习的人。换句话说大学的时候自己应该修的课程并不是很好。这也直接导致了自己的计算机基础并不扎实。“我要去北京”，这个想法是大二就开始有的，因为大学课程并不优秀的我甚至觉的大学并不适合我。想要到这个世界大都市去经历一些大风大浪，去实现个人价值。

大三进入大四的暑假开始找实习，我仍然清晰的记得7，8月份的郑州“热火朝天”，为了参加面试找到一份儿实习工作，又为了省公交钱走几公里去面试。为了能够证明自己，自己是带着电脑，随时准备给面试官看自己在学校做的一些小Web项目。当然面试了3家公司，只有一家公司的面试官简单看了我做的一些小玩意，后来也是这家公司收留了我。

但是我在这家公司待的时间并不长，只是觉得这家公司做的业务并不是自己想做的，然后就有了后来的“武汉故事”，然后一个很巧的机会在武汉得到了北京创新工场的面试offer。后来只身到北京参加面试，拿到自己的实习offer。实现了自己的北漂梦。

怀念当时自己的那个冲劲！

当初自己踏上去往北京的火车时候，在内心狠狠的对自己说：

成为一个优秀的人，优秀的程序员，优秀的架构师。

后北漂时代

从焦作到郑州，武汉，北京，当梦想成为现实，自己经历了很多。由最开始的，认为自己应该随遇而安到现在扎根帝都，其中有很多故事，只不过是随着生活条件的提高冲淡了自己内心的那种感觉和冲劲。也许真的是：

生于忧患，死于安乐！

毕业两年，自己距当初的目标还有很大的一段距离，也意识到“成为一个优秀的人，优秀的程序员，优秀的架构师”这句话的顺序是错误的。大家会说你一毕业进入的都是大公司难道还不优秀么？我想借用网上看到的一句话表达“以这个世界上努力的人之少，根本轮不到拼天赋。”我也仅仅是体会到这句话的内在意义，克服了自己身上的惰性，努力了一点点而已。

优秀的程序员很多特点，我可以总结出一些标签“严于律己”，“强悍的执行力”，“对新技术的敏感”，“思考问题的方式”，“处理问题的方式”。这些特点不是你想学就能一下学会的，是需要时间的积累慢慢去培养的。

上面提到的那句话的正确的顺序应该是：

成为一个优秀的程序员，优秀的架构师，优秀的人。

而自己距实现第一个目标还有很长的路要走。

5.做一个会思考的人

“大学就是一个让你犯错的年代。”是的，在大学我犯过很多错误，不考虑周围人的感受，处理不好跟周围人的关系。这些都让自己尝到了一些教训。“那个时候觉的不可思议的事情”，现在自己再回头去看也觉的没有什么，其实就是时间冲淡了一切。但是留给我的教训会让我铭记一生。

突然发现自己身上的冲劲是不是也被时间冲淡了呢？ಥ_ಥ

还好一直都能够清醒的认识到自己不属于聪明人的行列，但是到哪都能遇到比自己优秀的人。在工作中能够判断出自己做的事情是对是错，能够听取别人的意见，做自己认为对的事情。

有时候会被一些老同学问一些问题，“我想学前端，该怎么入门啊，学哪些课程啊？”，“我想学安卓，该学哪些课程啊？”。大多数时候我是不想回答这些问题的，不是问题本身简单不简单的问题，一个在校生问这些问题可以理解，但是对于一个工作1-2年的人，在问这些问题的时候都没有思考过，也不会自己动手去找答案，自己不敢去踩坑，就是期望别人给你指一条路，你才敢去走。这样永远都是原地踏步，不会有进步。

记得跟之前的同事聊过一个话题，不管在一个多么平凡的团队或者是一个优秀的团队，总是会有人脱颖而出，有些人碌碌无为。因为某些人的身上天生带着某种韧性，当外在环境不好的时候，总是能凭借自身的韧性突破周围的环境的限制，而有些人身上天生带着“鸵鸟精神”，就算有优越的外在环境，也会沉沦为默默无闻。

就好比戚继光，大家可能都说，他天生就是做将军的人，我到认为是，当时的环境让他有参军的想法，参军后又有自己对于战争的思考，又知道通过某种方式，找资源实现自己的想法。然后成为了一位优秀的将领。如果说当时的大环境是好的，戚继光是去经商，我觉得他也会是一个优秀的商人，因为他身上的主动性，注定了他肯定不是一个平凡的人。

6.获取知识的方式的思考

有很长一段时间自己早上到公司的第一件事就是去浏览一些自己收藏网站的文章，比如：开发者头条，前端大全等，直到看到昨天已经看过的内容为止。当时感觉自己收获了很多新鲜的知识，时间长了发现自己从这些网站收获的知识几乎为0；因为这些网站上看到的内容很多自己平时工作中都用不到，没有实践的机会，对于自己来说看完一遍之后，等待的就是大脑对它们慢慢遗忘。但自己每天在上面却花费了大量时间。

自己开始思考自己系统的掌握某个知识是通过什么方式：

通过系统阅读某个技术经典的纸质书籍，

在网络上阅读别人的博客也仅仅能够做到了解，不能够做到掌握。在工作中遇到特定的问题，通过搜索引擎来查询这些文章来解决遇到的问题，是非常正确的。大多数时候网上看到的很多东西都会让人迷惑，因为缺少辨别它们对与错的基础知识。是有很多知识需要学习，但不是说这些网站推送的每篇文章都应该看，想要通过这些文章去系统性的掌握某项知识是不切合实际的。

最近在看《JavaScript设计模式与开发实践》这本书，被书中一些场景的代码实现所“震撼”（这里感觉用这个词不是很恰当，但是示例代码写的真的是好）。自己也在思考怎么才算是掌握了一个设计模式？

我认为首先应该是模仿，吃透了示例代码的思路，有所体会。当遇到相似场景可以想到用某个模式编写自己的代码能够让自己的代码更健壮和扩展性更高。这个时候才应该是对一个设计模式开始掌握了。

工作中很多时候都在维护别人的代码。当看到一个庞然大物的时候，首先不应该抱怨别人的代码写的不好，可能是自己的水平还没达到那个程度，理解不了。如果真的是别人的代码写的不好，那么也是自己的机会来了，“重构”对于一个人的架构能力和代码组织能力是一个很大的提高。

7.坏习惯的思考

世界上阅读的方式有两种：

①泛读②精度；

现在觉得对于“泛读”这个词语的理解有一些偏差。应该是“广泛的阅读”。不是说在读书的时候，可以跳着读。这是一种很不好的读书方式。而自己恰恰在很早的时候就养成了“跳着读”，这种读书方式。

也深刻的体会到了这个习惯的养成对自己的影响：

• 阅读技术书籍的时候，遇到一个无法理解的知识点，不思考不自觉的跳过；
• 写代码，会遇到问题，一时解决不了，就会先跳过，这本来应该算是一个正确的做法，但是程序会变成千疮百孔，后期的修复代价很大；

当然自己现在是非常不建议泛读的，间接的能让人养成很多不好的习惯。我现在就在跟自己养成的坏习惯做着强烈的斗争。锻炼自己的专注力，做一件事情不分神，这其实是很痛苦的一件事情。

8.我要做一个什么样的人？

曾经想过一个问题：

世界上有很多土豪，就算是他们不上同班，每天都去旅游，住最好的宾馆，吃最好的食物，一辈子可能都有花不完的钱，那么他们为什么还要努力的上班赚钱呢？

有人说这些人是有更高的追求，想赚更多更多的钱。我倒是觉的这些人还是在把自己当一个正常人来看，知道活着就应该做点儿有意义的事情。一千个人会有一千个对生活的理解，这也仅仅就是我现在的感受，可能再过两年我的观点也是会变的。

引用书上看到的一段话：

生活不能等待别人来安排，要自己去争取和奋斗；而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。有了这样的认识，你就会珍重生活，而不会玩世不恭；同时，也会给人自身注入一种强大的内在力量。

勿忘初心，不负梦想：做一个优秀的程序员，优秀的架构师，优秀的人！

后记：

想到了自己学过的一篇课文的内容：

你站在桥上看风景

看风景的人在楼上看你

明月装饰了你的窗子

你装饰了别人的梦

故事是你自己的，同时你也成了别人故事的一部分。当我发布这篇文章可能距7月3号开始写这篇文章已经有一段时间了，对于文章中的每个标题都是每天自己经过深刻的思考写下的。一些时间性的东西就不改变了，保持它的原汁原味。愿我和读到这篇文章的同学都能跟@十年踪迹 老师的网名一样，以一个十年来计量自己的人生。

myslide 插件开发知识点总结和 css3 动画性能问题的研究

这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题，但是最后的结果又是很简单的。

1.手机端的 slider 插件是否有必要集成点按操作

对于我自己开发的版本来说还是集成了这个操作的。但是参考了京东，天猫，淘宝电商网站首页的 slider 图片轮播插件都没有支持点按操作。那么是为什么呢？

我想到的答案可能如下：

对于移动端来说，屏幕太小，轮播图上的显示当前图片状态的圆点,人的手指不容易选中。

2.this到底指向谁,改变 this 的指向

JavaScript 中this在使用过程中比较容易出错的。那么this到底是指向谁呢？我看到最多的一句话是：

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象;

来看两段代码：

var a = {
    m: 12,
    b: {
        m: 13,
        func: function() {
            console.log(this.m);   //result: 13
        }
    }
};
a.b.func();

通过输出的结果，我们这个知道，当调用this的时候，this指向的是对象b；

var a = {
    m: 12,
    b: {
        m: 13,
        func: function() {
            console.log(this.m);   //undefined
            console.log(this);      //window
        }
    }
};

var cc=a.b.func;
cc();     //相当于 window.cc();

由以上代码的输出结果是当this被调用的时候 this 指向的是当前的 window 相当于window.cc()，这个时候实际上是 window 调用了 this；

上面的代码也印证了小结开头提到的那句话。但是很多时候根据实际情况我们需要改变this的指向，那我们该怎么做呢？

比如下面这样,我有一个公共的 js 对象来保存一些公用的 DOM 操作的方法，比如：

var Doing.prototype={
    likeSport:function(){
        //这里使用原型的方式定义对象，就是想要这里的 this  始终指向送的都是 Doing
        console.log(this.test2()'like speak');
    },
    getName:function(){
        // console.log('zhiqiang');
        return 'zhiqiang'
    }
}

我的应用场景如下，当我单击 test 节点的时候，打印出我喜欢的运动。

<div class="father">
    <div class="test">我喜欢的运动是什么？</div>
</div>

new Dong();

var Dong = function(){
    var _this = this;
    $('.father').on('click','.test',function(){
        console.log(this);   //this  指向的是 test 节点对象
        _this.likeSport();   //这时 likeSport方法中的 this 指向的是 .test 节点对象  
     });
};

根据以上的代码，虽然我使用了 _this 缓存了 this 的只想，以使在单击函数的回掉中可以使用，但是这样直接调用 Dong 对象的方法，会改变 likeSport 中 this 的指向。

那么我们怎么让我们在单击函数的回掉中调用 likeSport的方法时，likeSport 的方法中的this仍然指向的是Dong呢？

这个时候就要用到 call或者 apply 来解决问题了。

call 和 apply 都是可以指定 function函数运行时，this 的值。两者唯一的区别就是 call 第二个参数接受的是参数列表，而 apply 接受的是一个参数数组。

fun.call(this,tp1,tp2);
fun.apply(this,[tp1,tp2]);

按照以上的知识点来修改我们的代码

$('.father').on('click','.test',function(){
    console.log(this);   //this  指向的是 test 节点对象
    _this.likeSport().call(_this);   //这时 likeSport方法中的 this 指向的是 Dong
 });

3.使用CSS3 动画性能的问题

为什么使用 css3属性来做动画？使用 css 3做动画有什么好处呢？

我们先借助 chrome 开发者工具对动画渲染做一个检测，先来看使用margin-left来做动画发生了什么

再来看使用 translate3d 做动画发生了什么

我们可以很明显的看到，在使用 margin-left做动画的过程中，浏览器每时每刻都在发生渲染操作，而使用 translate3d 只是在开始和结束的时候发生渲染操作。

来看看 csstrigger 网站上对 margin-left 和 transform 的区别：

由上面可以知道，我们在使用 margin-left 这样的属性的时候，会触发页面的重排和重绘，而使用 transform 的时候，可以调用 gpu 对渲染进行帮助。

容易忽略的问题：

1. 在使用 jQuery 或者 Zepto 的 animate 方法做动画的时候，我的代码可能是这样的

test.animate({left:'15px'},1000);
test.animate({transform:'translate3d(0,15px,0)'},1000);

但是根据 API 文档，我们可以直接这样写

test.animate({translate3d:'0,15px,0'},1000);

这种写法比上面的写法简洁一些。

2. 在使用 CSS3 属性做动画的时候，数值要加单位，不然会没有效果，比如下面的代码

var size = 150;
test.animate({'translate3d': '-' + size + ',0,0'},1000)

这样写是正确的：

var size = 150;
test.animate({'translate3d': '-' + size + 'px,0,0'},1000)

4.scroll 滚动动画的问题

我们会有这样的业务场景，需要从页面的最低部返回页面的头部，或者是返回到页面的某个部分。
能够想到的解决方案有两种：

1. 使用锚点；
2. 使用 js 来滚动页面

使用锚点没有什么可以多说的，也很简单，但是滚动效果比较生硬。使用 js 来滚动页面的话，可以设置滚动动画，来使页面的滚动的效果更加友好。

在网上如果搜索scroll 动画最多的答案就是使用下面这样的代码：

    $('.body1').animate({scrollTop:200},2000);

但是我在使用这样代码的时候，却没有出现我想要的效果，最后通过各种尝试还是找到原因的。就是的父级元素没有设置overflow:auto

overflow 这个属性还是很有用的。比如：触发盒子的 BFC 还有就是禁止元素在水平或者竖直方向滚动。

注意：
jQuery 支持这样的滚动动画，但是 Zepto 不支持这个操作滚动动画；

毕业一年小结...说好的战斗呢？

[TOC]

引子：

2015年7月3号是自己工作整一年的日子。一直想写一篇文章，对这一年做一下总结。这篇文章在今年7月3号左右的时候是已经写出来了的，但是自己在反复读了几遍以后感觉写的不是怎么的好，就想着要再修改修改。

之后就是在团队里面因为一个紧急的项目，忙忙碌碌了好几周，记得这个过程中有两个周末还需要到公司加班，甚至到了凌晨2-3点左右才回家。哈哈，不过也算是毕业以后经历了一段难忘苦逼的日子。这里开个不恰当的玩笑就是**“有产品经理的项目对程序猿来说真的是一个考验生理和心理的一个过程啊”**。

下周就是全国反法西斯放假了，虽然说是全国人民都应该纪念和庆贺的日子，但是好像还是跟自己关系不是很大。自己也将要迎来一个11天的小长假。当然自己也已经计划好了去哪里，要做些什么，抱着什么样的心态去做。其实我是不知道自己到那里能不能坚持下来的，而且自从定了这事，每天只要是有空的时候，心里面都会有两个自己在做斗争**“不要去了，不去了还可以省钱，好好的在家睡觉看电影多爽”，而另外一个自己却说，“你已经推迟一年了，如果这次还不能下定决心，那你以后也只能这样的将就了，趁年轻，去吧，给青春留点回忆。。。”**

对于_“编码”_之外，要想让自己集中精力来做一件事情有时候是一件非常难熬(甚至是十分困难)的事情。虽然自己一直都有写博客的习惯，但是对于写文字来说还真是件痛苦的事情。就好比有些事情，有些人是因为热爱去做，有些人是因为不得不做而去做。

_1._ What?运维工程师？

大学毕业前自己乱七八糟的学了很多种技术，实习的时候也做过专职的前端工程师，反正是跟运维工程师是没有半毛钱关系的。而自己毕业后也想要做的是java工程师，但是毕业后却阴差阳错的做了_运维工程师_。

先谈谈一个合格的初级运维工程师应该掌握哪些技能吧。首先Linux系统知识是必须了解熟练的，然后就是shell。然后按照职位的不同开始细分，比如说，mysql 运维工程师（也可以说是DBA，两者是不分家的），系统运维工程师，非关系型数据库运维工程师（比如redis）等(反正有很多种，我一个巴掌数不过来的)，根据每个职位的不同，需要掌握不同专业的技能。而我就是做了非关系性数据库运维工程师。这个职位需要掌握的技能和知识跟我实际会的技能是有很大差距的。比如说Linux，Redis,MemCached,python,这些大学听都没听过的东西,“老大，请问这是什么东东，做这些干什么？”。

当然自己也没傻到真的这样去问老大，不管了解不了解，慢慢的学习吧。按照市场的需求，现在纯运维工程师已经很难满足市场的需求了，运维开发工程师这个职位对于小，中，大公司都是很抢手的，更是市场的发展方向。所以学习python是必须的。

这一年中自己都在跟着**@大闪** @樊亮 开发新浪的自动化运维平台。刚开始还是遇到很多困难的，不过还是那句话**“困难面前，只要你自己不先放弃，或者是妥协，最终都是能够克服的！”**,所以喽，最后反正也对什么都算是熟悉的程度了。

对于我个人来说，我是很不喜欢运维这项工作的，出了开发之外每天都是跟机器打交道，还有打电话跟业务打交道，有很多事情感觉做的很没有意义。所以，到今年6月份之前自己都是一个不怎么合格的运维工程师。但是我还是非常感谢这段经历的。虽然很多知识在我现在的工作中用不到，但是它们对我知识面的广度还是很有影响的。特别是Linux，全世界公认的开源的优秀的操作系统，在大学对它的了解几乎为0，也从最初的排斥，慢慢的了解，然后接受，最后喜爱(怎么突然觉的有点儿恋爱的感觉啊)。对于python这门编程语言也同样经历了这样一个过程。**python虽然不是世界上最好的编程语言，但他绝对是世界上最好用，好学，功能强大的语言。**然后呢？都这样了还要什么然后啊，好用就行了呗，而且关键点也是薪资水平也是行业内数一数二的。(偷笑中...)

上面道貌岸然的把自己称为**工程师**,感觉还是有点心虚的啊，其实我就是社会最底层的一个还有点梦想和理想的小码农而已!

生活就是这样，不是任何时候，都有机会去做自己喜欢做的事情，应该从当下应该做的事情中，发现自己的兴趣点儿，不要刻意的去排斥，到最后都会有不一样的收获。

14届新员工集训

_2._ 某个阶段总要去经历，某些事总要有人去做

作为团队里仅有的两个应届毕业生之一，有时候还是需要做除了工作之外的一些其它的事情。第一件，组织TEAM的每周分享，工作包括：前期联系分享人，发通知邮件，预定会议室。第二件就是组织大家进行一些工作之外的活动。比如说,周末组织大家一起去奥森公园跑跑步，打打球什么的。

那个时候每周都要组织团队成员进行内部分享，，分享人有自己TEAM内部的，有从其它TEAM邀请的。这些分享大多数时候都能让人了解很多自己工作之外的知识，也能够了解其它部门同事在做什么工作。另外就是组织大家一起出去活动，比如一起去奥森公园打球，一起去沙河水库烧烤等，这些活动都能够很好的让TEAM同事之间交流感情。

虽然都是一些小事和杂事，但是却需要组织者在前期去做很多工作的。那段时间自己内心也会有些小情绪，比如说：“＊＊，为什么要做这些事情”。其实这些都不是最重要的，最重要的是你很难做到每个人对你的组织或者说付出都满意。但是最后想想做这些事情还是有很多的收获的，想把这些事情做好需要一个有耐心的人，而且也需要一个好的心态来面对来自他人的质疑。对于我来说，很多事情是没有做好的，第一方面自己缺乏组织活动的经验，第二就是自己耐心不足。记得在自己犯错误或者有事情做的不够好的时候，谢谢老板@海潮 的用心批评和建议(学习了很多管理经验)，把我从错误的道路上拉回来，并且教我怎么去做事儿，怎么把事儿做好。

记得那个时候已经是14年的11-12月份了吧，那个时候@启盼还没有离职，下班的时候经常和@启盼一起吃饭，然后一起到公车站坐车回家。所以也和@启盼经常交流，“有些阶段每个人都要去经历，有些事情总要有人去做，当你不得不去做某件事情的时候，你应该考虑已经不应该是愿不愿意做这件事，而是怎么把这件事做好。”。
@启盼是一个少数民族，来自**，那段时间@启盼 也给我讲了很多他自己经历的真实的**生活。对于没有经历过那样生活的人来说，听到那样的事情还是很难以置信的,有种_xinjiang_人民生活在水深火热中的感觉。当然@启盼 也给我看了漂亮的**妹纸（不知道比我大的还能不能叫妹纸），过了年的时候在Facebook上看到@启盼 已经和青梅竹马的女友领证了，这里只能默默的送上一个祝福了。

前团队，那个时候大部分人都还在，不过有些人已经算团队新员工了

_3._ 月薪10k和20k是一种怎样的人生体验

这个是前段时间在知乎上看到的两个话题。《什么样的人一毕业就月薪 1 万以上？》和《月薪 2 万元是一种怎样的人生体验？》。看了大家的答案，讨论(也可以是争论)的还是很火热的。可能有很多应届大学毕业工资水平没有过10k这个水平的学生，想要知道什么毕业生可以拿到这个薪资水平。还有一部分人，就是工资水平处于10k-20K之间，想要知道别人是怎么突破20k这个临界值的。

其实我也不是一个很厉害的人，但是我还是想谈谈自己对这个话题的看法，和背后所隐藏的意义。应届毕业能够拿到10k以上月薪的基本上都是进入国内一线或者二线的互联网公司的吧。但是对于这些公司来说，这个薪资水平也是最基本的起薪而已，所以没什么好谈的(就跟体制内和体制外的生活一样，各有各样的烦恼，也各有各样的好)。

我想说说，这背后所隐藏的一些潜在的问题吧。最起码这群人应该算是一群聪明的人，一群“聪明”的人在一起工作，效率肯定会高很多。第二就是对一个人视野的提升，比如说我之前的运维部门，我们TEAM全盛时期17个人，运维线上3k多台服务器，如果在小公司，一个十几台的服务器就敢称_“集群”，可能连自己的服务主机都没有，但是这样的公司还敢说自己在搞什么_大数据。试想一下，十几个人，运维这么多服务器，那么多业务，怎么管理都是一件很复杂的事情，更不要说去处理和排查故障了。恰恰在IT行业，一个优秀的架构师是应该具有很深的技术功底和广阔的视野的。技术功底自己可以培养和苦练，但是视野，是小公司永远给不了的。,当然还有很多...

好吧，好吧，不谈这么沉重的话题了。接下来我是来“炫富”的(求乱棍不要打死...)。
当然一个应届毕业生可以拿到这样的薪资的时候，说明自己可以绝对的经济独立和自由了。然后就可以去做自己很多自己想要做和喜欢做的事情。

这是毕业四个月后，除了了__单反__是大学时候买的，自己已经有能力买的起苹果三件套了

当自己觉得3个显示器在工作的时候效率才是最高的，可以有能力去尝试

大学的时候自己都想组装一台自己的主机。第一是考验自己有没有这样的能力，第二就是台式机确实比笔记本的性能高啊。然后就是前段时间终于忍不住，自己在天猫买了零件装了一台。因为之前没有实际经验，就是装了拆，拆了装，慢慢的摸索，从开始到最后正常运行，大概花了6个小时左右吧(其实我还是很享受这个过程的...高兴ing...)

前段时间刚好跟学妹聊到一个话题。就是关于欲望的话题，“大学的时候，是最不需要花很多钱的时候，但是还是有很多人为了钱去给别人当小三。”

这种事情在现代社会是很正常和普遍的。人的欲望是无止尽的，当自己的能力满足不了当下自己的欲望和虚荣心的时候，欲望就会引诱着人们去堕落。So, desire is so fear !

_4._ 你应该懂得什么是责任了

自己在之前的岗位经历过新浪微博1次A级，两次B级运维故障。距自己经历的最近一次故障就是“陈赫离婚的长微博”。可能对于外行人，很难理解，一个计数器写满会引发那么大的故障。这里就不谈具体的原理和原因了，反正从那之后，微博上就在流传说，某个明星你再要发离婚帖或者结婚帖，出轨帖的时候先给我们**“渣浪”**(这个称呼是历史原因了，我们都这么自嘲)的运维工程师打个招呼，让我们提前预备资源，也最好别在半夜发，还得我们的工程师好不容易把老婆孩子都哄睡了的时候，正准备躺下,突然收到报警短信，又爬起来处理报警...

“zhiqiang 啊，咱们好像跑题了... 0.0”
一个好的运维工程师，绝对是一个有责任心的人。因为服务器的故障（包括：硬件和系统）的发生时间是不定，所以就需要工程师24小时待命。记得有次自己还在公交上，我直接领导打电话问我到家了没有，说有一台服务器的磁盘要被写满，马上就要挂了...(这是一件很严重的问题)。但是我还没有到家，刚好自己带了电脑。在一个面馆借着人家的WiFi给处理故障。(是不是觉得很苦逼...)

前几天跟学长在群里偶然谈到了责任这个话题。有人说：“40岁的时候应该懂的责任这个词”。其实我是极度的不赞成的，**“我反问到40岁不晚么？”**我觉得人成年以后就应该懂得这个词的分量了，首先应该懂的对自己的负责，才可能懂的对朋友和对家人负责。

回想自己的从小学到上大学之前的生活，总是被家长“强迫”做一些自己不喜欢的事儿(当然还是可以理解家长还是对孩子好的嘛)，所以我经常会对自己说，将来如果自己有了孩子，肯定让他自己选择喜欢做的事情。然而，我竟然一直以为这是对的。正好前段时间跟一个同学聊天，偶然谈到这个话题，她说道：“…当孩子还仅仅是孩子的时候，他可能不会选择，可能他根本还没有辨是非的能力，或者说他根本就不知道做与不做意味着什么的时候，作为大人应该去替他选择”。之后几天我都在反复思考这个问题，最后我自己也释然了，原来我一直都是错误的。替孩子去做选择也是大人应该为孩子承担的责任。

突然想到了教父里面的一段话：

第一步要努力实现自我价值；第二步要全力照顾好家人；第三步要尽可能帮助善良的人；第四步为族群发声；第五步为国家争荣誉。事实上作为男人，前两步成功，人生已算得上圆满，做到第三步堪称伟大，而随意颠倒次序的那些人，一般不值得信任。
其实第一条已经很清楚的说名我们首先应该对自己的负责，让自己变得优秀后才有可能有能力去照顾好自己的家人。

一起欣赏下，教父那睿智的眼神...

_5._ 浅谈怎么成为一个优秀的员工

感谢@海朝 和 @栋哥 还有我的所有同事在工作中给我的宝贵建议，使我能够快速成长。

在工作红有人肯直接指出你的错误是一件非常荣幸的事情(至少对于我来说是这个样子的...)。平时我很喜欢直接指出我错误人，也很乐意别人给我一些意见，这样就是我再也不用花费大量的时间和心思去想我到底哪一点错了。而我只需要关注问题的本质。

不知道从什么时候开始，觉的自己的脑袋不够用了，没之前好使了。每次想要做什么事情，可能下秒就会突然忘记自己要做什么了，所以很多时候，自己每到要做什么事儿的时候，都是干劲拿手机记录到备忘录里去。要不然很多能一会儿就给忘了。有时候会怀疑自己是不是变笨了或者是更年期了，更可能随着年龄的增长，需要自己去操心的事情多了。

好了，好了，赶紧谈正事吧，要不然下班又回不了家了...优秀的员工，你当然应该能够做好小事和杂事，然后能够让领导及时了解工作的进度，遇到意外延期，更要及时上报(这个背后的意义，自己体会吧), 如果是让领导主动找你了解情况，按照@栋哥说的**“你已经输了！意外也可能变成了借口”，最后是要让领导知道自己对工作的计划**，这样他才知道你的时间是饱和的，没有闲着(公司不养闲人，机会也是留给有准备的人)。不管何时不要先提出自己的需求，你都应该先做好自己的事情。

_6._ 女孩子比男孩子优秀那又有什么问题？

已经记不清在哪看到的这个话题了。“很多男生都比较介意自己的女人比自己优秀”。 我只想说，这样的事情为什么没有让我碰到？婚姻和家庭本来就是一个互补的过程，谁有能力就多承担一些那又有什么呢？为什么非要去在意谁承担的多一些或者少一些。
只有两个人足够的优秀才会有更多的时间和精力花费在家庭中去。如果每天都在为财米油盐争论不休，还谈什么幸福的家庭。

一个成功男人永远不会嫌弃自己女人太优秀，除非他驾驭不了！就像一个女人永远不会嫌弃一件衣服太漂亮，除非她穿不上或买不起！

_7._ 别因为自己的问题让你跟别人迁就你

我有一个女同事，每次因为工作她跟别人发生矛盾的时候，最后她也知道是自己的错。但是总会说是自己的脾气不好，就是这个样子来给自己找借口。我们再往深了去思考这个话题就是，平时生活中爱说这句话的人，都是想让别人来迁就自己罢了。但是？为什么别人平白无故的要迁就你呢？
看到过一段话，大致是，“很多女孩子可以利用自己是女孩子的身份，去做成很多事情，但是很多女孩不把自己当女孩子而是当作普通人(不分性别)去做事情。前者是女孩，而后者是好女孩儿。”

很久之前看到一篇**《其实，你只是看起来很努力》的文章，对自己影响很大。自己也开始反思为什么高中的时候总是觉得自己很努力，但是总是考不好的问题。也终于能让自己释然一些，原来还是自己自身的问题。前几天又看到一篇《你不是太直，你只是自私》**的文章。这些文章写的都很好，能引导人从自身的问题去思考问题。往往读完后都能让自己的心里有种释然的感觉。

_8._ “好人”一直都在自己身边

我一直觉得自己运气是非常好的，不管到哪里都能碰到谈的开的人，碰到很厉害的人，能够碰到肯帮助自己人。直到最近才想明白，不是自己运气好，只是好人本来就很多而已。

_9._ 感恩有你们的这一年

在这里很感谢初毕业就能加入新浪数据系统服务平台这个优秀的团队。在其中遇见的领导**@海潮 ，@启盼**，@大闪，@蕃亮，@曾涛，还有**@栋哥**等，谢谢你们这一年在工作和生活上给我的指导使我一生收益。

过年后，因为一些**“问题”，@启盼先离职了，然后是老板@海潮，最后大家陆陆续续的都开始离职了，几乎上我送走了团队的每一个人。这个问题**我现在还不能谈，第一我觉得我个人看的可能比较浅，第二就是会涉及到领导，和领导的领导。

_10._ 做成一件事比做了很多事重要

谈谈一直都很佩服的@栋哥吧，我们团队的架构师。@栋哥的工作路线也很牛b，淘宝，大学老师，百度，渣浪。就像之前的TEAM年后变化还是挺大的，80%的老员工都离职了。但是@栋哥一直不见动静，而且一直在沉着心做事情。@栋哥在新浪做了很多有意义的事情，Redis版本开发，databus数据迁移系统(在github上开源后，大概两周就收到200多个star),还有一个给忘了...(智商捉急啊...)。其实也更@栋哥聊过有没有辞职换个工作的想法，@栋哥说:“有是有，但是他想做的事情还没有做完，总不能做了一半就走吧”。拿什么来形容@栋哥呢？其实@栋哥并不是一个为了工作而工作的人，只是借助公司这个平台来实现自己的价值和梦想的人吧。对于新浪这家公司，我也是有很多感情的，它是我毕业后的第一家公司，我已经不记得哪位同事说过的这句话了：

“当你还是菜鸟时候，是新浪接纳了你，当你变成大牛时，是新浪培养了你”。

不管是什么时候我都不会忘记这句话。

_11._ 一个老生常谈的话题

前几天看了老罗的“坚果”手机发布会，有很多感触。从老罗身上可以明显看出他和“商业巨子”雷军，还有新秀“刘作虎”做手机的风格完全不一样地方。雷军是个地地道道的企业家，刘作虎追求的是对品味的把玩，但是在老罗身上可以看到一个踏踏实实做产品，一切为用户的企业家。先不说老罗开了几次发布会，捐了几次门票是炒作还是作秀，但是这些钱真的是捐出去了，而且真真实实帮到了很多人。就像很多人在网络上议论的:

对于现在很多处于80后尾巴，90后甚至是00后们来说，它们并不知道老罗为甚么砸了冰箱，怎么在新东方教的英语，但是它们确确实实是开始喜欢上了老罗。

是的，我也是属于这拨人中的一个，对于做手机前的老罗了解的不多，但是我也开始喜欢上这个总是能够带给我正能量的“胖子”了。现实生活和工作中，负能量很多，有时候自己也会成为一个负能量的散播者。对工作对生活要拥有这种积极向上的态度，还是很需要这种精神的感染的。

_12._ 青春不散场，对梦想不妥协

写到这个标题的时候，自己都是一愣一愣的。早都不是学生了还谈什么青春，还谈什么梦想。上面也已经提到了，自己下周将要去做一件事情。这也是自己给自己这次旅行想的一个口号。
一路走来自己确实是定过太多计划，有过太多的梦想。大多数都夭折，连自己都不记得了。但是有件事自己还是一只都记得，而且一直记在自己的QQ邮箱的记事本里面
记的14年1月份那个时候，还没毕业，自己都开始计划，一些自己毕业后要做的事情。记的那个时候自己还做了一个计划，美其名曰：“人生计划”。

当然还不止这些

当我从自己的QQ邮箱的记事本里找到自己写的这些东西，打开看的时候自己都笑了，那个时候是要去骑行川臧线的，但是最后一个也没有实现。
还好明天就要踏上去环青海湖骑行的火车了，终于能为自己曾经的一个梦想和计划画上一个句号了。

每年都有写年终总结的习惯，眼看着元旦已经过了好几十天了，步入2016年。是应该对2015年做一个总结了。最近一段时间有空的时候也在整理这一年经历的事情，也在思考自己在其中的得与失。

也许一个人确实容易空虚，找不到奋斗努力的方向。有段事件自己也迷茫过，自暴自弃过。做事说话心浮气躁，不思考。想想那个时候的自己确实有点可怕，那是浪费了多少时间啊。所以，

当一个人不在思考的时候，说明生活过着非常的空虚，这是一件非常可怕的事情。

引子：

首先，我想感谢在这一年给过我帮助的所有@同事，@亲人和@朋友。正因为你们的出现，才使我成为一个有精彩故事的人。之前，这段引子写了很长，后来也是觉得冗余，还是总结成了一句话：

磕磕绊绊，虽然迷失过，但愿自己能不忘初心！

今年年终总结的文字是从收到的公司的一份邮件开始的，这里我要谢谢我所在的公司，作为校招生从最开始的新员工培训，到现在已经入职一年半了，每周一到公司打开邮箱还能收到 hr 们的鼓励邮件。有时候看到非常切合自己心态的文字确实很受鼓舞的。

记得在9月份的时候写过一篇《工作一年小结》的文章，基本上也讲清楚了自己前半年经历的一些事情和对这些事情的一些感悟。从小就听说过_“铁打的营盘流水的兵”_这句话，工作后发现这句话来形容 IT 行业也是非常贴切。还是那句话： 只有经历过，才会有感触。

当然送走了旧同事，我依然有故事...

1.2015年末的自己

因为房子合同到期，重新换了房子，搬了家。那段时间也是挺忙的，每天需要上班，下班后还要忙着找房子。在北京要想在自己理想的价位找到一间适合自己的房子不是一件容易的事情。而且在北京这样一个房价只增不减的城市，租房子的价格也在上涨的情况下，想找到一间价廉物美的房子更加难了。
记得13年12月份的时候刚来北京（是的来北京已经两年了），住的是八九百的房子（小黑屋），没有窗户是客厅的隔断。后来毕业了，挣得钱多了，一千五换了个大点儿的房子。到现在房租已经接近2K。说实话这个价位自己心里还是着实心疼了一下。

前段时间身份证有效时间到期，回家办理了一张新的。高中第一次办身份证，有效时间是10年。新办理的身份证有效时间20年。我看到那个20年的时候一想，等到自己再换身份证的时候已经快年过半百了，不知道那个时候自己会是什么样子。内心一阵波涛汹涌。时间真的是荏苒。

现在自己特喜欢听五月天的歌曲，特别是后青春的诗中的那首笑忘歌（一定要听 live版啊）其中的有段歌词真的很有意义

青春是手牵手坐上了
永不回头的火车
总有一天我们都老了
不会遗憾就OK了
伤心的都忘记了
只记得这首笑忘歌
那一年天空很高风很清澈
从头到脚趾都快乐
我和你都约好了
要再唱这首笑忘歌
这一生只愿只要平凡快乐
谁说这样不伟大呢

对啊，正向歌词中写的 “这一生只愿只要平凡快乐，谁说这样不伟大呢”

2.想做什么，要做什么

刚毕业的时候陌生的领域很多，一切对自己都是新鲜的。无缘无故选择做了一名运维工程师，整天和服务器数据库打交道，这个选择自己是没有经过深思熟虑过的。但是现在想想，当初选职业跟很多年前高考选大学专业一样。选择的都是一知半解。所以，就算自己再深思熟虑也考虑不到多少东西，毕竟自己的知识有限，眼界有限。

**我想做开发，要做开发。**所以在15年刚过完年回到北京，大概3月份儿的时候也尝试着找了一些机会，想去做自己想要做的事情。当然有时候不是你想去做，就能够去做的。

最近两年前端这个行业发展比较好，而且以后的发展前景也不错。大学期间学过一些前端的东西，毕业后在做后端运维的时候，也写过一些 jQuery ，自己也想要去尝试前端职位这个方向。

后来在几次的面试中，没有多少实际前端开发经验的我，都失败了。但这些经历也让我收获了很多东西，第一，做这个职业需要的知识结构，以及对于一年到两年的工程师应该拥有多少的知识积累。第二，心态！毕竟每次都被别人打击，能够还继续尝试也不是一件容易的事。

之后在同事的鼓励下，我找老大表述了自己的想法。在老大的支持下，后来我转岗到了公司一个很厉害的前端部门（也就是我现在的部门），开始在前端这个行业打怪兽升级。

自己一直信奉的一句话，“记住自己想做什么，要做什么，并为之付之行动！”。如果没有机会，一定要为自己创造机会。如果现在不去做，以后可能就没有机会了。**活着，总要追求点什么。**所以，就算没后之后的那次转岗，我仍旧是会继续寻找机会的。

3.不细心犯的错

4，5月份的时候，团队来了两个校招实习生。这个时候团队已经换了新领导。当时关于谁带的问题，小组开了个会，因为小组长在我毕业的时候带过我，最后他也把带实习生的任务交给了我。
那个时候带他们做一个小项目，用 Python 解析 HDF 文件，将获取的数据绘制成图表。当时服务器上的数据是每天生成都会生成，代码是获取包括当天和往前推7天的数据。

这里要抱怨一下我们天朝的 GFW 使用 pip安装 Python 包，不挂代理有时候竟然都无法安装，更可恶的是 PyPI 如果不挂代理竟然连网站都打不开（当然我们可以配置国内的代理，阿里镜像，豆瓣镜像）。

之前服务器上的代码是别人的，我当时也并没有仔细的阅读，只是大概看了一遍。刚开始做的时候我就给了他们一次数据文件。后来他们一直在说代码有问题，从文件读取的数据有问题。当时我也没有意识到是数据的问题，只是让他们再看看。直到第二天我重新读了一边代码才发现了问题问题所在。那个事情也是自己比较在意的，自己的疏忽浪费了别人很多的事件。后来我也跟他们聊聊，表达了自己的歉意。

4.态度是工作利器

6月份转岗到的公司一个前端部门。后来就连续做了几个项目。积分商城，运营活动。因为刚开始经验的缺乏和知识储备的不足，自己也经历了加班到凌晨的过程，但是自己在那段事件确实积累了很多知识和开发经验。

不管对于前端还是后端，开发经验都很重要，特别是前端 css 的某些属性在哪些系统的手机上有问题或者是客户端中浏览会有问题，多终端适配的问题。相对于传统pc端 web 页面的开发, 因为移动端对 css3新属性支持的很好，h5页面的开发可能会方便一些。当然这些新属性的出现也让 h5端的开发出现了无限可能。当然这都要开发者去尝试。

在前后端协作开发，与产品沟通项目需求的过程中也暴露了自己很多的问题。比如说在问题面前，自己之前会特别较真的区别这个是你的问题，还是谁我的问题，还有这件事该你去做还是我去做。有时候同事之间会显的很尴尬。后来慢慢的意识到了自己的问题，在之后的工作中也改变了自己的态度。感谢同事对自己的包容。

毕业后自己变了很多，性格上的棱角也慢慢的被磨平。以前在自己的圈子里，自己很牛逼，性格也会显得很狂妄。当从一个自己牛逼的环境到周围都是比自己牛逼的人中间，刚开始还是吃了很多亏。后来自己也慢慢学会了谦卑。后来我才发现自己是一个：

只有是犯过一次错了，才知道事情该怎么做，话该怎么说的人。

前几天看了火影忍者剧场版博人传，其中佐助对名人有一段话的评价，我觉得很贴切：

他浑身都是弱点，简直一无是处，但是他靠自己的力量一点一滴的进步最终成为了火影，你不必理解现在的鸣人是怎样的，你需要认识一路走来成就了自己的鸣人。

对啊，我是有很多缺点的人，但是我没有丧失辨别是非，对与错的能力。如果我认为我做的事情和说的话是错的，不关多么的不好意思，我都会道歉，也会努力控制自己不让同样的事情发生第二次。

这段时间因为天气不是很热也不是很凉，周末自己最经常做的事情就是骑行了。比如说骑行十三陵，***，城郊等。最后强烈建议，如果想在北京骑行的话，一定要选择城郊（十三陵这条线很不错，周末骑行的人很多），不要选择市区，就算没有雾霾，你也会被汽车尾气“熏死”。

5.青春不散场

9月底的时候自己带着车子去了一趟青海，环了一次青海湖。9月底已经错过了最佳的环湖时间（最佳时间7月左右），什么万亩油菜花田，我去的时候都没有了。自己也不是平白无故的想去就去的。也是为了完成大学时候对自己的一个约定。

那次环湖是自己有生以来做的的最痛快的一件事情。从西宁出发，经塔尔寺，湟源，西海镇，二郎剑，黑马河，刚察，再回到西海镇，全程大约450公里，自己骑了6天时间。经历过孤独无助，精疲力竭。但是我也遇到了很多人，听到了很多故事。那才是我最开心的事情。

就像有人写过的那样，“从小到大，我们在不同的人生阶段有自己的梦想，但是最后完成的有几个呢？”。有些事情没有必要去做，去做了也没有意义。就像电影《谜城》中最后古天乐的那句台词：“只是人生多了一段经历，换来一段永远追不回的时间。”

但是那又有什么关系呢？我觉得我的人生应该是有故事的，我的青春也应该是有故事的。

“青春不散场，对梦想不妥协”，这是我当时给自己想的口号。之后也成我做人做事的人生态度。也许这就是青春吧，某天我回头的时候不会说，我的青春喂了狗。就算没有了青春，我也是一个有故事的人。

6.不能怕踩坑而不去踩坑

11和12月份的时候自己重点负责了公司两个项目的开发。双十一和双十二活动。经过几个月的工作，自己积累了一些知识也了解了一些新知识。在这两个项目中自己也尝试使用了他们（当然自己也踩了很多坑）。

比如说，现在h5端的弹性盒模型，CSS3动画等。使用过程中遇到了很多问题。因为之前学习的时候都会去参考，淘宝，天猫和京东的 h5页面。所以，在遇到问题网络搜索解决不了问题的时候，都会尝试去研究一下这三个网站的源码，找到解决方案。

也是在工作中跟同事聊天理解最深刻的两个词，“知道”和“理解”。某个知识点当同事提到的时候，能接上话，并能说出一些东西，这叫知道。当遇到问题知道能用哪个知识点解决问题，这叫理解。大多数时候，不是说这个知识点不知道，而是想不到去用，或者说不知道怎么去用。所以

知道和理解是有很大的距离的。

现在前端最火的框架无非就是angular 和 react ，当然还有 node。我们公司也会根据自己的业务类型开发我们自己的前端框架。有时候跟同事聊天也会聊到这些问题，为什么像 react ，angular 已经很好用了啊，而且还有大公司的技术支持。我们为什么还要重复造轮子，不直接拿过来用呢？我记的最经典的一个回答如下：

“angular 和 react 刚出来的时候也有很多毛病，被很多人指责，但是这么多年过去，从被指责到被很多人接受，并且引领者一个行业的发展。这是需要公司的持续支持和开发者持续支持的。我们学习别人是应该的，但是走自己的路我们自己才会有发展，只是一味的跟着别人走，始终不会有质的超越，时间长了也不会有自己的沉淀。”

我一直非常佩服滴滴打车的创始人，佩服它创造的生活方式（跟马云一样）。滴滴创造的模式，不仅改变了人们的生活方式，也改变了一个行业的生产结构。肯定是会被历史记住的。

7.可以是遗憾，也可以是青春的标志符

前段时间，大学同学来找我。期间我们聊了很多大学的事情。大学，那是个荷尔蒙激荡的年代啊。有时候工作中遇到困难的时候，自己也拿现在去对比那个无忧无虑的时期，想到一些事情也会嘴角上扬的傻笑。但是，很多事情可能永远也不会发生了。

大学那会儿因为无聊，空虚很喜欢喝酒，而且是白酒。也喜欢跟宿舍的哥们或者是专业的哥们拼酒，感觉我比你能喝，我就比你牛逼啊。那是一件多么长脸的一件事情啊。
聊天的过程中，我同学也跟我说起了大学喝醉酒后喊的几个妹纸的名字。其实这些事情后来我并不记得，现在听他们一提起还真有点儿脸红，不自在。但是那个时候自己确实是没勇气去追自己的喜欢的女孩，也只能喝醉后瞎喊喊而已了。当然了现在也是。

就像有句话话说的那样：

人生是一场没有彩排的话剧，演出顺序真的很重要。在错的时间里，你一出场就输了。

8.我的2015读书单

15年自己断断续续读了一些书，大部分都是用 kindle 在做公车的时候读的，后来有一段时间自己骑车子上班，阅读的效率低了很多。统计了一下大约有39本吧。技术书就不列举了，因为自己读技术书都是读一半。今年也会对自己有一个小要求，就是每读完一本书，都要写简单的书评。

9.计划总是要有的

1.不做什么

Python 学习今年就放一放吧。

2.要做什么

1. 提高自己 JavaScript 面向对象变成的能力
2. 开发仿安卓，ios端的动画库 （主要参考系统动画，天猫，淘宝，京东电商网站的动画）
3. 读一遍 JavaScript 高级程序设计，并总结出10篇文章

尾声：

终于到了尾声了，自己也确实是写不下去了（絮絮叨叨。。。）。曾经觉得很艰难的时候，时间让所有过不去的都过去了，现在想想也就那么回事。每个人的生命中都会有最艰难的那一年将人生变得美好而辽阔，也许我生命中的“最艰难的那一年”已经来过了也或者还在远方等着我。但是谁去想呢，如果没有考验了哪里来的人生。

看到这篇文章的小伙伴，让我们今年都更加努力一些，如果某天我们突然面对了属于自己的“最艰难的那一年”，我们能够更加坦然些。。。加油！！！

而到如今，我明白过来，无论怎样肆无忌惮地去过这一场青春，都不可能在白发苍苍时觉得这一切无愧于心。所有故事都会有遗憾，这才是实实在在的人生，值得被想起，庆幸曾经历。--摘自 《一个》

html5学习开发指南

本文发表于CSDN《程序员》杂志2016年8月期，未经允许不得转载！

概述：

随着移动互联网的兴起，前端开发工程师的岗位也随着兴起。前端工程师不仅在用户和产品之间扮演着越来越重要的角色，而且前端的职能也能够（开始）朝着服务端延伸。所以不仅小公司缺人在招前端，大公司同样面临着缺少优秀前端工程师的尴尬处境。

当我们在谈论或者招聘前端工程师的时候，都会提到熟练或者是熟悉 h5（html5） 开发。那么所谓的 h5 开发是什么呢？这篇文章主要就是为大家介绍 h5 的基本内容和学习指南。

1.html5是新技术么？

从2006年 html5 标准被提出到2014年10月29号，html5规范制定完成并且发布，这中间经历了8年时间。从被提出到最终规范定稿，html5 包含的很多新特性，同步的在被同时期的现代浏览器（Chrome,Firefox等）所实现。所以 html5 对于很多开发者来说，已经不能算是一项新技术了。在 html5 发展的过程中，移动互联网的兴起，html5标准委员会 为了满足在移动设备上实现复杂多媒体功能，设计了一些新特性来支持移动互联网的发展。

严格意义上来说，我们现在口中的 h5开发 并不仅仅指的是 html5 这一项技术，而是包含了html5 ,css3，javascript。所以在我们励志成为一名优秀的前端工程师的时候，应该多关注这三方面的技术。

2.html5 相对于 html4.x 有那些改变？

1. html5首先通过新的 <!DOCTYPE> 声明方式，告诉浏览器对所要解析的html文档的文档类型。来规范浏览器的解析行为。该声明方式比 html4.x 声明更加简洁和灵活；
2. html5新增加的标签丰富了网页结构，有利于搜索引擎的抓取；
3. html5使得页面元素在浏览器上的表现更加的丰富，比如绘图（canvas），媒体播放（audio，video）；
4. html5新增的事件类型，可以让开发者监测用户更多的行为，使用户在操作网页时，网页有更加丰富的表现；
5. html5可以使开发者的网页兼容更多的设备（可以使我们的网页在不同的移动端设备上基本表现一致）；
6. html5可以让开发者在客户端存储更多的数据；

3.html5新增了哪些知识点和作用

1. 章节语意标签，比如：<footer> <article> 等，可以使我们创建更友好的页面结构，便于搜索引擎抓取；
2. 表单元素，属性，比如：number email autocomplete等，可以让我们规定表单元素的输入类型，长度，表单元素的行为；
3. 多媒体标签，比如： <video> <audio>。可以让我们定义多媒体文件的类型和行为；
4. 2D绘图，矢量图应用，<canvas> <svg> 标签可以让我们在网页上绘制复杂的图形和显示复杂的图形；
5. 拖拽事件，drag drop 事件可以让我们在网页上对元素进行拖放操作；
6. 离线数据的存储，localStorage sessionStorage可以让开发者根据用户行为在客户端缓存数据，提高网站性能和用户体验；
7. 获取当前用于的地理位置，geolocation 可以让我们不依赖客户端就可以获取用户位置；
8. Application Cache 可以让我们对Web应用进行缓存，离线时也可以访问，增加用户体验；
9. web worker 可以让我们脱离JavaScript是单线程的这个魔咒，而且web worker独立于其它的脚本不会影响页面性能；
10. 被动的获取服务端数据，EventSource 对象可以让我们的应用程序不主动发送HTTP 请求的情况下接收服务端推送的消息，并且做出响应；

4.为什么选择html5开发我们的应用

上面介绍了那么多html5新特性，那么这些新特性普及能为开发者带来哪些便利呢？

对于经常使用微信的朋友来说，在 发现 一栏里可以看到 京东购物 的标签，当我们打开后会发现它几乎跟我们使用京东客户端一样。我们会想，难道微信在自己的客户端内，单独为京东开发了展示商品的模块呢？假如说，微博的客户端也要为京东添加这样的一个入口，是不是微博的工程师也需要开发这样的模块呢？

答案是否定的，首先两家不同类型且独立的公司，先不说技术储备问题，这么复杂的页面开发起来在协调沟通和开发成本都会很大。如果某天XX活动京东要对网站首页改版，为了保持一致性微信的工程师也得同步的开发京东的新版页面。这明显违背软件设计 解耦 的**。那么什么技术可以改变这种现状呢？