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

Posts in category javascript

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, 设计模式, 重构

用JS操作Select

十27
2007
1 Comment Written by Filia.Tao
  1. 清空
    selectEle.options.length = 0;
  2. 添加
    var option = new Option("text1","value1");
     
    try{
        selectEle.add(option,null); // for firefox
    }catch(e){
        selectEle.add(option,-1); // for IE
    }

    也可以直接操作selectEle.options , 不过注意options 是一个伪数组(更arguments 一样), 不是一个数组.

    alert(selectEle.options instanceof Array === false)
  3. 获得选择的选项. (可以是 multiple 的)
    var selected = [];
    for(var i = 0 ; i < selectEle.options.length; i ++)
    {
        if(selectEle.options[i].selected)
            selected.push(selectEle.options[i]);
    }
Tagged select
« 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 飞纯技术