javascript - 随笔分类(第3页) - 叶小钗

【iScroll源码学习04】分离IScroll核心

摘要：前言最近几天我们前前后后基本将iScroll源码学的七七八八了，文章中未涉及的各位就要自己去看了1. 【iScroll源码学习03】iScroll事件机制与滚动条的实现2. 【iScroll源码学习02】分解iScroll三个核心事件点3. 【iScroll源码学习01】准备阶段4. 【iScroll源码学习00】模拟iScroll我们学习源码的目的绝不是学习人家的源码，而是由高手的代码里面学习思想，或者研究解决方案，就拿我们这次学习iScroll，我的目的就是“抄袭”，我今天就针对自己的需求来抄袭iScroll的源码，组成自己的库，然后用于项目，然后高高兴兴的装B.......关系图工具类第阅读全文

posted @ 2014-01-07 16:50 叶小钗阅读(4093) 评论(4) 推荐(7) 编辑

【iScroll源码学习03】iScroll事件机制与滚动条的实现

摘要：前言想不到又到周末了，周末的时间要抓紧学习才行，前几天我们学习了iScroll几点基础知识：1. 【iScroll源码学习02】分解iScroll三个核心事件点2. 【iScroll源码学习01】准备阶段3. 【iScroll源码学习00】模拟iScroll今天我们来学习其事件机制以及滚动条的实现，完了后我们iScroll就学习的差不多了，最后会抽离iScroll的精华部分组成一个阉割版iScroll并总结下iScroll的一些地方结束iScroll的学习，然后彻底扑向nodeJS了iScroll事件机制我们平时所说的事件机制其实应该分开，分成两块：① DOM的事件相关② 系统自建事件机制在我阅读全文

posted @ 2014-01-04 14:23 叶小钗阅读(12522) 评论(10) 推荐(5) 编辑

【iScroll源码学习02】分解iScroll三个核心事件点

摘要：前言最近两天看到很多的总结性发言，我想想今年好像我的变化挺大的，是不是该晚上来水一发呢？嗯，决定了，晚上来水一发！上周六，我们简单模拟了下iScroll的实现，周日我们开始了学习iScroll的源码，今天我们接着上次的记录学习，因为最近事情稍微有点多了学习进度可能要放慢，而且iScroll这个库实际意义很大，不能囫囵吞枣的学习，要学到精华，并且要用于项目中的，所以初步规划是最近两周主要围绕iScroll展开而后两个选择：① 分离iScroll代码用于项目；② 抄袭iScroll精华部分用于项目。无论如何都要用于项目......iScroll源码学习01准备阶段SPA移动站点APP化研究之上中下阅读全文

posted @ 2014-01-01 15:50 叶小钗阅读(12893) 评论(4) 推荐(10) 编辑

原生andriod浏览器回退后dom（click）事件全体失效问题探究

摘要：问题描述今天同事遇到一个神一样的BUG：在原生浏览器下，为dom元素绑定一个click事件，其中有个a标签外链，点击a后进入其他页面，点击浏览器后退后，页面点击事件全体失效！我于是用ios测了下没事，用andriod其他浏览器试了下也没事，就是原生的有问题，怀疑是特定的手机有问题，又陆续换了几台，发现原生的都有问题于是便开始找解决方案，下面就来聊下今天的漫长之路，这里先给会出问题的代码： 1 2 3 4 5 6 7 8 9 10 ttt11 12 百度一下 13 28 29 DOM事件丢失第一步想到的当然是事件丢失了，或者就是不执行了，于是... 阅读全文

posted @ 2013-12-31 00:03 叶小钗阅读(3632) 评论(1) 推荐(2) 编辑

【iScroll源码学习01】准备阶段

摘要：前言我们昨天初步了解了为什么会出现iScroll：【SPA】移动站点APP化研究之上中下页面的iScroll化（上），然后简单的写了一个demo来模拟iScroll，其中了解到了以下知识点：① viewport相关知识点（device-width等）②CSS3硬件加速③ 如何暂停CSS动画④ e.preventDefault导致文本不能获取焦点解决方案......当然，我们写的demo自然不能和iScroll本身的代码比肩，但是demo过程中我们也大概了解了iScroll代码过程中需要注意的一些问题于是，今天让我们进入iScroll的学习吧初探iScroll 1 2 3 4 ... 阅读全文

