Snandy

摘要： IE 除了发明 innerHTML这个快捷创建DOM元素(及其属性等)外，还发明了insertAdjacentHTML/insertAdjacentText方法。它们首次在IE4中引入，随后其它浏览器如Opera、Safari、Chrome相继实现了它们。唯独Firefox没有实现。（注：2011-11 Firefox8发布，已支持insertAdjacentHTML，但仍未支持insertAdjacentText）鉴于insertAdjacentHTML被众多浏览器实现，html5已经将其列纳入，insertAdjacentText则没那么幸运。Firefox中使用另外一些方式实现了相同功能 阅读全文

摘要： beforeunload 指在页面卸载前提供的最后一次JS执行的机会。如下window.onbeforeunload = function() { return '您正在编辑的博客尚未保存，确定要离开此页吗？';};可以使用返回值文字来提示用户。但只有Firefox中却不显示该文字。当刷新页面时，各浏览器表现如下IE：Chrome：Firefox12：Mozilla官方说Firefox4之前的版本可以通过事件对象的returnValue修改该值，如下window.onbeforeunload = function(e) { e = e || window.event; // F 阅读全文

摘要： Ext core 3.1.0(下载地址)中Ext.DomHelper中的applyStyles方法源码如下：applyStyles : function(el, styles){ if(styles){ var i = 0, len, style; el = Ext.fly(el); if(Ext.isFunction(styles)){ styles = styles.call(); } if(Ext.isString(styles)){ ... 阅读全文

摘要： innerHTML 这个由IE引入的属性成了事实标准，各浏览器均支持。尽管html4中没有承认它，但html5已经正式将其纳入。我们知道任何一个库都少不了DOM操作，因为用JS操作DOM（早期微软称DHTML）是日常开发中最基本的工作之一。这篇主要讲述Ext.DomHelper中的 createHtml 函数。首先Ext.DomHelper为一个单例对象。使用其时可沿用Ext库的习惯使用别名dhvar dh = Ext.DomHelper; // 使用dh别名dh有以下方法：markupapplyStylesinsertHtmlinsertBeforeinsertAfterinsertFirs 阅读全文

摘要： 首先，回到第一篇。使用Ext.apply为Ext对象添加了一些属性，Ext.apply(Ext, { ... USE_NATIVE_JSON : false, ... });USE_NATIVE_JSON 即为其中之一， 可以使用它来设置是否开启浏览器原始的JSON（即JSON.parse，JSON.stringify）来解析或反解析。这是ECMA5中加入的，在字符串转换成JSON的三种方式中已经提到。该值初始为false，即不开启。设置为true则开启如Ext.USE_NATIVE_JSON = true;Ext.util.JSON 内部定义了一些私有方法... 阅读全文

摘要： 源文件(将jQuery源码复制到下面的文本域)：..字符串： 点击“统计所有字符出现次数”按钮后发现，字符串“string”竟然出现了44次，多数是诸如以下的代码typeof selector === "string"typeof data !== "string"type === "string"typeof context === "string"getByName = typeof name === "string"// ... 如果使用一个变量替换，使用工具压缩时将会进一步减少文件的大小 阅读全文

摘要： Ext的事件管理非常强大。主要定义在Ext.EventManager对象(单例模式)中。该对象有以下方法addListenerremoveListenerremoveAllgetListenerspurgeElement_unloadonDocumentReadyonunstoppedMouseDownEventon / un 是 addListener / removeListener的快捷方式 。stoppedMouseDownEvent 是 Ext.util.Event 类的实例对象，这个类定义在Observable.js中。stoppedMouseDownEvent 在Ext.Even 阅读全文

摘要： Ext库也对浏览器原生的事件对象做了包装，以保证兼容所有浏览器。这里列举了浏览器原生事件对象各浏览器中兼容性，这里列出了各种情况下事件对象的获取。在Ext事件管理类 Ext.EventManager 中会悄悄的将浏览器原始事件对象进行转换e = Ext.EventObject.setEvent(e);Ext.EventObject 即为包装后的事件对象(暂称为Ext事件对象)。先从全局上看看该对象的实现，其中...省略了部分代码。Ext.EventObject = function(){ var E = Ext.lib.Event, ...; Ext.EventObjectImp... 阅读全文

摘要： Ext.util.TaskRunner 用来管理多任务定时管理。每一个任务是一个JS对象，具有以下属性run, interval, args, scope, duration, repeat。示例如下：var task = { run : function(){...}, interval : 1000, args : [], scope : obj, duration : 5000, repeat : 3}run和interval是必选，其它为可选。鸟瞰类如下：Ext.util.TaskRunner = function(interval){ interval = interval |... 阅读全文

摘要： Ext.util.DelayedTask类从名字上就可以看出它是延迟任务的执行。即指定时间之后执行任务。整个类如下：Ext.util.DelayedTask = function(fn, scope, args){ var me = this, id, call = function(){ clearInterval(id); id = null; fn.apply(scope, args || []); }; me.delay = function(delay, newFn, newScope, newA... 阅读全文

摘要： 上篇看了ext-base-event.js(Ext.lib.Event)，这篇看ext-base-dom.js(Ext.lib.Dom)。后续EventManager.js(Ext.EventManager)其中会用到该篇的Ext.lib.Dom。整体浏览ext-base-dom.js可以看到还是一个匿名函数执行，与上一篇不同的是这次并非返回包装好的对象pub，而是直接将对象赋值给Ext.lib.Dom。(function(){ var doc = document, ...; Ext.lib.Dom = { ... };})();一些变量声明，var doc =... 阅读全文

摘要： 这篇开始读ext-base-event.js。该文件定义了Ext.lib.Event对象，Ext.lib这个命名空间在Ext core的Ext.js中命名的。Ext.ns("Ext.util", "Ext.lib", "Ext.data");Ext.lib上的属性如下：Ext.lib.AjaxExt.lib.AnimExt.lib.AnimMgrExt.lib.BezierExt.lib.DomExt.lib.EasingExt.lib.EventExt.lib.AnimBaseExt.lib.ColorAnimExt.lib.Mot 阅读全文

摘要： 续上篇，Ext.ns = Ext.namespace; 有了一个简写的namespace。整个匿名函数执行完了。接下来Ext.ns("Ext.util", "Ext.lib", "Ext.data"); Ext.elCache = {}; 分别为Ext添加了util，lib，data，elCache属性，默认都是空的对象。Ext.apply(Function.prototype, { createInterceptor : function(){ // ... }, createCallback : function(){ // .. 阅读全文

摘要： 如下代码<p id="tit"></p><script> var p = document.getElementById('tit'); var div = document.createElement('div'); p.appendChild(div); try { div.innerHTML = "76" } catch(e) { //IE<9 ERROR alert(e) }</script>执行顺序如下1，获取页面上段落元素P2，创建一个块级元素div3，将d 阅读全文

摘要： 如下代码<p id="tit"></p><script> try { document.getElementById('tit').innerHTML = "<div>trtr</div>"; } catch(e) { //IE<9 ERROR alert(e) }</script>获取页面中id为tit的元素，为其innerHTML赋值。IE6/7/8中抛异常，其它浏览器正常。但规范指出，段落P是不能包含P自身及其它块级元素的。IE6/7/8的处理洽洽是对的， 阅读全文

摘要： 上篇看到Ext.extend，接着往下看。Ext.namespace，用来管理Ext库命名空间的方法namespace : function(){ var o, d; Ext.each(arguments, function(v) { d = v.split("."); o = window[d[0]] = window[d[0]] || {}; Ext.each(d.slice(1), function(v2){ o = o[v2] = o[v2] || {}; }); }); return... 阅读全文

摘要： 第一句window.undefined = window.undefined; 兼容IE6以下的浏览器，有人解释过了。定义Ext全局变量Ext = { version : '3.1.0'};注意这里没有使用var，不使用var声明变量被认为是不好的编程习惯，尤其是函数内声明变量不写var更被称为是无穷无尽的Bug根源。这里则不会，因为变量Ext是该库唯一的全局变量(命名空间)。其它Ext源码中的变量声明都加上了var。给Ext添加静态apply方法，该方法是核心方法之一，会用其扩展Ext。Ext.apply = function(o, c, defaults){ // no . 阅读全文

摘要： 距离上一次源码阅读近一年了，这时已经更新到了1.7.2。HTML元素的位置相关的css属性有top、left、bottom、right。要灵活使用这些属性，需要了解css的定位模型position：正常文档流，相对定位，绝对定位。了解了这些css知识才更清楚jQuery的position及offse... 阅读全文

摘要： 前端开发过程中，经常需要这样的场景。用JS实现将光标定位于输入框最右侧。场景一：编辑图片的描述文字场景二：Script.aculo.us的Ajax.InPlaceEditor类。双击可编辑，编辑后离开可自动更新该区域以上场景都需要JS实现将光标定位于输入框最右侧，却不是通过鼠标点入输入框内。我们知道... 阅读全文

摘要： 后端同事想采用REST风格，hailiang在看jQuery文档时发现的$.ajax不是所有浏览器中都支持put/delete。但没有指出具体是那些浏览器。我新建了一个Java WEB项目测试所有浏览器，但都支持put和delete。测试浏览器版本如下Firefox 11Chrome 18Safari 5Opera11.62IE9 （含ie7,8模式）IE6 （IETester及虚拟机中的ie6）记录之！相关：http://www.douban.com/group/topic/5020441/http://annevankesteren.nl/2007/10/http-method-suppo 阅读全文

摘要： 这是liaoxiang在sohu博首发现的（junhai的机器也重现了），精简后重现代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"/> </head> <body> <div style="height:4100px;background: gray;filter:alpha(opacity=30)"> <p>TEST</p> <p>TEST</p> <p& 阅读全文

摘要： 这是sina同事xiaoniu发现的，如下<!DOCTYPE html><html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E503E2A1C011CFC85B7B701A0677EC090000000000000 阅读全文

摘要： placeholder属性是HTML5中提出的，目前Firefox/Safari/Chrome/Opera都已经实现了。IE9仍然没实现。但Safari/Chrome中有个问题，点击文本框内文字不消失。如下<!DOCTYPE html><html> <head> <title>Safari/Chrome中placeholder属性实现不完整</title> <meta charset="utf-8"> </head> <body> <p> <input type 阅读全文

摘要： SeaJS由国内的牛人lifesinger开发。目前版本是1.1.1，源码不到1500行，压缩后才4k，质量极高。这篇会讲述SeaJS的一些基本用法，不会面面俱到，但会就个人的理解讲述官方文档没有提到的一些细节。一、SeaJS的全局接口SeaJS向全局公开了两个标识符： seajs 和 define。如果你的项目中已经用了标识符seajs，又不想改。这时SeaJS可以让出全局的seajs。如var boot = seajs.noConflict(); 这时boot就相当于先前的seajs。如果你的项目中连标识符define也用到了，也不想改。SeaJS是很宽容的，它的define也可以让出。. 阅读全文

摘要： 一、UMD：AMD 和CommonJS的糅合前面花了很长的篇幅介绍了两大类模块规范，CommonJS(Modules/Modules/Wrappings)及AMD。我们知道Modules/Wrappings是出于对Node.js模块格式的偏好而包装下使其在浏览器中得以实现。而Modules/Wrappings的格式通过某些工具（如r.js）也能运行在Node.js中。事实上，这两种格式同时有效且都被广泛使用。AMD以浏览器为第一（browser-first）的原则发展，选择异步加载模块。它的模块支持对象（objects）、函数（functions）、构造器（constructors）、字符串（ 阅读全文