摘要： animation-fill-mode是css3动画的一个属性，它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟，并且按正常方向执行的动画（正常方向是指从0%运行到100%），执行一次的过程可以描述如下： 按照动画的执行时间来划分，一次动画过程可以将元素划分为3个状态：动画等待，动画进行和动画结束状态。默认情况下，只有在动画进行状态，才会应用动画的keyframes所定义的样式；而... 阅读全文

摘要： 本文要介绍的是一种鼠标从一个元素移入移出时，获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在移入移出时，是从上下左右的哪个方向发生的。这个思路，是我自己琢磨出来，利用了一点曾经高中学过的数学知识，但是非常简单好理解，希望能对你有所帮助。 在线demo： http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码： ... 阅读全文

摘要： 表单校验是页面开发中非常常见的一类需求，相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架，虽然按照它们默认的设计，用起来没有多大的问题，但是在实际工作中，表单校验有可能有比较复杂的个性化的需求，使得我们用这些插件的默认机制并不能完成这些功能，所以要根据自己的需要去改造它们（毕竟自己 阅读全文

摘要： backbone.js已经不是当前最流行的前端框架了，但是对于我而言，依然具有比较好的学习价值。虽然目前来说，react，vue等mvvm框架非常火热，但是感觉自身还不到去使用这种框架的层次。这些技术虽好，但是对个人的挑战也是比较大：首先是在编程基础这个部分，包括数据结构，算法，面向对象编程，设计模 阅读全文

摘要： 之前的项目一直采用grunt来构建，然后用requirejs做模块化，requirejs官方有提供grunt的插件来做压缩合并。现在的项目切到了gulp，模块化用起了seajs，自然而然地也想到了模块合并压缩的问题。然后一开始在解决这个问题的时候，并不是很顺利，在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件，虽然在seajs的github上也看了不少的issue，但是大多... 阅读全文

摘要： 自从开始做前端开发以来，我发现在开发页面的时候，总是有一个问题十分影响自己的开发效率，这个问题就是css的命名，主要是指css类选择器的命名。这个问题主要体现在：第一，有的内容你压根想不出用什么名字来给它命名，因为一般命名总是考虑语义化，好让其他人看到这个css类的名字就知道它是作用于哪一个内容的，但是由于网页内容的复杂性和多样性，你很难保证每个部分都能起一个合适的名字，即使你最终迫不得已想出了一... 阅读全文

摘要： 这是上周工作中写到的一个功能，大概的效果就是页面中有几处数字，统计公司的一些业务信息，需要在第一次出现的时候，做一个从0开始增长，大概2秒自动增长到真实数值，并停止增长的效果。这个问题的重点在于解决如何保证不同大小的数字都在2秒左右的时间自动增长完成，以及还有考虑延迟初始化的处理。后面这一点是为了保证，只有当数字第一次进入浏览器可视区域的时候，才会看到效果，因为这些数字有可能不在首屏的内容内，必须... 阅读全文

摘要： 上文《简洁易用的表单数据设置和收集管理组件》介绍了我自己的表单管理的核心内容，本文在上文的基础上继续介绍自己关于表单初始值获取和设置以及表单数据提交等内容方面的做法，上文的组件粒度很小，都是跟单个表单元素相关的某种特定类型的组件，所以内容很多；本文要介绍的内容集中于整个表单组件本身，有点像上文介绍的formMap.js组件，但不同的是在我自己的项目中form.js用的更多，formMap几乎不用，... 阅读全文

摘要： 这篇文章要分享的是我在做表单界面开发的一部分经验，关于表单数据设置和收集这一块的。整体而言，这篇文章总结的东西有以下的特点： 1）api简单，使用起来很容易； 2）简化了表单新增和编辑，可以让新增和编辑使用同一个表单页面； 3）基本上与UI分离，所以很容易应用到各类项目的开发当中。 涉及到的组件不止一个，而且将来还会扩充，这些组件都是根据以前的工作经验开发出来的，没有... 阅读全文

