废话先:
这学期没有把javascript这么学科怎么的好好的学,关注了其它的学科了,原先自己认为这个前台工作不怎么重要所以就没有怎么重视,这倒好,期末一个小项目需要用的Ajax技术,我就现炒现卖,花了几天的时间学习了下DOM,接着边做项目边学Jquery框架。一边看Jquery的chm一遍上网查资料。现在小项目做好了,我对javascript中的对象字面量有了些好奇,遂小小的研究了下。这篇博客就当是记录,并且希望能有帮助。好,废话到此。
什么是javascript字面量?
在编程语言中呢,字面量是一种表示值的方法,Javascript也不列外,下面是javascript中的构造函数
var coder = new coder(); coder.name = 'David Zhang'; coder.blog = 'www.cnblogs.com/struCoder';
还有一种等价的方法就是:
var coder = {name:'David',blog:'www.cnblogs.com/struCoder'};
显而易见,第二种表示的更好!第二种赋值语句的右边是一个对象字面量(object literal)。对象字面量是一个名值对列表,每个名值对之间用逗号分隔,并用一个大括号括起。各名值对表示对象的一个属性,名和值这两部分之间用一个冒号分隔。
当然你也可以在对象字面量中添加方法之后,在需要的时候调用这个方法:
var coder = { name: "David Zhang", cnblog:"www.cnblogs.com/struCoder", getInfo: function () { return this.name+" "+this.cnblog; } }; alert(coder.getInfo());
如何应用?
到这边我们简单封装一个Ajax,这也是对字面量的一种好的应用
var myAjax = { xhr: window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"), get: function (url, callback) { this.xhr.open('get', url); this.onreadystatechange(callback, thi.xhr); this.xhr.send(null); }, post: function (url, data, callback) { this.xhr.open(url, data, callback); this.xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); this.xhr.onreadystatechange(callback, this.xhr); this.xhr.send(data); }, onreadystatechange: function (func, _xhr) { _xhr.onreadystatechange = function () { if (_xhr.readyState == 4) { if (_xhr.status == 200) { func(_xhr.responseText); } } } } }
那么如何使用这个封装好的myAjax呢?
$("#myAjax").bind("click", function () { myAjax.post("myHandler.ashx", "func=GetServerTime", function (data) { if (data) { alert(data); } }) });
个人总结
其实呢在这里说白了,就和那些编程语言都差不多,但也有些小差别,javascript中的字面量更简洁,在编程语言中需要先声明各种变量,各种方法,之后new 一个对象,调用其属性 or 方法。在javascript中对象字面量这些步骤少了,所以看起来更加的简明。
(注:)
参考:http://www.cnblogs.com/heyuquan
http://www.cnblogs.com/wangzhanhua
有什么疏漏或者不对的地方欢迎指正,发现自己的错误才能进步!