Question

我正在创建的脚本具有用户可以设置的选项以及其中的许多选项。我一直在寻找让用户设置它们的最有效方法。以下是我现在正在做的事情。

感谢大家的投入和建议！

    <!-- CFS Options Start -->
    <script>
        // Global
        var cfs_responsive="true";
        var cfs_minwidth="";
        var cfs_arrows_onlyonresponsive="true";
        var cfs_disable_lowerContent="false";
        // Primary Category
        var cfs_pc_head="true";
        var cfs_pc_head_color="#b1b6b9";
        var cfs_pc_active_head_color="#717a80";
        var cfs_pc_head_size="23px";
        var cfs_pc_arrows_color="#c1ced7";
        var cfs_pc_arrows_hover_color="#dde4e9";
        var cfs_pc_border_size="5px";
        var cfs_pc_active_border_size="5px";
        var cfs_pc_border_style="dashed";
        var cfs_pc_active_border_style="dotted";
        var cfs_pc_border_radius="0px";
        var cfs_pc_active_border_radius="0px";
        var cfs_pc_border_color="#cbd1d5";
        var cfs_pc_active_border_color="#a1acb3";
        var cfs_pc_background_color="#dde4e9";
        var cfs_pc_active_background_color="#c1ced7";
        var cfs_pc_size="183px";
        // Sub Category
        var cfs_sc_head="true";
        var cfs_sc_head_color="#b1b6b9";
        var cfs_sc_active_head_color="#717a80";
        var cfs_sc_head_size="23px";
        var cfs_sc_arrows_color="#c1ced7";
        var cfs_sc_arrows_hover_color="#dde4e9";
        var cfs_sc_border_size="5px";
        var cfs_sc_active_border_size="5px";
        var cfs_sc_border_style="dashed";
        var cfs_sc_active_border_style="dashed";
        var cfs_sc_border_radius="0px";
        var cfs_sc_active_border_radius="0px";
        var cfs_sc_border_color="#cbd1d5";
        var cfs_sc_active_border_color="#a1acb3";
        var cfs_sc_background_color="#dde4e9";
        var cfs_sc_active_background_color="#c1ced7";
        var cfs_sc_size="183px";
        // Lower Content
        var cfs_lc_toparrow="false";
        var cfs_lc_responsive_toparrow="false";
        var cfs_lc_toparrow_color="#000";
        var cfs_lc_head_size="29px";
        var cfs_lc_head_color="#717a80";
        var cfs_lc_content_size="";
        var cfs_lc_content_color="#9da3a6";
        var cfs_lc_pad_top="";
        var cfs_lowerContent_background="none";
        var cfs_lowerContent_background_border_radius="0px";
        var cfs_lowerContent_background_border_size="0px";
        var cfs_lowerContent_background_border_color="";
        var cfs_lowerContent_content_align="center";
    </script>
    <!-- CFS Options End -->

Answer 1

最有效的方法是创建一个这样的对象：

var cfs = {
    responsive:"true",
    minwidth:"",
    arrows_onlyonresponsive:"true",
    disable_lowerContent:"false",
    pc:{
        head:"true",
        head_color:"#b1b6b9",
        active_head_color:"#717a80",
        // etc
    },
    sc:{
        head:"true",
        head_color:"#b1b6b9",
        active_head_color:"#717a80",
        // etc
    }
}

然后，您可以像以前那样访问属性：

console.log(cfs.responsive);    // 'true'
console.log(cfs.pc.head);       // 'true'
console.log(cfs.sc.head_color); // '#b1b6b9'

Answer 2

你可以试试这个：

var cfs = {
    'responsive' : true,
    'minwidth' : '',
    //..
    //primary catg
    'pc' : {
        'head' : {
            'value' : true,
            'color' : "#b1b6b9",
            //..
        },
        //..
    },
    //second catg.
    'sc' : {
        'head' : {
            'value' : true,
            'color' : "#b1b6b9",
            //..
        },
        //..
    }, };

做JavaScript脚本选项的最佳方法是什么？

2 个答案: