随笔分类 - Javascript
摘要：JavaScript 倾向于阻塞浏览器某些处理过程，如HTTP 请求和界面刷新，这是开发者面临的最显著的性能问题。保持JavaScript文件短小，并限制HTTP请求的数量，只是创建反应迅速的网页应用的第一步。一个应用程序所包含的功能越多，所需要的JavaScript 代码就越大，保持源码短小并不总是一种选择。尽管下载一个大JavaScript 文件只产生一次HTTP 请求，却会锁定浏览器一大段时间。为避开这种情况，你需要向页面中逐步添加JavaScript，某种程度上说不会阻塞浏览器。非阻塞脚本的秘密在于，等页面完成加载之后，再加载JavaScript 源码。从技术角度讲，这意味着在wind
阅读全文
摘要：Node.js现在非常活跃，相关生态社区已经超过Lua（基本上比较知名的功能都有nodejs模块实现）。但是我们为何要使用Node.Js？相比传统的webserver服务模式，nodejs有什么优点优势？Node.Js是基于javascript语言，建构在google V8 engine以及Linux上的一个非阻塞事件驱动IO框架。nodejs是单进程单线程，但是基于V8的强大驱动力，以及事件驱动模型，nodejs的性能非常高，而且想达到多核或者多进程也不是很难（现在已经有大量的第三方module来实现这个功能）。这里主要不是介绍nodejs具体应用代码，而是想介绍一下事件驱动编程。Dan Y
阅读全文
摘要：在设计选择器，我就做了这方面的比较，只不过这次幸运遇到另一个测试程序，它覆盖面更广，测试类型更全面。最后发现自己在选择器中用了一个很慢的循环……囧。由于IE性能比较低下，原程序根本无法运行，因此我把它移到我的博客上来，汉化一下，并减少大量的测试个数（原程序测试个数为1000，我把IE的测试个数减少为300）。但即使这样，它还是弹出警告框问你是否中止循环，你继续按否，就能看到结果了。运行结果：查看运行结果由上面的实验我们基本上可得出以下结论：while循环比for循环快。 倒序循环比顺序循环快。 缓存length属性比不缓存快。 请不要用arr[i]来
阅读全文
摘要：懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页，淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内，因此可以使用lazyload在适当的时候加载该类资源。避免网页打开
阅读全文
摘要：首先看一个内存释放的实例：[代码]CollectGarbage,是IE的一个特有属性,用于释放内存的，使用方法应该是,将该变量或引用对象,设置为null或delete，然后在进行释放动作，在做CollectGarbage前,要必需清楚的两个必备条件:- 一个对象在其生存的上下文环境之外，即会失效。- 一个全局的对象在没有被执用(引用)的情况下，即会失效。[代码]在这四个示例中：- “示例1”在函数testObject()中构造了_obj1，但是在函数退出时，它就已经离开了函数的上下文环境，因此_obj1失效了；- “示例2&r
阅读全文
摘要：网上很流行的方法，不用框架时:[代码]firefox中到某些元素的offsetTop的值不对，反复测试发现和其父元素定位方式有关系，父元素用fixed定位，得到的offsetTop并没有加documentElement.scrollTop的值。如果documentElement有getBoundingClientRect方法，它用getBoundingClientRect去计算offset，要得到精确地offset就需要考虑元素是否表格单元格、父元素的position情况。ff3.5 ie6以上 safari opera chrome都支持getBoundingClientRect方法，如果对
阅读全文
摘要：沙箱模式常见于YUI3 core，它是一种采用同一构造器（Constructor）生成彼此独立且互不干扰（self-contained）的实例对象，而从避免污染全局对象的方法。命名空间JavaScript本身中没有提供命名空间机制，所以为了避免不同函数、对象以及变量名对全局空间的污染，通常的做法是为你的应用程序或者库创建一个唯一的全局对象，然后将所有方法与属性添加到这个对象上。代码清单1 ： 传统命名空间模式[代码]在这段代码中，你创建了一个全局对象MYAPP，并将其他所有对象、函数作为属性附加到MYAPP上。通常这是一种较好的避免命名冲突的方法，它被应用在很多项目中，但这种方法有一些缺点。需
阅读全文
摘要：坐标变换的使用方式：代码:1、平移变换（translate）平移表达式transform="translate(x,y)"，即新坐标系的原点在原坐标系的（x,y）处。坐标轴的方向不变。2、旋转变换（rotate）transform="rotate(angle cx,cy)"。angle代表旋转角度，缺省单位是“度”，瞬时针为正，逆时针为负。（cx,cy）是旋转中心所在的坐标。若省略旋转中心坐标，则缺省值是（0,0）。3、伸缩变换（scale）transform="scale(sx,sy)"，sx,sy分别代表x轴方向和y方向拉伸或缩小的比例因子。拉伸：大于1；缩小：小于1。若省略sy，即sy=
阅读全文
摘要：也许你看到这个标题觉得很简单，确实这是一篇关于CSS中Position属性基础知识的文章，但是关于Position的一些细节也许你不了解。1、简介position有五个属性： static | relative | absolute | fixed | inheritstatic 和 inherit : 没什么值得介绍的。relative : 相对于元素自身的定位。absolute ：相对于包含块的定位。fixed : 相对于窗口的定位。2、包含块包含块就是 top | right | bottom | left 参考的元素。absolute的包含块指的是：该元素最近的具有定位设置的父元素，即
阅读全文
摘要：1、clientWidth clientHeight 元素的可视部分的宽度和高度（也就是CSS的width加padding）。它们不把边框和滚动条计算在内，也不包括任何可能的滚动。 若CSS中没有指定元素的高度和宽度(即自适应)，则IE中显示0，而非IE浏览器则显示实际的值2、 offsetWidth offsetHeight 元素在页面中占据的宽度和高度的总计。它们和前一对属性的区别在于它们把元素的边框和滚动条计算在内。 若CSS中没有指定元素的高度和宽度(即自适应)，所有浏览器都会显示实际的值包括width + padding + border3、 scrollWidth scrollHe
阅读全文
摘要：在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情，但这里也有许多的Bug。各种浏览器对于事件绑定都提供了很多方法，但可靠的只有3中：1、传统的绑定方法：[代码] a、传统的绑定方法，非常简单稳定，函数体内的this指向的也是指向正在处理事件的节点（如当前正在运行事件句柄的节点）。 b、一个元素的一个事件句柄只能注册一个函数，如果重复注册，会产生覆盖；而且，传统绑定方法只会在事件冒泡中运行。2、W3C标准绑定方法：[代码] a、这种绑定方法同时支持时间处理的捕获和冒泡两个阶段；同一元素的同一事件句柄可以注册多个监听函数；而且，监听函数内部this指向当前元素。
阅读全文
摘要：匿名函数函数是JavaScript中最灵活的一种对象，这里只是讲解其匿名函数的用途。匿名函数：就是没有函数名的函数。1、函数的定义，首先简单介绍一下函数的定义，大致可分为三种方式第一种：这也是最常规的一种[代码]第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。[代码]第三种：[代码]注意 '='右边的函数就是一个匿名函数，创造完毕函数后，又将该函数赋给了变量square。2、匿名函数的创建第一种方式：就是上面所讲的定义square函数，这也是最常用的方式之一。第二种方式：[代码]这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该
阅读全文
摘要：在JavaScript中this变量是一个令人难以摸清的关键字，this可谓是非常强大，充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。对于this变量最要的是能够理清this所引用的对象到底是哪一个，也许很多资料上都有自己的解释，但有些概念讲的偏繁杂。而我的理解是：首先分析this所在的函数是当做哪个对象的方法调用的，则该对象就是this所引用的对象。示例一、[代码]这段代码非常容易理解，当执行 obj.y() 时，函数是作为对象obj的方法调用的，因此函数体内的this指向的是obj对象，所以会弹出100。示例二、代码这里为什么会弹出 'this
阅读全文
摘要：在学习offset的相关属性前，必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值（例如，返回12，而不是'12px'）。定位父元素：指在CSS中某一元素domElement[position:relative/absolute] 所相对定位的元素。1、offsetParent 对于offsetParent来讲，最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。 a、domElement设置了position:relat
阅读全文
摘要：a.x = a = { }, 深入理解赋值表达式代码if 语句的简写[代码]等同于[代码]&& 和 || 的计算取值[代码][代码]!!variable 会返回和原值相等的boolean值Object的构造代码prototype中的一些细节[代码]创建对象，并保持原型链代码
阅读全文
摘要：在学习JavaScript的变量作用域之前，我们应当明确几点： a、JavaScript的变量作用域是基于其特有的作用域链的。 b、JavaScript没有块级作用域。 c、函数中声明的变量在整个函数中都有定义。1、JavaScript的作用域链首先看下下面这段代码：观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain，如果定义了则使用inner函数中的 rain变量；如果inner函数中没有定义rain变量，JavaScript则会继续在rainman函数中查找是否定义了rain变量，在这段代码中rainman函数体内没有定义rain变量
阅读全文
摘要：最近在写JavaScript时遇到一些问题，就是当JavaScript多事件连续触发，JavaScript的单线程引擎是如何控制的。找了一些资料，觉得很有用，在此分享一下。虽然不是原创，但是觉得此文章对JavaScript程序员非常有用。翻译的不是十分精确，但希望对大家有用。原文：John Resig http://ejohn.org/blog/how-javascript-timers-work/How JavaScript Timers Work从基础的层面来讲，理解JavaScript的定时器是如何工作的是非常重要的。计时器的执行常常和我们的直观想象不同，那是因为JavaScript引擎
阅读全文
摘要：1、什么是闭包、以及闭包所涉及的作用域链这里就不说了。2、JavaScript垃圾回收机制 JavaScript不需要手动地释放内存，它使用一种自动垃圾回收机制（garbage collection）。当一个对象无用的时候，即程序中无变量引用这个对象时，就会从内存中释放掉这个变量。3、循环引用 三个对象 A 、B 、C AàBàC ：A的某一属性引用着B，同样C也被B的属性引用着。如果将A清除，那么B、C也被释放。 AàBàCàB ：这里增加了C的某一属性引用B对象，如果这是清除A，那么B、C不会被释放，因为B和C之间产生了循环引用。4、循环引用和闭包这是一种及其隐蔽的循环引用，。当调用一次o
阅读全文
摘要：in 运算符判断对象是否拥有某一属性只要对象拥有该属性，就会返回true，否则falsevar point = { x:1, y:1 };alert( 'x' in point ); //truevar arr = ['one', 'two'];alert( 'kang' in arr ); //falsealert( '1' in arr ); //truealert( 'push' in arr ); //truevar fn = function(){};fn.prototype.site = 'cnblogs.com';var obj = new fn();alert( 'site'
阅读全文
摘要：hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。
阅读全文