分类目录归档:Javascript

关于javascript的教程,心得及应用

Javascript:Element.matches()与jQuery.is的实现

这几天在写一个简单的只针对单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: 继续阅读Javascript:Element.matches()与jQuery.is的实现

Javascript代码的混淆与加密(压缩)

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

混淆

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

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

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

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

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

相比a,b,c,我觉得_1,_2,_3这种名称更让人混淆,虽然后者更长. 继续阅读Javascript代码的混淆与加密(压缩)

Javascript分页组件:xPagination.js

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

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

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

xPagination.js源码请见:Github

本文只是说明一下写这个组件的一些思路,仅供参考。 继续阅读Javascript分页组件:xPagination.js

Javascript:for循环的几种节省字符的写法

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:for循环的几种节省字符的写法

推广一个良好的拼接带格式字符串的方法

本文属于《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:声明一连串变量

本文属于《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等都是用这种。

本文结束

jquery easyui tree的源代码?没有

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

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

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

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

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

Javascript:万能的日期格式化函数

最近在工作项目中,用到了日期格式化,要求传到后台的日期格式必须是2012-02-02这样的。蛋疼的是Javascript都没有自己原生的日期格式化函数,只能自己写一个。

写的时候我就想写一个通用的,比如这次要的是2012-02-02,下次说不定就要2012/02/02或2012-2-2,总不能下次又写吧。

在发源代码之前,我要列举一下约定俗成的日期格式(也就是Windows系统日期与时间的格式),如下: 继续阅读Javascript:万能的日期格式化函数