Javascript 从外部js文件获取对象属性

我正在使用一个名为jTable（www.jTable.org）的jquery脚本在我的web应用程序中实现动态表。为了在特定页面上包含表，必须包含以下代码以声明其属性：

<script type="text/javascript">
    $(document).ready(function () {         
       $('#MyTableContainer').jtable({

            //General options comes here

            actions: {
                //Action definitions comes here
            },

            fields: {
                //Field definitions comes here
            }
        });     
    });
</script>

问题是我在整个web应用程序中使用相同的表（或非常相似的表）。我希望能够实现一种方法，将字段存储在外部.js文件中，然后在每个页面上引用它，从而避免复制和粘贴。在某些页面上，我可能只包含上面的一些字段（例如，我可能希望排除密码和电子邮件地址），或者在加载这些字段时对其进行轻微更改（例如，使用与特定页面上的external.js文件中的默认显示格式不同的显示格式（对于生日）

---

谢谢！

您可以创建放入外部JS文件中的函数。然后，这些函数可以返回构建jTable所需的JSON对象。

问题在于，您有一个JSON对象，不能仅在JavaScript文件中引用。如果您想加载该文件，需要使用类似get的方法JSON，然后将其与jQuery一起使用

function createTable(fields) {         
   $('#MyTableContainer').jtable({

        //General options comes here

        actions: {
            //Action definitions comes here
        },

        fields: fields
    });     
}

$(function(){
    $.getJSON("YourFields.json", createTable);
});

---

现在您要做的是引用一个全局变量

<script type="text/javascript" src="YourFields.js"></script>
<script type="text/javascript">
    $(document).ready(function () {         
       $('#MyTableContainer').jtable({
            actions: {
            },
            fields: fields
        });     
    });
</script>

将文件放在全局变量之前并引用全局变量

<script type="text/javascript" src="YourFields.js"></script>
<script type="text/javascript">
    $(document).ready(function () {         
       $('#MyTableContainer').jtable({
            actions: {
            },
            fields: fields
        });     
    });
</script>

---

你可以用几种方法来实现这一点。这里有一个简单的方法：

main.js

other-file.js

---

因此，在使用JavaScript文件并引用它之前，请先链接到该文件。

fields:fields

如果需要覆盖它，请使用extend（）@epascarello。我尝试了此方法，但无法使其正常工作。In.js file:fields={…}；In page:fields:fields，我做错了什么？我在页面中实际脚本之前加载了脚本。

if (!window.appDefaults) {
    window.appDefaults = {}
}
window.appDefaults.fields = {
        StudentId: {
            key: true,
        ...
};

//should be modularized/namespaced
var defaultStudentTableFieldsCfg = {
    ...
};

$(function () {
    var tableFieldsCfg = $.extend({}, defaultStudentTableFieldsCfg);

    //define new column
    tableFieldsCfg.someNewCol = {
        //...
    };

    //remove some column
    delete tableFieldsCfg.Password;

    //override config
    tableFieldsCfg.Gender.title = 'GENDER';

    //it would be better not to hard-code #MyTableContainer here
    $('#MyTableContainer').jtable({ fields: tableFieldsCfg });
});