再来说Javascript中的原型

toString是从哪来的

先来看一段代码

1
2
var obj = {};
console.log(obj.toString()); // 结果是:"[object Object]"

这段代码很简单,一个对象调用了toString方法,但是如果我问你为什么可以调toString方法?toString是从哪来的?

对于大多学过几天js的人知道,因为obj是继承了Object对象,而toString是Object对象的方法,所以obj可以调toString

那么很明显,这个回答是正确的错误答案,因为关键字没有说到:原型

2016-12-22

浏览器缓存测试情况

no-cache的情况

1
2
3
4
5
6
7
HTTP/1.1 200 OK
Cache-Control: no-cache
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Accept-Ranges: bytes
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534
打开方式 chrome safari firefox
刷新 304 304 304
链接打开 304 304 304
地址栏回车 304 304 304

304的原因是:请求头里带上了If-Modified-Since,这个请求头是判断Last-Modified的时间是否大于http连接建立时间,没有大于,所以返回304

2016-12-22

跨域问题

同源策略

什么是同源,满足三个条件相同

Ps. IE例外:不考虑端口;Trust Zones(可信任的域)的域名可以看作是同源

同源策略的限制

  • 通常允许进行跨域写操作(Cross-origin writes)。例如链接(links),重定向以及表单提交。
  • 通常允许跨域资源嵌入(Cross-origin embedding)。就是跨域标签了<scipt>,<link>,<img>,<video>,<object>,<iframe>
  • 通常不允许跨域读操作(Cross-origin reads)。但常可以通过内嵌资源来巧妙的进行读取访问。

2016-12-21

关于304缓存与200from cache缓存

我们常见的浏览器缓存有两种,一种状态码是200,size显示是from-cache,另一种状态码是304,也就是通常我们说的304缓存

根据HTTP协议规范的定义,浏览器的缓存机制分为两块,也就是规范中的4.2. Freshness 和 4.3. Validation。

  • Freshness(新鲜度),这个条件成立,就是200 from cache缓存,
  • Validation(验证),当Freshness不成立时,就要看Validation,成立就是304缓存,不成立,拉取的就是新数据

但是实际情况,某些浏览器并不是完全按照协议来实现缓存机制的,这个后面讲,先看Freshness和Validation是什么东西

Freshness(新鲜度)

决定一个资源是不是足够新鲜,需要看资源的两个响应头Expires和Cache Control,他们是用来进行Freshness验证,也就是提供客户端检测文件是否足够新鲜,可以无需向服务端发起Validation请求就能保证并未过期可以直接使用。

Expires

http1.0版本定义的,明确的过期时间

1
expires:Sat, 30 Dec 2017 00:52:32 GMT

2016-12-21

详细说一下这道js面试题

今天面试遇到的一个问题,关于js的基本语法问题,因为我做错了,所以这种题目很无聊,额…严肃的说,其实这道题还是考察了挺多东西的,所以还是要拿来说说

先看题目

1
2
3
4
5
6
7
function Dog() {
a = function() {console.log('1')};
}
Dog.a = function() {console.log('2')};
Dog.prototype.a = function() {console.log('3')};
var a = function() {console.log('4')};
function a() {console.log('5')}

下面代码会输出什么:

1
2
3
4
5
6
7
a();
Dog.a();
a();
Dog.a();
new Dog.a();
new Dog().a;
new new Dog().a;

2016-12-16

在Mac中统计代码行数,find的命令怎么用

先来看怎么用

1
2
3
4
5
# 统计文件类型是`*.m`,`*.mm`,`*.cpp`,`*.h`,`*.rss`的文件代码行数
find . "(" -name "*.m" -or -name "*.mm" -or -name "*.cpp" -or -name "*.h" -or -name "*.rss" ")" | xargs wc -l

# 统计js文件行数
find . "(" -name "*.js" ")" | xargs wc -l

2016-12-14

华为交换机配置

先要连上设备

准备

  1. 一台电脑(Windows系统,或是虚拟机都可以)
  2. 一根console线(RJ45转R232串口的线)
  3. 一个R232转USB线(如果电脑有串口可以忽略)
  4. USB 2.0 To COM Device驱动(如果电脑有串口可以忽略)
  5. 超级终端(win7以上需要)

连接

把console线接到交换机的console口中,然后接串口转USB线,然后接电脑,如果是2016MBP,你还得转接Type-c。。。 holy shit!!!

先装驱动:USB 2.0 To COM Device

打开超级终端,没有说到的参数,随便写,

串行选项中,需要配置

  1. 端口,看设备管理里是COM几被连接上
  2. 波特率:9600
  3. 数据位:8
  4. 奇偶校验:无
  5. 停止位:1

2016-12-13

Javascript中的数组-Array

本文主要供平时健忘症发作的时候查阅, 详细的可以参考这个http://javascript.ruanyifeng.com/stdlib/array.html

操作当前数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
pop()		// 从尾部去掉
push() // 从尾部加入


unshift(insert1,insert2…insertN) //从头部加入,不支持ie
shift() //从头部删除

sort(sortby) // sortby非必填

reverse() //反转数组

splice(index,howmany,insert1,insert2…insertN)
// insert非必填
// 返回值是切割出来新的数组,

2016-11-11

Flex布局学习笔记

之所以有本文的原因是,在某些网络环境下,阮一峰的博客有时会打不开(或者很卡),所以把图片内容去掉后复制过来,方便自己查阅

原文链接:Flex布局教程:语法篇

1
2
3
4
5
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

容器样式(.box)

flex-direction

  • flex-direction: row | row-reverse | column | column-reverse;
属性 描述
row(默认值): 主轴为水平方向,起点在左端。
row-reverse: 主轴为水平方向,起点在右端。
column: 主轴为垂直方向,起点在上沿。
column-reverse: 主轴为垂直方向,起点在下沿。

flex-wrap

  • flex-wrap: nowrap | wrap | wrap-reverse;
属性 描述
nowrap(默认): 不换行。
wrap: 换行,第一行在上方。
wrap-reverse: 换行,第一行在下方。

flex-flow

  • flex-flow: <flex-direction> || <flex-wrap>;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

2016-11-11