摘要： 前情回顾根据之前的学习，我们形成了一个view与一个messageCenterview这块来说又内建了一套mvc的东西，我们这里来理一下首先View一层由三部分组成：① view② dataAdpter③ viewControllerview一块两个重要数据是模板以及对应data，一个状态机stat... 阅读全文

摘要： 前言在单页应用中，view与view之间的通信机制一直是一个重点，因为单页应用的所有操作以及状态管理全部发生在一个页面上没有很好的组织的话很容易就乱了，就算表面上看起来没有问题，事实上会有各种隐忧，各种坑等着你去跳最初就没有一定理论上的支撑，极有可能是这么一种情况：① 需求下来了，搞一个demo做交... 阅读全文

摘要： 前言在我们日常的网页浏览中，我们非常喜欢做一个操作：点击浏览器的前进后退在Ajax技术出现后，有些时候前进后退就会给开发者带来困扰，甚至一些开发者试图去干掉History随着Html5的发展，移动端的兴旺，单页应用出现了，于是History的处理被不得不提上议程了！要知道，这一直是一项让人不愿意去碰... 阅读全文

摘要： 前言我们上次写了一个简单的日历插件，但是只是一个半成品，而且做完后发现一些问题，于是我们今天尝试来解决这些问题PS：距离上次貌似很久了上次，我们大概遇到哪些问题呢：① 既然想做一套UI库，那么就应该考虑其它UI库的接入问题这个意思就是，我们的系统中所有UI插件应该有一些统一行为，我们如果希望统一为所... 阅读全文

摘要： 格式化上下文( Formatting context )格式化上下文指的是初始化元素定义的环境。包含两个要点，一个是元素定义的环境，一个是初始化。在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inlin... 阅读全文

摘要： 前言最近开始整理我们的单页应用框架了，虽然可能比不上MVVM模式的开发效率，也可能没有Backbone框架模块清晰，但是好歹也是自己开发出来而且也用于了这么多频道的东西，如果没有总结，没有整理，没有开源就太可惜了......所以最近开始整理框架相关的东西，争取抽象一点东西出来框架出来还需要一点时间，... 阅读全文

摘要： 前言首先发一点牢骚，互联网公司变化就是快，我去一个团队往往就一年时间该团队就得解散，这不，公司居然把无线团队解散了，我只能说，我那个去！！！我去年还到处让人来呢，一个兴兴向荣的团队说没就没了啊！我找谁哭去......于是我们团队一个大哥说他去哪哪就解散，我老大说他去哪哪就倒霉，如此看来，不是我们导致... 阅读全文

摘要： 前言这个星期折腾了一周，中间没有什么时间学习，周末又干了些其它事情，这个时候正好有时间，我们一起来继续学习requireJS吧还是那句话，小钗觉得requireJS本身还是有点难度的，估计完全吸收这个月就过去了，等requireJS学习结束后，我们的学习流程可能就朝两个方向走① 单页应用框架/UI库整理② UML文档相关/重构思想相关（软性素质）然后以上的估计估计会持续3、4个月时间，希望学习下来自己能有不一样的提高，成为一个合格的前端，于是我们继续今天的内容吧requireJS中的队列经过之前的学习，我们队requireJS的大概结构以及工作有了一定认识，但是，我们对于其中一些细节点事实上还 阅读全文

摘要： 前言经过昨天的学习，我们大概了解到了requireJS的主要结构，这里先大概的回顾一下首先从总体结构来说，require这里分为三块：① newContext之前变量声明或者一些工具函数② newContext大家伙③ 解析script标签抽出data-main，并提供几个对外接口从流程上讲，大概发生了这些事情：① script标签引入requireJS后，便会初始化一些变量以及函数，并不干实际的事情② 在主干结构第三步之前会使用req({})调用（并且只会调用一次）newContext方法由此会维护一个newContext的闭包环境，之后的很多变量全在其中③ 取出script标签中的data 阅读全文

