摘要： 前言上周我与阿里的宇果有一次技术的交流，然后对天猫H5站点做了一些浅层次的分析，后面点时间基本天天都会有联系，中途聊了一些技术细节、聊了双方团队在干什么，最后聊到了前端优化。因为我本身参与了几次携程H5站点的优化，在这方面有一些心得，但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节。携程做优... 阅读全文

摘要： 前言我们做前端开发的时候，很有可能会做一个竞品分析，比如我就做过去哪儿、艺龙、同程等与携程的移动站点竞品分析，竞品分析的目的一般是技术对比，但是更多的是业务对比，知己知彼，百战不殆；我们同时会借鉴、学习其它网站的技术，比如网站HTML使用、class命名、使用了什么新技术，还有优化体验相关的，对大型... 阅读全文

摘要： 前言记得刚毕业的时候参加了一次校招面试，之前表现的很好，最后时面试官问我懂不懂设计模式，我说不懂，然后就进去了；后面又参加了某大公司的校招，开始表现还行，后面面试官问我懂不懂设计模式，我说懂（上次后补习了下），最后把工厂模式的代码背写到了纸上，然后就没有然后了......现在回想起来当时有点傻有点天... 阅读全文

摘要： 什么是Application CacheHTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。Application Cache带来的三个优势是：① 离线浏览② 提升页面载入速度③ 降低服务器压力而且... 阅读全文

摘要： 前言 这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距： 这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用 文中有误请您提出，以免误人自误 技术选型 单页or多页 spa（singl 阅读全文

摘要： 回顾与展望大学两年前，小钗发了一篇水文：两年内，我要成为国内优秀的前端技术人员！从那以后小钗又回到了大学的学习状态，晚上会私下学习总结，周末学习新知识，跌跌撞撞，两年时间快结束了，两年时间小钗经历了些神马呢？今天来一篇总结的水文。01 重复读了两本经典的前端书籍：《Javascript高级程序设计》... 阅读全文

摘要： 回顾经过昨天的优化处理（【前端优化之拆分CSS】前端三剑客的分分合合），我们在UI一块做了几个关键动作：① CSS入UI② CSS作为组件的一个节点而存在，并且会被“格式化”，即选择器带id前缀，形成的组件如图所示：这样做基本可以规避css污染的问题，解决绝大多数问题，但是更优的方案总是存在，比如w... 阅读全文

摘要： 几年前，我们这样写前端代码：测试慢慢的，我们发现这样做的很多弊端，单就样式一块，改一个样式会涉及到多处调整，所以慢慢的dom标签中的css全部去了一个独立的css文件再后来，交互变得异常复杂，onclick也不好使了，所以js也分离开了，经典的html+css+javascript结构分离逐步清晰，... 阅读全文

摘要： 响应式设计的意义随着移动设备的发展，移动设备以迅猛的势头分刮着PC的占有率，ipad或者android pad的市场占有率稳步提升，所以我们的程序需要在ipad上很好的运行，对于公司来说有以下负担：设备系统上来说主要分为android ios；尺寸上看又以手机与pad为一个分界线，如果再加一个H5站... 阅读全文

