zaohe

摘要： 简介：在很久以前，自己还是开发的时候，最头疼的就是做前端的页面，往往被繁琐兼容性问题，不统一的交互和样式，难用的控件库所困扰。所有的解决方案，都是临时的，都是没有文档的。在前端领域混了几年，沉淀了很多东西，但是以前遇到的问题，让我决定哪一天做出一套打包好的东西，方便没有视觉、交互、前端的项目。今天我带来了这个前端UI库以及一个后台系统的解决方案，这里仅仅是开始，接下来的开源、维护、改进会持续进行。DPL（html和css)Twiter 的 bootstrap 出来后确实是提供了很好地的一个处理前端基本元素的思路，我在bootstrap基础上处理了：1. ie6的兼容性问题（大部分）2.增强了表 阅读全文

摘要： 概述： jQuery 作为一个轻量级框架，插件格式的控件使用起来非常方便，但是我们基于jQuery写一套控件，需要我们扩展一些函数，便于控件的继承和扩展。 扩展函数： 1. augment(Function r,Object s1): 将指定的方法或属性放到构造函数的原型链上， 函数支持多于2个变量，后面的变量同s1一样将其成员复制到构造函数的原型链上。 2. cloneObject(Object obj): 拷贝对象（深拷贝） jQuery 有一个clone方法，但是只支持HTMLElement,而我们在很多时候需要的是深拷贝对象。 3. guid(prefix): 生成唯一... 阅读全文

摘要： JS控件事件 概述： 事件对于控件来说至关重要，控件的消息通信机制使用事件的成本最低，但是对于JS控件来说有一些麻烦需要解决，JS类本身不支持事件，DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的。 事件机制 对于事件的机制我不想多说，各种语言中对事件的描述都很具体，都是观察者模式的一种实现，我们可以从中抽取出事件必须的接口（由于控件库是基于jQuery 所以接口跟jquery保持一致）： 1. on: 绑定事件 2. off: 删除事件 3. fire: 触发事件 4. addTarget : 添加冒泡的对象 5. publish: 允... 阅读全文

摘要： 概述： 写一个简单的控件，只要能够完成其功能就OK了，但是写一个控件库，特别是以类的继承的方式实现的控件库，概念的统一更为重要，本节我试图定义控件的共有属性。 一个控件库有多个控件，各个控件的行为各异，但是控件的各种状态是一致的。如： 选中状态、展开状态、禁用状态、获取焦点等等很多状态，有些状态的概念很好统一，但是有些状态的概念不好统一，容易产生误解，下面一一讲解： 控件状态： selected 选中状态 选中是控件最常见得状态，分为单选和多选2种选择类型，还需要控制控件是否可以选中，所以我们可以抽象出以下属性： 1. selected 是否选中 2. multipleSel... 阅读全文

摘要： 概述 前面讲过JS原型链的继承和扩展方式mixin的方式，2种方式都是直接作用到类本身上，虽然实现机制有差异，但是在运行时的上下文（context)也就是 this 引用是相同的，这样的继承方式无疑使最方便的，但是这里面有几个问题要解决： 1. 耦合性过高，因为使用的都是this上下文，所以所有的变量和私有函数（js本身不支持，但是可以约定）都有访问权，这样对组织和维护代码带来问题，父类内部逻辑的改变直接影响到本身。 2. 函数会相互覆盖，因为这2中方式最终都是将函数附加到类的原型链上，会出现意外的覆盖问题 3. 修改添加新功能成本高，进行功能扩展时需要对父类以及mixin有深入的... 阅读全文

摘要： 概述: JS控件的生命周期跟其他平台UI的生命周期类似，但是又有自己的特点，我们只有将控件的生命周期划分清晰，所有的控件编写、mixins的编写和plugin的编写才能遵循控件的生命周期做统一的管理。在这里我把JS的生命周期定义为6部分： 1. initializer: 初始化，做一些不牵扯DOM操作的初始化操作 2. createDom: 创建 DOM，在这个过程中我们创建控件需要的DOM结构 3. renderUI: 生成控件的内部元素，在这里调用子控件的渲染方法，开启子控件的生命周期 4. bindUI: 绑定事件，可以绑定子控件事件也可以绑定内部DOM的事件 5. sy... 阅读全文

摘要： Mixin:Mixin是一种JS实现多继承方式，它通过复制其他类原型链（prototype）上的方法到自身原型链（prototype）上，来实现多继承。根据定义我们可以实现函数：/***将其他类作为mixin集成到指定类上面*@param{Function}c构造函数*@param{Array}mixins扩展类*@return{Function}传入的构造函数*/functionmixin(c,mixins){ varprototype=c.prototype; $.each(mixins,function(index,ext){if(ext){varproto=ext.prototype; 阅读全文

摘要： Js继承：extend、mixin和plugin（一）简介：我们编写前端控件时，需要给控件建立一个体系，面向对象是一个很合适的方式，但是JS本身对面向对象的一些概念支持偏弱，特别是继承的特性方面，那么我们就必须通过一系列的方式来实现继承。Extend方式：Extend方式非常贴近面向对象语言中的类继承，这种方式使用原型链的方式来实现继承。原型链的继承方式有几个缺点：1）缺少针对父类的引用，例如：functionA(){//初始化A操作}A.prototype={method1:function(){//A的一系列操作}}functionB(){//初始化B的操作}B.prototype=new 阅读全文

摘要： 简介：在我们的WebApp项目中，Dialog是个不可或缺的元素，很多页面操作都通过Dialog来进行，今天我们就Dialog显示数据、提交数据做进一步分析。分析：1. Dialog的生命周期：2. Dialog的结构：标题、内容（DOM）、数据、提交栏、关闭按钮显示以及加载数据1. Content 作为页面代码隐藏到页面中，Dialog显示后，将数据（Json对象）赋值到Dialog1）优点：实现最为简单2）缺点：加载页面时，页面代码多，如果未发生Dialog操作，这部分Dom不会被用到，如果弹出的Dialog种类过多，那么页面的隐藏代码会大大增加页面大小；2. Contetn作为单独的页面 阅读全文

摘要： 简介：在一个项目中需要进行日期的格式化，后台传到前端是时间的整数（Date.getTime),当后台数据返回字符串时，发现转换日期时在ie下变成NaN，但是真的是这样吗？接下来我们慢慢分析。此NaN不为NaN：程序代码如下：var date =new Date(d);if(!date || !date.getFullYear) { return; } return S.Date.format(d,'yyyy-mm-dd');//格式化函数，跟此文无关在其他浏览器下正常，但是在ie下，程序报错在ie调试器下，发现date 为NaN，如图：如果是NaN，那么if判断会返回true, 阅读全文