snandy

读jQuery之四（优雅的迭代）

摘要：前面提到jQuery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。第三篇给zChain.js添加了常用选择器，但目前为止zChain.js仍然做不了任何事情。jQuery的操作往往是分两步1，获取元素集合(选择器)2，操作元素集合而第二步操作元素集合的主要... 阅读全文

posted @ 2011-06-07 08:17 snandy 阅读(7222) 评论(3) 推荐(6)

读jQuery之三（构建选择器）

摘要：前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作也仅仅是方法体内返回this。为了叙述每一篇的重点，其示例代码都是最精简的，比如选择器只能传HTMLElement和id。这篇我们增强下选择器，依据2/8原则，这里仅实现最常用的几... 阅读全文

posted @ 2011-06-06 06:57 snandy 阅读(3447) 评论(1) 推荐(4)

读jQuery之二（两种扩展）

摘要：上一篇分析了jQuery对象的组成，这篇分析下它的extend方法。如下jQuery.extend = jQuery.fn.extend = function() { ...};我们可以用$.extend去扩展自定义的对象，如var myself = {name:jack};$.extend... 阅读全文

posted @ 2011-06-03 15:14 snandy 阅读(14436) 评论(7) 推荐(11)

读jQuery之一(对象的组成)

摘要：首次接触jQuery是在2008年，上地的一家小公司。当时的版本是1.1，在此之前我仅接触过Prototype.js。对于jQuery的写法甚是困惑，尤其在使用Prototype的$后，一度不能理解jQuery的$。对于现在前端同学来说，可能第一个接触的就是jQuery了，他们会觉得很习惯，很自然。... 阅读全文

posted @ 2011-06-03 08:44 snandy 阅读(14084) 评论(19) 推荐(23)

Firefox/Opera不支持onselectstart事件

摘要：如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Firefox/Opera不支持onselectstart事件</title> </head> <body> <div id="d1" style="width:200px;height:200px;background:gold;">Text Text</div> <script type 阅读全文

posted @ 2011-06-01 18:36 snandy 阅读(5264) 评论(1) 推荐(0)

自定义事件(Custom event)

摘要：前面用了8篇回顾浏览器中内置事件，且写出了一个基本完整，功能还算强大的事件模块。如果您愿意，还可以继续添加一些功能如事件代理、一次性添加多个事件、和选择器结合一次性为多个元素添加事件。当然这些都不是必须的，可根据需求自行扩展。这篇开始看看自定义事件，自定义事件有许多应用场景。实际上它实现了“观察者模式”。使用过google（或灵图）地图API的同学应该知道地图有个缩放事件zoom，即地图放大或缩小的时候触发。这个zoom就是自定义事件。感兴趣的可以点击此处看看。自定义事件并不深奥，几行代码就可以实现一个var obj = {};obj['click'] = function() 阅读全文

posted @ 2011-05-30 09:10 snandy 阅读(4994) 评论(1) 推荐(2)

事件模块的演变（8）

摘要：这篇为其增加几个功能1，延迟handler的执行2，handler可指定执行上下文，即有时可能需要handler内this不是HTMLElement3，停止事件冒泡和阻止默认行为4，阻止元素默认行为5，停止事件冒泡为此，将添加事件函数on的接口做了修改。第四个参数是个对象，分别可指定以下参数E.on(el, 'click', fn, { once : // true则该handler仅执行一次 delay : // handler延迟执行的时间，以毫秒为单位 scope : // handler执行上下文，默认为el stopEvent : // 阻止el默认行为，停止冒泡 p 阅读全文

posted @ 2011-05-28 18:33 snandy 阅读(1773) 评论(4) 推荐(2)

事件模块的演变（7）

摘要：现有的事件管理都挂放在HTMLElement上的，即每个element有个events属性，该属性可以当成个hash对象。里面存储这该element的所有事件及事件handler。比如给element添加了click/mouseover/mouseout 三个事件，响应函数分别是f1/f2/f3。events的结构如下每一个events['click'] 是一个数组，即存放多个handler。给element的click事件添加3个事件handler，其结构如下往HTMLElement上添加了一个对象，该对象中存放了许多事件handler，可能会存在内存泄露的问题尤其在IE6中阅读全文

posted @ 2011-05-27 14:54 snandy 阅读(1301) 评论(3) 推荐(0)

事件模块的演变（6）

摘要：基于“勿重复判断浏览器”的原则，将添加/删除/触发事件的三个分支重写。如下var w3c = !!window.addEventListener, addListener = w3c ? function(el, type, fn) { el.addEventListener(type, fn, false); } : function(el, type, fn) { el.attachEvent('on' + type, fn); }, removeListener = w3c ? function(el, type, fn) { el.removeEventListener 阅读全文

posted @ 2011-05-26 15:05 snandy 阅读(1525) 评论(0) 推荐(1)

IE6/7/8/9不支持exec的简写方式

摘要：如下var ary = /h/('hello');alert(ary);IE6/7/8/9中报错Firefox/Safari/Chrome/Opera的最新版本均弹出了“h”以上写法等价于var ary = /h/.exec('hello');即Firefox/Safari/Chrome/Opera浏览器中使用exec方法时可以去掉“exec”用 “正则直接量+()” 方式使用。IE10 Platform Preview 仍然不支持该简写方式。相关：https://developer.mozilla.org/en/JavaScript/Reference/Glo 阅读全文

posted @ 2011-05-25 16:57 snandy 阅读(1589) 评论(2) 推荐(0)

勿重复检测浏览器

摘要：拿添加事件示例// 方式1function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.attachEvent('on'+type, fn) }}// 方式2var addEvent = document.addEventListener ? function(el, type, fn) {el.addEventListener(type, fn, false);} : function(el, type, fn) {el.att 阅读全文

posted @ 2011-05-24 10:12 snandy 阅读(2388) 评论(13) 推荐(2)

仅IE不支持setTimeout/setInterval函数的第三个以上参数

摘要： setTimeout/setInterval，这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用setTimeout(function(obj){ alert(obj.a);}, 2000, {a:1});即传了第三个参数，第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处，即解决了回调函数的执行上下文，比如要调用某个对象的某个方法，即可以通过参数把该对象传进去。setTimeout(function(obj){ obj.method();}, 2000, obj);当然，你还可以传多个参数给回调函数，如下setTimeout(fu 阅读全文

posted @ 2011-05-18 17:56 snandy 阅读(5633) 评论(13) 推荐(0)

跨域请求之JSONP 三

摘要： script请求返回JSON实际上是脚本注入。它虽然解决了跨域问题，但它不是万能的。不能接受HTTP状态码不能使用POST提交（默认GET）不能发送和接受HTTP头不能设置同步调用（默认异步）...其最严重的就是不能提供错误处理，如果请求的代码正常执行那么会得到正确的结果。如果请求失败，如404,5... 阅读全文

posted @ 2011-05-05 11:07 snandy 阅读(8713) 评论(10) 推荐(3)

跨域请求之JSONP 二

摘要：续上篇，加两个实用功能1，增加data属性，请求参数2，增加scope属性，可以让回调函数在指定的上下文中执行接口如下Sjax.load(url, { data // 请求参数 (键值对字符串或js对象) success // 成功后回调函数 scope // 回调函数执行上下文 timest... 阅读全文

posted @ 2011-05-04 09:29 snandy 阅读(6722) 评论(1) 推荐(3)

跨域请求之JSONP 一

摘要：跨域请求的方式有很多种，iframedocument.domainwindow.namescriptXDomainRequest (IE8+)XMLHTTPRequest (Firefox3.5+)postMessage (HTML5)后台代理...它们有各自的优缺点，返回的数据格式也各不同，应根据... 阅读全文

posted @ 2011-05-03 06:40 snandy 阅读(39844) 评论(9) 推荐(9)

IE8+中XMLHttpRequest支持timeout属性及ontimeout事件

摘要：不久前我写了一个Ajax工具库。这篇是对请求超时处理的补充。IE8/9的XMLHttpRequest对象已经增加这方面的支持了。IE10 pre1测试也支持。如果W3C能将这两个东东标准化多好啊，不用那么的hack方式实现了。XMLHttpRequest的timeout属性可以设置，表示在等待响应多少毫秒之后终止。即如果在规定的时间内浏览器没有收到响应，那么就触发timeout事件，给xhr.ontimeout赋值为一个响应函数后可被执行。主要代码如下xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ try{ var 阅读全文

posted @ 2011-05-02 08:54 snandy 阅读(7174) 评论(0) 推荐(0)

JS Queue LazyLoad 之二

摘要：上一篇实现了对多个JS文件的顺序加载，这篇再完善丰富一下。加入回调函数，即每个JS文件加载后都有一次回调机会，这个回调是取决于使用者的。也就是说使用者可以配置是否回调，甚至指定某一个或多个回调。非常灵活，可以根据项目需求决定那些资源JS下载后进行回调。此外这篇还解决了重复资源加载问题。接口如下 QueueLazyLoad.js([ { url // JS路径 fn // 回调函数 scope // 回调函数执行上下文，默认为window }, ... ]);示例 QueueLazyLoad_0.2.js loading a.js ag... 阅读全文

posted @ 2011-05-02 05:29 snandy 阅读(2563) 评论(3) 推荐(2)

JS Queue LazyLoad 之一

摘要：前面三篇实现了多个JS并行加载，即各个JS文件相互不依赖。实现时仅顺序将其插入到head中。直至全部插入完毕才进行回调。并行下载的好处是效率较高。但有时我们需要加载的JS模块之间存在相互依赖关系。如a,b,c三个JS文件。b.js中代码依赖于a中定义的某些函数或类，c.js又依赖b.js中的函数或类，而c中具有一个入口函数。这时得保证a,b,c顺序加载，否则如果c早于b或a先加载完，则可能会出现xx未定义之类的错误提示。顺序加载的缺点就是效率较低，因为必须一个个的下载。Queue LazyLoad 0.1版接口非常之简单，如下传个数组url即可 QueueLazyLoad.js([ { ... 阅读全文

posted @ 2011-05-01 15:38 snandy 阅读(3132) 评论(18) 推荐(1)

JS/CSS module LazyLoad 之三

摘要：在开始这篇前，有两个小问题须说明一下情况一LazyLoad.js(['a.js','a.js'],function(){});有人会问为什么要在页面中引入两次a.js？我也想问。其实是多余的。但有人就喜欢这么用，那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量，或者说我更愿意看到不要这么去写。当然我自己用肯定不会这么写的。情况二LazyLoad.js(['a.js'], function(){});LazyLoad.js(['b.js'], function(){});这种写阅读全文

posted @ 2011-05-01 05:48 snandy 阅读(2796) 评论(19) 推荐(4)

JS/CSS module LazyLoad 之二

摘要：上一篇完成的JS的按需加载，这篇添加个新方法css，完成对CSS文件的加载。接口与JS相同，示例如下LazyLoad.css(['a.css', 'b.css', 'c.css'], function(){ console.log('css模块加载完毕');});Firebug中效果如下，上一篇对JS的加载实现是通过script元素，css则是通过link元素。而link元素仅IE6/7/8/9和Opera中支持其onreadystatechange事件，Firefox/Safari/Chrome既不支持onreadystatec 阅读全文

posted @ 2011-04-30 12:27 snandy 阅读(2157) 评论(2) 推荐(2)

JS/CSS module LazyLoad 之一

摘要：随着web app中JS越来越多，有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度，提高页面渲染效率就需要让这部分暂时不用的JS延迟加载，即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列，即各个JS文件是并行下载的，只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载，每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。先给出使用接口LazyLoad.js( urls // js文件路径 fn // 全部加载阅读全文

posted @ 2011-04-30 10:03 snandy 阅读(3881) 评论(14) 推荐(0)

IE6/7/8/Opera不支持script元素的onerror事件

摘要：如下<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>IE6/7/8/Opera不支持script元素的onerror事件</title> <script src="jquery-1.5.23.js" onerror="alert(3)"></script> </head> <body> </body></html>scrip 阅读全文

posted @ 2011-04-29 11:25 snandy 阅读(2325) 评论(0) 推荐(1)

新API解析JSON-Ajax之七

摘要：这是Ajax系列的最后一篇。ECMAScript 5发布有段时间了，其中就包括了解析JSON的原生API-JSON.parse。许多浏览器已经支持了。主流JS库如JQuery，Ext，Prototype都优先使用JSON.parse，不支持该方法的浏览器则使用new Function或eval。为何优先使用JSON.parse，我想一个就是性能，原生的总是要快一些吧。此外JSON.parse较eval也更安全。这里也当然不能落后了，优先使用JSON.parse，不行再用new Function方式。最后失败了会给failure的第二个参数msg赋值为"parse json erro 阅读全文

posted @ 2011-04-27 08:09 snandy 阅读(3726) 评论(6) 推荐(6)

创建xhr时异常处理-Ajax之六

摘要：前面几篇一直采用最精简的方式创建Ajax的核心XMLHttpRequest对象var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');没有考虑其可能出现的异常，即创建失败。其实个人认为以上创建方式创建失败的几率非常之少，起码在IE6/7/8/Firefox/Safari/Chrome/Opera如此，其它浏览器就不知了。但作为一个基础库还是完善下，如果出现创建失败，failure的第二个参数msg将会被赋值为"create xhr f 阅读全文

posted @ 2011-04-27 06:17 snandy 阅读(5466) 评论(2) 推荐(1)

仅IE9/10/(Opera)同时支持script元素的onload和onreadystatechange事件

摘要：如下 IE9/10同时支持script元素的onload和onreadystatechange事件结果：IE6/7/8 : 弹出2IE9/10 : 弹出2，1Firefox/Safari/Chrome/Opera : 弹出1测试结果可以看出，IE9后已经开始支持script的onl... 阅读全文

posted @ 2011-04-26 17:28 snandy 阅读(7083) 评论(2) 推荐(4)