摘要： 一般情况下CSS不会直接影响JS的程序逻辑，但是以CSS实现动画的话，这个便不太确定了，这个故事发生在与UED迁移全局样式的过程。曾经我有一段实现弹出层隐藏动画的代码是这个样子的：1 if (this.needAnimat && typeof this.animateHideAction == 'f... 阅读全文

摘要： jQuery在移动端移动端dom操作库首推zepto，他实现了jQuery的大多数接口，被移动端成功扶正；弃用jQuery的主要原因是尺寸上的考虑而jQuery经过几次发展，终于宣布不再理睬IE8，但是最新的版本尺寸依旧超过80K，而我移动端核心框架加起来还没一个DOM库大，很难不放弃他究其原因，积... 阅读全文

摘要： 动画在webapp的现状webapp模式的网站追求的就是一个体验，是HTML5&CSS3浪潮下的产物，抛开体验不说，webapp模式门槛比较高；而体验优化的一个重点便是动画，可以说动画是webapp的一个亮点。但也是一个难点，一个痛点，主要原因是：移动端手机的碎片化严重。设备、型号、版本、分辨率等差... 阅读全文

摘要： 上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提升，但要说html结构完全控制于csser的话就不一定了在整个header组件的代码过程中，我与重构同事就... 阅读全文

摘要： 前言我们在手机上布局一般是这个样子的：其中头部对整个mobile的设计至关重要，而且坑也很多：① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器... 阅读全文

摘要： 前言气泡组件在实际工作中非常普遍，无论是网页中还是app中，比如：我们这里所谓气泡组件是指列表型气泡组件，这里就其dom实现，css实现，js实现做一个讨论，最后对一些细节点做一些说明，希望对各位有用小钗最近初学CSS，这里做一个专题，便于自身CSS提升，文章有不少问题与可优化点，请各位指导组件分类... 阅读全文

摘要： 在前文中我们不止一次强调过模块化编程的重要性，以及其可以解决的问题：① 解决单文件变量命名冲突问题② 解决前端多人协作问题③ 解决文件依赖问题④ 按需加载（这个说法其实很假了）⑤ ......为了深入了解加载器，中间阅读过一点requireJS的源码，但对于很多同学来说，对加载器的实现依旧不太清楚事... 阅读全文

摘要： javascript字符串与数组有很多精巧的方法，比如splice、indexOf，而replace在字符串处理中偶尔会产生让人愉悦的效果比如underscore中的模板引擎替换部分，又如信用卡分割的应用简单来说，replace用于将字符串中一些字符替换为另一些字符，最简单的情况如下var num ... 阅读全文

摘要： 前言javascript与程序的语言比如C#或者java不一样，他并没有“类”的概念，虽然最新的ECMAScript提出了Class的概念，我们却没有怎么用就单以C#与Java来说，要到真正理解面向对象的程度也是要花一点功夫的，特别是初学的同学往往意识不到面向对象的好处，因为我们编码的流程是这样的①... 阅读全文

摘要： 前言网络蜘蛛无法解析javascript，至少百度是不能的，神马搜索差的更远，而我们的webapp的渲染展示完全由javascript驱动所以蜘蛛访问webapp页面会得到一个白页面，比如，我们期待SEO看到的是这个样子的网页其实他看到的是这个样子的代码：那么这个问题应该如何处理呢？比较早的处理方案... 阅读全文

摘要： 前言今天微博看到了寒冬大神的面试题，觉得挺有意思的，这里就做一点解答http://weibo.com/1196343093/Bhj510t50谈谈你对CSS布局的理解讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。谈谈你对Web前端组件化的理解，Web Component会带来怎样的影响谈谈... 阅读全文

摘要： 前言最近校招要来了，很多大三的同学一定按捺不住心中的焦躁，其中有期待也有彷徨，或许更多的是些许担忧，最近在开始疯狂的复习了吧这里小钗有几点建议给各位：① 不要看得太重，关心则乱，太紧张反而表现不好② 好的选择比坚持更重要这点小钗便深有体会了，因为当年我是搞.net的，凭着这项技能想进bat简直就是妄... 阅读全文

摘要： 推荐语：今天推荐一篇华为同事的同事翻译的一篇文章，推荐的主要原因是作为一个华为员工居然晚上还能写文章，由不得小钗不佩服！！！其中的jQuery、angular、react皆是十分优秀的框架，各有特点，各位可以看看编辑:github原文链接：Revealing the Magic of JavaScr... 阅读全文

摘要： 前言zepto号称迷你版jQuery，并且成为移动端dom操作库的首选事实上zepto很多时候只是借用了jQuery的名气，保持了与其基本一致的API，其内部实现早已面目全非！艾伦分析了jQuery，小钗暂时没有那个本事分析jQuery，这里就恬不知耻说说自己对zepto的源码理解，希望对各位有用首... 阅读全文

摘要： 前言最近碰到几个恶心问题，也发现一点优化技巧，以及对Hybrid知识的一些整理，这里便一并拿出来做分享了，关于Hybrid的调试，会是我今后一个重点我的博客首先是学习笔记，方便自己做知识沉淀，以后好查阅，其次才是分享，所以其中有误请提出，觉得乱是很有可能的~~~~~~我们在工作中一般会有这么一个流程... 阅读全文

摘要： 前言 在移动浪潮袭来的时候，小钗有幸进入框架组做webapp框架开发，过程中遇到了移动端的各种坑，也产生了各种激情，就我们公司的发展历程来说 第一阶段：使用传统方式开发移动站点，少量引入HTML5元素 第二阶段：框架化，使用jquery mobile框架，发现慢，组件不好管理，不好维护给搞掉了 第三 阅读全文

摘要： 前言近期杂事甚多，这些事情的积累对知识体系的提升有好处，但是却不能整理出来，也整理不出来比如说我最近研究的Hybrid在线联调方案便过于依赖于业务，就算分享也不会有人读懂，若是抽一点来分享又意义不大又拿最近做webapp view 转场动画研究，就是几个demo不断测试，感觉没有什么可说的最后甚至对... 阅读全文

摘要： webapp的一大优势便是在view切换时候可以拥有媲美与native的动画效果，但是很多时候那只是一种想法，真正的情况却不是这样产生此问题的原因有：① 手机CPU烂！② 手机显卡烂！就算四核其渲染也很有问题③ 高端手机浏览器会有BUG④ 低端手机支持不好（国内山寨机笑而不语）因为以上原因，事实上做... 阅读全文

摘要： 这两天正好看到了程序员小卡同学的一篇博客，里面对requireJS路径的解析做了一些说明，里面有点问题待解决，我这里正好知道一点，所以整理成文，不知对小卡同学是否有帮助。http://www.cnblogs.com/chyingp/p/3677425.htmlhttp://www.cnblogs.c... 阅读全文

摘要： 前言在去年，我们对IScroll的源码进行了学习，并且分离出了一段代码自己使用，在使用学习过程中发现几个致命问题：① 光标移位② 文本框找不到（先让文本框获取焦点，再滑动一下，输入文字便可重现）③ 偶尔导致头部消失，头部可不是fixed哦由于以上问题，加之去年我们团队的工作量极大，和中间一些组织架构... 阅读全文

摘要： 前言之前，我们形成了页面片相关的mvc结构，但是该结构还仅适用于view（页面）级，那么真正的全局控制器app应该干些什么事情呢？我觉得至少需要干这些：功能点① 提供URL解析机制，以便让控制器可以根据URL获得当前是要加载哪个view的实例，比如http://www.baidu.com/index... 阅读全文

摘要： 单页or多页本文仅代表个人观点，不足请见谅，欢迎赐教。webapp小钗从事单页相关的开发一年有余，期间无比的推崇webapp的网站模式，也整理了很多移动开发的知识点，但是现在回过头来看，webapp究竟是好还是不好真是一言难尽哟！webapp使用JavaScript修改页面；紧接着再从服务器传递更多... 阅读全文

摘要： 前言之前我们为view引入了wrapperSet的概念，想以此解决view局部刷新问题，后来发现这个方案不太合理view里面插入了业务相关的代码，事实上这个是应该剥离出去，业务的需求千奇百怪，我们不应该去处理view现在只提供最基础的功能：① 定义各个状态的模板② 渲染模板整个view的逻辑便该结束... 阅读全文

摘要： 前情回顾根据之前的学习，我们形成了一个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的大概结构以及工作有了一定认识，但是，我们对于其中一些细节点事实上还 阅读全文