posted @ 2013-12-29 18:41 叶小钗阅读(6798) 评论(8) 推荐(11) 编辑

【iScroll源码学习00】模拟iScroll

摘要：前言相信对移动端有了解的朋友对iScroll这个库非常熟悉吧，今天我们就来说下我们移动页面的iScroll化iScroll是我们必学框架之一，我们这次先根据iScroll功能自己实现其功能，然后再学习iScroll源码下面先给出iScroll官方的例子和源码，要看效果的朋友自己去看吧：https://github.com/cubiq/iscroll本人能力有限，文中有误请提出viewport在移动端新出了一个属性叫做“viewport”，这个便是我们手机上的虚拟视口（viewport），也就是视觉窗口，显示区域移动设备的显示区域比电脑小得多（但也方便得多），为了让手机显示的更加友好，Apple 阅读全文

posted @ 2013-12-28 17:13 叶小钗阅读(7080) 评论(13) 推荐(12) 编辑

【再探backbone 03】博客园单页应用实例（提供源码）

摘要：前言之前尝试性的读了下backbone的源码，对继承、事件、view一块还比较熟悉，看下去比较顺畅，但是在model collection方面就很不顺利究其原因还是没有使用过，不够熟悉，以码读码，脱离了业务逻辑的代码毫无意义，所以今天我们先来做一个例子吧，然后再根据例子学习今天来一段官网以外的代码，本来这里想抄一个代码来着，但是这样的话好像意义就不大了，于是自己重新写一个例子吧注意这个例子只是简单例子，各位不要当真，而且代码是今天下午写的，有BUG不要骂我，然后放到IIS环境下才有数据下载源码：02backbone.zip单页应用实例以博客园为例，我们一起做一个单页，提供list和detail 阅读全文

posted @ 2013-12-22 20:38 叶小钗阅读(5947) 评论(7) 推荐(6) 编辑

【再探backbone 02】集合-Collection

摘要：前言昨天我们一起学习了backbone的model，我个人对backbone的熟悉程度提高了，但是也发现一个严重的问题！！！我平时压根没有用到model这块的东西，事实上我只用到了view，所以昨天学习的效果其实不佳，比起上次对underscore的熟悉，对zepto的熟悉，甚至对fastclick的熟悉学习效率打了折扣，而且一些地方不明不白，所以，我今天决定将速度放慢，我们学习collection时候先做小例子，争取覆盖关键点，然后再从源码学习，于是开始吧【再探backbone 01】模型-ModelRequireJS与Backbone简单整合初探Backbone集合-Collection实阅读全文

posted @ 2013-12-22 14:56 叶小钗阅读(2968) 评论(1) 推荐(2) 编辑

【再探backbone 01】模型-Model

摘要：前言点保存时候不注意发出来了，有需要的朋友将就看吧，还在更新......几个月前学习了一下backbone，这段时间也用了下，感觉之前对backbone的学习很是基础，前几天有个园友问我如何将路由的#改为其他我其实想说这个不能乱改，又怕不熟悉误人子弟，所以今天我们来一起重新学习下他，看看会不会带来不一样的感觉我在博客园nuysoft的博客看到了backbone的分析，可惜没有写完，不失为一个遗憾，希望作者坚持下去，水平高得贡献出来哟（@nuysoft）然后，网上backbone基础用法的学习文章很多，感觉就nuysoft的深入，只不过多是点一下有点可惜，再次希望作者坚持下去......Web应阅读全文

posted @ 2013-12-21 15:23 叶小钗阅读(4554) 评论(0) 推荐(5) 编辑

【探讨】javascript事件机制底层实现原理

