摘要： sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底部，方便用户快速进行这类元素提供的操作。本文介绍这种组件的实现思路，并提供一个同时支持将sticky元素固定在顶部或底部的具体实现，由于这种组件在网站中非常常见，所以有必要掌握它的实现方式，以便在有需要的时候基于它的思路写出功能更多的组件出来。 阅读全文

摘要： 本文内容相当简单，所以没有发布到博客园首页，如果你不幸看到，那只能是我这篇文章的荣幸，谢谢你的大驾光临~ 阅读全文

摘要： 在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是对于不利于用户体验。抛开网速的原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片做预加载的处理。 阅读全文

摘要： 简单说，有限状态机是一种模型，用来模拟现实世界的事物，但是很多js组件也都可以用有限状态机来描述，只要这个组件的行为可以通过几个有限的状态来划分，利用状态机写出来的代码，逻辑思维或者说面向对象思维更加清晰，表达能力更强。 阅读全文

摘要： 前后端分离这个词一点都不新鲜，完全的前后端分离在岗位协作方面，前端不写任何后台，后台不写任何页面，双方通过接口传递数据完成软件的各个功能实现。此种情况下，前后端的项目都独立开发和独立部署，在开发期间有2个问题不可避免：第一是前端调用后台接口时的跨域问题（因为前后端分开部署）；第二是前端脱离后台服务后无法独立运行。本文总结最近一个项目的工作经验，介绍利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境的实践过程，希望能对你有所帮助。 阅读全文

摘要： 由于浏览器提供的alert和confirm框体验不好，而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数，所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验，相对比较简单实用，希望能对你有所参考价值。 阅读全文

摘要： 最近有个非常小的h5的应用，只有2屏，需要做横向的全屏滑动切换和一些简单的动画效果，之前做这种东西用的是fullpage.js和jquery，性能不是很好，于是就想自己动手弄一个简单的东西来实现。最后我用zepto + hammer.js 和轮播的方式解决了这个问题，效果还不错，整个页面不开启Gzip时所有资源压缩后的数据大小为200KB左右。这篇文章总结这个方法的实现思路。 阅读全文

摘要： 上一篇文章《圣杯布局小结》总结了几种常见的分栏布局方法，这几个方法都可以实现多栏页面下，所有栏的高度可动态变化，某一栏宽度自适应的布局效果，能满足工作中大部分的布局需求。后来我在搜集更多关于分栏布局的文章时，发现了一个新的问题，这个问题在前面那篇文章中也有朋友在评论里跟我提起，就是如何在实现分栏布局的同时保证每栏的高度相同。我发现这种等高分栏布局的情况，在网站里面其实也很常见，所以本文总结了几种可用的方法来解决这个新的需求。 阅读全文

摘要： 圣杯布局，很久之前就听过，但是从来都没深入了解过，最近因为做了一个项目，借鉴了薪人薪事这个公司的产品页面，才第一次用到这种布局方式。于是就花了点时间，测了下它所有分栏布局的代码，每段代码都非常简单，但布局效果很完美，比我以前用的方式好用不少。本文是对它实现方式的一些总结，希望可以把这种技术推荐给跟我之前一样对它比较陌生的开发人员：） 阅读全文

摘要： mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用。本文总结它的使用方法和一些使用心得，内容不算很高深，纯粹是入门内容，看看即可。不过要是你还没有用过此类的javascript引擎库，那么本文还是值得你一读的，相信在你了解完它强大的功能和简单用法之后，一定会迫不及待地将之用于你的工作当中。 阅读全文

摘要： 浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理，是开发web应用的基础，本文着眼于此，学习浏览器缓存的相关知识，总结缓存避免和缓存管理的方法，结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。 阅读全文

摘要： 上篇文章《淘宝弹性布局方案lib-flexible实践》结合一个简单的实例，说明了lib-flexible的基本用法，但是lib-flexible的这种适配方式在适配的时候会修改viewport的initial-scale，导致viewport的width不等于device width，使得那些根据width编写的media query不一定与预期的一致，还有移动web经典的retina屏图片问题和1px边框问题在lib-flexible下也会与通常的做法有所差异，本文的内容就是研究这些东西，并提出一些自己思考和解决方法。 阅读全文

摘要： 2个月前，写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路，当时也是因为工作的关系分析了下网易跟淘宝的移动页面，最后才有那篇文章的总结，可惜的是因为项目的关系，这两个月来几乎没有机会做移动类项目的工作，所以那些理论一直没有得到真正的实践。这次因为公司有一个app需要做一个推广的下载页面，虽然简单，但也值得一试那篇文章里提到的适配方法，所以本文的内容就是介绍该文中提到的淘宝的做法：《lib-flexible弹性布局方案》。 阅读全文

摘要： 在web开发中，不可避免遇到要计算元素大小以及位置的问题，解决这类问题的基础当然是利用DOM提供的一些API结合兼容性处理来解决，所有内容大概分3篇左右的文章的来说明。本文作为第一篇，介绍DOM提供的与位置和大小相关的API，提供一些兼容性处理的方法，并结合常见的场景说明如何运用这些属性。 阅读全文

摘要： 本文结合最近的工作经验，总结出一个较简洁的前端自动化构建方案，主张css和js的模块化，并通过grunt的自动化构建，有效地解决css合并，js合并和图片优化等问题，对于提高前端性能和项目代码质量有一定参考价值，欢迎阅读和点评：） 阅读全文

摘要： 虽然做前端不用做设计，但是设计岗位的同事作为自己的上游伙伴，他们的产物该有什么样的标准以及作为前端与设计师如何配合工作就是跟自己的工资紧密相关的两个问题了。本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容虽属基本，但对你的技术和工作一定有价值，欢迎阅读和点评：）。 阅读全文

摘要： 昨天在发布博客园的第一篇花了很多时间和精力编写的博客后《模块化利器: 一篇文章掌握RequireJS常用知识》，有博友问个人的博客风格是如何自定义的，今天特将月前整理博客时用到的一些方法总结如下，希望能对你设计自己的博客有一些帮助：） 阅读全文

摘要： 通过本文，你可以对模块化开发和AMD规范有一个较直观的认识，并详细地学习RequireJS这个模块化开发工具的常见用法。本文采取循序渐进的方式，从理论到实践，从RequireJS官方API文档中，总结出在使用RequireJS过程中最常用的一些用法，并对文档中不够清晰具体的内容，加以例证和分析，希望本文的内容对你的能力提升有实质性的帮助。 阅读全文