摘要： 前言现在工作中基本离不开requireJS这种模块管理工具了，之前一直在用，但是对其原理不甚熟悉，整两天我们来试着学习其源码，而后在探寻其背后的AMD思想吧于是今天的目标是熟悉requireJS整体框架结构，顺便看看之前的简单demoRequireJS学习笔记程序入口源码阅读仍然有一定门槛，通看的做法不适合我等素质的选手，所以还是得由入口开始，requireJS的入口便是引入时候指定的data-main在js引入后，会自动执行指向data-main的js函数，这个就是我们所谓的入口，跟着这条线，我们就进入了requirejs的大门首先，引入js文件本身不会干什么事情，那么requirejs内部 阅读全文

摘要： grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：① 压缩文件② 合并文件③ 简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件，初学，有误请包涵准备阶段1、nodeJs环境因为grunt是基于nodeJs的，所以首先各位需要安装nodeJ... 阅读全文

摘要： 前言【grunt第二弹】30分钟学会使用grunt打包前端代码（02）【grunt第一弹】30分钟学会使用grunt打包前端代码经过前两次的学习，我们了解了grunt打包的一些基础知识，对于压缩几个文件有了初步认识但是实际项目中的应用往往不是那么简单的，因为我们会有分支，我们也会有app版本Html5版本，更复杂的情况是我们有各个频道，而且各个频道是不同的团队在开发那么统一的一套打包工具如何满足不同团队的需求呢？然后，我们本地联调时候，仍然需要打包，但是打包的代码有些时候却不想要minify，这些功能都是实际项目重要用到的我们这个时间化大力气学习grunt打包一块的知识是有绝对意义的，不然前端 阅读全文

摘要： 前言在很久之前，我们项目有一个动画功能，功能本身很简单，便是典型的右进左出，并且带动画功能以当时来说，虽然很简单，但是受限于框架本身的难度，就直接使用了CSS3的方式完成了功能当时主要使用transform与animation实现功能，并且用了一个settimeout执行回调，然后此事便不了了之了但是出来混总是要还的，这不，最近相似的东西又提了出来，我们当然可以将原来的那套东西拿来用，但是看着那个settimeout总是不是滋味，因为这样捕捉回调的效果以及可能引起的BUG大家都懂，于是就想使用transitionEnd监控动画结束再执行相关回调，于是便有了一个有趣的想法当时的心声嗯，不行，这次 阅读全文