摘要：前言又到了扯淡时间了，我最近在思考javascript事件机制底层的实现，但是暂时没有勇气去看chrome源码，所以今天我来猜测一把我们今天来猜一猜，探讨探讨，javascript底层事件机制是如何实现的博客里面关于事件绑定与执行顺序一块理解有误，请看最新博客基础知识事件捕获/冒泡我们点阅读全文

posted @ 2013-12-17 00:47 叶小钗阅读(33717) 评论(32) 推荐(34) 编辑

【初探Underscore】再说模版引擎

摘要：前言Underscore是一个JavaScript实用库,提供了类似Prototype.js(或Ruby)的一些功能,但是没有扩展任何JavaScript内置对象。它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。Underscore提供了80多个函数,包括常用的:map,select,invoke— 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能, 强类型相等测试, 等等.在新的浏览器中, 有许多函数如果浏览器本身直接支持,将会采用原生的,如forEach,map,reduce,filter,every,some和indexOf。阅读全文

posted @ 2013-12-14 02:34 叶小钗阅读(19644) 评论(10) 推荐(15) 编辑

【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

摘要：前言很久没有扯淡了，我们今天来扯淡吧。我今天思考了一个问题，我们页面的dom树到底是如何渲染的，而CSS盒模型与javascript是否有联系，于是便想到一个问题：CSS的盒模型具有厚度么？？？该文只是一种帮助理解的说法，与官方定义不一定统一，权当扯淡盒模型稍微入门点的前端都知道CSS盒模型，于是我们不厌其烦的偷图来用：这个就是我们传说中的盒模型，我们这里先把盒模型放一放，来看我们的DOM事件流DOM事件流在上一篇博客中，我们详细说了下javascript的事件机制：【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）今天也不知道怎么发神经了，突然对其中两个事件参数产生兴趣：阅读全文

posted @ 2013-12-11 00:26 叶小钗阅读(2149) 评论(14) 推荐(12) 编辑

【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

摘要：前言这篇博客有点长，如果你是高手请您读一读，能对其中的一些误点提出来，以免我误人子弟，并且帮助我提高如果你是javascript菜鸟，建议您好好读一读，真的理解下来会有不一样的收获在下才疏学浅，文中难免会有不同程度的错误，请您指正留言PS：事件阶段一节请看最新博客，之前理解有误javascript事... 阅读全文

posted @ 2013-12-07 18:09 叶小钗阅读(47043) 评论(37) 推荐(59) 编辑

【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”

摘要：前言最近好好的研究了一番移动设备的点击响应速度，期间不断的被自己坑，最后搞得焦头烂额，就是现在可能还有一些问题，但是过程中感觉自己成长不少，最后居然感觉对javascript事件机制有了更好的认识，回头来看，还是不错的，所以今天将近期的学习记录下来供后期查询今天我们再来重新回顾下javascript的事件机制注意：下面说的android浏览器，意思是android下多数浏览器，不包括chrome事件基础javascript与html之间的交互式通过事件实现的，事件是文档（窗口）中发生的一些特定交互，这些交互可以使用监听器（处理程序）预定，事件发生时就会回调我们的函数PS：这就是传说中的观察者模阅读全文

posted @ 2013-11-30 18:28 叶小钗阅读(6850) 评论(7) 推荐(8) 编辑

【zepto学习笔记03】事件机制

摘要：前言我们今天直接进入事件相关的学习，因为近期可能会改到里面的代码就zepto来说，我认为最重要的就是选择器与事件相关了，随着浏览器升级，选择器简单了，而事件相关仍然是核心，今天我们就来学习学习zepto事件处理部分篇幅不大，不到400行，前面篇幅也很小，所以真的很适合移动开发变量定义1 var $$ = $.zepto.qsa,2 handlers = {}, _zid = 1,3 specialEvents = {},4 hover = {5 mouseenter: 'mouseover',6 mouseleave: 'mouseout'7 }事件部分首先定义阅读全文

posted @ 2013-11-29 00:14 叶小钗阅读(23579) 评论(3) 推荐(14) 编辑

【zepto学习笔记02】零碎点

