摘要： 之前做项目时经常用到一种触点式弹出菜单或者导航的功能，这个功能的主要应用场景是：web页面中多层分级导航或者子功能目录，但又考虑到页面区域有限，于是就考虑到在鼠标移动到某导航按钮上或者点击时，系统将在该按钮下浮动一个层，展现子导航或者子目录，当用户选择这些子目录/导航时，页面作出相应的操作，这种功能从人机交互和页面布局上都有很好的人性化体验。最近有些闲暇时间，将此功能重新整理并封装，形成一个公共插件，命名为：SelectItem.js，分享如下：插件的主要实现的功能： 1. 功能模块化封装，提供一个对外的初始化接口供应用调用即可，首先需要绑定一个页面触发元素（链接/按钮等），传入元素id... 阅读全文

摘要： 最近在项目中碰到一个比较棘手的问题： 在iframe富文本编辑器中，有个工具栏，这个工具栏在iframe标签之外，工具栏上有一个按钮，点击该按钮向iframe正在编辑中的光标处插入一个图片，图片会插入到当前光标所在的位置。但由于需求的需要，点击该按钮后需要弹出一个详细选项浮动层，选择详细的类型后再插入，如此，问题来了，当我点击了该按钮，浮动层显示出来后，iframe已经失去焦点，并不知道之前正在编辑的位置，所以编辑器默认把图片插入到编辑器内容的最前边（内部处理），编辑器及浮动层需求如下图：解决尝试一、利用模态弹出框 首先声明这种方式是可行的，因为模态对话框会保持iframe编辑器的编辑状态.. 阅读全文

摘要： 作为web开发的一员，应该都不陌生，信息处理时，很多时候需要根据用户的输入实时反馈查询结果供其选择，这给了用户很好的人机交互体验，在各大门户网站上已经被使用的很成熟了，最近项目中用到此功能，网上有很多插件和样例，但用起来发现都多多少少与项目的需求有所出入，故自己写了一个，分享一下，希望能给你带来帮助，插件效果图如下：原理这个插件主要用来方便用户在信息查询和处理时快捷、简单，其原理分析下：1.　信息处理需要前台和后台，前台有一个或者多个查询输入框（目前暂定为input标签）。2.　用户在这些输入框中输入查询关键字时，系统根据用户实时的输入给页面后台发送数据查询请求。3.　后台程序查询数据并排.. 阅读全文

摘要： Deffered是Jquery中的一个非常重要的对象，从1.5版本之后，Jquery中的ajax操作都基于Deffered进行了重构，这个对象的处理模式就像其他Javascript框中的Promise异步模式一样，它代表一个潜在的、长时间运行但不必返回完成操作的结果，与等待并阻塞浏览器进程直到完成操作相比，Deffered返回的是一个承诺异步执行结果的对象，这个承诺可以有返回值，也可以没有，浏览器被释放出来做其他事情，直到这个返回结果被使用到。Deffered的原理是给异步请求过程中状态的变化注册回调函数，实现链式调用，如对象的then函数；统一对这些回调函数的结果进行管理控制，以面对多个.. 阅读全文

摘要： 核心的javascript程序语言并没有包含任何的线程机制，客户端javascript程序也没有任何关于线程的定义，事件驱动模式下的javascript语言并不能实现同时执行，即不能同时执行两个及以上的事件处理程序，所有的处理过程都是同步进行的。javascript的这种线程模式在大型复杂的web应用中显得捉襟见肘，实际工作中，我们会不遗余力的寻找各种异步模型来弥补这一点，直到HTML5中web worker的出现才让javascript的多线程模型出现曙光，尽管这种技术并不是真正意义上实现多线程，下面就自己在工作中的摸索分享如下：javascript的线程模型 客户端js程序是类似单线... 阅读全文

摘要： ~~接上篇~~上一篇实现了类的实现以及类成员变量和方法的定义，下面我们来了解下面向对象中两个最重要的特性：继承和多态。继承js中同样可以实现类的继承这一面向对象特性，继承父类中的所有成员（变量和属性），同时可扩展自己的成员，下面介绍几种js中实现继承的方式：1. 对象模仿（冒充）：通过动态改变this指针的指向，实现对父类成员的重复定义，如下： 1 //对象冒充 2 function ClassA(paramColor) { 3 this.color = paramColor; 4 this.sayColor = function() { 5 alert(thi... 阅读全文

摘要： ~~想是一回事，做是一回事，写出来又是一回事~~一直以来，从事C++更多的是VC++多一些，从面向过程到面向对象的转变，让我对OO的编程思想有些偏爱，将一个客观存在的规律抽象出来总是让人比较兴奋，通过抽象出类的关系，我们可以做更多的事，思路也更加清晰。javascript也是一样，虽然其被定为成一个解释性语言，但随着互联网应用越来越广泛，js的作用将显得举足轻重，各种js框架、插件也蓬勃的出现，各浏览器直面用户的交互也越来越依赖js了，js代码的封装和优化日益重要。 也谈js的OO编程，虽然网上有许多技术大牛已经分享了星光熠熠的博文，但是将自己的理解写出来总是一件让人快乐的事，也算是对自己学. 阅读全文

摘要： 题外： 进行web开发3年多了，javascript（后称js）用的也比较多，但是大部分都局限于函数的层次，有些公共的js函数可重用性不好，造成了程序的大量冗余，可读性差（虽然一直保留着注释的习惯，但是最后发现注释远远不够），影响了页面的加载速度和性能。去年开始着手对既有前端脚本进行重构和优化，查阅了很多技术大牛分享的资料，也比较系统的阅读了一遍《javascript权威指南》，js模块化编程深深的吸引了我，它改变了我编写js脚本程序的方式，同时也让代码的可读性和可维护性进一步增强。下边就根据自己学习和实践过程中对js模块化编程的理解，分享一下我的经历，希望对您有所帮助： 大家都知道，js.. 阅读全文

摘要： ~~~接上篇，游戏的主体框架完成了，接下来我们对游戏中存在的两个主要实体进行分析，一个是雷点类BombObject（节点对象），一个是节点对象对应的图片对象BombImgObject，根据第一篇的介绍，这两个类的对象配合棋盘类实现游戏过程，这里重新解释下这两个类的用处：一、雷点类（BombObject）：一个承上启下的对象类别。1.　此类的对象集合（棋盘类中的ObjList数组）组成了游戏棋盘上的每一个节点，节点的类型有空节点（数值为0）、雷点（数值为-1）、非雷非空节点（数值为N，依据节点周围的雷点个数而定）。2.　每一个对象需要标记其在棋盘中的坐标位置（x、y），同时能够获取其周围8个方位 阅读全文

摘要： ~~~接上篇，上篇介绍了游戏实现过程中第一个比较繁琐的地方，现在展现在玩家面前的是一个有血有肉的棋盘，从某种意义上说玩家已经可以开始游戏了，但是不够人性化，玩家只能一个一个节点的点开，然后判断，然后标记等等，程序暂不能人性化的辅助玩家将游戏进行下去，趣味性不够强，接下来就来完善这些辅助功能。二、空节点点击触发其周围所有空节点展开此过程主要是辅助玩家快速标记雷点，增强游戏趣味性，即当游戏进行中，玩家点击棋盘中某个未展开的节点M时，如果该节点是空节点（对应的数值为0），则展开该节点的同时，需要遍历其周围8个方向上的节点，如果某个方向上的节点也是空节点，则再以该点为中心重复上述过程，直到遍历完所有相 阅读全文