Heero's Blog

Heero's Blog » jRaiser

jRaiser 1.4.0发布

自上个版本(1.3.4)以来,已经好久没更新jRaiser了。之前一方面忙着工作,一方面忙着找工作,所以没心情继续开发。直到最近,才重新看了下代码,完成1.4.0版。

先介绍一下jRaiser 1.4.0相对于1.3.x版本的主要修改:

  • 增加$().css扩展,可以获取或设置当前样式。
  • $().css与$().addCss均可通过opacity样式名设置透明度。
  • 对于宽度、高度等样式,如果样式值没有单位,则自动加上px
  • 处理事件对象时不直接修改源对象;添加stopPropagation方法,用于停止冒泡。
  • 去掉了$.ajax.importJs方法,添加$.ajax.load方法动态读取js或css。
  • 添加$.ajax.get和$.ajax.post方法,分别是以get方式和post方式发送ajax请求。
  • 修正在Fire

jRaiser 1.3.4发布

其实最近已经在开发jRaiser 1.4.0以及jRaiser UI 1.0.0了,但是开发过程中发现了现有代码的部分BUG,所以还是先将其修复:

  • 在$.util.parseTpl中添加容错处理,当模板为null时返回undefined,当values为空时返回模板内容。
  • 优化了各种样式操作。
  • 修正了$.event.fix在Opera下出现的异常。
  • 优化了浏览器检测的逻辑。
  • 在$.ajax.send的Ajax请求中增加X-Requested-With的header。

点击此处下载jRaiser 1.3.4

jRaiser与jQuery的冲突问题

最近有网友在留言板里问到jRaiser和jQuery的冲突问题,特此写一篇文章进行解释。

冲突的根源

众所周知,jQuery是通过一个全局变量$来引用的,而jRaiser加载时也占用了$。因而冲突的根源就是全局变量$。说得明白点:当jQuery和jRaiser共存的时候,$究竟是谁

分析jQuery和jRaiser的源代码可以知道,这两个库在加载的时候都会占用$变量。因此,按照覆盖的原理,谁后加载,$变量就是谁

如何解决冲突

别名法

除了$,jQuery和jRaiser都占用了另外一个变量作为别名,这个别名就是库本身的名称。

jQuery("div"); // 使用jQuery
jRaiser("div"); // 使用jRaiser

使用别名的主要问题是输入不方便:“$”只有一个字符,而“jQue

jRaiser 1.3.3 发布

这个月对jRaiser进行了两次改动,版本分别是1.3.2和1.3.3。

1.3.2版主要是修改了选择器引擎,在适当的时候调用浏览器提供的querySelectorAll接口,提高搜索元素的效率。但由于只有IE8、Firefox 3等最新版本的浏览器支持此接口,所以这次优化对IE6、IE7是无效的。

1.3.3版本在1.3.2版本的基础上修正了id选择器的一个BUG(感谢网友atans提交),并对Array.prototype.indexOf进行了修正使其与ECMAScript中定义的一致。

29日再度更新1.3.3版,解决IE下的id选择器BUG。

下载地址:http://code.google.com/p/jraiser/downloads/list

jRaiser揭秘——事件监听兼容处理

在事件监听处理方面,IE提供了attachEventdetachEvent两个接口,而Firefox提供的是addEventListenerremoveEventListener。最简单的兼容性处理就是封装这两套接口:

function addEvent(elem, eventName, handler) {
  if (elem.attachEvent) {
    elem.attachEvent("on" + eventName, handler);
  } else if (elem.addEventListener) {
    elem.addEventListener(eventName, handler, false);
  }
}

function removeEvent(elem, eventName, handler) {
  if (elem.detachEvent) {
    elem.detachEvent("on" + eventName, handler);
  } else if (elem.removeEventListener) {
    elem.removeEventListener(eventName, handler, false);
  }
}

然而,上面两个函数还没把问题完全解决。Firefox下,事件处理函数中的this指向被监听元素本身,而在IE下则不然。要解决这个问题,我首先想

表单验证插件 For jRaiser

为了把自己从表单验证中解放出来,特地写了这个插件。下面以一个简单的用户注册表单为例说明用法。

<form id="regForm">
<input type="text" name="userName" />
<input type="password" name="password" />
<input type="password" id="password2" />
<input type="submit" value="提交" />
</form>

这个表单包含三个输入框,分别是用户名(userName)、密码(password),以及为了防止密码输入出错而设置的第二个密码框(password2)。验证规则如下:

  • 用户名不能为空;
  • 密码不能少于6个字符;
  • 两次密码输入必须一致。

要使用表单验证插件,首先要建立一个验证器对象,其参数是表单元素:

var validator = new $.validate.FormValidator($("#regForm"));

随后添加用户名的验证规则:

validator.addRules("userName", ["noempty", "", "用户名不能为空"]);

addRules方法最少要有两个参数:第1个参数是控件名,第2-N

  1. 1
  2. 2
  3. 下一页
  4. 末页