javascript你应该知道的七件事

最新推荐文章于 2022-02-11 14:56:12 发布

wangboxian

最新推荐文章于 2022-02-11 14:56:12 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/wangboxian/article/details/25197749

版权

Javascript发展到今天，很高兴看到她的成功。曾经好多人都这么说：写程序这么多年，现在最看不懂的程序是javascript！javascript虽然是一种弱类型语言，但是她却有着“高贵”的理论。下面是学习javascript过程中的一些小激动时刻，记录下来，大家可以跟我一起感受。

缩略标记

在创建对象和数组的过程中可以使用缩略标记。过去，我们需要创建一个对象时，我们会这样写：

var 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
		}

这样写更加简洁，并且不用重复写对象名。

JSON数据格式

JSON改变了javascript存储数据的方式，运用JSON，你可以使用javascript自带的格式存储各种复杂的数据并且不需要进行额外的转换，JSON是JavaScript Object Notation的缩写。

例如：想要描述一个乐队的话，可以这样写：

var band ={
			"name":"The Red Hot Chill Peppers",
			"members":[
			{
				"name":"Anthony Kiedis",
				"role":"lead vocals"	
			},
			{
				"name":"Micheal",
				"role":"bass guitar"	
			},
			{
				"name":"Chad",
				"role":"drums"	
			},
			{
				"name":"John",
				"role":"lead"	
			}
			],
			"year":"2009"
		}

Javascript自带函数（数学、数组以及字符串函数）

通读了javascript的数学、数组和字符串函数后，意识到他们会让编程变得非常方便，使用他们可以避免使用许多循环和条件。例如：当需要找到一组数中的最大数时，需要写这样一个循环：

var numbers =[3,324,23,22,124];
	var max =0;
	for (var i=0; i<numbers.length;i++){
		if(numbers[i]>max){
			max=numbers[i];	
		}	
	}
	alert(max);

可以不通过循环这样实现：

var numbers =[3,324,23,22,124];
	numbers.sort(function(a,b)(return b-a));
	alert(numbers[0]);

其余操作字符串的常用函数式split()和join()。最经典的例子可能就是利用一个函数将css的类添加到元素中。

现在的问题是，当需要在DOM元素中添加一个类时，要么是将它作为第一个类添加，要么是将它和一个空格键一起加在已经存在的类前面。当删除该类时，也需要删除相应的空格。

因此，原始方程应该写成这样：

function addclass(elm,newclass){
		var c =elm.className;
		elm.className=(c==='')?newclass:c+' ' +newclass;	
	}

可以运用split()和join()函数来自动实现：

function addclass(elm,newclass){
		var classes =elm.className.split(' ');
		classes.push(newclass);
		elm.className =classes.join(' ');	
	}

这样操作可以保证类与空格自动分类且结果被附加在最后。

事件代理

事件使得网络应用可以工作，他的存在，使得用户不需要接触核心代码就可以使产品具有更好的可拓展性。当某一特定的元素或其上DOM层的所有元素发生某一事件时，可以通过单一的处理程序对父元素进行处理来简化事件处理过程，而不是使用大量的程序。比如说想要获得一个连接列表，而且想要通过函数的调用而不是通过加载来获得，其HTML实现方法如下：

<h2>Great Web resources</h2>
    <ul id ="resources">
    	<li><a href ="#">Opera Web Standards Curriculum</a></li>
        <li><a href ="#">Sitepoint</a></li>
        <li><a href ="#">A List Apart</a></li>
        <li><a href ="#">YUI Blog</a></li>
        <li><a href ="#">Blam it on the voices</a></li>
        <li><a href ="#">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++){
			links[i].addEventListener('click',hadler,false);	
		};
		function handler(e){
			var x =e.target;
			alert(x);
			e.preventDefault();
		};
	})();

也可以通过一个事件处理程序来实现：

