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做动画在性能消耗上面会很大,作者通过使用:after伪元素控制透明度来模拟shadow,减少动画的重绘次数,重绘次数是shadown的几十分之一。
关于引导图一般都是用图片来做,张鑫旭使用了border+after来模拟,非常棒非常有创意,同时避免了图片传输带来了流量和时间上的损耗。
PS:快点把博客搭好!!!!
2016-03-18
前两天在研究别的东西,就没有更新看过的文章
文章
npm3
关于版本
npm已经升级到版本3了,作为nodejs的包管理工具,npm也越来越多地被前端使用,npm3在下载速度和包依赖管理上有了很大的提升和优化。
关于命令
npm dedupe 命令在安装完包后可以对其进行检测优化包的结构,减少冗余。
尝试自己发布一个
npm 发布自己的包很容易,只需要有一个npm账号就可以了。
伪元素还可以用来做计数器
一直伪元素用来做图标、图形,觉得伪元素挺实用的,能解决一些不常用的需求,没想到伪元素还能作为计数器,支持各种嵌套,多种字符如罗马、geek、矩形原型、数字、字母等
伪元素content的多种用法
详细介绍了很多content的用法
当传参错误时
Javascript没有所谓的类型检测,因此需要我们自己去做类型检测,当参数为空的时候、当参数类型不一样的时候,需要我们去做处理以及抛出错误。
<pre><code>
function makeSalad (ingredients) {
ingredients = ingredients || [];
if (!Array.isArray(ingredients)) {
throw new TypeError('ingredients
parameter should be an array.');
}
return ingredients.join(', ');
}
</code></pre>
如上面的函数所示,良好的检查能保证程序的正确执行,减少debug次数。