在线预览(懒更新…)

github地址:https://github.com/wslx520/llazy/

图片懒加载,是一个非常实用且使用非常广泛的功能。由于历史悠久,所以此功能的实现也达成了不少共识,我先简单列举几点:

  1. 需要后端配合:在输出html代码时,不能直接将图片真实地址赋给img.src,而是用自定义属性保存起来,图片的初始src里放一个占位图
  2. 无论是从左往右,从右往左,从上向下,从下向上,都需要能动态lazyload
  3. 初始图片(占位图)如果有明确的宽高信息就好了,不然load时会发生抖动(这也要靠后台,在输出时输出width与height)

网上有太多太多的实现,大部分都很好,完全可以满足使用需求。不过我是一个任何事情都想自已尝试下用起来心中才踏实的人,所以花了点时间自己写了个llazy.js

兼容性

网上有很多jquery的lazyload插件,而做成jq插件,就可以兼容到jq兼容的浏览器,因为最难兼容的就是选择器了。而llazy不想有依赖,所以只兼容到IE8。为什么?因为IE8就支持querySelector了啊!

判断load的时机

很多lazyload插件在判断load时机时都比较麻烦。其实load的时机从人的角度来说很简单,即:图片框出现在了可见区,就可以load了。关键就在于,如何判断图片出现在了可见区。

对这个问题,大家各显神通,什么 offset, client, page, screen, scroll等属性一长串,能把人看晕。甚至有的人实现出来才发现,只能从上向下拖时触发load,其余情况又不兼容,非常尴尬。

而我就在想,图片,是一个矩形;图片的容器,也是一个矩形。当这两个矩形相交时,不就表示可以触发load了吗?

于是google了一下:如何判断两个矩形相交,获得了一个公式——虽然公式是c语言的,但套入JS一点困难也木有。继续阅读

本文属于《javascript基础纪要》的一节。

今天在家看书:《你不知道的Javascript》,看到构造函数调用时会绑定this,就顺便打开控制台输了一些代码,详细测试了一下。

构造函数简单的讲,即定义出来专供new 式调用的函数。如:

1
2
3
function A(b) {
    this.b = b || 'bbb';
}

然后你就可以通过new ,来构建一个 A 的实例:

1
var a = new A('B')

但是,一个首要的坑是,构造函数与一个普通函数并无不同,如果你故意不使用new,或忘记用new,都会得到奇怪的错误:继续阅读

这几天在写一个简单的只针对单Dom节点的jquery,只考虑IE8+。jq里有个is方法,非常好用,他的用法是:

1
$('#div1').is('#content .sidebar');

这样就可以判断$(‘#div1’)是否是位于#content下面,且具有.sidebar的className了。我也要实现一个。

本来我昨天已经实现了,但今天在搜索mouseleave相关问题时,居然意外的发现了更好的解决方式。就是Element.matches(),他用来判断element是否匹配给定的选择器

他的使用方式简单得和jq.is一样:

1
node.matches('#content .sidebar');

当然,这么好的方法,IE8是不支持的,有的旧的现代浏览器也不支持,但MDN直接给出了polyfill:继续阅读

本文只是提一些关于混淆与压缩的想法,可能会偶发抽风型更新。

混淆

混淆就是尽量让JS代码看不懂。

JS的变量名可以以字母或特殊符号开头,但不能以数字开头.

1a不是一个合法的变量名,但_1a就是

JS的变量名开头能用的特殊符号只有两个:$和_.前者被jquery等发扬光大,后者则由underscore占据.

混淆可以让格式良好的代码都看不懂,就是把变量名函数名通通变成_1,_2,_11,_a,_1a2c这种(easyui就是这么搞的).

相比a,b,c,我觉得_1,_2,_3这种名称更让人混淆,虽然后者更长.继续阅读

加入新公司后,一直忙得飞起。由于在新公司的工作包括写一些公用组件,比如日历啊,分页啊什么的,这个分页组件我觉得要用的人比较多,所以把它独立了出来,做成了一个无依赖的原生JS版本,供需要的人使用。

注:新公司使用了一个自己的框架,写组件的方式与jQuery或原生JS都不一样,所以要做提取工作。

xPagination.js参数说明,示例,在线预览请见:http://wslx520.github.io/pagination/index.html

xPagination.js源码请见:Github

本文只是说明一下写这个组件的一些思路,仅供参考。继续阅读

javascript中for循环非常常用,一般写法如下:

1
2
3
4
for(var i = 0;i< arr.length;i++) {
        var a = arr[i];
        //...
    }

这就是一个常见的,正序循环的for循环。这样写的缺点大家都明白:每次都从arr里取length与i来对比,浪费性能(而且,要是arr的长度是动态变化的,就会出现死循环)。改进这个循环的办法是用变量保存arr.length:

1
2
3
4
for(var i = 0, al = arr.length;i< al;i++) {
        var a = arr[i];
        //...
    }

这样比第一种可以略微提升点性能,要是数组长,可以提升更多。继续阅读

本文属于《Javascript基础纪要》系列

带格式是指,像普通的HTML文档一样,有缩进,有换行,有空格,这种字符串更便于阅读。大家拼innerHTML的时候,巴不得越容易阅读越好。

JS拼字符串,一般喜欢用+。如果想要很多行拼在一起,且方便阅读,一般的做法是:

1
2
3
4
5
6
7
8
9
10
11
12
var
s = '<div class="main">'
    + '<div class="left">'
    +'</div>'
    +'<div class="right">${a},{{a}}'
    +   '<ul>'
    +       '<!-- for: ${people} as ${p} -->'
    +       '<li>${p.name}</li>'
    +       '<!-- /for -->'
    +   '</ul>'
    +'</div>'
+'</div>';

这种已经算比较好了,但还是不够好。比如有太多的+号,有太多的”,这里的结构还算少的,要是再多的话,+和’也会更多。下面是更简洁的方式,也是我一直在用的:继续阅读

本文属于《Javascript基础纪要》系列,虽有凑数之嫌,但还是提一下吧。

JS声明变量的办法我就不说了,我们经常需要连续声明好几个变量,当我是新手时,我是这么做的。

1
2
3
4
var a=1;
var b={};
var c=[];
var d=...

实际上我们可以这样:

1
var a=1,b=2,c=3,d=4;

也就是用,分隔多个变量。

这样不换行的情况,只适合变量值比较单一的情况,如果你的变量是函数或对象,则要换行了:

1
2
3
4
5
6
7
var a=function (){
    var b,c,d;
},
b = {
    b:1,
    a:2
};

这样可以一直写下去,且能保持良好的可读性。当然,最后记得要用;收尾

另外这里我要提一句,最近我用了好几个JS压缩工具,都很智能了,但还是不会智能到把多行里的多个var自动合并成一个var的地步,所以,如果你要压缩你的JS,最好是用这种连续声明方式。jQuery等都是用这种。

本文结束

这里说的源代码,是指未加密,且没做过让人看不懂的混淆的代码。

如果你在官网上下载了整套easyui,会得到个压缩包,里面有个src目录,这就是他开放了源代码的部分组件。里面没有tree

当然,也没有datagrid,treegrid等更复杂的组件。

不过,在plugins目录下,就有这几个。但打开后会发现,里面的代码的变量全是这样的,_1,_2,_3a,_4e….

而且easyui的整个JS,是 jquery.easyui.min.js,没有类似jquery的不带min的文件,也就是说他对上面这些个核心控件,是报着并不怎么愿意开放源码的心态的。继续阅读