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

Question

我正在使用名为 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>

fields 属性可能包含的内容的示例:

fields: {
        StudentId: {
            key: true,
            create: false,
            edit: false,
            list: false
        },
        Name: {
            title: 'Name',
            width: '23%'
        },
        EmailAddress: {
            title: 'Email address',
            list: false
        },
        Password: {
            title: 'User Password',
            type: 'password',
            list: false
        },
        Gender: {
            title: 'Gender',
            width: '13%',
            options: { 'M': 'Male', 'F': 'Female' }
        },
        BirthDate: {
            title: 'Birth date',
            width: '15%',
            type: 'date',
            displayFormat: 'yy-mm-dd'
        }
    }

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

谢谢!

Answer 1

您可以通过多种方式做到这一点。这是一个简单的:

main.js

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

other-file.js

$(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 });
});