Question

我的问题：如何最好地将大型单片javascript对象文字分解为多个离散的文件？

我有一个单独的javascript文件，它包含一个附加了许多方法的对象文字。它变得越来越长，我想把它分成更小的部分，可以更容易管理。

我听说我可以使用AMD或CommonJS来组织事情，我听说我应该使用RequireJS，我应该使用Webpack或Browserify，我应该使用任何其他工具/技术。看了这些事后，我对最好的方法感到困惑。

你会怎么做？你将如何获取由几千行javascript（由“搜索”，“登录”和“用户”等功能组成）组成的单个对象文字，并将其重新组织成多个文件，这些文件更容易被一组开发商？单一的巨型文件只是变得笨拙而且选项似乎变化多端且不清楚。这是一个相当简单的应用程序，它使用vanilla JS，一个小jQuery并且位于Grails后端之上。

我认为这个问题非常清楚但是如果你真的需要代码来看这里就是我所讨论的对象文字的一个例子：

var myObj = {

    foo: "one",
    bar: "two",
    baz: false,
    deez: -1,

    login: function() {
        // lots and lots of code
    },

    user: function() {
        // lots and lots of code
    },

    beers: function() {
        // lots and lots of code
    },

    varieties: function() {
        // lots and lots of code
    }

    init: function() {
        myObj.login.init();
        myObj.user.init();
        // lots of jQuery document.ready stuff
    }
}

myObj.init();

Answer 1

这是我使用的模式：

如果可能，将概念分解为各自的子对象
无论是否有子对象，先声明任何非破坏属性，然后根据需要添加它
如果文件跨多个文件且您不希望每个文件使用子对象，请使用临时对象来保存其他属性，然后扩展原始文件。

样品：

     <div class="container" id="">
        <table align="centre" class="table table-condensed table-striped table-hover no-margin"style="width:70%" id="">

            <thread>
                <tr style="width: 56%;">

                    <th>

                        No.

                    </th>

                    <th style="">

                        Restaurant Names

                    </th>

                </tr>
            </thread>
            <tbody>


<th>

                <span value="1" class="res_id"></span></th>
                    <th style="">
                    </th>

                    <th style="">

                                 <span value="salten paper" class="res_id"></span>

                    </th>

                    <th style="width: 1%" >
                        <a href="<?php echo base_url();?>index.php/BulkRecipe_Controller/bulk_recipe/<?php echo $row->restaurant_id;?>"  class="btn btn-warning" <i class="glyphicon-edit"></i>See Menu</a>

                    </th>

                </tr>

            </tbody>

        </table>

    </div>

请注意＆＃34;饮料＆＃34;是一个概念本身，包含多个属性和方法。你的概念可能类似于＆＃34; ui＆＃34;，＆＃34; utils＆＃34;，＆＃34; data＆＃34;或者包含属性的角色恰好是什么。

对于我所做的扩展点，那里需要的代码不多

var myObj = {
  foo: "one",
  bar: "two",
  baz: false,
  deez: -1
}

myObj.login = function() {
    // lots and lots of code
};

myObj.user = function() {
    // lots and lots of code
};

myObj.drinks = {
  beer: function() {},
  wine: function() {},
  sunnyDelight: {
    drinkIt: function() {},
    burp: function() {}
  }
};

myObj.init = function() {
  myObj.login.init();
  myObj.user.init();
  // lots of jQuery document.ready stuff
}

myObj.init();

然后在另一个文件中你有两个选择。添加到对象而不覆盖它（您需要使用点符号来执行此操作）：

// "utilities.js"
var myObj = {
  // a bunch of properties and/or methods
};

myObj.moreStuff = "more stuff!";

如果你细分你的概念，上面的工作特别好......因为你仍然可以拥有相当单一的对象，不会践踏myObj的其余部分。但也许你想直接添加到myObj而不会践踏并且没有细分问题：

// "ui.js"
var myObj = myObj || {};

// adds the render object to the existing myObj
myObj.render = {
  header: function() {},
  dialogBox: function() {}
}

我没有看到太多使用上述内容的机会，因为myObjSupplement现在位于全局命名空间中，并且无法限制添加到全局命名空间的目的，但是如果你需要的话，那就是它。

[编辑添加：]

它可能不会出现＆＃34;没有说＆＃34;正如我所想 - 但如果你有一个可以将它们连接成一个适合缩小的文件的构建过程，那么分成许多不同的文件可能效果最好。您不希望有100个甚至6个单独的文件，每个文件都需要同步HTTP调用才能获取。

有更现代的，可能更好的＆＃39;使用AMD / RequireJS等技术的方法......但如果问题是，＆＃34;我如何将对象文字分成几个文件＆＃34;，我给出的上述答案是我可以支持的

Answer 2

你会有很多建议和方法来解决你的问题，我不能说它们中的任何一个是错的，它们只是不同。

我的方法是使用 ES6 及其原生模块支持。

为了做到这一点，我总是使用我自己的名为fabric的样板文件，它使用Webpack来编译模块，Browsersync来帮助你进行开发，使用Tape进行单元测试，{{3用于CSS预处理，SASS用于编译可在应用程序中轻松使用的兼容 ES5 软件包。

现在，使用ES6模块的方式是这样的命名导出：

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

或使用默认导出：

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

您可以在Babel

了解有关ES6模块的更多信息

Answer 3

虽然有自动执行此操作的方式我确信，而且我也有兴趣看到这个问题得到的答案，我建议您简单地进入并将方法定义移动到不同的文件中并正常调用函数method(param);并将文件链接到您的html页面。

这将有多种用途，包括您希望将代码分解为更易于管理的模块。在这些目的中还包括这样的事实：不是将这些定义写入对象的每个实例的内存中，而是只需定义一次并在需要时引用它。

抱歉，如果没有真正看到JavaScript文件，我将无法提供更多帮助。

如果您需要更多指导，可以参考this stack overflow example。

您不必在对象或类中定义所有方法，最好将这些方法模块化为不同的文件，并使用<script src="path/to/your/script.js"> </script>标记将它们全部包含在内你的html / php页面

将大型javascript文件转换为多个文件

3 个答案: