飞纯技术
  • 主页
  • 相册
  • 关于我
KEEP IN TOUCH

Posts tagged javascript

最近使用的几个jQuery 插件

十15
2008
1 Comment Written by Filia.Tao

最近使用了几个很好用的jQuery 插件, 在这里分享一下.

  • jquery.form.js http://www.malsup.com/jquery/form/
    这个插件将表单ajax 化, 经常的做法是在beforeSubmit 函数里面做客户端数据验证, 在success 回调函数里面做提交成功的处理。
  • jquery.validate.js http://docs.jquery.com/Plugins/Validation
    这个插件是用来做客户端数据验证, 很好很强大。 我用的时候在这个页面抄了很多, 是个好例子。
  • jquery.template.js http://plugins.jquery.com/project/jquerytemplate
    这个是一个非常小巧的模板系统。 用来在客户端拼HTML 很好用, 至于说条件,循环等等不支持,我也不需要。
    它默认的变量的格式是JSP 的格式,我自己写了一个smarty 格式的变量的正则

    smarty:     /\\{$([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g
  • jquery.livequery.js http://plugins.jquery.com/project/livequery
    这个我要严重推荐. 这个插件可以将事件绑定到某些选择器对应的元素上面。 即使页面元素已经发生变化, 绑定也会起作用。
    至于说性能问题, 其实基本没有影响。 看一下作者的这篇Blog 就理解了。
  • jquery.DOMWindow.js  http://swip.codylindley.com/DOMWindowDemo.html
    用来做页面内的弹出窗口的, 类似thickbox , 这个轻量级一点。 不过不得不说这个文档不好,试了好久才搞明白怎么用的。

就这么多了, jQuery 的插件还是挺多的挺好用的。

Posted in 随便写写 - Tagged DOMWindow, form, jquery, livequery, plugin, template, validate

prototype.js 和jQuery 比较

十一09
2007
Leave a Comment Written by Filia.Tao

昨天被人问了一个问题, prototype.js 和jQuery 这两个框架的区别. 当时吱吱唔唔没说清楚.
回来仔细想了想了,总结一下.
prototype.js : 更多是在javascript 核心上做文章. 它试图模拟传统的OO 编程 .
prototype.js 是ROR 社区推出的东西,而现在java 社区又比较推崇ROR, 所以现在java 社区也比较喜欢prototype.js .
jQuery : 更多是在DOM 上下功夫, 对于javascript 核心并没有太多的扩展. jQuery 的核心的非常强大的选择器.在此基础上加入了很多对DOM 进行操作的方便功能. (你基本可以不用标准的DOM 方法.)
Python 社区比较推崇jQuery , 因为其风格比较pythonic .

还是很乱啊…..
//个人倾向: jQuery .

Tagged jquery, prototype

S5Creator – 文件管理

十一09
2007
1 Comment Written by Filia.Tao

昨天和今天把文件管理的功能从编辑页面移动到一个单独的页面.
主要是新建/删除/浏览功能. 顺便把jQuery 的table (Sortable Table) UI组件来用了一下.
演示: http://dev.filia.cn/S5-Creator/HTML/manage.html
还有实现了一个全选/不选/反选的功能, 发现用jQuery 来做这个真是太简单了.

//选择按钮
 
$(this._options.selectButtonSelector).click(
 function(e){
 	var which = $(this).attr("which");
 	switch(which)
 	{
 		case 'none':
 			$(fm._options.checkboxSelector).removeAttr("checked");
 			break;
 		case 'all':
 			$(fm._options.checkboxSelector).attr("checked","checked");
 			break;
 		case 'reverse':
 			$(fm._options.checkboxSelector).each(function(i){
 				if($(this).attr('checked'))
 					$(this).removeAttr('checked');
 				else
 					$(this).attr("checked","checked");
 			});
 			break;
 	}
 }
);

简单明白,逻辑清楚.
其他更新:

  • 改进后端
  • 信息显示(上次保存时间,刚进行过的动作)
  • 代码清理
Tagged jquery, S5Creator, table

事件处理 – javascript

十31
2007
1 Comment Written by Filia.Tao
  1. Basic Event Handling
    • 定义为HTML属性 : 一串javascript 代码
      作用域链很复杂.
    • 作为javascript属性的事件处理器: 普通javascript函数
      作用域链比较简单. (调用对象,全局对象)
    • 特殊事件-计时器事件
      setTimeout() 和setInterval()
    • 特殊事件-错误事件
      window.onerror . 从来不用这个, 我觉得也不应该用.
  2. Event Object
    首先 在事件处理函数中一般用event || window.event 来获得事件对象.
    常用的属性有下面几个

    • target / srcElement 发生事件的DOM元素.
    • preventDefault 取消默认事件 (IE 设置 returnValue为false,来取消)
    • stopPropagation / cancelBubble 取消传播.
    • relatedTarget mouseout/mouseover 事件才会用 . (没用过:))
    • which 鼠标事件 :(1,2,3 表示左中右) 键盘事件:按键编码
      IE对两者分别是 button 和keyCode
    • ctrlKey , altKey, shiftKey, metaKey 修饰键是否按下
    • pageX/pageY 事件发生的位置. 相对于窗口的左上角.
  3. 下面是jquery 中event中的fix函数. 处理不同浏览器中的event对象的不同点.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    
    fix: function(event) {
        // store a copy of the original event object
        // and clone to set read-only properties
        var originalEvent = event;
        event = jQuery.extend({}, originalEvent);
     
        // add preventDefault and stopPropagation since
        // they will not work on the clone
        event.preventDefault = function() {
            // if preventDefault exists run it on the original event
            if (originalEvent.preventDefault)
                originalEvent.preventDefault();
            // otherwise set the returnValue property of the original event to false (IE)
            originalEvent.returnValue = false;
        };
        event.stopPropagation = function() {
            // if stopPropagation exists run it on the original event
            if (originalEvent.stopPropagation)
                originalEvent.stopPropagation();
            // otherwise set the cancelBubble property of the original event to true (IE)
            originalEvent.cancelBubble = true;
        };
     
        // Fix target property, if necessary
        if ( !event.target && event.srcElement )
            event.target = event.srcElement;
     
        // check if target is a textnode (safari)
        if (jQuery.browser.safari && event.target.nodeType == 3)
            event.target = originalEvent.target.parentNode;
     
        // Add relatedTarget, if necessary
        if ( !event.relatedTarget && event.fromElement )
            event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
     
        // Calculate pageX/Y if missing and clientX/Y available
        if ( event.pageX == null && event.clientX != null ) {
            var e = document.documentElement, b = document.body;
            event.pageX = event.clientX + (e && e.scrollLeft || b.scrollLeft || 0);
            event.pageY = event.clientY + (e && e.scrollTop || b.scrollTop || 0);
        }
     
        // Add which for key events
        if ( !event.which && (event.charCode || event.keyCode) )
            event.which = event.charCode || event.keyCode;
     
        // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
        if ( !event.metaKey && event.ctrlKey )
            event.metaKey = event.ctrlKey;
     
        // Add which for click: 1 == left; 2 == middle; 3 == right
        // Note: button is not normalized, so don't use it
        if ( !event.which && event.button )
            event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
     
        return event;
    }
  4. 添加删除/事件
    IE: ele.attachEvent(“onxxx”,xxx_handler)
    ele.detachEvent(“onxxx”,xxx_handler)
    The Level 2 DOM Events :
    ele.addEventListener(“xxx’,xxx_handler,is_capture)
    ele.removeEventListener(“xxx’,xxx_handler,is_capture)
  5. 对事件的支持浏览器差异很大. 不过已经有很多现成的库, 为我们封装了起来. 能用库就用库吧.
Tagged event

S5Creator – 使用Observer 模式重构

十28
2007
Leave a Comment Written by Filia.Tao

今天使用Observer 重构了S5Creator. 主要是将各个模块之间解耦.
首先快速的实现一个观察者模式. (现在暂时放在 S5Creator 这个类上, 以后再重构..)

S5Creator.prototype.register = function(topic,observer)
{
	if (!(this._topics[topic] instanceof Array))
		this._topics[topic] = [];
	this._topics[topic].push(observer);
}
 
S5Creator.prototype.notify = function(topic,data)
{
	console.log("notify " + topic);
	if (!(this._topics[topic] instanceof Array))
		return ;
	this._topics[topic].each(function(observer){
		observer.call(null,data);
	})
}

很简单的一段代码.
有下面的一个场景, 我们有一个主题选择器让我们选择主题. 选择完成以后我们需要通知编辑器更新主题.
以前我们需要由ThemeSelector 显示的调用Editor 的setContentCss.
现在我们只需要这样

Editor.prototype.init = function()
{
	var editor = this;
 
	//注册主题改变事件
	S5Creator.singleton().register(
		"theme_change",
		this.setContentCss.bind(this)
	);
        // 其他代码
}

和这样

ThemeSelector.prototype.select = function(theme)
{
	if(theme)
	{
		var path = this._options.themePath + '/'
			 + $(theme).attr('theme') + '/' + this._options.editorCssName;
		//注意这里
		S5Creator.singleton().notify("theme_change",path);
		$(this._box).dialogClose();
	}
}

解释一下上面有一个bind. 我很喜欢这个东西. 可以让我不用总是担心this.

Function.prototype.bind = function(obj)
{
	var func = this;
	return function(){
		func.apply(obj,arguments);
	}
}

我还将Observer 模式用在了其他几个地方. 比如编辑器内容更新后,通知缩略图. 改变了正在编辑的slide 以后, 通知编辑器更新内容.

Tagged design-pattern, Observer, S5Creator, 设计模式, 重构
« Older Entries

授权方式

Creative Commons License
本站作品采用
知识共享署名-非商业性使用-相同方式共享 3.0 许可协议
进行许可。

最近评论

  • carlos 发表在《yacc,ast and graphviz》
  • xiang 发表在《关于我》
  • healthy green tea 发表在《debian 同步系统时间》
  • Filia.Tao 发表在《Kinper – A Kindle Helper Service》
  • pensz 发表在《厦门行简单记录》

My Tweets

RSS My KnowHowSpot

标签

指令 汇编 算法 计算机科学 2008 amazon android ast boto C++ C/C++ compiler Computer design-pattern DFA Django ezengage Firefox github google GSoc http imagedownload iterator javascript jquery kindle kinper lex life Linux locationbar Mix opensource proxy python s3 S5Creator shanghai slide STL vector vista web Web开发

分类

  • ideas (2)
  • job (2)
  • life (2)
  • notes (1)
  • opensource (38)
    • Firefox (17)
    • GSoc (7)
    • Linux (13)
  • project (3)
  • 生活 (3)
  • 编程开发 (67)
    • C/C++ (4)
    • GAE (1)
    • http (2)
    • javascript (24)
    • python (20)
    • Web开发 (12)
    • 端口映射工具的实现 (6)
  • 计算机科学 (23)
    • compiler (17)
      • lex (11)
    • 算法 (5)
  • 随便写写 (67)

文章归档

Blogroll

  • 11′s SKY
  • 86's world
  • Filia’s Summer Of Code
  • limodou的学习记录
  • Loki
  • MyAllBlue
  • perol’s blog
  • Realazy
  • 一个藏袍
  • 人猿星球
  • 冰古Blog
  • 刀枪Blue
  • 懶懶喵日記
  • 桑林志
  • 白菜
  • 车东[Blog^2]
  • 释翼的天空
  • 阿文的自留地

开源网站

  • beagle
  • linuxsir
  • sourceforge
  • 中国Linux 公社
  • 啄木鸟社区

我的项目

  • ezEngage
  • KnowHowSpot

EvoLve theme by Theme4Press  •  Powered by WordPress 飞纯技术