其他 - 随笔分类(第4页) - 【艾伦】

解密jQuery内核样式操作

摘要：基础回顾jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的，本章通一下分解探究下jquery里这部分代码的实现那么jQuery要处理样式的哪些问题?先简单回顾下样式操作会遇到的问题HTML样式定义3种方式了外部引入也就是定义CSS中的嵌入式样式style特性地定义给一个HTML元素设置css属性，如var head= document.getElementById("head");head.style.width = "20px";head.style.height = "10px";head.style.dis 阅读全文

posted @ 2014-02-21 16:12 【艾伦】阅读(5250) 评论(3) 推荐(15) 编辑

Javascript算法系列之快速排序（Quicksort）

摘要：原文出自：http://www.nczonline.net/blog/2012/11/27/computer-science-in-javascript-quicksort/https://gist.github.com/paullewis/1981455#file-gistfile1-js快速排序（Quicksort）是对冒泡排序的一种改进，是一种分而治之算法归并排序的风格核心的思想就是通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列理论上的步阅读全文

posted @ 2014-02-08 09:33 【艾伦】阅读(16570) 评论(6) 推荐(15) 编辑

关于前端框架的一些观点

摘要：http://hinc.me/2013/04/01/front-end-framework/说起前端框架，我个人主张有框架不如无框架，这个观点要先从框架和库的区别说起。我所理解的库，解决的是代码或是模块级别的复用或者对复杂度的封装问题；而框架，更多的是对模式级别的复用和对程序组织的规范，这里的模式是... 阅读全文

posted @ 2014-01-20 17:15 【艾伦】阅读(1231) 评论(2) 推荐(4) 编辑

解密jQuery内核 DOM操作方法（二）html,text,val

摘要：回顾下几组DOM插入有关的方法innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式看图对照区别innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本 firefox不支持innerText ，但是可以用textContent作为替代方案。nodeValue 对于文本节点，nodeValue 属... 阅读全文

posted @ 2014-01-19 08:12 【艾伦】阅读(9133) 评论(5) 推荐(11) 编辑

解密jQuery内核 DOM操作

摘要：jQuery针对DOM操作的插入的方法有大概10种append、prepend、before、after、replaceWithappendTo、prependTo、insertBefore、insertAfter、replaceAll分2组，上下对照，实现同样的功能。主要的不同是语法——特别是内容和目标的位置依赖的domManip，buildFragment模块在之前就分析过了在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点对于 .after(), 选择表达式在函数的前面，参数是将要插入的内容。对于.insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元阅读全文

posted @ 2014-01-13 08:44 【艾伦】阅读(6689) 评论(9) 推荐(13) 编辑

解密jQuery内核 DOM操作的核心buildFragment

摘要：文档碎片是什么http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3DocumentFragment is a "lightweight" or "minimal" Document object. It is very common to want to be able to extract a portion of a document's tree or to create a new fragment of a document参考标准的描述，Documen 阅读全文

posted @ 2014-01-10 09:00 【艾伦】阅读(6138) 评论(2) 推荐(13) 编辑

解密jQuery内核 DOM操作的核心函数domManip

摘要：domManip是什么dom即Dom元素，Manip是Manipulate的缩写，连在一起就是Dom操作的意思。.domManip()是jQuery DOM操作的核心函数对封装的节点操作做了参数上的校正支持，与对应处理的调用append、prepend、before、after、replaceWithappendTo、prependTo、insertBefore、insertAfter、replaceAll为什么需要用这个domManip函数呢？我们知道节点操作浏览器提供的接口无非就是那么几个appendChild()通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。阅读全文

posted @ 2014-01-08 15:34 【艾伦】阅读(7280) 评论(4) 推荐(9) 编辑

前端MVC框架Backbone 1.1.0源码分析(二) - 模型

摘要：模型是什么？Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic se 阅读全文

posted @ 2014-01-06 11:11 【艾伦】阅读(2988) 评论(5) 推荐(7) 编辑

前端MVC框架Backbone 1.1.0源码分析(一)

