第十一期web标准交流会

发表于 2010 年 08 月 28 日 由 jim
web标准化交流会，第十一期在腾讯SOSO银科大厦举行.下个月w3ctech就一岁了,时间过的真快!
吕婷做的PPT太酷,内容忘的差不多了;
兴趣要培养+阶段性的鼓励自己;
应该是在学习jQuery方面的知识(ps:PPT中好像有个fn写错了,getElementsByTagName).
不同浏览器里,CSS/JavaScript存在兼容性问题;
因为内核不同吗? 这个….
firefox2/firefox3也会不同;
美团团长 分享了JavaScript中的闭包,掌握闭包是高级JavaScript程序员的必经之路;
梦到自己是个JS文件……开头感情戏……
有几个关键词：自由变量,this,arguments,window,全局变量,闭包和匿名函数;
this: 调用时,才能确定它代表谁;
闭包是函数(自己对闭包的第一理解),如果返回中用到自由变量,则形成闭包;
增哥提到闭包会影响性能(是不是把作用域连加长了),会修改父级的变量,处理不当IE内存泄露.但也会用很多好处;
月影:其他语言也有闭包这个概念,学习JavaScript的闭包,对自己以后的学习会有很多帮助.
没有变量声明,但可以使用闭包;_这是什么语言?
个人思考:在创建私有变量/方法时,会使用匿名函数和闭包;匿名函数会形成类似作用域块;闭包只能得到函数中变量的最后一个值;闭包存在的目的都有什么?主要做哪些事情?
tab组件:这个扩展太多了;
首先是,啊当的版本1-版本9,由面向过程到面向对象;和他写的书《编写高质量代码》里面的类似;
和当时有位同学的疑问一样:currentIndex变量在(function(){….})();里面是全局变量,如果同一个页面里,同时操作时,会出现问题;
师兄: 把currentIndex绑到当前的dom元素上;
团长补充：tab-control,tab-content(panel);分别使用ID,让control部分和panel部分很好的关联;
与它们所在的页面位置无关;(详细内容)
主要是对YUI部分进行了说明,YUI…不懂…略过……
裕波和月影的扩展就有点大了;把tab组件再次抽象化,理解成模块之间的通信;
也是7月17日,蒋定宇介绍的模块之间的通信;Nicholas C.Zakas有相关的PPT(7.17提到过).
可以这样理解:模块之间的通信,是模拟浏览器中的事件;模块就类似触发事件的元素和对事件作出反应的元素,而事件绑定部分,浏览器/JavaScript实现的,而模块要模拟出第三方来实现;
G3G4再扩展tab组件,介绍jQuery tools插件;
tab在触发事件(任意事件)时,可以绑定onBeforeXXX事件/onXXX事件(tab触发前和tab触发后);而不单单是callBack;
还提出,把必须传的参数(element),可以不放在Hash里(只放config信息);
最后百度的同学介绍了组件,以自己当前的水平,就理解了几点;
书中的观点有很多,但一定自己要思考、来衡量;(别人的都是参考,自己才有真正决定权)
接口做好Hook,方便扩展,根据需求做组件,而不是功能越强越好;(借用G3G4的词”现行标准”;行业标准-w3c,现行标准-用户,ie6;最后要以用户出发点,以现行标准做事)
又得奖了,QQ公仔;
谢谢w3ctech,谢谢soso;
发表在 JavaScript进阶 | 标签为 | 3 条评论

Scalable JavaScript Application Architecture

发表于 2010 年 08 月 20 日 由 jim
Scalable JavaScript Application Architecture
发表在 JavaScript进阶 | 标签为 | 留下评论

javascript中的事件

发表于 2010 年 08 月 15 日 由 jim

在上一篇文章中谈到使用e.preventDefault()/e.cancelBubble = true;这样的方法.今天再说一个绑定事件的事情.

在IE下绑定事件使用elem.attachEvent(‘on’ + eventType, fn);
在FF下绑定事件使用elem.addEventListener(eventType,fn,false);

如果fn为匿名函数的方式,alert出来的this；这两种方式弹出的对象是不同的.
IE指向了window; 而FF指向我们心理所想的绑定元素.

为了让IE也得到这个元素, 我当前的方法是,使用E.srcElement.

说到E,再说一点: 在使用上面谈到的方法绑定事件时; fn这个函数会直接有一个event参数，并且在IE/FF下是相同的. （不用再e || window.event）

如果是想得到绑定的元素(!e.srcElement|| !e.target)，在IE下可以有属性得到.

发表在 JavaScript进阶 | 标签为 | 一条评论

小知识点汇总->习惯很重要

发表于 2010 年 08 月 13 日 由 jim
  1. getAttribute在ie下有两个参数,都可选.在取href时有用. demo
    obj.getAttribute(“href”,1) —取得的是绝对地址。
    obj.getAttribute(“href”,2) —取得的就是页面上所些的，写的是相对的就相对的，绝对的就绝对的.说明 在写attr函数时,找到相关资料;可以在上面Demo中查看源码找到attr函数.
  2. setTimeout/setInterval函数在使用时,加上所属对象.window.setTimeout(fn,time)
  3. 在阻止默认操作和冒泡时,使用e.preventDefault()/e.cancelBubble = true;
    e.stopPropagation()/e.returnValue = false; 而不是直接使用return false;
  4. 在chrome中,input元素focus事件触发select函数存在问题.
    使用window.setTimeout(function(){that.select(); },0);解决.
    window.setTimeout作用是把事件增加到进程最后(js单线程)
  5. 在数组等查询中,如果可以使用===操作符,就使用它(比如严格)
  6. 可用性方面,很多站点还需要做优化处理.这两天感受到的:有用户,只要可以使用鼠标操作的，他就不会再使用键盘(搞开发的应该会觉得键盘比鼠标更快)。比如让用户填写专业,那用户focus后,把专业呈现出来会是更好的选择,用户直接用鼠标点下就ok了; 用户相当很懒！
  7. 养成良好的编码习惯很重要,谢谢师兄.

ps: 北京528路上的人真多， 从起点坐车 还是没有座！

发表在 效果实现 | 标签为 , | 留下评论

getElementsByClass

发表于 2010 年 08 月 13 日 由 jim

在原生的JavaScript中,目前浏览器并不直接支持getElementsByClass, 但在工作过程中又要经常用来它. 而像jQuery等库,都已经很好的扩展了这一函数.

还是直接上函数吧:

function getElementsByClassName(cName,tName,ex){
	var rt = [],
		_class = new RegExp('\\b'+cName+'\\b'),
		tName =  tName || '*',
		i = 0,
		len,
		elems,
		classes;
	if(ex){
		elems = ex.getElementsByTagName(tName);
	}else{
		elems = document.getElementsByTagName(tName);
	}
	for(len = elems.length;i++){
		classes = elems[i].className;
		if(_class.test(classes)) rt.push(elems[i]);
	}
	return rt;
}

使用Google,找到的代码,都是在使用正则匹配时,不正确。在Jeremy Keith的网站上找到一个不错的(可惜当时没有保存address).不过找到了一个相关的dom操作ppt,但是得到class的函数写的不怎么好.

发表在 JavaScript进阶 | 标签为 | 留下评论