一周mark（2016-03-18）

2016-03-11

今天看博客发现了一个不错的团队博客--AlloyTeam团队Blog，博客涉及了web端开发的很多东西如他们自己实验的项目、web开发（css3\h5\js\nodejs\优化\体验设计\经验心得）、移动开发（Adroid、IOS、移动web开发）、资源工具等，是个值得常常关注的博客。

今天的文章列表

关于web缓存

JavaScript 代码规范与约束

npm script?

聊一聊前端自动化测试 （待看）

使用 SVG 输出 Octicon

---

文章：关于web缓存

页面的缓存是由header决定的，header参数有四种：

• Cache-control:
  max-age(s),级别比expire高
  s-maxage(s),同max-age,只用于共享缓存（cdn缓存）
  public 共有的共享
  private 私有的缓存，用户间不能共享
  no-cache 不缓存响应

• Expires 缓存过期时间，用来指定资源到期的时间，是服务器端的具体时间点，也就是expires = max-age + 请求时间，需要和Last-modified结合使用

• Last-modified 服务器端文件的最后修改时间，304返回表示没有修改

• ETag 通过实体内容生成的一段hash字符串标志资源的状态，用来解决Last-modified存在的问题：
  1、服务器无法精确得到资源的最后修改时间
  2、资源修改频繁，秒级以下，Last-modified只能精确到秒
  3、文件修改时间变了，但是内容不变的情况

使用缓存流程

cache-control指令使用

其他的缓存方式

• LocalStorage： 本地存储的公共资源，在pc端兼容性不好，网速快的时候比不过304，移动端由于网速慢反而有优势，但是已经4G时代，不知道怎么样
• sessionStorage ：会话制缓存

---

JavaScript 代码规范与约束

JSLint：严格的规范和极少的配置
Jshint：可配置的规范
ESLint：

• 默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移
• 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用
• 包含代码风格检测的规则（可以丢掉 JSCS 了）
• 支持插件扩展、自定义规则
• 支持 JSX

可在项目中尝试使用eslint

---

npm script?

用过fis、gulp，工具带给我们很多方便的地方，而npm script则是准从插件的原始指令，一定程度上减少了插件的不兼容性，对于开发小型的应用会更方便
关于npmscript的官网

2016-03-14

文章阅读

前端技术栈的展望
ESLint看来值得一用，计划在项目中使用，替换老的JSlint
React前阵子学了一段时间，不过一直没有真正实践过，可以在native平台实践下
Mocha之前一直打算使用却一直搁浅者，计划在项目中使用

一篇随机数的介绍

2016-03-15

文章

关于数组去重

个人想到的是先排序再去重，在时间和内存消耗上比较平衡，直接两重循环去重是最浪费时间的，如果使用each等可以提高些许性能，捅排时间上是最佳，但是内存消耗也会变大，不利于数据过多时候使用。

更高性能地实现平滑的box-shadow动画效果

调用box-shadow做动画在性能消耗上面会很大，作者通过使用：after伪元素控制透明度来模拟shadow，减少动画的重绘次数，重绘次数是shadown的几十分之一。

如何用css做引导图

关于引导图一般都是用图片来做，张鑫旭使用了border+after来模拟，非常棒非常有创意，同时避免了图片传输带来了流量和时间上的损耗。

免费的在线测试网页性能工具

PS：快点把博客搭好！！！！

2016-03-18

前两天在研究别的东西，就没有更新看过的文章

文章

npm3
关于版本
npm已经升级到版本3了，作为nodejs的包管理工具，npm也越来越多地被前端使用，npm3在下载速度和包依赖管理上有了很大的提升和优化。
关于命令
npm dedupe 命令在安装完包后可以对其进行检测优化包的结构，减少冗余。
尝试自己发布一个
npm 发布自己的包很容易，只需要有一个npm账号就可以了。

伪元素还可以用来做计数器
一直伪元素用来做图标、图形，觉得伪元素挺实用的，能解决一些不常用的需求，没想到伪元素还能作为计数器，支持各种嵌套，多种字符如罗马、geek、矩形原型、数字、字母等

伪元素content的多种用法
详细介绍了很多content的用法

当传参错误时
Javascript没有所谓的类型检测，因此需要我们自己去做类型检测，当参数为空的时候、当参数类型不一样的时候，需要我们去做处理以及抛出错误。

 function makeSalad (ingredients) {
 
 
ingredients = ingredients || [];
 
 
if (!Array.isArray(ingredients)) {
 
 
throw new TypeError('ingredients parameter should be an array.');
 
 
}
 
 
return ingredients.join(', ');
 
 
}
 

如上面的函数所示，良好的检查能保证程序的正确执行，减少debug次数。