摘要：前言如何定义库与框架前端的辅助工具太多太多了，那么我们是如何定义库与框架？jQuery是目前用的最广的库了，但是整体来讲jQuery目的性很也明确针对“DOM操作”，当然自己写一个原生态方法也能实现同样的DOM操作，换句话说，不管你用来还是不用，都不影响你整体的布局，或者是代码体系结构。框架则是一套完整的解决方案，针对是某一个领域的，比如EXT，dojo，那么很明显，你要用就需要按照它的规则执行，不管是编码风格还是结构，有一定的约束力一个老话题，前端为什么要用MVC前端开发中呢，不可避免的都有在应用逻辑中加入显示数据的代码的情况，当项目规模愈发变大时，这种形式的代码变得越发的难以维护，因为任何阅读全文

posted @ 2014-01-03 10:45 【艾伦】阅读(7230) 评论(4) 推荐(15) 编辑

解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

摘要：本章开始分析过滤器，根据API的顺序来主要涉及的知识点jQuery的组成pushStack方法的作用sizzle伪类选择器首页我们知道jQuery对象是一个数组对象内部结构jQuery的选择最终还是依靠的DOM提供的接口，jQuery只是最了最佳的方式最快的匹配到合适的位置构建一个基础的jQuery对象有：元素合集元素数量上下文通过pushStack()方法构建的prevObject的引用储存，这个在DOM操作的时候特别有用选择器具体文章前面有分析，pushStack有什么用处，sizzler如何最佳匹配，这里就不详说了，接下来看具体的操作.eq( index )如果一个jQuery对象表示一阅读全文

posted @ 2013-12-26 13:54 【艾伦】阅读(6215) 评论(3) 推荐(12) 编辑

解密jQuery事件核心 - 模拟事件（四）

摘要：前几章已经把最核心的实现都分解过了，这一章我们看看jQuery是如何实现事件模拟的在Internet Explorer 8和更低，一些事件change 和 submit本身不冒泡，但jQuery修改这些冒泡，创建一致的跨浏览器的行为。焦点事件blur :在这个事件触发前，元素已经失去焦点，不冒泡，同步触发。target 指向当前失去焦点的元素。focus:在这个事件触发前，元素已经得到焦点，不冒泡，同步触发。target 指向当前得到焦点的元素。与此同时DOM Level 3 事件模块还定义了 focusin ,focusout 以及 DOMFocusIn ，DOMFocusOut 四个事件阅读全文

posted @ 2013-12-19 09:20 【艾伦】阅读(12124) 评论(6) 推荐(15) 编辑

解密jQuery事件核心 - 自定义设计（三）

摘要：接上文http://www.cnblogs.com/aaronjs/p/3447483.html本文重点:自定义事件“通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。”对象之间通过直接方法调用来交互1）对象A直接调用对象B的某个方法，实现交互；直接方法调用本质上也是属于一种特殊的发送与接受消息，它把发送消息和接收消息合并为一个动作完成；方法调用方和被调用方被紧密耦合在一起；因为发送消息和接收消息是在一个动作内完成，所以无法做到消息的异步发送和接收；2）对象A生成消息->将消息通知给一个事件消息处理器（Observable）->消息处理器通过同步或异步阅读全文

posted @ 2013-12-09 09:12 【艾伦】阅读(19755) 评论(3) 推荐(19) 编辑

解密jQuery事件核心 - 委托设计（二）

摘要：第一篇http://www.cnblogs.com/aaronjs/p/3444874.html从上章就能得出几个信息：事件信息都存储在数据缓存中对于没有特殊事件特有监听方法和普通事件都用addEventListener来添加事件了。而又特有监听方法的特殊事件，则用了另一种方式来添加事件。本章分析的重点：通过addEventListener触发事件后，回调句柄如何处理？具体来说就是，如何委派事件的，用到哪些机制，我们如果用到项目上是否能借鉴？涉及的处理：事件句柄的读取与处理事件对象的兼容，jQuery采取什么方式处理？委托关系的处理jQuery引入的处理方案jQuery.event.fix(e 阅读全文

posted @ 2013-12-02 08:37 【艾伦】阅读(17530) 评论(18) 推荐(43) 编辑

解密jQuery事件核心 - 绑定设计（一）

