JavaScript技巧

最新推荐文章于 2024-08-16 17:45:13 发布

yangsen159

最新推荐文章于 2024-08-16 17:45:13 发布

阅读量108

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/yangsen159/article/details/85100199

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript技巧

我写JavaScript代码已经很久了，都记不起是什么年代开始的了。对于JavaScript这种语言近几年所取得的成就，我感到非常的兴奋；我很幸运也是这些成就的获益者。我写了不少的文章，章节，还有一本专门讨论它的书，然而，我现在依然能发现一些关于这种语言的新知识。下面的描述的就是过去让我不由得发出“啊！”的感叹的编程技巧，这些技巧你应该现在就试试，而不是等着未来的某个时候偶然的发现它们。

简洁写法

JavaScript里我最喜欢的一种东西就是生成对象和数组的简写方法。在过去，如果你想创建一个对象，你需要这样：

ar car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

下面的写法能够达到同样的效果：

var car = {
	colour:'red',
	wheels:4,
	hubcaps:'spinning',
	age:4
}

简单多了，你不需要反复使用这个对象的名称。这样 car 就定义好了，也许你会遇到 invalidUserInSession 的问题，这只有你在使用IE时会碰到，只要记住一点，不要右大括号前面写逗号，你就不会有麻烦。

另外一个十分方便的简写是针对数组的。传统的定义数组的方法是这样：

var moviesThatNeedBetterWriters = new Array(
	'Transformers','Transformers2','Avatar','IndianaJones 4'
);

简写版的是这样：

var moviesThatNeedBetterWriters = [
	'Transformers','Transformers2','Avatar','IndianaJones 4'
];

事件委派

Web应用都是由事件驱动运转的。我喜欢事件处理，尤其喜欢自己定义事件。它能使你的产品可扩展，而不用改动核心代码。有一个很大的问题（也可以说是功能强大的表现），是关于页面上事件的移除问题。你可以对某个元素安装一个事件监听器，事件监听器就开始运转工作。但页面上没有任何指示说明这有个监听器。因为这种不可表现的问题 (这尤其让一些新手头疼) ，以及像IE6这样的”浏览器“在太多的使用事件监听时会出现各种的内存问题，你不得不承认尽量少使用事件编程是个明智的做法。

于是事件委托就出现了。

当页面上某个元素上的事件触发时，而在 DOM 继承关系上，这个元素的所有子元素也能接收到这个事件，这时你可以使用一个在父元素上的事件处理器来处理，而不是使用一堆的各个子元素上的事件监听器来处理。究竟是什么意思？这样说吧，页面上有很多超链接，你不想直接使用这些链接，想通过一个函数来调用这个链接，HTML代码是这样的：

<h2>Great Web resources</h2>
<ul id="resources">
	<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
	<li><a href="http://sitepoint.com">Sitepoint</a></li>
	<li><a href="http://alistapart.com">A List Apart</a></li>
	<li><a href="http://yuiblog.com">YUI Blog</a></li>
	<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
	<li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>

常见的做法是通过循环这些链接，将每个链接上附加一个事件处理器：

// 典型的事件处理例子
(function(){
	var resources = document.getElementById('resources');
	var links = resources.getElementsByTagName('a');
	var all = links.length;
	for(var i=0;i<all;i++){
		// Attach a listener to each link
		links[i].addEventListener('click',handler,false);
	};
	function handler(e){
		var x = e.target; // Get the link that was clicked
		console.log(x);
		e.preventDefault();
	};
})();

我们用一个事件处理器也能完成这项任务：

(function(){
	var resources = document.getElementById('resources');
	resources.addEventListener('click',handler,false);
	function handler(e){
		var x = e.target; // get the link tha
		if(x.nodeName.toLowerCase() === 'a'){
			console.log('Event delegation:' + x);
			e.preventDefault();
		}
	};
})();