摘要：上一篇完成的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
阅读全文
摘要：随着web app中JS越来越多，有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度，提高页面渲染效率就需要让这部分暂时不用的JS延迟加载，即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列，即各个JS文件是并行下载的，只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载，每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。先给出使用接口LazyLoad.js( urls // js文件路径 fn // 全部加载
阅读全文
摘要：如下<!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
阅读全文
摘要：这是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
阅读全文
摘要：前面几篇一直采用最精简的方式创建Ajax的核心XMLHttpRequest对象var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');没有考虑其可能出现的异常，即创建失败。其实个人认为以上创建方式创建失败的几率非常之少，起码在IE6/7/8/Firefox/Safari/Chrome/Opera如此，其它浏览器就不知了。但作为一个基础库还是完善下，如果出现创建失败，failure的第二个参数msg将会被赋值为"create xhr f
阅读全文
摘要：如下 IE9/10同时支持script元素的onload和onreadystatechange事件 结果：IE6/7/8 : 弹出2IE9/10 : 弹出2，1Firefox/Safari/Chrome/Opera : 弹出1测试结果可以看出，IE9后已经开始支持script的onl...
阅读全文
摘要：1，onload事件<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onload</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onload="
阅读全文
摘要：上一篇只是检查是否超时，超时后却不做任何处理。这里如果超时，会给failure第二个参数msg赋值为“request timeout”。这样使用者能清楚的知道一次HTTP请求的细节。实现细节较为诡异，慢慢体会。这里timeout的效果和JQuery，Ext是一样的。如下Ajax.text('../servlet/Ajax',{ timeout : 2000, success : function(result){}, failure : function(xhr,msg){ alert(msg); }});完整源码Ajax =function(){ function reque
阅读全文
摘要：有时发出一个请求，后端什么时候返回前端并不清楚。有可能是1秒，3秒甚至更长时间。因此有必要添加一个参数来设置等待的时间，如果在设定的时间内没有返回结果则放弃该次请求。 实现思路：发出请求后指定一个时间，如超过该时间没有返回结果则忽略。window对象的setTimeout方法再次起作用了(setTimeout能解决很多IE下古怪的bug)代码如下：var timeout = opt.timeout || 0;//指定是否启用请求超时处理，不传参数timeout则忽略var isTimeout = false; //一个标志位，是否超时if(timeout>0){ setTimeout(f
阅读全文
摘要：Ajax中的x指的是XML，早期的数据格式都喜欢用XML，然后一层层的解析。当然简单的也会返回HTML(或称HTML片段)。现在使用JSON格式的也很多。根据不同需求，给Ajax对象添加了三个实用方法：Ajax.text、Ajax.json、Ajax.xml。 Ajax.text返回纯文本，即responseText Ajax.json返回json，即会将responseText解析成js对象 Ajax.xml返回xml文档，即responseXML 使用方式与Ajax.request相同，第一个参数是请求url，第二个是配置参数。完整代码Ajax = function(){ function
阅读全文
摘要：今天，看一个国外网站发现人家获取head元素如下var head = document.head || document.getElementsByTagName('head')[0];后面的是我们常用的方式，前面的document.head 着实第一次见。查资料发现原来是html5的东东。的确简单了，一个属性搞定。当然，IE6/7/8不支持。IE9/Safari/Chrome/FF/Opera均支持（最新版本）。记录下。html4中HTMLDocument接口如下html5中HTMLDocument接口如下相关：http://www.w3.org/TR/DOM-Level-2
阅读全文
摘要：接上篇。引入了一个私有函数_serialize，它会把js对象串行化成HTTP所需参数模式，接受如下两种结构{name:'jack',age:20} --> name=jack&age=20{fruit:['apple','banana','orange']} --> fruit=apple&fruit=banana&fruit=orange请求后台的一个servlet，发送参数name=jack,age=20，默认使用异步，GET方式。现在data可以如下了Ajax.request('
阅读全文
摘要：Ajax，或许已经是老掉牙的话题。我学习总结一下。大概会有6篇，从基本的Ajax直至高级的应用。最后会形成一个实用的Ajax工具库。创建一个基本的Ajax应用不需要太多的代码，大概三个步骤，几十行代码即可。 1，创建Ajax的核心对象XMLHttpRequest 因为浏览器之间的不兼容，IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。互联网及各种书籍中有着多种创建方式，有的复杂很多行代码，有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了function cretaeXHR(){ try{ return new XML
阅读全文
摘要：上一篇写了个工具函数
class，这篇再完善以下。实现以下功能1，继承2，子类继承父类时，不继承父类的私有属性/∗∗∗@paramStringclassName∗@paramString/FunctionsuperCls∗@paramFunctionclassImp∗/functionclass(className, superCls, classImp){ if(superCls === '') superCls = Object; function clazz(){ if(typeof this.init == "func
阅读全文
摘要：之前讨论过JavaScript中的写类方式。但没有讨论私有的实现。这篇看下。我们知道JS中私有属性的实现本质就是 var + closure。如下function Person(n, a){ // public this.name = n; // private var age = a; this.getName = function(){ return this.name; } this.getAge = function(){ return age; }}测试如下，age是私有的，使用点操作符无法获取到，而只能使用getName方法。var p = new Person('jack
阅读全文
摘要：我们很容易被漂亮的代码吸引，也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不，我就收集了一系列形如 “是否为……？” 的判断的boolean函数。isNull: function(a){ return a === null;},isUndefined: function(a){ return a === undefined;},isNumber: function(a){ return typeof a === 'number';},isString: function(a){ return typeof a === 'string';},
阅读全文
摘要：/*** JavaScript ModelDialog v0.1** new ModelDialog({ * caption 标题 '对话框标题'(默认) * template 主体内容 ''(默认) * dialogCls 对话框className 'md-dialog'(默认) * headCls 头部className 'md-head'(默认) * btnCloseCls 关闭按钮className 'md-close'(默认) * bodyCls 主体className 'md-body'
阅读全文
摘要：基本拖拽 jQuery插件 效果 拖拽状态：x:0, y:0 Drag me. Drag me. 任意方向 水平方向 垂直方向 停止拖拽 开启拖拽 恢复初始状态 dragdrop.zip
阅读全文
摘要：/** * new InputSuggest({ * input HTMLInputElement 必选 * data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 * containerCls 容器className * itemCls 容器子项className * activeCls 高亮子项className * width 宽度设置 此项将覆盖containerCls的width * opacity 透明度设置 此项将覆盖contain
阅读全文
摘要：如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>IE6/7 and IE8/9(quirks mode)中Fieldset元素设置宽度后将表现为行内元素</title> </head> <body> <fieldset style="width:200px;background:gold"> FIELDSET </fieldset> <span style=
阅读全文
摘要：上一篇正式推出了我的事件模块event-v0.1，已经搭起了它的初始框架。或许有人要说，与众多JS库或框架相比，它还没有解决事件对象的兼容性问题。是的，我故意将此放到后续补充。因为事件对象的兼容性问题太多了，太繁琐了。这篇我将引入一个私有的_fixEvent函数，add中将调用该函数。_fixEvent将修复（或称包装）原生事件对象，返回一个标准的统一接口的事件对象。如下function _fixEvent( evt, el ) { var props = "altKey attrChange attrName bubbles button cancelable charCode c
阅读全文
摘要：上一篇解决了IE6/7/8中同一个类型事件的多个handler执行无序的情况，为此改动也是较大的。实现几乎与前一个版本完全不同。但好处也是明显的。有时需要添加只执行一次的事件handler，为此给add方法添加第四个参数one，one为true则该事件handler只执行一次。<div id="d1" style="width:200px;height:200px;background:gold;"></div><script>var el = document.getElementById('d1')
阅读全文
摘要：上一篇中的add有个问题，对同一类型事件添加多个hanlder时，IE6/7/8下会无序，如IE9/Firefox/Safari/Chomre/Opera会依次输出1,2,3,4,5。但IE6/7/8中则不一定。为解决所有浏览器中多个事件handler有序执行，我们需要一个队列来管理所有的handl...
阅读全文
摘要：上一篇我们封装了一个addEvent，1，解决了IE6/7/8下事件handler中this为window的错误。2，并且统一了事件对象作为事件handler的第一个参数传入。这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实际上被包装了，IE6/7/8中真正的handler是el["e"+fn]。因此删除时要用到它。同时将两个方法挂在一个对象E上，add，remove分别添加和删除事件。E = { //添加事件 add : function(el, type, fn){ if(el.addEventListener){ el.addEventListener
阅读全文
摘要：本篇开始将回顾下Javascript的事件机制。同时会从一个最小的函数开始写到最后一个具有完整功能的，强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler。先看看页面中添加事件的几种方式1，直接将JS代码写在HTML上<div onclick="alert(4);">Div1 Element</div>HTML Element元素自身就拥有了很多onXXX属性，只需将JS代码赋值给其就可以了。赋值给onXXX的字符串将作为响应函数的函数体（FunctionBody）。大概这是上世纪90年代的
阅读全文
摘要：如下，<div id="d1" style="width:200px;height:200px;background:gold;"></div><script type="text/javascript"> function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.attachEvent('on' + type, fn); } }
阅读全文
摘要：如下<div id="d1" style="width:200px;height:200px;background:gold;"></div><script> function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else if(el.attachEvent){ el.attachEvent('on'+type, fn); } } function handler(
阅读全文
摘要：如下，alert无限循环下去<!DOCTYPE htmlt><html><head><meta charset="utf-8"></head><body onclick="alert(3)"><p>Safari alert Bug</p></body></html>猜测Safari5中将点击alert框的确定按钮也当成点击body了。事件一直冒泡到弹出框上。
阅读全文
摘要：首先，单例模式是对象的创建模式之一，此外还包括工厂模式。单例模式的三个特点：1，该类只有一个实例2，该类自行创建该实例(在该类内部创建自身的实例对象)3，向整个系统公开这个实例接口Java中大概是这个样子class Singleton { //私有，静态的类自身实例 private static Singleton instance = new Singleton(); //私有的构造子(构造器,构造函数,构造方法) private Singleton(){} //公开，静态的工厂方法 public static Singleton getInstance() { return ins...
阅读全文
摘要：.html方法当不传参数时用来获取元素的html内容，查看源码return this[0] && this[0].nodeType === 1 ? this[0].innerHTML.replace(rinlinejQuery, "") : null;得知其通过非标准的但所有浏览器都支持的innerHTML实现。有些使用者会用html()方法的返回值作为代码分支的条件，比如：var str = $('#user').html();if( str=='jack' ){ ...}else if( str=='tom'
阅读全文
摘要：如下 jack div[id=user]中的文本"jack"前有两个英文空格，各浏览器下结果如下IE6/7/8 : 弹出4，即忽略了空格IE9/Firefox/Safari/Chrome/Opera : 弹出6，即没有忽略空格另换成中文空格不会有这个问题。以下是Gray Zhang的补充：1、IE6-8下，对于一个元素的firstChild，如果其为TextNode，且nodeValue前n个字符为空格字符（包括空格、\t、\n、\r和一个分页符号U+000C），则这n个字符被忽略2、在IE6-8下，对一个元素的lastChild，如果其为TextNode，且nodeVal
阅读全文
摘要：我们知道标准鼠标有左，中，右三个键。鼠标按下时如何判断按下的是哪个键呢？W3C DOM-Level-2 定义如下W3C DOM 写道During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. The values for button range from zero to indicate the left button of the mouse, one to indicate th
阅读全文
摘要：方法1function clone(obj){ var o; if(typeof obj == "object"){ if(obj === null){ o = null; }else{ if(obj instanceof Array){ o = []; for(var i = 0, len = obj.length; i < len; i++){ o.push(clone(obj[i])); } }else{ o = {}; for(var k in obj){ o[k] = clone(obj[k]); } } } }else{ o = obj; } return
阅读全文
摘要：方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。一、对象链：方法体内返回对象实例自身(this)function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null;}ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, method...
阅读全文
摘要：最易读版function chain(obj){ function fun(){ if (arguments.length == 0){ return fun.obj; } var methodName = arguments[0], methodArgs = [].slice.call(arguments,1); fun.obj[methodName].apply(fun.obj,methodArgs); return fun; } fun.obj = obj; return fun;}易读版function chain(obj){ return function(){ va...
阅读全文
摘要：重现很简单，如下<!DOCTYPE html><html><head><style> * {margin:0;}</style></head><body style="padding:50px;"> <div style="border:1px solid gold;width:400px;padding:10px 0;"> <table width="100" bgcolor="red" align="
阅读全文
摘要：如下<!DOCTYPE HTML><html><head><title>IE6/7/8中Option元素未设value时Select将获取空字符串</title></head><body> <select onchange="alert(this.value)"> <option>one</option> <option>two</option> <option>three</option> </sel
阅读全文
摘要：新版邮箱项目中做页签功能时碰到的。table元素的 cellpadding 和 cellspacing 属性意义不提了。它们也有对应的css解决方案。如下table { border-collapse:collapse; border-spacing:0;}th,td { padding: 0;}JS操作这两个属性有两种方式。方式1，直接点操作table.cellSpacing = 10;table.cellPadding = 10;注意cellSpacing和cellPadding中间的 S 和 P 都要是大写的。方式2，setAttributetable.setAttribute('
阅读全文
摘要：IE6/7/8/9中Table/Select的innerHTML赋值会报错，如下<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>IE6/7/8/9中TABLE的innerHTML不能赋值</title></head><body><script type="text/javascript"> try{ var table = document.createElement('t
阅读全文
摘要：方式1，splicevar ary = [1,2,3,4];ary.splice(0,ary.length);console.log(ary); // 输出 []，空数组，即被清空了方式2，length赋值为0这种方式很有意思，其它语言如Java，其数组的length是只读的，不能被赋值。如int[] ary = {1,2,3,4};ary.length = 0;Java中会报错，编译通不过。而JS中则可以，且将数组清空了，var ary = [1,2,3,4];ary.length = 0;console.log(ary); // 输出 []，空数组，即被清空了目前 Prototype中数组
阅读全文
摘要：具名函数的各种调用方式 在之前篇幅中已经介绍过了。这篇看看如何判断一个函数是被new调用的，还是被其它方式调用的。方式1function Person(n,a){ this.name = n; this.age = a; if(this instanceof Person){ alert('new调用'); }else{ alert('函数调用'); }}var p = new Person('jack',30); // --> new调用Person(); // --> 函数调用方式2function Person(n,a){ th
阅读全文
摘要：如下<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8"> <title>IE6/7 and IE8(Q) 中td的上下padding失效</title> <style> table { border:1px solid #555; } td { background:#CCC; padding:40px;} </style> </HEAD> <BODY> <table cellpadding=&quo
阅读全文
摘要：这是 菜菜 刚刚发现的<!DOCTYPE html><html style="background:red"> <head> <meta charset="utf-8"> <title>给body标签和document.body都添加点击事件后仅Firefox之弹出了两次</title> </head> <body onclick="alert(1)" style="background:yellow;"> <p&
阅读全文
摘要：DOM3中引入了文本事件，其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。与keypress不同的是，该事件只会在用户输入可视字符时触发，而keypres事件则只要按下键即触发(如CapsLock，Backspace)。可看到textInput考虑的主要是字符，可以通过事件对象的data属性获取所输入字符。示例DOM3 event textInput 目前只有IE9，Chrome，Safari支持。
阅读全文
摘要：相信多数开发者不会多个空格。偶然发现的，网上多数css格式化将压缩后的css格式化后会发生这个情况。搜“css格式化”，以下网站http://www.jb51.net/tools/cssyasuo.shtmlhttp://www.ttmouse.com/geshi.html格式化后会多出个空格，多出空格后样式规则失效了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>书写css伪类时冒号前或后多个空格导致该规则失效</title> &
阅读全文
摘要：最近记录了各种各样的标识符 “同名” 现象，有 Javascript中同名标识符优先级 和 有name为action的表单元素时取form的属性action杯具了 。最近又碰到一个，后台同事返回了如下的JSON结构：{default:{name:'jack'}}在IE6/7/8中出错了，调试了很久才...
阅读全文
摘要：disabled属性只应用在以下元素BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA见 HTML 4.01 的 属性表 多数时候我们会遵循标准，不再其它元素上使用该属性。但部分人没有注意disabled的应用规则，误认为所有元素都可以使用该属性。并且在IE浏览器上生效，得到了证明。比如：<label disabled="disabled">启用</label><p disabled="disabled">段落</p><a href="http
阅读全文
