snandy

[置顶]JavaScript的写类方式（1）

摘要: 从这篇起，会由浅到深的分析JS OO之写类方式，大概会有5-8篇。后面陆续会分析流行库（框架）的写类方式。一些写类工具函数或框架的写类方式本质上都是构造函数+原型。只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码。或者说组织代码的方式使用面向对象方式。当然用JS也可写出函数式的代码，它是多泛型的。为了讨论的单一性，暂不考虑类的继承，(私有,受保护)属性或方法。EMCAScript中实际没有类(class)的概念，但可以把它理解为更广义的概念。1、构造函数方式/** * Person类：定义一个人，有个属性name，和一个getName方法 * @param {Strin阅读全文

posted @ 2011-03-06 12:36 snandy 阅读(5948) 评论(39) 编辑

[置顶]Javascript闭包演示

摘要: 有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>闭包演示</title><style type="text/css"> p {background:gold;}</style><script type="text/javascript"> funct阅读全文

posted @ 2011-03-01 08:48 snandy 阅读(6941) 评论(30) 编辑

读Ext之十四（Ext元素）

摘要: 上篇读了Ext.Element的部分方法，这篇继续。El.addMethods方法，var ep = El.prototype;El.addMethods = function(o){ Ext.apply(ep, o);};El是Ext.Element类的简写，addMethods可认为是该类的静态方法。无须new使用类名直接调用。其内部调用的是Ext.apply，该方法会将o上的所有属性方法拷贝到ep上。使用该方法为Ext.Element类的原型上添加属性，方法。如Ext中队样式的操作、动画、位置等都是通过该方法扩展。Ext.apply在读Ext之一（实用方法）中介绍了。接着看El.g..阅读全文

posted @ 2012-05-16 07:20 snandy 阅读(656) 评论(0) 编辑

读Ext之十三（Ext元素）

摘要: 终于越来越接近Ext的核心了。这篇开始Ext.Element，这里说的Ext元素指的是Ext.Element类的实例。任何前端库都会涉及到对HTMLElement的操作，JQuery更是以其为中心，一个$()函数调用后将DOM元素以索引方式存在JQuery对象中。Ext则使用了一个称为 Ext.Element 的类，如 Ext.get/Ext.fly 返回的都是该类的实例对象。许多操作如样式，添加事件等都封装到该类里。Ext.Element的定义大概框架如下Ext.Element = function(element, forceNew){ var dom = typeof elemen...阅读全文

posted @ 2012-05-07 07:47 snandy 阅读(1054) 评论(1) 编辑

各浏览器cloneNode方法的部分实现差异

摘要: cloneNode来自于Node，用来复制一个相同的节点元素。它有一个布尔类型的参数，如果为true则其子节点也会被拷贝。但在不同浏览器中它的表现有些地方却不同。下面依次列出。一、IE6/7中radio和checkbox的checked和其它浏览器不同<input type="radio" checked="true" value="1"/><input type="checkbox" checked="true" value="1"/><scr阅读全文

posted @ 2012-05-06 10:15 snandy 阅读(960) 评论(0) 编辑

仅IE支持clearAttributes/mergeAttributes方法

摘要: 仅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它们都是非标准的。一、.clearAttributes()该方法用来清除所有用户定义的属性。如下<div style="color:red;" onclick="alert(1)" data-a="a" data-b="b">Division</div><script> var div = document.getElementsByTagName('div'阅读全文

posted @ 2012-05-04 13:37 snandy 阅读(633) 评论(1) 编辑

读Ext之十二（在各个位置插入元素）

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

posted @ 2012-05-04 08:02 snandy 阅读(1009) 评论(0) 编辑

Firefox中beforeunload事件的实现缺陷

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

posted @ 2012-05-03 18:29 snandy 阅读(756) 评论(1) 编辑

Ext core 3.1.0的一个大Bug

摘要: 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)){ ...阅读全文

posted @ 2012-05-02 12:01 snandy 阅读(1222) 评论(3) 编辑

读Ext之十一（通过innerHTML创建元素）

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

posted @ 2012-05-02 07:48 snandy 阅读(837) 评论(0) 编辑

读Ext之十（解析JSON）

摘要: 首先，回到第一篇。使用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 内部定义了一些私有方法...阅读全文

posted @ 2012-05-01 17:20 snandy 阅读(1294) 评论(0) 编辑

工具：统计jQuery中各字符串出现次数

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

posted @ 2012-05-01 10:08 snandy 阅读(249) 评论(0) 编辑

读Ext之九（事件管理）

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

posted @ 2012-04-29 07:45 snandy 阅读(781) 评论(0) 编辑

读Ext之八（原生事件对象的修复及扩充）

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

posted @ 2012-04-28 11:36 snandy 阅读(1120) 评论(2) 编辑

读Ext之七(多任务定时管理)

摘要: 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 |...阅读全文

posted @ 2012-04-28 07:24 snandy 阅读(1214) 评论(0) 编辑

读Ext之六(延迟任务的执行)

摘要: 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...阅读全文

posted @ 2012-04-27 10:08 snandy 阅读(1122) 评论(0) 编辑

读Ext之五（Dom的低级封装）

摘要: 上篇看了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 =...阅读全文

posted @ 2012-04-27 07:08 snandy 阅读(1165) 评论(0) 编辑

仅列出标题下一页