执行JavaScript脚本选项的最佳方法？

我正在创建的脚本有用户可以设置的选项，而且有很多选项。我在寻找让用户设置它们的最有效方法。下面是我现在是怎么做的

谢谢大家的意见和建议

    <!-- 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 -->

//全球的
var cfs_responsive=“true”；
var cfs_minwidth=“”；
var cfs_arrows_onlyonresponsive=“true”；
var cfs\u disable\u lowerContent=“false”；
//初级类别
var cfs\u pc\u head=“true”；
var cfs_pc_head_color=“#b1b6b9”；
var cfs_pc_active_head_color=“#717a80”；
var cfs_pc_head_size=“23px”；
变量cfs_pc_arrows_color=“#c1ced7”；
变量cfs_pc_箭头_悬停_颜色=“#dde4e9”；
var cfs_pc_border_size=“5px”；
var cfs\u pc\u active\u border\u size=“5px”；
var cfs_pc_border_style=“虚线”；
var cfs\u pc\u active\u border\u style=“虚线”；
var cfs\u pc\u border\u radius=“0px”；
var cfs\u pc\u active\u border\u radius=“0px”；
变量cfs_pc_border_color=“#cbd1d5”；
var cfs_pc_active_border_color=“#a1acb3”；
var cfs_pc_background_color=“#dde4e9”；
变量cfs_pc_active_background_color=“#c1ced7”；
var cfs_pc_size=“183px”；
//子类别
var cfs_sc_head=“真”；
var cfs_sc_head_color=“#b1b6b9”；
var cfs_sc_active_head_color=“#717a80”；
var cfs\U sc\U head\U size=“23px”；
var cfs_sc_arrows_color=“#c1ced7”；
变量cfs_sc_箭头_悬停_颜色=“#dde4e9”；
var cfs\u sc\u border\u size=“5px”；
var cfs\u sc\u active\u border\u size=“5px”；
var cfs\u sc\u border\u style=“虚线”；
var cfs\u sc\u active\u border\u style=“虚线”；
var cfs\u sc\u border\u radius=“0px”；
var cfs\u sc\u active\u border\u radius=“0px”；
变量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”；
//低含量
var cfs\u lc\u toparrow=“假”；
var cfs\u lc\u responsive\u toparrow=“假”；
变量cfs_lc_toparrow_color=“#000”；
var cfs\U lc\U head\U size=“29px”；
var cfs_lc_head_color=“#717a80”；
var cfs_lc_内容_大小=”；
var cfs_lc_内容_颜色=“#9da3a6”；
var cfs_lc_pad_top=“”；
var cfs_lowerContent_background=“无”；
var cfs_低含量_背景_边界_半径=“0px”；
var cfs_较低内容_背景_边框_size=“0px”；
var cfs_低含量_背景_边框_颜色=”；
var cfs_lowerContent_content_align=“中心”；

最有效的方法是创建如下对象：

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'

你可以试试这个：

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

---

创建一个对象，将所有这些参数作为键/值对。“最有效的方式”--“有效性”是一个流行语。没有抽象的有效性。看起来你想创建一个对象，而不是你可能想了解如何使用名称空间和对象-这使javascript的行为更像OO，并有助于提高可伸缩性。如果你在找一本书，我强烈推荐Javascript：在这里你可以找到很棒的部分，这正是我要找的。没问题：-）另外，看一看，了解更多关于Javascript中对象的工作原理。