摘要： 本文介绍自己最近做省市级联的类似的级联功能的实现思路，为了尽可能地做到职责分离跟表现与行为分离，这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑，下一段有演示效果的gif图。虽然这是个很常见的功能，但是本文的实现逻辑清晰，代码好理解，脱离了省市级联这样的语义，考虑了表现与行为的分离，所以希望本文的内容能够为你的工作带来一些参考的价值，欢迎阅读和指正。 阅读全文

摘要： 虽然jquery的较新的api已经很好用了， 但是在实际工作还是有做二次封装的必要，好处有：1，二次封装后的API更加简洁，更符合个人的使用习惯；2，可以对ajax操作做一些统一处理，比如追加随机数或其它参数。同时在工作中，我们还会发现，有一些ajax请求的数据，对实时性要求不高，即使我们把第一次请求到的这些数据缓存起来，然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响，通过这种手工的缓存控制，多多少少也能帮助我们提高网页的性能。本文介绍我自己关于这两方面问题的做法，欢迎交流和指正。 阅读全文

摘要： 本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路，考虑到该功能有一定的适用性，于是把相关的逻辑封装成了一个ImageUploadView组件，实际使用效果可查看下一段的git效果图。在实现这个组件的过程中，有用到前面几篇博客介绍的相关内容，比如继承库class.js，任意组件的事件管理库eventBase.js，同时包含进了自己对职责分离，表现与行为分离这两方面的思考，欢迎阅读与交流。 阅读全文

摘要： 本文介绍一个jquery的小技巧，能让任意组件对象都能支持类似DOM的事件管理，也就是说除了派发事件，添加或删除事件监听器，还能支持事件冒泡，阻止事件默认行为等等。在jquery的帮助下，使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样，虽然在最后当你看到这个小技巧的具体内容时，你可能会觉得原来如此或者不过如此，但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制，那开发出来的组件一定会有更大的灵活性和扩展性，而且我也是第一次使用这种方法（见识太浅的原因），觉得它的使用价值还蛮大的，所以就把它分享出来了。 阅读全文

摘要： jquery现在的事件API：on，off，trigger支持带命名空间的事件，当事件有了命名空间，就可以有效地管理同一事件的不同监听器，在定义组件的时候，能够避免同一元素应用到不同组件时，同一事件类型之间的影响，还能控制一些意外的事件冒泡。在实际工作中，相信大家都用的很多，但是不一定了解它的所有细节，至少我有这样的经验，经常在碰到疑惑的时候，还得重新写例子去验证它的相关作用，所以本文想把事件命名空间相关的细节都梳理出来，将来再犯迷糊的时候可以回来翻着看看以便加深对它的理解和运用。 阅读全文

摘要： 最近的工作在做一个多步骤多分步的表单页面，这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的，每个步骤可能又分多个小步骤来处理，大步骤之间，以及小步骤之间都是一种顺序发生的业务关系。我把这个功能相关的一些逻辑抽象成了一个组件StepJump，这个组件能够实现纯静态的分步切换和跳转，以及跟业务相结合的复杂逻辑，有一定的通用性和灵活性，本文主要介绍它的功能要求和实现思路。 阅读全文

摘要： 本文是对《详解Javascript的继承实现》的补充，针对上文继承库实现的注意事项和阅读《JavaScript面向对象编程指南》一书关于继承部分的内容进行说明。 阅读全文

摘要： 希望本文可以帮助你写出更流弊的javascript：） 阅读全文

摘要： 上文提供了一个改进版的sticky组件，并将演示效果应用到了自己的博客。有了类似sticky的这种简单组件，我们就可以在利用它开发更丰富的效果，比如本文要介绍的tab导航和滚动导航。实现简单，演示效果如下 阅读全文

摘要： 上上篇博客介绍了一个sticky组件的简洁实现，经过这两天的思考，发现上次提供的实现还有较多不足的地方，另外跟别的网站上实现的效果在取消固定的时候也有一些不同，上次提供的取消固定的处理方式不好，本文在上文的基础上，提供一个改进版的sticky组件，功能更加完善，希望您有兴趣阅读。代码演示见本博客滚动时侧边栏的效果。 阅读全文

摘要： 这段时间状态比较清闲，我想是时候以一个前端开发人员的态度来整理下自己的博客设置了，除了UI上的一些调整，考虑最多的就是怎么优化我的这些个性化内容，让博客的访问速度的更快 阅读全文