Question

我已经开始使用jQuery ..我正在努力了解如何组织代码以及如何正确使用它。目前我使用的代码类似于：

$(document).ready(function(){
    alert('all of the jquery goodness here');
  $('#div1').click(function(){
    /* some manipulation stuff here */
  })
})

在dom加载后是否有更好的方法来加载点击处理程序？

还有一些链接可以获取有关jquery中代码布局的信息吗？我一直在寻找源代码，但找不到任何有用的东西..

谢谢你们

[编辑]

我记得的另一个快速问题 - 使用类似的东西是不好的做法：

function clickedevent(){
    $('').toggle or other random jquery function
}

Answer 1

我是怎么做到的：

// Short notation for document ready
$(function(){
    // Bind the button to the method
    $(".button").click(methods.handlers.clickhandler1);
});

var methods = {
    handlers : {
        clickhandler1 : function(){
            alert("Y");
        }
    },
    method1 : function(){

    }
    // ETC
};

我将它排序成一个json对象的某个结构，接下来不要再做一个.click（function（）{}），因为那时你找不到你在文档准备好的实际绑定，更多的概述。

如果您不想了解有关jQuery结构和制作自己的插件的更多信息，请阅读以下网址http://docs.jquery.com/Plugins/Authoring

Answer 2

查看Module Pattern以编写更多面向对象的javascript。在这个主题上，一个很好的阅读是Douglas Crawford's 'Javascript: The Good Parts'。以下是使用jQuery的模块模式示例：

  window.MyCoolModule= (function(){
    var doCoolStuff = function(){
        alert("badumpumbishh")
    }
    var otherCoolStuff = function(){
        alert("someone..moved their..mouse.. all over me");
    }

    var superSecretPrivateFunction = function(){
        // come at me bro
    }

    return{
        somePublicFunction: function(){
            //hello, i can be called by other people
        },

        init: function(){
            $("#div1")
                    .bind("click", doCoolStuff)
                    .bind("mouseover", otherCoolStuff)

            $("#div2")
                .bind("click", superSecretPrivateFunction)
        }
    }
}())

$(function(){
    MyCoolModule.init()
})

需要注意的一些要点：

“返回”下的所有内容都是公开的（可以被其他人调用）对象）以及上面的所有内容都是私有的（无法访问）
我将所有绑定集中到一个代码块'.bind（“click”， doCoolStuff）'，所以一眼就可以看到你所有的DOM元素模块正在听。
我为事件处理程序提供描述性名称而不是定义它们内联'.bind（“click”，function（）{}'。
用户'绑定（“点击”，...）'而不是'.click'，即使他们这样做同一件事情。这是因为jQuery还有一个'unbind'方法这是有用的，我喜欢镜像互惠命名。但更大的原因是你可以命名空间函数。即你可以做'bind（“click.customNamespace，...）'。这样做的原因是您可以稍后执行'.trigger（“click.customNamespace”）并且它将会执行仅触发那些命名空间事件而不是所有点击事件。
你可以在init里面而不是在外面进行$ .ready检查 - 编码风格问题。

Answer 3

比什么更好？那是你想要附上它们的时候。

您可以将单击处理程序函数本身移动到命名函数中，而不是内联它。

有时您可以重构并使用函数生成器来创建单击处理函数并减少代码重复。

Answer 4

一种非常简单的方法：

$(document).ready( function () {
    assignSomeClicks();
    assignSomeOtherClicks();
});

function assignSomeClicks() {
    $('#div1').click(function(){
        ...
    });
}

function assignSomeOtherClicks() {
    ...
}

当然，纯粹主义者会哭，而java家伙会因此而死。

但是，当您开始想要组织JS代码时，基本上有2个选项。这个风格保持简单和一致，或走完全对象的方法。

这些天，我使用“模块”（插件）和“init”函数来处理处理程序。

$(document).ready( function () {
    fileExplorer.init();
    fileViewer.init();
    taskAssignation.init();
});

在antoher js文件中

var fileExplorer = new function () {
    // local stuff
    var thing;
    function buggify() {...};
    // public stuff
    this.init = function () {
       $('.fileExplorer').click(function () {...}); 
    }
}

请注意，它需要一些标准和假设，例如类名等。

另请注意，我在这里使用语法“new function”但您也可以使用对象（var fileExplorer = { init: function () {...}, ... }或其他方法（如var fileExplorer = function () { return {init: function () {...}, ...}; }）。我喜欢“new Function”语法，因为它是在我看来，这是最简单的私人和公共事物。

如果你使用jquery插件，这很容易，你可以在插件本身内绑定你的东西。

然后你就可以开始使用（function（）{}）（）了，但我完全不了解闭包的概念，但感觉不够舒服，无法使用它们。

jQuery代码组织（也提示）

4 个答案: