Question

过去我工作过的几个网站，主要是使用jquery进行事件驱动，我通常会将我的功能设为这样

function abc() {
    //do stuff
}
abc();

和

function foo() {
    var a = $('.aaa');
    var b = $('.bbb');
    var c = $('.ccc');

    function animal() {
        //do stuff
    }
    animal();

    function pet() {
        //do stuff
    }
    pet();
}
foo();

我知道这不是最好的做法但是，我仍在学习，似乎有效。我想知道我现在应该如何处理这个问题。

Answer 1

阅读Principles of Writing Consistent, Idiomatic JavaScript。这是一个非常好的Javascript风格指南。

Answer 2

实际上，如果您在全局范围内定义所有这些函数（例如全局对象窗口的属性/方法），那么您的示例中的代码（第一个）就不是您可以做的最好的事情。我更喜欢使用模块模式http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript 我建议你在上面的链接中阅读整本书。另一件非常有用的东西 - Stoyan Stefanov的JS Patterns书http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752。

你的例子的另一个选择（第二个）是自动执行功能：

(function () {
   //attaching events and doing all other stuff
}());

自动执行功能可帮助您在首次加载页面时执行一些初始化工作。您可以附加事件或/和做一次您应该做的事情。这会阻止您污染全局范围并多次执行init。

Answer 3

我一般都会这样做。将整个代码包装在一个闭包中，并在将所有必需的方法和变量附加到该对象之后返回一个名称空间对象。

var myApp = (function foo() {
    "use strict";
    var myApp = {

        a       : $('.aaa'),
        b       : $('.bbb'),
        c       : $('.ccc'),
        animal  : function () {
            //do stuff
        }
    };

    myApp.pet =  function () {
        //do stuff
    };

    return myApp;
}());


myApp.animal();

Javascript：声明函数的最佳实用方法

3 个答案: