关于javascript中的对象字面量一二

废话先:

这学期没有把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

有什么疏漏或者不对的地方欢迎指正,发现自己的错误才能进步!

 

posted @ 2013-12-29 19:04  strucoder  阅读(265)  评论(0编辑  收藏  举报