摘要：这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。event依赖于cache模块，cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。示例实现功能：为页面上所有的段落P元素添加一个点击事件，响应函数会弹出P元素的innerHTML。创建的目录如下为了获取元素，用到了上一篇写的selector.js。不在贴其代码。index.html 如下 requirejs入门（三） p1p2p3p4p5 cache.js 如下defi...
阅读全文
摘要：上一篇是把整个jQuery库作为一个模块。这篇来写一个自己的模块：选择器。 为演示方便这里仅实现常用的三种选择器id，className，attribute。RequireJS使用define来定义模块。 新建目录结构如下 这次新建了一个子目录js，把main.js和selctor.js放入其中，r
阅读全文
摘要：RequireJS由James Burke创建，他也是AMD规范的创始人。RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件，以及不用通过script标签顺序去管理依赖关系。当然也不会有阻塞（blocking）的情况发生。好，以一...
阅读全文
摘要：getAll方法是私有的，在manipulation模块中。代码只有简单的几行，如下function getAll( elem ) { if ( typeof elem.getElementsByTagName !== "undefined" ) { return elem.getElementsByTagName( "*" ); } else if ( typeof elem.querySelectorAll !== "undefined" ) { return elem.querySelectorAll( "*"
阅读全文
摘要：前两篇读了Ext.Element，这篇介绍的Ext.CompositeElementLite类是对集合（Ext.Element）的操作。Ext.select / Ext.element.select 依赖于Ext.CompositeElementLite。类的大概结构如下（省略了挂在prototype上的很多方法），Ext.CompositeElementLite = function(els, root){ this.elements = []; this.add(els, root); this.el = new Ext.Element.Flyweight();};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..
阅读全文
摘要：终于越来越接近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...
阅读全文
摘要：cloneNode来自于Node，用来复制一个相同的节点元素。它有一个布尔类型的参数，如果为true则其子节点也会被拷贝。但在不同浏览器中它的表现有些地方却不同。下面依次列出。一、IE6/7中radio和checkbox的checked和其它浏览器不同<input type="radio" checked="true" value="1"/><input type="checkbox" checked="true" value="1"/><scr
阅读全文
摘要：仅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'
阅读全文
摘要：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"// ... 如果使用一个变量替换，使用工具压缩时将会进一步减少文件的大小
阅读全文
