随笔分类 - JavaScript
摘要：上一篇我们初步学习了JavaScript Promises，本篇将介绍Promise如何优雅地进行错误处理以及提升操作node.js风格1的异步方法的逼格，没错就是使用promisify2。异步编程中的错误处理人性的、理想的也正如很多编程语言中已经实现的错误处理方式应该是这样：try { va...
阅读全文
摘要：很久之前，我一直使用async来处理JavaScript异步编程中的嵌套回调问题。当然我也大概的了解过一些其它旨在解决这些问题的类库，诸如EventProxy、Jscex、StepJS、thenjs。
阅读全文
摘要：关于AOP的基本概念，可以参见此文为什么我要在JavaScript中使用AOP？在我们的系统中有两个函数，func1和func2，func2是func1代码末尾的JSONP（跨域请求）回调。这两个函数内部逻辑相对复杂，代码行数也较多。因为func1的执行频率是10秒一次（对服务器的请求频率是10秒一次），这也就意味着这个系统的实时性要求相对较高。在现实世界，客户端与服务器之间的网络并不能保证永远正常连接，除了后端有DNSPOD、反向代理等容灾方案，前端也需要做一些同样的工作。现在我需要在原有已经相对复杂的函数中加入请求超时次数统计功能，一旦发现连续超时次数到达临界点，立即切换到备用服务器。超.
阅读全文
摘要：设计目的：非常单纯，减少JS代码中的字符串拼接，让代码变得更加易读和可维护，尤其是代码已经非常庞大的情况下。/**@descriptionAnEasyTemplateinJavaScript,itisdesignedtoreducethestringconcatentionwork,*tomakethegiganticcodemorereadableandmaintainable.*/functionTemplate(tmpl,source){//addalltemplatetaskstothisarraythis.task=[];if(tmpl)this.task.push([tmpl,so
阅读全文
摘要：最近项目发布比较频繁，每次发布或者增量更新JS文件后，第一件事就是确保服务器上的文件确实已经更新。不然随后的测试都是在做无用功，再加上Secure CRT和SecureFX经常周期性的有Bug，导致文件看起来已经更新，实际上却没有。最致命的一点就是浏览器，浏览器经常出现缓存清不掉的情况，尤其是IE 7十分严重，常常要借助于QQ管家类似的软件才能完全清楚缓存。所以在浏览器中输入URL手工验证JS文件是否已经更新是很不方便的，即使没有上面所说的种种BUG，你需要做的操作也不少。包括：清空缓存、输入URL、寻找文件变更点来比对文件是否已经被更新，这每一步都可以非常耗时和低效。如果遇见浏览器缓存BUG
阅读全文
摘要：请首先修改hosts文件来模拟本机跨域127.0.0.1 localhost127.0.0.1 b.com127.0.0.1 a.com我们的目的：由a.com登录，如果登录成功，就生成a.com的cookie。而对于b.com则无需再次登录。遇到的困难：浏览器同源策略限制，即A站点页面的脚本是无法直接操纵B站点的内容。试想如果所有第三方网站都可以对taobao.com的首页任意篡改，那这个社会还有什么安全性可言呢？其实浏览器的安全策略逻辑很简单，就是我的地盘我做主，出了我的地盘我做不了主。解决方案：a.com根据用户输入操作a.com的cookie，b.com根据用户在a.com得到的输入数
阅读全文
摘要：当需要使用跨域请求脚本时，我们较多的使用JSONP的方式。但是当页面使用到轮询时，这你就需要额外小心JavaScript内存泄漏的问题！
轮询间隔越段，内存泄漏越严重。而且随着浏览器的不同，严重程度也各不相同。
当然毫无疑问的是，IE系列始终是最让人纠结的。
阅读全文
摘要：An Introduction To LESS, And Comparison To SassI’ve been usingLESSreligiously ever since I stumbled upon it months ago. CSS was never really a problem for me, in and of itself, but I was intrigued by the idea of using variables to create something along the lines of a color palette for my websites a
阅读全文
摘要：A Music Box Based on HTML5 and CSS3Queen - Love of My Life01:30----------02:01PrevPausePlayNextMuteAll Songs Queen - Love of my life Queen - Love of my life Queen - Love of my life Queen - Love of my life Queen - Love of my life Queen - Love of my life Queen - Love of my ...
阅读全文
摘要：在使用JavaScript脚本获取元素的尺寸时，有几个属性你需要弄清楚，不然会很棘手。
在以往我都是对这些属性死记硬背，很少真正理解过，忘记了就查手册。看完本文我相信这种情况就不会再发生了。
元素占据的物理空间的尺寸
如果你需要获得元素占据的物理空间，那么使用offsetHeight和offsetWidth。
自然而然此物理空间必然包含的有：padding、滚动条、border。
这两个属性与getBoundingClientRect()的height和width属性是一致的。
阅读全文
摘要：camelCase函数的功能就是将形如background-color转化为驼峰表示法：backgroundColor。此函数在jQuery的data函数，以及涉及到css的诸多函数中都有用到。
阅读全文
摘要：之前基于jQuery山寨了一个新浪轻博客的标签列表，demo请看这里。
后来又加入了编辑功能，类似美味书签。
大致的效果就是点击一个已输入的标签，选中该标签，然后可以对该标签进行编辑。
因为存储标签的名称使用的是div元素，所以这里涉及到的难点主要有：
1）如何使div元素能够被选中；
2）如何使div元素支持编辑功能；
3）因为标签不能重复，所以修改以后使用onblur事件进行验证；
阅读全文
摘要：前言
jQuery.extend函数是jQuery的核心函数之一，在官方API文档视图中它位于core栏目下的plugins中。顾名思义，extend函数的主要目的就是用来扩展jQuery的功能。因此如果需要基于jQuery编写插件，那么掌握这个函数是必不可少的。不仅如此，jQeury内部许多函数和方法都离不开它，足以证明jQuery.extend的重要性。
功能
合并一个或多个对象的属性到目标对象
使用
jQuery.extend ( [deep] , target , source1 , source2 , ...[sourceN] );
参数说明
deep指定是深拷贝-true还是浅拷贝-false（是否使用递归），默认是浅拷贝
target是目标对象
source属性来源参数，用于扩展目标对象
额外说明：如果只有一个参数则直接扩展jQuery对象
阅读全文
摘要：注明：未列出常见的比如document.getElementById(),object.addEventListener()等。
document.activeElement
获取文档当前获得焦点的元素
document.head
在jQuery中使用方式如下document.head || document.getElementsByTagName( "head" )[0] ，可见并非所有浏览器支持
document.body
获得当前文档的HTMLBodyElement元素
document.compatMode
获取当前文档的渲染方式。返回值：BackCompat（怪癖模式）和CSS1Compat（标准模式）。
由于IE 8多达五种渲染模式，所以判断是否是怪癖模式需要借助于IE独有的document.documentMode进行额外检测
参见此文http://www.cnblogs.com/rubylouvre/archive/2009/09/05/1559883.html
阅读全文
摘要：把你的大脑当做浏览器执行下面的代码两次，分别是IE6和IE9：
function testFunc(){
alert('test')
}
$(function(){
var g = document.getElementById ,
w = window.testFunc ;
//g
alert(typeof(g));
alert(String(g));
alert(g instanceof Object);
alert(g instanceof Function);
//w
alert(typeof(w));
alert(String(w));
alert(w instanceof Object);
alert(w instanceof Function);
//执行
alert(g('t'));
w();
});
阅读全文
摘要：<!doctypehtml><head></head><body><spanid="con">xxx</span><script>varcss=document.createElement('style');css.setAttribute('type','text/css');varcssText='span{color:Red;}';if(css.styleSheet){//IEcss.styleSheet.cssText=
阅读全文
摘要：无废话，直接上代码：/**jQueryxmlDOMPluginv1.0*http://outwestmedia.com/jquery-plugins/xmldom/**Released:2009-04-06*Version:1.0**Copyright(c)2009JonathanSharp,OutWestMediaLLC.*DuallicensedundertheMITandGPLlicenses.*http://docs.jquery.com/License*/(function($){if(window['DOMParser']==undefined&&w
阅读全文
摘要：以前在windows下经常去一些壁纸网站，或者是美女的QQ相册，又或者是一个激情美女图片网站下载图片，经常需要点击右键然后“另存为”，要是遇见经典套图，这种重复的操作肯定会让你失去下载的动力。后来用了Firefox有个插件好像是DownloadThemAll（记得不清除了，反正就是批量下载网页链接的，可以筛选格式下载图片），结合迅雷使用可以极大的提高图片下载的效率（但是如果...
阅读全文
摘要：http://xlaaa111.javaeye.com/blog/669421http://hi.baidu.com/haojian/blog/item/425fcf1326d16127dc54011c.html在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对 象也会被回收。因为函数a被b引用，b又被a...
阅读全文
摘要：YUIGlobalObject之多个实例前面两章我们的代码都是形如YUI().use('modulename',function(Y){//yourcode});这样我们得到的是该模块的一个实例Y。假设现在有这种需求：页面载入后出现一个可以拖动的DIV，并且附带这样的动画效果:在0.5秒内DIV的宽度增加一半，而高度减少一半，持续30秒。这就需要2个实例：一个用于动画，一个用于拖动。<htm...
阅读全文
浙公网安备 33010602011771号