摘要：前言上次我们看了zepto的选择器方面的东西，其实zepto简单很大程度是因为他用了最新的检索器querySelectorAll，今天我们来学习下zepto的一些零碎点的地方吧，主要根据zepto官方文档顺序来contains (parent, node)该方法用于检测父节点是否包含给定的dom节点，如果两者相同则返回falsecontains 为javascript的基本语法，首先在ie中，最后其它浏览器也扩展了，如果a包含b则返回true1 p = document.getElementById('parent'),2 c = document.getElementById 阅读全文

posted @ 2013-11-28 15:13 叶小钗阅读(10502) 评论(10) 推荐(5) 编辑

【zepto学习笔记01】核心方法$()（补）

摘要：前言昨天学习了核心$()，有几个遗留问题，我们今天来看看吧$.each遍历数组/对象，将每条数据作为callback的上下文，并传入数据以及数据的索引进行处理，如果其中一条数据的处理结果明确返回false，则停止遍历，并返回elements 1 $.each = function (elements, callback) { 2 var i, key 3 if (likeArray(elements)) { 4 for (i = 0; i ]*>/;我们来随便写一段代码测试下1 //HTML代码片断的正则2 var fragmentRE = /^\s*]*>/;... 阅读全文

posted @ 2013-11-21 15:50 叶小钗阅读(4666) 评论(5) 推荐(4) 编辑

【zepto学习笔记01】核心方法$()

摘要：前言我们移动端基本使用zepto了，而我也从一个小白变成稍微靠谱一点的前端了，最近居然经常要改到zepto源码但是，我对zepto不太熟悉，其实前端水准还是不够，所以便私下偷偷学习下吧，别被发现了核心方法$()我们使用这个方法一般有几个用途（我这里只说我自己用到过的），这里根据使用度排个序：① 选择器/$(selector)将返回一个包装过的dom集合对象（有很多选择器）② html字符串/$(domStr)仍然返回一个包装过的dom对象，他会将字符串初始化为我们的dom结构PS：新增了一个方法可以直接赋予dom结构属性，我们这里不关注③ 函数/$(function(){})我基本没这么用过，阅读全文

posted @ 2013-11-20 17:45 叶小钗阅读(16108) 评论(2) 推荐(2) 编辑

【重构笔记06】简化函数调用

摘要：前言在对象技术中，最重要的概念莫过于“接口interface”，容易被理解和使用的接口，是开发良好面向对象软件的关键，本章将介绍几个被接口变得更简洁易用的重构手法。改名① 最简单也是最重要的一件事情就是修改函数名，名称是程序作者与阅读者交流的关键工具PS：如果说HTML是构造世界的话，里面最恐怖的是就是给一山一水建立class名，你会发现是一个巨大的工程！② 函数参数在接口中扮演着十分重要的角色，增减参数都是常见的重构手法，刚接触面向对象的程序员往往使用很长的参数列，但是面向对象的参数可以保持参数简短如果来自同一对象的多个值被当做参数传递，可以使用保持对象完整避免传递参数，而采用引入参数对象. 阅读全文

posted @ 2013-11-17 14:29 叶小钗阅读(1857) 评论(0) 推荐(1) 编辑

【重构笔记05】简化条件表达式

摘要：前言条件逻辑往往十分复杂，我们今天就看看有哪些怎样才能够简化条件表达式的逻辑分解条件表达式，可以将条件逻辑分成若干小块，这样就可以将分支逻辑与操作细节分离合并条件表达式我们代码中如果出现一系列条件测试，而且他们都获得相同的结果，那么将这些测试合并为一个条件表达式，并将这个表达式提炼为一个独立函数有时候我们会发现这样一连串检查，检查条件各不相同，最终的行为却一致，如果出现这种情况，就应该使用“逻辑或”和“逻辑与”将它们合并为一个条件表达式之所以要合并条件代码，有两个重要原因，首先，合并后的条件代码会告诉你实际上只有一次条件检查，只不过有多个并列条件需要检查而已从而使这一次检查的用意更清晰，当然，阅读全文

posted @ 2013-11-16 17:10 叶小钗阅读(2143) 评论(1) 推荐(1) 编辑

随笔分类 - javascript