随笔分类 - 模块开发
摘要：最终的解决方案是：https://github.com/liuyunzhuge/php_weixin_provider，详细的介绍请往下阅读。 本文面向的是php语言laravel框架的用户，介绍的是基于该框架实现的一个简易集成微信登录的方法。使用方法如下： 1. 安装php_weixin_prov
阅读全文
摘要：本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理。SPA应用的核心在于使用无刷新的方式更改url，从而引发页面内容的改变。从实现上来看，url的管理和页面内容的管理是其中的两个难点。就url的管理而言，主要有以下三方面的要求： 1）对于要采用单页跳转的链接，不能有页面刷新； 2）浏览器的前进和后退，都能像多页应用那样，显示之前访问地址对应的内容； ...
阅读全文
摘要：这是我写的关于列表组件的第5篇博客。前面的相关文章有： 1. 列表组件抽象（1）-概述 2. 列表组件抽象（2）-listViewBase说明 3. 列表组件抽象（3）-分页和排序管理说明 4. 列表组件抽象（4）-滚动列表及分页说明 本文介绍如何实现一个简洁易用的表格组件。 它对应的源码是： ht
阅读全文
摘要：这是我写的关于列表组件的第4篇博客。前面的相关文章有： 1. 列表组件抽象（1）-概述 2. 列表组件抽象（2）-listViewBase说明 3. 列表组件抽象（3）-分页和排序管理说明 本文介绍列表组件中我对滚动列表及滚动分页的实现思路。 在pc端，通过滚动进行翻页的需求非常常见；移动端也是，只
阅读全文
摘要：这是我写的关于列表组件的第3篇博客。前面的相关文章有： 1. 列表组件抽象（1）-概述 2. 列表组件抽象（2）-listViewBase说明 本文介绍列表组件中我对分页和排序的抽象思路。 先来说分页，因为之前写过一篇简单封装分页功能pageView.js，这次封装分页时的思路基本与那篇博客的想法完全一样，只不过考虑到我要写的列表组件，还有其它的分页形式，比如点击加载更多进行翻页，基于浏览...
阅读全文
摘要：这是我写的关于列表组件的第2篇博客。前面的相关文章有： 1. 列表组件抽象（1）-概述 listViewBase是列表组件所有文件中最核心的一个，它抽象了所有列表的公共逻辑，将来如果有必要添加其它公共的逻辑，都可以考虑在这个类中处理。它主要做的事情包括：初始化，如排序组件初始化，分页组件初始化，模板
阅读全文
摘要：这次要介绍的是列表组件。为了写它，我花了有将近2周的晚上，才一点一点的把它写到现在这个程度。到目前为止，一共写了有17个文件，虽然没有覆盖到一些更复杂的场景，但是把我当时计划写这个组件的基本目的已经完成了。先给大家看看我最后写出来的文件情况： 也许有人会好奇，一个列表的功能怎么会写出这么多东西出来？关于这个问题的答案，我稍后再来总结，先让我描述下我写这些东西之前产生的想法。 1. 背景介绍...
阅读全文
摘要：本文提供一个简单的方法实现一个流程的进度条加载效果，以便在页面中可以通过它来更好地反馈耗时任务的完成进度。要实现这个功能，首先要考虑怎样实现一个静态的进度条效果，类似下面这样的： 这个倒是比较简单，两个div即可，bootstrap官方就提供有多种主题的进度条组件。如果自己要用，参照下别人的代码，写成自己的风格即可，实际上也非常的好理解： .progress { height...
阅读全文
摘要：分页是一个很简单，通用的功能。作为一个有经验的前端开发人员，有义务把代码中类似这样公共的基础性的东西抽象出来，一来是改善代码的整体质量，更重要的是为了将来做类似的功能或者类似的项目，能减少不必要的重复工作量。在实际项目中，尤其是网站类型的项目中，分页部分的设计总是个性化比较强，基本上都不会长的一样，
阅读全文
摘要：本文要介绍的是一种鼠标从一个元素移入移出时，获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在移入移出时，是从上下左右的哪个方向发生的。这个思路，是我自己琢磨出来，利用了一点曾经高中学过的数学知识，但是非常简单好理解，希望能对你有所帮助。 在线demo： http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码： ...
阅读全文
摘要：表单校验是页面开发中非常常见的一类需求，相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架，虽然按照它们默认的设计，用起来没有多大的问题，但是在实际工作中，表单校验有可能有比较复杂的个性化的需求，使得我们用这些插件的默认机制并不能完成这些功能，所以要根据自己的需要去改造它们（毕竟自己
阅读全文
摘要：backbone.js已经不是当前最流行的前端框架了，但是对于我而言，依然具有比较好的学习价值。虽然目前来说，react，vue等mvvm框架非常火热，但是感觉自身还不到去使用这种框架的层次。这些技术虽好，但是对个人的挑战也是比较大：首先是在编程基础这个部分，包括数据结构，算法，面向对象编程，设计模
阅读全文
摘要：这是上周工作中写到的一个功能，大概的效果就是页面中有几处数字，统计公司的一些业务信息，需要在第一次出现的时候，做一个从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类似的事件机制，那开发出来的组件一定会有更大的灵活性和扩展性，而且我也是第一次使用这种方法（见识太浅的原因），觉得它的使用价值还蛮大的，所以就把它分享出来了。
阅读全文
摘要：最近的工作在做一个多步骤多分步的表单页面，这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的，每个步骤可能又分多个小步骤来处理，大步骤之间，以及小步骤之间都是一种顺序发生的业务关系。我把这个功能相关的一些逻辑抽象成了一个组件StepJump，这个组件能够实现纯静态的分步切换和跳转，以及跟业务相结合的复杂逻辑，有一定的通用性和灵活性，本文主要介绍它的功能要求和实现思路。
阅读全文
