一次Webapck打包进度卡在70%,Ctrl+C退出后,重启Webpack发现一直提示端口被占用.

查看指定端口进程

查找8001端口被哪个进程占用:

1

# lsof -i:8001

结果显示

1
2

COMMAND  PID   USER    FD   TYPE             DEVICE SIZE/OFF NODE NAME
node     1577  relign  24u  IPv4 0xf4c52151f2395907      0t0  TCP *:vcom-tunnel (LISTEN)

我们可以看到一个node进程占用了8001端口.
输出各列信息的意义如下:

• COMMAND 进程的名称,也就是启动的程序名
• PID 进程的ID
• USER 进程属主的名字
• FD 文件描述符,应用程序通过文件描述符识别该文件.如CWD,txt等
• TYPE 文件的类型,如DIR、REG等
• DEVICE 指定磁盘的名称
• SIZE 文件的大小
• NODE 索引节点(文件在磁盘上的标识)
• NAME 打开文件的确切名称

使用XMLHttpRequest对象和Fetch发起HTTP请求就必须遵守同源策略.
而CORS就是W3C推出的一个标准,用来解决跨域问题.

CORS

CORS,全称是”跨域资源共享”(Cross-origin resource sharing).这种方式让Web应用服务器能支持跨站访问控制,从而使得安全地进行跨站数据传输成为可能.

跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源.另外,对那些会对服务器数据造成破坏性影响的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法.在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求.服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据).

浏览器将CORS请求分成两类: 简单请求(simple request) 和非简单请求(not-so-simple request);

Angular项目需求开发中偶遇小坑,发现利用ngModel绑定值后,监测不到值的变化.
于是简单写了个demo复现了这种情况:

这种情况发生在ng-if中嵌套一个ng-model,ng-model就会无效.

AngularJS中ng-show,ng-hide,ng-if用来控制DOM元素的显示和隐藏,
不同的是ng-show和ng-hide是通过计算表达式的值来控制增加还是删除DOM元素的类名(ng-hide),详细见源码:

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

// ngHide
var ngHideDirective = ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngHide, function ngHideWatchAction(value){
      $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');
    });
  };
}];
// ngShow
var ngShowDirective = ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngShow, function ngShowWatchAction(value){
      $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
    });
  };
}];

ng-hide类名是控制CSS的display属性值.

本文是调研如何实现高性能动画,提升用户体验的总结,文章内容来源于对看过的相关技术文章的总结,相关技术文章已列到文章末尾,如有遗漏,敬请谅解.

快速响应和高度交互的页面往往能够吸引大量的用户群体.相反,如果页面存在性能低下的动画,动画不流畅,动画过程中页面闪烁等等,如此粗糙的交互体验必然丧失用户量.

对于大多数的设备而言,屏幕以 60 次每秒的频率刷新,即60HZ.如果一个动画中的某些帧超过了这个时间,就会导致浏览器的刷新频率跟不上设备的刷新频率（跳帧现象）,出现页面闪烁.因此,高性能的动画都应该保持在60fps左右.

接下来我们看几种动画的实现方式.

基于setTimeout或者setInterval实现的动画

基于帧算法实现的动画

做项目时执行 npm shrinkwrap 报错,并对这次错误求根问底,贴出来让大家看看,希望跟我出现一样错误的童鞋可以得到解答

npm shrinkwrap 命令简介

项目开发过程中,当你使用npm install [package] --save安装项目所依赖的包的时候,会在package.json文件中写入包的版本号:"express": "^4.8.7"(一般是这种版本号,^表示允许大版本迭代,即允许4.8.7到5.0.0之间版本的升级).但这样就会出现问题,当你下次执行npm install安装package.json中文件的时候,可能会出现版本不一致导致运行结果不同的情况.

入职一周左右发现项目中使用ngTable版本是v0.3.3,而github上ngTable版本已经更新到v1.0.0,找到一篇v0.3.3的英文api进行翻译.同时抽出时间看看官方给出的例子总结了一下v0.3.3,希望可以帮到后续入职的新同学快速上手,老司机请绕路哈.

ngTable指令Config简介

ngTable指令可以美化你的table.它支持表格数据排序,过滤筛选和分页.当表格初始化完成后会自动带有头部和过滤器.
假如你想让ngTable在IE9以下运行,你需要jQuery:

1
2
3

<!--[if lt IE 9]>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<![endif]-->

ngTable指令通过在table标签上挂在ng-table属性来启动.而ng-table属性的值对应你挂载到scope上的一个ngTableParams实例化以后的对象.举个例子:

HTML:

1
2
3

<table ng-table="tableParams">
	...
</table>

此文章比较各个版本之间Angular的Extend方法

版本1.2.26

此时的Angular Extend精简至极,只进行了浅拷贝.

1
2
3
4
5
6
7
8
9
10
11
12
13

function extend(dst) {
  var h = dst.$$hashKey;
  forEach(arguments, function(obj) {
    if (obj !== dst) { // 做判断去除同类的继承
      forEach(obj, function(value, key) {
        dst[key] = value; // 对传入参数进行循环,将一个或者多个的可枚举属性复制到dst对象中
      });
    }
  });
  setHashKey(dst,h);// 为对象增加hash值,方便后续遍历过滤处理操作
  return dst;
}

上面的代码多的仅仅是将传入的参数中可枚举的属性复制到dst对象,并返回这个新的对象,传入参数中靠后的argument会覆盖调靠前的.
列举一个简单的例子:

错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制，在程序执行发生问题的条件下，异常会在中断程序执行，同时会沿着代码的执行路径一步一步的向上抛出异常，最终会由顶层抛出异常信息。而与异常同时出现的往往是日志，而日志往往需要记录具体发生异常的模块、编码、详细的错误信息、执行堆栈等，方便问题的快速定位分析。
摘自无风听海的博客angular代码分析之异常日志设计

打开Angular源码首先看到的就是这个minErr函数,这个函数是angular对异常信息的处理函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

/**
 * @description
 *
 * This object provides a utility for producing rich Error messages within
 * Angular. It can be called as follows:
 *
 * var exampleMinErr = minErr('example');
 * throw exampleMinErr('one', 'This {0} is {1}', foo, bar);
 *
 * The above creates an instance of minErr in the example namespace. The
 * resulting error will have a namespaced error code of example.one.  The
 * resulting error will replace {0} with the value of foo, and {1} with the
 * value of bar. The object is not restricted in the number of arguments it can
 * take.
 *
 * If fewer arguments are specified than necessary for interpolation, the extra
 * interpolation markers will be preserved in the final string.
 *
 * Since data will be parsed statically during a build step, some restrictions
 * are applied with respect to how minErr instances are created and called.
 * Instances should have names of the form namespaceMinErr for a minErr created
 * using minErr('namespace') . Error codes, namespaces and template strings
 * should all be static strings, not variables or general expressions.
 *
 * @param {string} module The namespace to use for the new minErr instance.
 * @returns {function(code:string, template:string, ...templateArgs): Error} minErr instance
 */
function minErr(module) {
  return function () {
    var code = arguments[0],
      prefix = '[' + (module ? module + ':' : '') + code + '] ', //构造日志前缀
      template = arguments[1],
      templateArgs = arguments,
      stringify = function (obj) {
        if (typeof obj === 'function') {
          return obj.toString().replace(/ \{[\s\S]*$/, '');
        } else if (typeof obj === 'undefined') {
          return 'undefined';
        } else if (typeof obj !== 'string') {
          return JSON.stringify(obj);
        }
        return obj;
      },
      message, i;
	//模板信息替换
    message = prefix + template.replace(/\{\d+\}/g, function (match) {
    //获取占位符索引,转化为数字
      var index = +match.slice(1, -1), arg;
	//获取替换占位符的传入参数对象的字符串表示形式
      if (index + 2 < templateArgs.length) {
        arg = templateArgs[index + 2];
        // 将传入的对象转化为便于调试的字符串形式
        if (typeof arg === 'function') {
          return arg.toString().replace(/ ?\{[\s\S]*$/, '');// 如果是函数则清空函数体
        } else if (typeof arg === 'undefined') {
          return 'undefined';
        } else if (typeof arg !== 'string') {
          return toJson(arg);
        }
        return arg;
      }
      return match;
    });
    message = message + '\nhttp://errors.angularjs.org/1.2.26/' +
      (module ? module + '/' : '') + code;
    for (i = 2; i < arguments.length; i++) {
      message = message + (i == 2 ? '?' : '&') + 'p' + (i-2) + '=' +
        encodeURIComponent(stringify(arguments[i]));
    }
    return new Error(message);
  };
}

什么是ESLint？

当C语言刚成为计算机语言的时候，有一些常见的错误不能够被原始的编译器捕捉，所以一个名为Lint的辅助程序被开发出来，用来扫面源文件中的错误。

在Douglas Rockford 的 也提到，JavaScript是一门「年轻的语言」，因此也就存在很多糟粕的地方，这些糟粕使得程序员在编写JavaScript代码的时候，容易出错，而不易被编辑器或程序员本身发现。于是Douglas Crockford亲自操刀，编写了JSLint代码规范检测工具，其认为JSLint是JavaScript的一个更加严格的子集，也就是他说的Good Parts，使用JSLint就能够检测我们在编程过程中无意得使用了一些「糟粕」的地方，避免了程序出错。

而ESLint是Nicholas C.Zakas编写的另外一份JavaScript代码规范检测工具，这当然不是重复得造轮子（大神不屑造轮子，大神一般都是重新发现轮子），在使用JSLint的时候，JSLint不是以插件的形式实现的，而是重新包装一个工具，可能Nicholas C.Zakas不喜欢这种方式，其认为代码规范检测工具（ESLint）应该是可插拔（使用插件），可配置的，于是自己便高高兴兴去写ESLint了。

正如ESLint官网这样定义ESLint：

ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project.

ESLint 的设计思想就是高度可配置，在ESLint中你可以开关每一条规则，你可以使用最基本的语法检测，或者结合自定义的规则来使得ESLint完美运行在你的项目中。

从 Jocs 罗冉大神的github中翻阅Eslint的这几篇翻译文档,觉得相当不错,遂收录

项目中包含

Rules：该文件夹中包含了ESLint Rules的中文翻译（暂不包含v2.0.0新增Rules）。

Configration： 该文件夹内包含一个ESLint配置说明文件。

.eslintrc: 该文件是可以是你项目中有且仅有ESLint的配置文件，不包含规则简要解释。

eslintrc.json： 该文件可以是你项目中有且仅有ESLint的配置文件，包含简要的规则解释。

Migrating-to-v2.0.0: ESLint迁移至v2.0.0手册，和Rules和Configration相关部分进行了翻译。

配置文件使用说明

安装依赖

在package.json文件中添加如下依赖（如果没有package.son文件需首先通过npm init 创建package.son 文件）：

1
2
3
4
5
6
7

"devDependencies": {
    "babel-core": "^6.5.2",
    "babel-eslint": "^4.1.8",
    "eslint": "^2.1.0",
    "eslint-plugin-promise": "^1.0.8",
    "eslint-plugin-standard": "^1.3.2"
  }