摘要： 前言上一篇博客，我们简单的介绍了grunt的使用，一些基础点没能覆盖，我们今天有必要看看一些基础知识【grunt第一弹】30分钟学会使用grunt打包前端代码配置任务/grunt.initConfig前面我们简单的介绍了grunt相关的知识，这里我们这里还需要再熟悉下Gruntfile相关的知识点，比如说配置任务grunt的任务配置都是在Gruntfile中的grunt.initConfig方法中指定的，这个配置主要都是一些命名性属性比如我们上次用到的合并以及压缩的任务配置：grunt.initConfig({ concat: { //这里是concat任务的配置信息 ... 阅读全文

摘要： 前言以现在前端js激增的态势，一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说，文件上百简直是家常便饭，那么这个时候我们的js文件应该怎么处理呢？另外，对于css文件，又该如何处理呢？？这些都是我们实际工作中要遇到的问题，比如我们现在框架使用zepto、backbone、underscore我们要如何将他们合成一个libs文件，这都是令人头疼的问题但是grunt的出现却让这些事情变得优雅起来！简单一键，打包结束，尼玛不是不可能啊！grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：① 压缩文件② 合并文件③ 简单语法检查对于其他用法，我还不太清楚，我们这里简 阅读全文

摘要： 前言最近总结不多，一方面是之前的知识点多比较基础，所以学习总结起来比较快但是基础知识只有那么一点，现在当然可以从新知识点着手拓宽视野（这个当然要继续），但是基础积累，再深入学习是成为优秀前端必不可少的阶段所以这块地方还得死扛，所幸现在是个优秀的团队，身边高手前辈较多，有时候请教是很有方向的，这个很是幸运啊！其次年后来到公司后，总有点浮浮沉沉的事情发生，而每年的3月又是各个公司“变化”的集中期，所以心境受到了一些影响，此点不可不慎啊！搞技术的不可浮躁！如果心思过多的花在了“人事”上，那么就真有点背道而驰了，技术人员的核心竞争还是应当在技术上当然，年后会为年前干的一些事情擦屁股，一般每个团队年前都 阅读全文

摘要： 前言前端时间我写过几篇关于事件的博客：【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）【探讨】javascript事件机制底层实现原理结果被团队的狗蛋读了，发现其中一块”特别“的地方，然后之后读了Barret Lee的一篇博客：[解惑]JavaScript事件机制发现该博主之前对这个问题可能也有一定”误解“之后再陆陆续续问了团队中几个高手，狗蛋的问题都得不到解释，而且很多比较资深的前端对这个问题的认识也是有问题的所以，这里就拿出来说说，各位看看就好事件阶段引用：群里童鞋问到关于事件传播的一个问题：“事件捕获的时候，阻止冒泡，事件到达目标之后，还会冒泡吗？”。初学 JS 的 阅读全文

摘要： 前言今天来公司的主要目的就是研究虚拟键盘与fixed的问题，期间因为同事问起闭包与事件委托（阻止冒泡）相关问题，便穿插了一篇别的：【小贴士】工作中的”闭包“与事件委托的”阻止冒泡“，有兴趣的朋友可以去看看，因为首页只能放一篇，这个就略去了现在回到主要研究点，首先在移动端我们点击文本框后会出现一个虚拟键盘， 虚拟键盘让页面可视区域得到了充分利用，但是也带来了一些问题问题源头移动端虚拟键盘出现的条件是：文本框（文本类）获得焦点但是文本框获得焦点未必会弹出键盘！！！收起虚拟键盘的条件是：文本框失焦PS：总而言之，我们认为会出现或者消失虚拟键盘的时候都可能不工作在移动设备上，如果文本框在上方，点击不会 阅读全文

摘要： 前言过年期间在家喝酒有点厉害，刚刚来公司这边就变成“歪脖子”了，整个肩膀很疼啊，所以程序员平时要多运动才行开年后也很忙，一方面然后又搬了个家，另一方面最近就算有所得，都是零零碎碎，不然就是不够深入，于是就没有什么总结了最近在工作中碰到几个闭包的问题，虽然我对闭包了解不是太深，但是觉得还是可以拿出来说... 阅读全文

摘要： 前言昨天，我们跟着这位大哥的博客（https://github.com/nswbmw/N-blog/wiki/_pages）进行了nodeJS初步的学习，最后也能将数据插入数据库了但是一味的跟着别人博客写代码肯定不行，所以我们今天就来做一个简单的新闻发布系统，系统第一阶段不需要太难，主要有以下功能① 新闻类型管理② 新闻管理（具有图片上传功能）③ 新闻浏览功能虽然不多，但是也涵盖很多基本操作了，程序不过增删查改嘛，外加上传附件，够了。于是开始我们今天的学习吧准备工作根据昨天的折腾后，我们已经有了nodeJS与mongoDB环境了，现在直接新建工程文件与数据库文件即可第一步，打开命令符切换到D盘 阅读全文

摘要： 前言最近同事推荐了一个不错的网址：https://github.com/nswbmw/N-blog/wiki/_pages里面的教程很是详细，我们现在跟着他的节奏学习下NodeJS，一个简单的博客我们这次来个过年七天乐......看看能不能nodeJS来个入门让nodeJS跑起来第一步当然是安装nodeJS环境了，现在windows安装nodeJS比较快了，直接下载即可：http://www.nodejs.org/download/这里根据需要下载，下载完成后直接下一步下一步即可，完了我们就具有nodeJS环境了第二步，为了方便我们后面操作，我们直接在D盘见了一个文件夹blog然后打开wind 阅读全文

摘要： 前言面向对象编程是每次面试必问的知识点，而前端js如何实现继承每次命中率高达80%这不，近两天我们面试时候，同事就问道面试者此问题，但是，不论之前自己做的回答，还是面试者的回答，基本都不太令人满意很大的原因是多数时候前端并不需要实现继承，就jquery来说也基本上是一码到底，没有实现继承，据我所知，也就prototype与ext实现过继承所以继承对前端来说似乎不太适用近两年来情况有所变化，SPA的兴起以及前端逻辑的复杂化，让前端代码愈发的多，愈发的重，所以继承慢慢的进入了一些初级一点的前端视野所以，好好的了解如何实现继承，继承的几个用法，是非常有意义的，就算只是为面试都是很有用的文章只是个人见 阅读全文

摘要： 前言在我映像中，异步最早出现与ajax，当时我还在搞.net，然后.net居然出了一个异步的控件......虽然我最后知道了他不是异步的......然后，前端异步用得特别多，如果不是异步的程序，你都不好意思说是自己写的NodeJs是机遇javascript做出来的，异步编程模型这一特点也被带了过来，异步有很多优点，但是对设计而言却是一个噩梦，异步会打乱时序，所以加大了设计困难，但是异步对性能提升、对用户体验有了革命性的提高，所以NodeJS的 异步特性相当明显，今天我们就来简单学习异步I/O其实在操作系统层面上，只有两种I/O方式，堵塞和非堵塞在堵塞模型中，应用程序需要等待I/O完成才返回结果 阅读全文

摘要： 前言半年多之前有一次面试，当时只是想要张回家的免费机票，顺便看看运气却不想那次面试获益颇丰，所以没事出去面试面试对个人的知识总结以及思维的深化很有帮助的哦深化当然不是一朝一夕的事情，比如当时面试官就问我什么是“表现与数据分离”，就这个问题我就前前后后学习了很久，也和很多同事讨论过，但是一直没有一个比较好的结果最近在做ipad相关的单页应用研究，被一个问题困住了思维，晚上看了两集布袋戏，完了在纸上画着画着，突然对半年多之前的一道面试题很有点思路于是，今天晚上，抽时间记录之，此文只是个人见解，不一定正确，有误请指正，时间紧时间晚，行文不清晰勿怪面试回顾首先，当时我简历是抄的，里面有一句“对表现与数 阅读全文

摘要： 前言再不学nodeJs，我们就老了......在HTML5大浪袭来的时候，很多先辈就开始了NodeJs之旅，而那时我还在做服务器端的程序后来转成前端，和梯队的距离已经很大了，因为我会服务器端语言，还干了很久，所以至今才开始学习NodeJs，向完整的前端前进这次学习NodeJs的计划是：① 1-2周学习基础知识② 1周左右开发一个简单项目③ 利用NodeJs开发一套用于移动端调试的工具④ 打包相关（这个可能比较远了）NodeJs特点① 异步从文件读取到网络请求，NodeJs皆以异步完成，回调函数占据重要作用，在编程模型上Node是领先的② 事件回调事件回调让程序变得轻巧，但是具体怎么样还是取决于 阅读全文

摘要： 前言在此，我不得不说移动端的兼容问题很多，并且很令人头疼，这不，这个星期又有两个让我逮着了，一个是使用zepto过程中出现的问题，一个是ios虚拟键盘的问题我这里做一次记录，以免以后忘了，同时希望对后面做移动开发的朋友有一定帮助，首先，我们调一个简单的来说zepto与querySelectorAll首先，W3C提供了新的查询接口，querySelector与querySelectorAll其中querySelector返回的是一个对象选择第一个对象，querySelectorAll返回的一个集合(NodeList)以百度首页来说，会出现这样的现象：其他地方可能还会说道queryselector 阅读全文

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

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

摘要： 题记四月前，低迷、失志踌躇不前形容自己再好不过，中途来了一次彻底的醒悟，于是我发现自己变得勤奋了，我发现自己乐于付出了，因为我知道安逸的生活磨砺不出优秀的能力，没有能力的人何来安逸？于是我清晰了自己的理想，明确了自己的目标天道酬勤，敢于自省且突破自身的人总会得到上天的眷念，前提是你是不是正在作死！想找个好点的工作安逸度日，一点一点的吃着老本，甚至还感觉游刃有余？不再精进自己的能力，做着毫无工作量的事情，却又抱怨自己的才华得不到施展？ 于是，突破不了工作的困局就一再的消磨自己的意志，丧失了思想会看不清东西，失去了眼界就是折翼的雄鹰，生活带来的是活生生的真实，最后只会发现很无力 我们无力改变生活的 阅读全文

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

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

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

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

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

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

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

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

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

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

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