爱客仕-前端团队博客园

发表于 |

什么是CSRF?
下面这个炸裂的图片就是

csrf

是不是感觉很奇幻，就点进了一篇文章。怎么就被攻击了呢
大家可以打开开发者工具，会发现有个图片请求 crsf?from=1&to=b，指向的服务器是localhost:8080
这就是一次crsf攻击，攻击的是服务器localhost，也就是我在本地开启的一个服务器
服务器上的日志清晰的打印出来了这次访问记录 

1
[2016-10-17 20:22:30] [HTTP] GET /home/index/csrf?from=1&to=b 200 24ms

而且如果你之前访问过localhost:8080,那么这次访问还会把你在localhost:8080的cookie也带过去
这是一个很可怕的事情，因为这次请求完全在你不知情的请求下发生的
假设这个接口换成银行转账，或者知乎留言
在你刚刚访问完知乎之后，打开我这篇文章，你可能就被csrf了
你会在不知情的情况下被转账or被留言

在大部分正常的网站，这种操作不太可能是GET请求，上面仅仅为了举例

阅读全文 »
爱客仕-前端团队博客园

发表于 |

之前分享的promise顺便整理出来写成博客，真是一举两得
我是真不太会说，何况是技术性的，临时上阵真的是硬着头皮，还是看我写的吧。
我是先接触到angular中的$q后才知道es6中有promise这个玩意，发现他完全解决了之前的回调再回调的噩梦，大赞！

Promise的引入

先看一段原始代码,为了获取上一个函数的返回结果只能通过回调的方式，若一层层的就出现了下面的代码：

1
2
3
4
5
6
7
step1(function(value1){
  step2(function(value2){
    step3(function(value3){
    // 如此层层嵌套
    })
  })
})

  • 代码不优雅，阅读吃力
  • 不利于维护
  • 还要担心某一层未获取到数据的问题
阅读全文 »
爱客仕-前端团队博客园

发表于 |

国庆期间，看了一本讲表格布局的书，发现一些干货，在此做一下记录，查漏补缺。对于表格，我们的态度通常是不屑一顾，偶尔也会冒出一些疑问，比如：

  • 为什么有的时候给单元格设置了border却无效？

  • 为什么设置了某个单元格宽度，但是列宽并没有增加？

  • 单元格的vertcial-align到底是什么鬼…

下面就来解答这些问题^^

阅读全文 »
爱客仕-前端团队博客园

发表于 |

函数节流策略

这里以underscore的 throttle 和 debounce 两种函数节流策略先举个例子

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略 throttle 和 debounce ，超时设定为15秒，不考虑容量限制。

  • throttle 策略的电梯。保证如果电梯第一个人进来后，15秒后准时运送一次，不等待。如果没有人，则待机。
  • debounce 策略的电梯。如果电梯里有人进来，等待15秒。如果有人进来，15秒等待重新计时，直到15秒超时，开始运送。
阅读全文 »
爱客仕-前端团队博客园

发表于 |

Chrome的V8引擎出来以后，javascript再也不仅仅只是一个简单的web脚本语言了，最为突出的一个特点便是我们所熟悉的Nodejs，基于V8引擎进行解析。还有一个很有意思的玩法，就是开发Chrome扩展小程序。

Chrome扩展程序的界面是基于html来编写的，也就是我们正常开发网页是一样的，这对于前端工程师来说，实在有点轻松。

所以，基础的文件结构是：

  • manifest.json
  • popup.html
  • images/
  • js/
阅读全文 »
爱客仕-前端团队博客园

发表于 |

响应式布局常用方法

在响应式布局中，为了使不同的显示设备拥有更合理的显示效果，比如内容字体大小，我们经常用的是Media query，百分比以及文字大小单位em，rem

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
<html>
  <body>
	<p>测试字体大小  测试字体大小</P>
	<h1>h1字体</h1>
	<div class="content">文本内容</div>
  </body>
