加入收藏 | 设为首页 | 会员中心 | 我要投稿 温州站长网 (https://www.0577zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 服务器 > 搭建环境 > Linux > 正文

jQuery中的编程范式详解

发布时间:2016-11-23 14:48:47 所属栏目:Linux 来源:站长网
导读:本文详细分析了jQuery中的编程范式。分享给大家供大家参考。具体如下: 浏览器前端编程的面貌自2005年以来已经发生了深刻的变化,这并不简单的意味着出现了大量功能丰富的基础库,使得我们可以更加方便的编写业务代码,更重要的是我们看待前端技术的观念发

当你第一眼看到$函数的时候,你想到了什么?传统的编程理论总是告诉我们函数命名应该准确,应该清晰无误的表达作者的意图,甚至声称长名字要优于短名字,因为减少了出现歧义的可能性。但是,$是什么?乱码?它所传递的信息实在是太隐晦,太暧昧了。$是由prototype.js库发明的,它真的是一个神奇的函数,因为它可以将一个原始的DOM节点提升(enhance)为一个具有复杂行为的对象。在prototype.js最初的实现中,$函数的定义为
复制代码 代码如下:var $ = function (id) {
nbsp;nbsp;nbsp; return "string" == typeof id #63; document.getElementById(id) : id;
};

这基本对应于如下公式
nbsp;nbsp;nbsp;nbsp;nbsp; e = $(id)

这绝不仅仅是提供了一个聪明的函数名称缩写,更重要的是在概念层面上建立了文本id与DOM element之间的一一对应。在未有$之前,id与对应的element之间的距离十分遥远,一般要将element缓存到变量中,例如
复制代码 代码如下:var ea = docuement.getElementById('a');
nbsp; var eb = docuement.getElementById('b');
nbsp; ea.style....
但是使用$之后,却随处可见如下的写法
复制代码 代码如下:$('header_'+id).style...
nbsp; $('body_'+id)....
id与element之间的距离似乎被消除了,可以非常紧密的交织在一起。

prototype.js后来扩展了$的含义,
复制代码 代码如下:function $() {
nbsp;nbsp;nbsp; var elements = new Array();
nbsp;nbsp;nbsp;
nbsp;nbsp;nbsp; for (var i = 0; i lt; arguments.length; i++) {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; var element = arguments[i];
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; if (typeof element == 'string')
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; element = document.getElementById(element);
nbsp;nbsp;nbsp;
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; if (arguments.length == 1)
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; return element;
nbsp;nbsp;nbsp;
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; elements.push(element);
nbsp;nbsp;nbsp; }
nbsp;nbsp;nbsp;
nbsp;nbsp;nbsp; return elements;
}

这对应于公式:
nbsp;nbsp;nbsp; [e,e] = $(id,id)

很遗憾,这一步prototype.js走偏了,这一做法很少有实用的价值。
真正将$发扬光大的是jQuery, 它的$对应于公式
nbsp;nbsp;nbsp; [o] = $(selector)
这里有三个增强:
nbsp; A. selector不再是单一的节点定位符,而是复杂的集合选择符
nbsp; B. 返回的元素不是原始的DOM节点,而是经过jQuery进一步增强的具有丰富行为的对象,可以启动复杂的函数调用链。
nbsp; C. $返回的包装对象被造型为数组形式,将集合操作自然的整合到调用链中。

当然,以上仅仅是对神奇的$的一个过分简化的描述,它的实际功能要复杂得多. 特别是有一个非常常用的直接构造功能.
复制代码 代码如下:$("lt;tablegt;lt;tbodygt;lt;trgt;lt;tdgt;...lt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;")....

jQuery将根据传入的html文本直接构造出一系列的DOM节点,并将其包装为jQuery对象. 这在某种程度上可以看作是对selector的扩展: html内容描述本身就是一种唯一指定.

$(function{})这一功能就实在是让人有些无语了, 它表示当document.ready的时候调用此回调函数。真的,$是一个神奇的函数, 有任何问题,请$一下。

总结起来, $是从普通的DOM和文本描述世界到具有丰富对象行为的jQuery世界的跃迁通道。跨过了这道门,就来到了理想国。
nbsp;nbsp;
4. 无定形的参数:专注表达而不是约束

弱类型语言既然头上顶着个"弱"字, 总难免让人有些先天不足的感觉. 在程序中缺乏类型约束, 是否真的是一种重大的缺憾#63; 在传统的强类型语言中, 函数参数的类型,个数等都是由编译器负责检查的约束条件, 但这些约束仍然是远远不够的. 一般应用程序中为了加强约束, 总会增加大量防御性代码, 例如在C++中我们常用ASSERT, 而在java中也经常需要判断参数值的范围
复制代码 代码如下:if (index lt; 0 || index gt;= size)
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; throw new IndexOutOfBoundsException(
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; "Index: "+index+", Size: "+size);
很显然, 这些代码将导致程序中存在大量无功能的执行路径, 即我们做了大量判断, 代码执行到某个点, 系统抛出异常, 大喊此路不通. 如果我们换一个思路, 既然已经做了某种判断,能否利用这些判断的结果来做些什么呢#63; javascript是一种弱类型的语言,它是无法自动约束参数类型的, 那如果顺势而行,进一步弱化参数的形态, 将"弱"推进到一种极致, 在弱无可弱的时候, weak会不会成为标志性的特点#63;

看一下jQuery中的事件绑定函数bind,
nbsp;nbsp; A. 一次绑定一个事件复制代码 代码如下:$("#my").bind("mouseover", function(){});
nbsp;nbsp; B. 一次绑定多个事件复制代码 代码如下:$("#my").bind("mouseover mouseout",function(){})
nbsp;nbsp; C. 换一个形式, 同样绑定多个事件
复制代码 代码如下:$("#my").bind({mouseover:function(){}, mouseout:function(){});
nbsp;nbsp; D. 想给事件监听器传点参数
复制代码 代码如下:$('#my').bind('click', {foo: "xxxx"}, function(event) { event.data.foo..})
nbsp;nbsp; E. 想给事件监听器分个组
复制代码 代码如下:$("#my").bind("click.myGroup″, function(){});
nbsp;nbsp; F. 这个函数为什么还没有疯掉#63;#63;#63;
nbsp;nbsp;
就算是类型不确定, 在固定位置上的参数的意义总要是确定的吧#63; 退一万步来说, 就算是参数位置不重要了,函数本身的意义应该是确定的吧#63; 但这是什么#63;

(编辑:温州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读