(function(){
		var resources =document.getElementById('resources');
		resources.addEventListener('click',handler,false);
		function hadler(e){
			var x =e.target;
			if(x.nodeName.toLowerCase()==='a'){
				alert('Event delegation:'+x);
				e.preventDefault();
			}
		}
	})();

因为单击事件发生在列表中所有的元素之上，所以你所要做的就是将节点Name与需要相应事件的元素进行对比。

这种方法的好处在于可以使用单独的事件处理程序。例如,想要在列表中动态的进行添加操作，如果使用事件处理，则不需要进行任何改变，只需要在事件处理过程中重新分配处理程序并对列表重新进行循环操作就可以了。

匿名函数和模块模式

Javascript最令人烦恼的事情是变量的范围没有定义。任何在函数外定义的变量、函数、数组和对象都是全局的，这意味着相同页中其他脚本都可以进行调用，因而经常出现参数被覆盖现象。

解决方法就是将变量封装在一个匿名函数中，在定义完函数后立即调用。例如，下面将生成山歌全局变量和两个全局函数：

var name ='Chris';
	var age ='34';
	var status ='single';
	function createMember(){
		//[...]
	}
	function getMemberDetails(){
		//[...]
	}

该页中其他的脚本语言如果含有名为status的变量的话就会出问题。如果将它们封装在名为myApplication的匿名函数中，就可以解决这个问题了：

var myApplication =function(){
		var name ='Chris';
		var age ='34';
		var status ='single';
		function createMember(){
			//[...]
		}	
		function getMemberDetails(){
			//[...]
		}
	}();

但是这样定义使得参数在函数外不起作用，如果这正是所需要的，没有问题。灵位可以省略定义的名字。

(function(){
		var name ='Chris';
		var age ='34';
		var status ='single';
		function createMember(){
			//[...]
		}	
		function getMemberDetails(){
			//[...]
		}
	})();

但是如果需要部分变量或函数可以被外部调用，则需要这样改写程序：为了可以调用createMember()或getMemberDetails()函数，将它们作为myApplication的属性返回。

var myApplication =function(){
		var name='Chris';
		var age ='34';
		var status ='single';
		return{
			createMember:function(){
				//[...]
			},
			getMemberDetails:function(){
				//[...]
			}
		}
	}();

这样的用法被称为模块模式或单利模式。为了使函数和变量可以被外部调用，需要改变定义的语法，这很令人烦恼。而且，如果要从一个方法中调用两一个方法，还必须在调用时加上myApplication前缀。因此，更好的方法是返回这些想要其成为全剧元素的指针，这样还可以缩短外部调用时的使用长度。

var myApplication=function(){
		var name='Chris';
		var age ='34';
		var status ='single';
		function createMember(){
			//[...]
		}
		function getMemberDetails(){
			//[...]
		}
		return{
			create:createMember,
			get:getMemberDetails
		}
	}();

允许配置

每当我们写完javascript源程序并将之公布于众时，人们总是想修改程序，有时是因为人们想进行功能拓展，但大多数时候是因为我们的程序太难于定制。

解决方法是在脚本语言中加入配置文件，例如：

1、在整个脚本文件中添加一个对象作为配置文件。

2、在配置文件中加入使用该脚本程序可能需要改变的所有信息：

例如：css的ID和类名称；

生成按钮的字符串（比如说标签）；

地点、区域和语言设置

大多数时候这一步放在编程的最后阶段，起始，配置文件就是为了使代码更易于被其他开发人员使用和更改，这样添加配置文件之后就很少会有人抱怨你的代码或者询问他人更改过的地方。

与后台交互

Javascript包含丰富的交互接口，但在进行数据处理和数据库访问时效果不佳。访问一个web服务时，可以得到JSON-P格式的返回值并在客户机上进行大量的数据转换。但是为什么在已经有了服务器并有更多的数据转换方法和JSON、HTML格式的返回值得时候，还要在客户机上进行启动缓存呢？因此，如果想要使用Ajax，试着接触一些HTTP并编写自己的缓存和转换代理程序，这样可以节约大量的事件和精力。