关于javascript Array的sort函数

Array.prototype.sort方法的第一个参数实际是一个定义了比较规则的函数,内部程序在排序时会根据这个给定的定义去排序。

1
2
3
4
var list = [4,2,6,7,1,9,3,5,11,8,10];
list.sort(function(a, b) {
return a > b ? 1 : -1;
});

规则函数compareFunc

这个定义了比较规则的compareFunc有两个参数(a, b),返回值有0,大于0,小于0三类。

  • 返回值小于0时,将a放在b的前面
  • 返回值等于0时,保持原来位置不变
  • 返回值大于0时,将b放在a的前面

实际上因为a和b原先的顺序是a在b前面,所以只有当返回大于0时,才会发生交换。

排序方式

Read More

repaint和reflow的概念

I. repaint

repaint(或叫redraw)发生在当一个元素从可见变成不可见或者从不可见变成成可见,但是并未发生布局上的变动的时候。

发生在以下情况的时候

  • 给某元素加了个outline
  • 改变了某元素的背景颜色
  • 改变了某元素的visibility属性
  • 其他

repaint是比较耗时的,因为所有相关的元素都需要检查一遍从而确定是否展现和怎么展现。

II. reflow

Read More

图片懒加载设计要点

看了一下图片懒加载的相关文章,总结了一些设计要点

  1. html下的img标签中首先会给定一个通用的背景图的src,然后一般会指定一个data-src,用来表示真实的图片地址
1
<img src="bg.png" data-src="tree.jpg">
  1. 图片一旦进入viewport,就会发生用data-src的值替换src值的过程

  2. 侦听scroll,resize等事件,触发后去判断出所有在viewport(或提前一定的量,比如在viewport之外200px也算)里的图片便签

  3. 具体判断某张图是否在viewport范围内的方法:满足以下之一即为在范围内

    • 该图的下边缘是否在viewport的上边缘之下
    • 该图的上边缘是否在viewport的下边缘之上

一道能综合考察js的Array方法的题

leetcode部分题目支持用javascript来答了,去尝试了一下,结果有一道题,看起来很简单,写起来却总是忘记这忘记那的。

写完之后才觉得这一题其实挺考验你对Array的若干个常用方法的掌握程度的。

我写了下面的解答,通过了所有测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* @param {number[]} nums
* @param {number} k
* @return {void} Do not return anything, modify nums in-place instead.
*/
var rotate = function(nums, k) {
var n = nums.length;
var shift = k % n;
if (k === 0 || n === 0 || shift === 0) return;
var firstHalf = nums.slice(n - shift);
nums.splice(n - shift, shift);
Array.prototype.unshift.apply(nums, firstHalf);
};

回过头来看

  1. 需要注意各种边界和极端情况,做出特殊处理。

  2. .slice()方法两个参数分别是start和end,不会对原数组更改,返回的是一个新的复制的数组。

  3. 而.splice()方法的前两个参数一个是start,另一个是deleteCount,即删除的个数,会对原数组更改,更改后的是去掉指定范围内的元素之后的数组。

  4. 想往一个数组前部插入另一个数组时,可以用unshift()方法,但是要注意的是,不能以数组形式传入第一个参数,因为这样会被当成一个数组元素,而不是若干个元素插入数组前部。所以这里我用到了apply方法,利用了它的第二个参数的特点。

一种奇怪的table展现问题

最近v2ex上有位v友问了个css的奇怪的展现问题,且不论html代码是如何的“不常规”,我的兴趣点在于代码那么写为什么会出现这种“非直觉”的效果?

翻了css2.1规范,总算找到些蛛丝马迹。

该v友的jsfiddle上的demo我fork了一份 http://jsfiddle.net/XXXLtender/5jvcoj98/

从demo中可以看出,由于右下角的那块的ul里面没有元素li的内容,导致了相邻的两个inline-table垂直方向上没有对齐。

你或许会很奇怪,inline-table内部元素的一些不同竟会导致整个inline-table在垂直方向上发生一些变化,这太匪夷所思了。。。

于是我去翻阅了一下规范,找到相关的部分,果然找出些蛛丝马迹。

首先我想到既然是inline-table这样的inline-level的元素,它们在水平方向上的展现形式是排成一行,它们的box会被包含在line box里。那么排成一行时它们垂直方向上的对齐方式总有些讲究吧,没指定vertical-align,默认的应该是baseline。

