随笔分类 - 动人的JavaScript
摘要：参考链接：《JavaScript DOM高级程序设计》《JavaScript高级程序设计（第3版）》http://www.cnblogs.com/aaronjs/p/3279314.html
阅读全文
摘要：首先用了JSON.stringify(localStorage).length得出你当前页面的localstorage所使用的字符数量current_num。然后你再去http://arty.name/localstorage.html这里，获取页面的localstorage最大使用量total_num。total_num - currentnum就是页面的localstorage剩余容量。
阅读全文
摘要：根据张鑫旭的http://www.zhangxinxu.com/wordpress/2012/03/%E5%A4%9A%E6%A0%8F%E5%88%97%E8%A1%A8%E5%8E%9F%E7%90%86%E4%B8%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80-waterfall-layout/而来，我有修改他的代码，修改了他的refresh这部分代码。瀑布流布局测试
阅读全文
摘要：http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.htmlhttp://www.niumowang.org/html-css/js-control-audio/
阅读全文
摘要：需求好像是：1.第一列数据有重复的找出来，并且找出它的重复位置2.第三列根据第一列得出的位置，取出相应位置的数据进行相加3.相加的结果 是否等同于第二列的对应位置数据 验证abc三列数字符合我的小弟要求(第二版本)
阅读全文
摘要：这次的主题是，具体的库和抽象的思路。当看到Deferred这个区块时，觉得jQuery代码设计挺复杂，得用许多脑力才能看明白。可是把这个峰回路转十八回的代码看懂又如何，是为了使用过程中出现bug后，容易调试吗？还是重新造个轮子？我觉得需求撑大的库，当你不知道它撑大的历史，而贸然阅读，容易一头雾水。所以从简单的具体开始，1.没有参数传递，只有第一个函数有定时器的情况 没有参数传递，只有第一个函数有定时器的情况 没有参数传递，只有第一个函数有定时器的情况2.没有参数传递，都有定时器的情况 没有参数传递，都有定时器的情况 3.都有参数传递，都有定时器的情况 ...
阅读全文
摘要：那么就来读读jQuery源码的Callbacks部分。一上来看原版源码jQuery.Callbacks = function( options ) { // Convert options from String-formatted to Object-formatted if needed // (we check in cache first) options = typeof options === "string" ? ( optionsCache[ options ] || createOptions( options ) ) : jQu...
阅读全文
摘要：读之前的预备工作：1.基础的js知识，以及html和css知识，和正则表达式知识。可以参考妙味课堂的基础js，html和css大纲。2.JavaScript核心指南的知识http://www.cnblogs.com/cnwebdeveloper/archive/2012/03/28/2421461.html3.JavaScript设计模式的知识http://www.oschina.net/translate/learning-javascript-design-patterns?lang=chs4.使用过jQuery有了预备工作，阅读源码你会比较顺利。我阅读的是2.0.3无法压缩版本，源代码有
阅读全文
摘要：首先看几个链接，http://blog.youyo.name/archives/zepto-tap-click-through-research.htmlyouyo的分析http://softwaresupportedknitting.com/zepto-tap-prevent-default/作为Bhttp://www.zhihu.com/question/20702822点透产生原因http://www.cnblogs.com/yexiaochai/p/3442220.html 叶小钗的分析可以看到解决方案是：1.使用fastclick库2.或者全部使用zepto的tap事件，不留clic
阅读全文
摘要：页面逻辑：技术统计比赛竞猜猜你喜欢进入页面时，获取服务器的当前时间。然后进行页面上的每秒递增。1.每隔n秒向后台发送请求，获取最新比分信息，球队图像，球员信息。然后更改页面。2.每隔n秒向后台发送请求，获取最新竞猜问题。并缓存请求到的数据。如果缓存数据和下次请求到的数据一样，不作页面更新。否则，页面更新。另外还获取到，倒计时开始时间。如果当前时间大于倒计时开始时间，则进行倒计时。然后根据答题status，来确定答题按钮图标。点击答题按钮图标，根据后台返回的status，来确定显示已答题界面，还是未答题界面。如果未答题界面，还要选择是或否，又发送请求给后台。之后显示已答题界面。天猫app内嵌h5
阅读全文
摘要：注意：当前1.1.3版本的zepto，已经有模块来支持wp8原先的zepto，通过__proto__赋值，来使dom继承到$.fn方法，无奈IE11之前的IE10，IE9不支持这种写法，所以我们只能自己手动把方法添加到dom// `$.zepto.Z` swaps out the prototype...
阅读全文
摘要：很多 WEB 开发者可能都会碰到这种头痛的问题，就是当用户对页面进行缩小或放大时，原本好好的布局就被破坏了。如果让网页支持自适应的缩小和放大布局，对于开发者来说是一个不小的挑战。在我看来如果用户有意识的去对网页进行缩放，那么就应该知道缩放会破坏布局。还有很多用户其实压根不知道自己是何时对网页进行了缩放，此时就需要提醒用户应该将浏览器的缩放级别重置成默认的比例。说到浏览器的缩放检测，可能有好几种方法都可以实现，从检测 CSS 样式到检测 Flash 的尺寸，可以说是各显神通，但我都觉得有点麻烦。其实还有更简便的方法的，当然各个浏览器的检测方法又有不同，对于 IE6，就直接无视了，因为 IE6 只
阅读全文
摘要：因为有闭包，能返回函数，所以针对于面向对象的封装，继承，多态三个特性实现，很舒服。代码如下： 为什么没写多态呢，因为你自己想想都会。
阅读全文
摘要：(function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_obj.$scene_arr || (function(){console.log("没有场景数组，请设置$scene_arr");})(), // 导航数组 $nav = arg_obj.$nav || (function(){console.log("没有导航数组...
阅读全文
摘要：javascript库的产生，增强了浏览器或javascript语言的某些机制的功能，让业务开发人员，更专注业务逻辑，而不是机制逻辑。比如，0.兼容性同样的功能函数，不同的浏览器所暴露的api名字不一样。库对浏览器做了判断，然后对外暴露统一的api。1.事件管理浏览器没有提供，一次性，去除某个html元素所有通过addEventListener绑定的事件，的api而库通过对你绑定的事件，进行标记，分类。于是你可以通过库提供的api，进行一次性去除某个html元素所绑定的所有事件。2.ajax浏览器没有提供超时，跨域（最新ajax规范有提供），后退处理。而库封装了各种问题的解决方案，对外暴露统一
阅读全文
摘要：对于ajax，三步骤，第一，创建xhr对象；第二，发送请求；第三，处理响应。但在编写过程中，实际中会碰到以下问题，1.超时2.跨域3.后退解决方法：1.超时设置定时器，规定的时间内未返回信息，作超时处理。2.跨域这个则和html4的ajax关系不大了，动态添加script标签，并设置其onload事件，进行处理。3.后退不考虑IE的情况下，通过修改location.hash产生历史，设置hashchange事件处理后退。封装成库的过程：1.给用户填的抽象2.重复出现的过程要抽象3.封装过程，参考设计模式文不对题不解释。
阅读全文
摘要：第一，通过obj.addEventListener("click",fn)绑定的事件，你不能通过obj.onclick = null;来移除绑定点击事件的所有回调函数。所以引入第三方对象空间handler，来对用最终add函数绑定的事件，进行事件管理。具体如何管理，首先是以html element为key，它的value是一个数组，数组元素handler是zepto封装的事件对象。其对象为del:undefinede:"click"fn:function (){i:0ns:"namespace"proxy:function (e) {
阅读全文
摘要：首先看的是整体框架,// zepto骨骼，这个函数的作用使得Zepto(slector, context)使用很多$.fn里面的方法var Zepto = (function(){ // zepto是一个命名空间 var $, zepto = {} // 这是一个工厂方法，返回一个数组 zepto.Z = function(dom, selector) { dom = dom || [] // 不知道__proto__和prototype的区别了吧，一个是对象的，另一个是方法的。new出来的对象的__proto__和构造函数的prototyp...
阅读全文
摘要：网页测试源代码： 浏览器图片加载 display:none;的图片会不会加载？会！DOM结构预备的时候，display:none;的图片会不会加载？会！别忘了查看附件玉伯博客的讲解：请在主流浏览器中打开测试页面，在Fiddler里查看http请求。1. 隐藏图片《...
阅读全文
摘要：http://chaoskeh.com/blog/some-experience-of-using-zepto.html前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了Zepto这个著名的 DOM 操作库。为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以学习成本也很低。但是在开发过程中，我发现 Zepto 还远未成熟，其中包含了一些或大或小的“坑”，与 jQuery 的差距还是
阅读全文