今年重新找工作的时候面试官问了个问题,jQuery的链式函数调用的原理。当时一脸懵逼,因为完全没有去了解过。(事实证明面试能够很好的提高自己)

然后感觉直接去看jq的源码,要仔细看好感觉得花很长时间,还是先看看zepto,反正组织代码的原理都差不多。

构造

在立即调用函数中声明了3个东东:

1
2
3
4
5
6
7
8
9
10
zepto = {};
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ''
}
$ = function(selector, context){
return zepto.init(selector, context)
}

当然声明的位置各有不同,Z函数很显然是构造函数,zepto是构造中间的一些方法的保留吧,然后$上挂上所有对外的方法。构造调用的基本流程是,$调用zepto的init,然后init函数做一些处理,再返回一个Z的`return zepto.Z(dom, selector)`,其中zepto.Z返回的就是一个构造函数Z。这样做的处理是要在$上吧zepto挂上,可以在插件里面改写。

因子

在看Zepto源码的时候发现它做类型判断的时候用的下面的方法:

1
2
3
4
5
6
7
var a = {},
toString = a.toString;
toString.call(function(){}); // [object Function]
toString.call({}); // [object Object]
toString.call(123); // [object Number]
toString.call("sasa"); // [object String]

上面这个判断类型的方法好像在js高程中好像看见过,不过忘了。然后让我对toString这个方法产生了好奇心,于是去多了解了下。

在Zepto里面有一些没有暴露出来的私有方法,有一些值得借鉴的地方,比如里面用来判断类型的type函数。大概纪录如下:

一些类型判断方法

判断数组:

1
2
isArray = Array.isArray ||
function(object){ return object instanceof Array }

类型判断函数

1
2
3
4
5
6
7
8
9
10
11
var class2type = {},
toString = class2type.toString;
// class2type map
$.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase()
});
function type(obj) {
return obj == null ? String(obj) :
class2type[toString.call(obj)] || "object"
}

上面的类型判断,基本上可以判断所有的类型。主要是改变toString的this指向来实现的。

在之前一段时间看了个首屏优化细节的文章,然后在自己项目里实际操作了下。

现在的业务逻辑涉及移动端支付,所以第一个需要考虑的就是首屏时间,如果首屏时间过长,用户体检是十分差的。其实就做了很简单一件事,在移动端将涉及页面渲染的样式表写成了内联样式。

大家都知道,请求了html之后才回根据html里面的链接去请求相应的样式,图片,视屏种种。而首屏时间就是将涉及页面渲染的种种全部加载完毕,浏览器render完毕之后的时间。这里也就能够理解要将样式表写在head里面,而把js写在</body>之前的原因了。因为css涉及页面渲染,而js大多是业务逻辑,大多数不涉及页面渲染,所以完全可以把js的解析放在页面渲染之后。当然,你也注意到,大多数js不涉及页面渲染,而少数js也涉及页面渲染的,这时候可以把js放在<body>后面,另外这里也要注意,dom节点可能还没有生成,所以操作上一般是在<body>上加class,然后配合css的子父选择器。

本文翻译自 12 little known css facts(the-sequel)
原作者是Natalia Balska

原作者在一年前也发表过一篇12个鲜为人知的css现象,然后这篇文章现在也还很受欢迎,有时间的同学可以看看。原作者又收集了更多的鲜为人知的css性质,也就是这篇文章的来源。

1、border-radius 有“/”的语法

首先,下面这个你信或则不信它都是一条border-radius的正确的代码:

1
2
3
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

如果你没见过,可能会有些困惑,下面是一些介绍:

如果给定的值中有“/”,则在“/”前面的值是指定水平方向的半径(radius),在“/”后面的就是指定垂直方向的半径(radius)。如果没有“/”,就是同时指定水平和垂直方向的半径(radius)。