javascript你应该知道的七件事

Posted 2021-11-26 xfgnongmin

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和类名称；

?????????? ?生成button的字符串（比方说标签）；

?????????? ?地点、区域和语言设置

?

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

?

与后台交互

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