Question

所以我有这个网站，我们有javascript的负载。基本上它们都运行在jQuery之上。该网站使用layout和多个view文件。所以结构大致如下：

layout.php

loadHeader();
loadBody();
loadFooter();

loadHeader()将加载所有必需的CSS loadFooter()将加载所有必需的JS

现在loadBody()加载了不同的PHP scripts。大多数脚本需要jQuery/Javascript才能正常工作。现在，每个人都将所有必需的jQuery添加到名为site.js的文件中，该文件作为.js file中的最后一个loadFooter()加载

这创建了一个BIG单片代码结构，如：

$(document).ready(function()
{
  //init this...

  //do that...

  //bind this...

  //ajax that...
});

这种情况越来越难以管理。在我们所拥有的结构中，我不确定是否可以从loadBody()按需加载.js文件，因为依赖关系(jQuery, bootstrap, plugins etc)最终会被加载。此外，是否所有内容都需要像现在一样包裹在document.ready内？

Answer 1

是否所有内容都需要包含在document.ready中，就像它现在一样？

如果只在后端进行一些计算，那么文档是否准备好并不重要。

如果您需要操作或从DOM中获取某些内容，那么您需要准备好它。

这创建了一个BIG单片代码结构，如：

＆＃34; init这样做ajax＆＃34;可能会变得很大，就像你正在尝试一样，但是如果它的某些部分被设想服务于相同/相似的目的那么你可以将它们放入单独的函数中并避免一个庞大的文件然后你可以将相关的代码添加到单独的文件。

除此之外，它很难避免，就像任何代码一样。只需确保相关代码在独特的函数和分离的文件中分开。

$(document).ready(function()
{
    init();
    doThat();
    bindThis();
    ajaxThat();
});

是一种公平的分离，但也许你可以更好地简化它。

$(document).ready(function()
{
    init();
    handleProcessInsertName();
});

您已正确定义了该功能（在同一文件中，或者最好在另一个文件中）。

function handleProcessInsertName()
{
    doThat();
    bindThis();
    ajaxThat();
}

Answer 2

有很多方法可以重构代码。我经常做的是：

$(function() {
    setupMenu();
    setupFooter();
    initSelect2(); 
});
// and then...
var setupMenu = function() {}
var setupFooter = function() {}
var initSelect2 = function() {}

在站点中构造javascript / jquery

2 个答案: