JavaScript - 对象文字的优点 [英] JavaScript - Advantages of object literal

问题描述

我已经阅读过，而不是简单地编写一堆函数，我应该使用对象文字。

I've read that rather than simply writing a bunch of functions, I should use object literal.

有人可以解释对象文字的优点是什么，因为到目前为止我还不明白。

Can someone explain what the advantages of object literal are with examples, because I don't understand thus far.

谢谢

推荐答案

正如Russ Cam所说，你避免污染全局命名空间，这在组合来自多个地点（TinyMCE等）的脚本的这些日子里非常重要。

As Russ Cam said, you avoid polluting the global namespace, which is very important in these days of combining scripts from multiple locations (TinyMCE, etc.).

As Alex Sexton说，它也可以实现良好的代码组织。

As Alex Sexton said, it makes for good code organisation as well.

如果您正在使用这种技术，我建议使用模块模式。这仍然使用对象文字，但作为范围函数的返回值：

If you're using this technique, I'd suggest using the module pattern. This still uses object literals, but as the return value from a scoping function:

var MyThingy = (function() {

    function doSomethingCool() {
        ...
    }

    function internalSomething() {
        ....
    }

    function anotherNiftyThing() {
        // Note that within the scoping function, functions can
        // call each other direct.
        doSomethingCool();
        internalSomething();
    }

    return {
        doSomethingCool: doSomethingCool,
        anotherNiftyThing: anotherNiftyThing
    };
})();

外部使用：

MyThingy.doSomethingCool();

范围函数包含在你的所有函数中，然后你立即调用它并存储它的返回值值。优点：

The scoping function is wrapped around all of your functions, and then you call it immediately and store its return value. Advantages:

• 函数声明正常，因此具有名称。 （使用 {name：function（）{...}} 格式，所有函数都是匿名的，即使引用它们的属性具有名称。）名称帮助工具可帮助您显示调试器中的调用堆栈，以告诉您哪个函数引发了异常。 （2015年更新：最新的JavaScript规范，ECMAScript第6版，定义了JavaScript引擎必须推断函数名称的大量方法。其中之一是将函数分配给属性时，如我们的 {name：function（）{...}} 示例。因此，当引擎实现ES6时，这个原因就会消失。）


• 使您可以自由地使用仅由您的模块使用的私有函数（例如上面的 internalSomething ）。页面上没有其他代码可以调用这些函数;他们真的很私密。在结束语中，只有你在结尾语句中输出的那些才能在结算函数之外可见。


• 如果实现完全改变，可以很容易地根据环境返回不同的函数（例如IE-vs-W3C的东西，或SVG vs. Canvas等。）。

• Functions are declared normally and therefore have names. (Whereas with the {name: function() { ... }} format, all of your functions are anonymous, even though the properties referencing them have names.) Names help tools help you, from showing call stacks in a debugger, to telling you what function threw an exception. (2015 Update: The latest JavaScript specification, ECMAScript 6th edition, defines a large number of ways the JavaScript engine must infer a function's name. One of those is when the function is assigned to a property as in our {name: function() { ... }} example. So as engines implement ES6, this reason will go away.)
• Gives you the freedom of having private functions only used by your module (such as my internalSomething above). No other code on the page can call those functions; they're truly private. Only the ones you export at the end, in the return statement, are visible outside the scoping function.
• Makes it easy to return different functions depending on environment, if the implementation just changes completely (such as IE-vs-W3C stuff, or SVG vs. Canvas, etc.).

返回不同函数的示例：

var MyUtils = (function() {
    function hookViaAttach(element, eventName, handler) {
        element.attachEvent('on' + eventName, handler);
    }

    function hookViaListener(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }

    return {
        hook: window.attachEvent ? hookViaAttach : hookViaListener
    };
})();

MyUtils.hook(document.getElementById('foo'), 'click', /* handler goes here */);

这篇关于JavaScript - 对象文字的优点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！