摘要：说起jQuery的事件，不得不提一下Dean Edwards大神 addEvent库，很多流行的类库的基本思想从他那儿借来的jQuery的事件处理机制吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路(graceful degradation)，循序渐进以及非入侵式编程思想方面，jQuery也做的非常不错事件的流程图总的来说对于JQuery的事件绑定在绑定的时候做了包装处理在执行的时候有过滤器处理.on( events [, selector ] [, data ], handler(eventObject) 阅读全文

posted @ 2013-11-27 09:08 【艾伦】阅读(25992) 评论(22) 推荐(75) 编辑

jQuery 2.0.3 源码分析事件体系结构

摘要：那么jQuery事件处理机制能帮我们处理那些问题？毋容置疑首先要解决浏览器事件兼容问题可以在一个事件类型上添加多个事件处理函数，可以一次添加多个事件类型的事件处理函数提供了常用事件的便捷方法支持自定义事件扩展了组合事件提供了统一的事件封装、绑定、执行、销毁机制……为了更深入的理解幕后的实现,所以先整理整体的结构思路,从1.7后就去除了live绑定,所以现在的整个事件的API如图：jQuery的事件绑定有多个方法可以调用，以click事件来举例：click方法bind方法delegate方法on方法$('#foo').click(function(){ })$('#foo 阅读全文

posted @ 2013-11-26 08:47 【艾伦】阅读(8668) 评论(11) 推荐(23) 编辑

jQuery 2.0.3 源码分析事件绑定 - bind/live/delegate/on

摘要：事件(Event)是JavaScript应用跳动的心脏，通过使用JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应事件的基础就不重复讲解了，本来是定位源码分析实现的，所以需要有一定的基础才行为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新总结一下jQuery对事件的绑定分别有几个API http://www.css88.com/jqapi-1.9/.bind().live().delegate().on()不管是用什么方式绑定,归根到底还是用addEven 阅读全文

posted @ 2013-11-25 00:03 【艾伦】阅读(13724) 评论(12) 推荐(29) 编辑

深入浏览器兼容细数jQuery Hooks 属性篇

摘要：关于钩子：http://www.cnblogs.com/aaronjs/p/3387906.html本章的目的很简单，通过钩子函数更细节的了解浏览器差异与处理方案,版本是2.0.3所以不兼容ie6.7.8，所以对应了钩子会少很多。。总的来说钩子在.attr(), .prop(), .val() and .css() 四种操作中会涉及属性操作的钩子propFixpropHooksattrHooksvalHooksjQuery.propFix 中的对象源码部分1：保留值属性名字修正jQuery.propFix: { for : "htmlFor", class : " 阅读全文

posted @ 2013-11-22 10:41 【艾伦】阅读(7082) 评论(3) 推荐(11) 编辑

jQuery 2.0.3 源码分析样式操作

摘要：根据API分类CSSaddClass()jQuery.cssHooks.hasClass().removeClass().toggleClass().addClass()对元素的样式操作,底层的实现就是修改元素的className值实现的功能：增加一条样式规则： .addClass(‘myClass’)增加多条样式规则： .addClass(‘myClass yourClass’)传递回调遍历样式规则：$("ul li:last").addClass(function(index) { return "item-" + index;});从接口传参去分析阅读全文

posted @ 2013-11-20 21:49 【艾伦】阅读(3972) 评论(1) 推荐(10) 编辑

jQuery 2.0.3 源码分析钩子机制 - 属性操作

摘要：jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的.根据API这章主要是分解5个方法.attr() 获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。.prop() 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。.removeAttr() 为匹配的元素集合中的每个元素中移除一个属性（attribute）。.removeProp() 为集合中匹配的元素删除一个属性（property）。.val() 获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值jQue 阅读全文

posted @ 2013-11-19 13:01 【艾伦】阅读(10290) 评论(9) 推荐(24) 编辑

实战Hybird app：内存溢出与优化

摘要：pheongap项目：http://www.nduoa.com/apk/detail/646816主要的问题：heap过大，内存低性能差的机子上引起奔溃，直接退出关于web app的优化，不仅仅只是js方面，包括HTML布局嵌套，CSS的属性使用，数据的读取，还有浏览器的重排与回流之类的这里就不讨论了，本章涉及的是脚本代码引发的性能问题，更进一步说就是闭包带来的内存泄露关于性能：首先我不得不承认一个事实，移动端的性能跟PC端，那完全不是一回事比如用innerHTML绘制大段的HTML结构，之后同步获取生成HTML中的ID节点，结果不存在这种问题在单页面模拟多页面，动态创建DOM的时候，尤为明显阅读全文

posted @ 2013-11-04 06:26 【艾伦】阅读(4468) 评论(14) 推荐(20) 编辑

随笔分类 - 其他