</html>
<style type="text/css">
  /* 先设置根元素字体大小 */
  body {
	font-size: 12px
	@media screen and (min-width: 360px) {
	  font-size: 16px
	}
	@media screen and (min-width: 400px) {
	  font-size: 18px
	}
	@media screen and (min-width: 440px) {
	  font-size: 20px
	} 
	@media screen and (min-width: 480px) {
	  font-size: 22px
	}
	@media screen and (min-width: 640px) {
	  font-size: 28px
	}
  }
  p {
    font-size: 1rem
  }
  h1 {
    font-size: 1.25rem
  }
  .content {
	font-size: .85rem
  }
</style>

有时候为了更好地适用所有的设备排版效果，需要添加多个@media，而视口单位的应用可以让媒体查询声明字体大小更方便

阅读全文 »
爱客仕-前端团队博客园

发表于 |

对于这个 CSS 属性很多人可能是既熟悉又陌生，好像用法简单，但又好像经常会不起效果，或者出现不想要的效果，我们今天先从简单开始聊一聊它。

先从 W3 官网 找了找这个属性的定义和解释（有些英文水平不够翻译或不准确，有兴趣的可以自行去查阅英文原文，后续也会慢慢尝试翻译的更准确并改之）。

vertical-align

值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit
默认值: baseline
应用于: inline-level and ‘table-cell’ elements
是否可继承: NO
百分比: 基于自身的 ‘line-height’

对于 table 来说，以上值有着不同的含义，这个以后另开一篇再说，这里所表述的含义只是针对于行内元素。
在以下的定义里，对于行内非替换元素，用于对齐的 box 是那个 height 等于 line-height 的 box；
对于其他元素，用于对齐的 box 是 margin box。

阅读全文 »
爱客仕-前端团队博客园

发表于 |

想了半天标题,终于决定还是它了。主要就是对比两个规范下的模块系统。
对于ES6模块系统,截止目前还没有环境原生支持,大多通过babel转换来实现。node环境的模块系统本身就是CommonJS的一个实现,浏览器环境通过webpack进行构建也可以支持大部分CommonJS,所以这个话题多数场景与宿主环境没有直接关系。

接下来开始VS:

导入模块

CommonJS:

1
2
const Koa = require('koa')
const app = new Koa()

ES6:

1
2
import Koa from 'koa'
const app = new Koa()

看起来似乎ES6更加『正统』,还霸占了两个关键字呢(/得意).

阅读全文 »
爱客仕-前端团队博客园

发表于 |

‘编译’原理

js是属于动态类语言，更多的时候是解释执行。不过如果仔细研究，会发现js引擎在处理js前其实有个完整的短暂生命周期。

因为这个‘编译’不是提前，而是在执行前的几秒，所以属于动态类语言，寄生在引擎上。但是真正执行的代码，也是编译过的。

程序是给人读的，偶尔才给计算机读一下（出自《高性能javascript》）

例：

1
2
3
4
5
6
7
8
function show () {
  console.log(2)
}
function end () {
  console.log(a)
}
show()
end()

上面这个错误的end() 方法，只有在使用end方法的时候才去执行编译，所以如果不使用end方法，那js不会报错。

这就是动态语言的一些基本概念，如果有兴趣可以参考java做对比分析。

阅读全文 »
爱客仕-前端团队博客园

发表于 |

此文提及的浅拷贝排除了a===b的情况[镜像-你变我也变,当然这也不是拷贝]
浅拷贝[克隆初代，后面都是镜像]
深拷贝[克隆全家]

常见拷贝方式

  • Object.assign()
    合并对象，浅拷贝

  • lodash —— _.clone() / _.cloneDeep()
    浅拷贝／深拷贝[遍历浅拷贝]

  • JSON.parse(JSON.stringify(sourceObject))
    常规json的深拷贝取巧方法，效率666

阅读全文 »