Question

我正在使用Absurd.js进行网站主题/浏览。我有主题数据存储在data1.js，data2.js，data3.js等等，它们将数据传递给controller.js文件。更改变量值会影响整个站点的值。此外，我们使用MultiTenant平台，其中控制器是一个通用文件，数据依赖于主分支的实例。每个实例都针对每个客户端并拥有自己的皮肤（皮肤来自数据文件）。

挑战我面临，如果我向一个数据文件添加新参数，我必须使用该参数更新/添加所有data.js文件。将它添加到函数调用中，并更新我的contoller.js文件以接收该新参数。它变得乏味。

问题：是否有任何工具可以帮助解决文件同步问题

这里要更清楚的是示例文件

data1.js
========

var primaryThemeColor = "#343344";

/* Primary Button Theme Colors*/
var primaryBtnBgColor = "#1A7483";
var primaryBtnBgHoverColor = "#0e233b";
var primaryBtnBorderColor = "#0093D2";
var primaryBtnFontColor = "#1A3567";
var primaryBtnFontHoverColor = "#D1ECF2";
skinComponent(primaryThemeColor, 
        primaryBtnBgColor,
        primaryBtnBgHoverColor,
        primaryBtnBorderColor,
        primaryBtnFontColor,
        primaryBtnFontHoverColor);

data2.js

var primaryThemeColor = "#413098";

/* Primary Button Theme Colors*/
var primaryBtnBgColor = "#38471A";
var primaryBtnBgHoverColor = "#b332e0";
var primaryBtnBorderColor = "#2d3300";
var primaryBtnFontColor = "#671A33";
var primaryBtnFontHoverColor = "#D3D3D3";
skinComponent(primaryThemeColor, 
        primaryBtnBgColor,
        primaryBtnBgHoverColor,
        primaryBtnBorderColor,
        primaryBtnFontColor,
        primaryBtnFontHoverColor);

data3.js, data4.js and so on... Here is my controller file

contoller.js
============
constructor: function(primaryThemeColor, 
        primaryBtnBgColor,
        primaryBtnBgHoverColor,
        primaryBtnBorderColor, 
        primaryBtnFontColor,
        primaryBtnFontHoverColor){
        this.primaryThemeColor = primaryThemeColor;
        this.primaryBtnBgColor = primaryBtnBgColor;
        this.primaryBtnBgHoverColor = primaryBtnBgHoverColor;
        this.primaryBtnBorderColor = primaryBtnBorderColor;
        this.primaryBtnFontColor = primaryBtnFontColor;
        this.primaryBtnFontHoverColor = primaryBtnFontHoverColor;
});

Answer 1

你可以这样做。虽然我觉得这不适合大量的变化......我想如果这些变得太多，那么使用持久存储解决方案为数据库服务它们将是最好的。

var primaryThemeColor           = ['#343344','#413098','#FFFFFF'];

/* Primary Button Theme Colors*/
var primaryBtnBgColor           = ['#38471A','#38471A','#FFFFFF'];
var primaryBtnBgHoverColor      = ['#0e233b','#b332e0','#FFFFFF'];

//...

var choice = 1; //or 0 or 2

//...
constructor: function(primaryThemeColor[choice], 
        primaryBtnBgColor[choice],
        primaryBtnBgHoverColor[choice],

Answer 2

将“controller”和“skinning”合并到一个js对象中，可以跨多个js文件实现该对象，您可以在其中更改属性。这将提供比您目前更可重用的代码片段。

由于您正在使用jQuery，请考虑使用jQuery扩展/小部件，以便您可以使用库的选择器。你当然可以使用纯JavaScript进行此操作。

以下是jQuery扩展的示例：

/// START PLUGIN:
(function($) {

  $.fn.skinnify = function(options) {

    // default settings
    // data1
    var defaults = {
      primaryThemeColor: "#343344",
      primaryBtnBgColor: "#1A7483",
      primaryBtnBgHoverColor: "#0e233b",
      primaryBtnBorderColor: "#0093D2",
      primaryBtnFontColor: "#1A3567",
      primaryBtnFontHoverColor: "#D1ECF2"
    };

    // extend the settings to include "options"
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      // you'd need to do all of them...
      $(this).css({
        "background-color": settings.primaryBtnBgColor,
        "border-color:": settings.primaryBtnBorderColor,
        "color": settings.primaryBtnBorderColor
      });

      // hover is interesting...
      $(this).on('hover', function() {
        $(this).css({
          "color": settings.primaryBtnFontHoverColor,
          "cursor": "pointer",
        });
      });

    });

  };

}(jQuery));
/// END PLUGIN



// DATA.js
// can be called like this in any file and defaults apply:
$('#foo').skinnify();


// or you can set up your a settings object in a new file and then run the extension
// just make sure you load the skinning js file first!
var data2 = {
  primaryThemeColor: "#413098",
  primaryBtnBgColor: "#38471A",
  primaryBtnBgHoverColor: "#b332e0",
  primaryBtnBorderColor: "#2d3300",
  primaryBtnFontColor: "#671A33",
  primaryBtnFontHoverColor: "#D3D3D3",
}

// new settings
$('#bar').skinnify(data2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="foo">Button foo</div>
<div id="bar">Button bar</div>

任何可用于自动同步.js文件的工具

2 个答案: