标签类目:prototype.js
2009-04-08javascript/jquery

5条评论
388 views

javascript多种数据类型排序

不久前mymickey写过一次表格排序但是速度太慢。现在又写了一个，性能比上一次那一个好了很多而且支持很多种类型的排序，这一次写的能支持:

  • 中文汉字排序、
  • 中英文混合排序、
  • 数据大小排序、
  • 文件类型排序(后缀名排序)
  • 日期时间排序、
  • 价格排序、
  • 中文混合数字排序;

使用方法:文档载入后new tableListSort(arguments,arguments)。

接受两个参数：第一个参数为必须的，可以是字符串ID，也可以是table对象;第二个可选参数，此参数为一个对象，{data:index,fileType:index,fn:function(){}}；对象有三个可选的属性，第一个和第二个为扩展排序的数据类型，第三个参数为排序后需要执行的函数；如果表格数据中有需要排序的数据大小，如1KB 1MB 1GB 这样的数据类型的话,可以{data:index};index为表格需排序的某一列的下标值，从0开始计数，如表格的第二列为1KB MB这样的数据类型，{data:2};对象的第二个属性{fileType:index},此扩展排序为文件类型，如xml,jpg,exe这样的后缀名。index同样为列的下标值。

对象的第三个可选属性为一个排序后需执行的函数{fn:function(){执行的代码}}。

HTML代码中必须的元素为:table元素，table元素的第一行必须使用thead元素包含tr,tr中必须包含可点击排序的元素th;thead下一个sibling元素必须为tbody,tbody中需包含tr。排序数据使用td包含，table也可以包含caption和tfoot。

4月 11日, 更新:添加了排序后升序降序的标示图标。
自定义添加class 如果不打算添加 此属性可以为不设置，鼠标样式mymickey在脚本里面加好了不需要CSS添加。
table.Index为上一次被排序过的坐标值;table.Index初始化为null;
fn:fini函数仅为排序过后需要执行的函数，就算没有它也是可以排序的,这里传递一个排序过后需要执行的函数仅仅是为了添加排序down和up的标示图标.

点击这里查看demo

以下的源代码：

继续阅读 »

2009-02-24javascript/jquery

没有评论
290 views

prototype.js中Function.prototype.bind方法浅解

初次看到prototype.js框架里面的Function.prototype.bind = function() {}和class.create()方法实在有些不理解，因为通常mickey在使用jquery的时候并没多想这些强大的库里面为我们提供的那些及其方便使用的原型方法是如何实现的。所以在看到prototype.js此类的框架的部分源码后，对里面一些基础的类扩展原型方法的巧妙使用理解起来吃力的原因了。但是mickey经过层层分析，段段调用，因此得出了以下结论，如有不足之处请留言指正。

prototype.js中的Function.prototype.bind方法：

1
2
3
4
5
6
7
8
9

Function.prototype.bind = function() {
    var __method = this;
    var args = Array.prototype.slice.call(arguments);
    var object=args.shift();
    return function() {
        return __method.apply(object,
             args.concat(Array.prototype.slice.call(arguments)));
}
}

为所有function对象增加一个新的prototype(原型)方法bind:

  1. 将调用bind方法的对象保存到__method(方法)变量里面。
  2. 将调用bind方法时传递的参数转换成为数组保存到变量args。
  3. 将args数组的第一位[0]元素提取出来保存到变量object。
  4. 返回一个函数。

这个被返回的函数在再次被调用的时候执行如下操作:

  1. 使用apply方法将调用bind方法的函数里面的this指针替换为object。
  2. 将传递到这个匿名函数里面的参数转换为数组，与args数组组合形成一个新的数组，传递给__method方法。

var args = Array.prototype.slice.call(arguments)将这条代码简写来看可以成为这样[].slice.call(arguments);但是这样会给内存里增加一个空的数组对象，为了容易阅读点在简化可以把它假看成为这样的形式slice.call(arguments)，去掉call可以假看成为这样的形式function slice(arguments){….}，其实在slice就是一个为所有数组定义好的prototype方法而已它与我们自定义的原型方法不同的是，它是javascript为开发者预先定义好的内置方法，他只能被数组调用。mickey在编辑器里面alert(Array.prototype.slice)之后得到的就是funciton slice(){…}。

既然slice也只是一个普通函数方法，slice.call(object)这样让slice里面的this临时的被替换一下也是可以的。就如[].slice(){..}里面的this指针会指向调用slice方法的数组对象一样。使用call方法或apply方法可以将调用此方法的对象内的this指针临时性的改变为传递参数中的第一个参数，这一切都是临时性的，它会在函数执行完毕内存释放后重置。
var object=args.shift()将数组中的[0]位置的对象保存到object变量，这个object就是要被替换的指针。

1
2
3
4
5
6

function o(){
    this.num = 1;
    var fn = function(arg){alert(this.num+arg)}.bind(this,2);
    fn();
}
new o()

代码的第3行：一个匿名函数调用了bind方法，并传递o对象和一个数字2到bind函数里面，这两个传递过去的参数都将被转换成为数组形式，o对象会被单独提取出来放入object里。之后bind函数调用完毕，返回一个函数保存到 fn变量里边，现在fn变量里保存了bind函数的返回函数，fn里面的内容就文章第一个代码块的第五行到第七行。
代码第4行：调用fn函数，或者说是在调用bind函数的返回值。这时候会弹出数字“3”。

bind方法中的匿名函数间接保存了它运行环境里面的变量，通常这样的方法称之为“闭包”。

这在很多开源框架为开发者制作出的强大方法和属性便是这样出来的，对于初学者mickey来说以上言论如有不正确的地方还是我想还是可以勉强原谅的，如果您发现了不妥之处请留言指出。

返回顶部