Read More

HTTP缓存

你可能没有意识到它们的存在,可是它们确实是当代互联网一个举足轻重的概念。

基本概念

缓存大致可以分为两种:

  1. 应用级别的缓存,如APC(Alternative PHP Cache)、Memcache、Redis以及其他内存存储工具
  2. HTTP缓存-代理缓存(proxy)、网关缓存(gateway)、浏览器缓存

本文只谈论HTTP缓存的相关内容。

浏览器缓存,缓存的使用对象是个特定的用户。

代理缓存,是网络设施层面的缓存,所以涉及范围非常大,通常有大量的用户在使用。这类缓存通常由ISP或大公司来提供。

网关缓存,和代理缓存类似,也是面对大量用户的,但不同的是,网关缓存通常是为某个特定的网站服务的,它们通常架设在原始网站的前端。CDN服务就是给某一个网站在各地架设网关缓存,以此来提高用户对网站的访问速度。

HTTP缓存如何工作?

缓存系统会有一套特定的规则来决定是否使用缓存,其中一部分的规则是由公用协议(HTTP1.0和HTTP1.1)来规定的,另一部分是缓存管理者(浏览器的使用者或者缓存管理员)来决定的。

通常,这些规则如下:

Read More

inline replaced element和inline non-replaced element

一直以来,由inline non-replaced elements造成的一些不那么直觉化的css效果,常常让我疑惑,只知其然,不知其所以然,甚至有时候记混了连只知其然都做不到。这类问题,我觉得有必要从规范角度来做下剖析,利于记忆之外,还可以对css有更深入的了解。

首先得解释一下replaced element和non-replaced element的区别

css2.1 规范里对replaced element是这样定义的

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user’s bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.

The content of replaced elements is not considered in the CSS rendering model.

简单来说,就是replaced element指的是那些展现方式已经脱离css的束缚(或者说独立于css)的元素,最常见的这类元素就是<img>元素了,图片有它内在的长宽或长宽比率。通常这类元素展现的并不是该元素标签所包含的子元素内容,而是相当于完全被另一个东西给“替换”了一样。常见的replaced element有<img>,<object>,<video>以及表单类<textarea>,<input>,另外<audio>,<canvas>在某些情况下也属于replaced element,还有,用css的content属性添加的对象也是一种anonymous replaced element。

而non-replaced element就是replaced element的反面,一般大部分标签都是non-replaced element。

那为什么会有这两种分类?

Read More

一种神奇的绝对定位居中方式

这是一种不常见的水平垂直居中方法,只要被居中的目标元素的高度是指定的,同时附加上以下设置,就可以实现居中。

1
2
3
4
5
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

demo可以看这个jsFiddle

这中居中方式有一些很明显的优点

  • 支持IE8
  • 可以居中任何东西
  • 对于百分比和min-/max-能做到响应式支持

为什么这个方法会有这种特效?

D U A N G ~

其实这是规范中的内容所导致的,CSS2.1的第10章Visual formatting model details里主要讲了各种情况下元素的尺寸应该如何计算的问题。

其中宽度上对于absolutely positioned, non-replaced elements有一句话

If none of the three(left,width,right) is ‘auto’: If both ‘margin-left’ and ‘margin-right’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values

高度上

If none of the three(top,height,bottom) are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values

意思是,当width,left,right属性都不是’auto’的时候,并且margin-left和margin-right都是’auto’,这种情况下,浏览器会保证margin-left和margin-right相等;宽度也同理。

有了这两条理论依据的支持,上面的居中方法的神奇之处也不难理解了。

mouseover和mouseenter的区别

mouseover:
当鼠标移动到带有该事件绑定的元素或由这样的元素移动到其子元素时,该事件被触发

mouseenter:
当鼠标移动到带有该事件绑定的元素时,该事件被触发

事实上,mouseenter在IE中是支持的,但在Firefox,Chrome以及Safari中并不支持。jQuery中mouseenter在所有浏览器里都支持是因为它在这些不支持的浏览器中模拟了这个事件。但是mouseenter事件已经被写入最新的DOM Level 3规范中,这些浏览器的原生支持理论上会逐步实现,因为要遵守规范。

附上两个demo
mouseover
mouseenter