Question

我创建了一个简单的广告投放脚本，您可以使用全局参数调用，然后调用使用参数显示广告的外部脚本。

<script>
var ad_width = 100;
var ad_height = 200;
var ad_div = 'someDivID';
</script>
<script src='./js/ads.js'></script>

ads.js的功能如下：

(function(){
    displayads = function(){
       // do stuff here
    }
    displayads();
});

这有效，但是当我有第二个实现时，全局变量只是过度编写，我需要某种形式的封装，javascript不是我最重要的语言所以我不确定我在寻找什么。

Answer 1

我想如果你想允许多个易于配置的广告，那么你可以将它们存储在一个数组中：

var ads = [
    {
        width: 100,
        height: 200,
        div: 'someDivID'
    },
    ...
];

或者，如果您认为对您的客户来说太难了，您可以允许他们编写如下变量：

var ad1_width = 100;
var ad1_height = 200;
var ad1_div = 'someDivID';

var ad2_width = 200;
var ad2_height = 100;
var ad2_div = 'someOtherDivID';

然后在您的代码中，您可以通过检查window对象来检查其变量：

for (var i = 1; ; i++) {
    var widthKey = 'ad' + i + '_width',
        heightKey = 'ad' + i + '_height',
        divKey = 'ad' + i + '_div';
    if (window.hasOwnProperty(widthKey)) {
        displayAd(window[widthKey], window[heightKey], window[divKey]);
    } else {
        break;
    }
}

它很奇怪而且不完全正确的方式（tm）但它确实使最终用户很容易配置。如果您遵循这种方式并且他们不使用任何其他可能使用任何相同变量名称的JS，请确保您的客户始终按顺序对其进行编号。

另一种可能性是在窗口上设置一个属性来监听何时设置这些变量：

var adWidths = [],
    adHeights = [],
    adContainers = [];

Object.defineProperty(window, 'ad_width', {
    set: function(val) {
        adWidths.push(val);
    }
});
Object.defineProperty(window, 'ad_height', {
    set: function(val) {
        adHeights.push(val);
    }
});
Object.defineProperty(window, 'ad_div', {
    set: function(val) {
        adContainers.push(val);
    }
});

现在，您的客户只需执行以下操作即可设置广告：

ad_width = 200;
ad_height = 100;
ad_div = 'someDivID';

ad_width = 100;
ad_height = 200;
ad_div = 'someOtherDivID';

您可以使用以下内容访问每个广告：

for (var i = 0, len = adWidths.length; i < len; i++) {
    displayAd(adWidths[i], adHeights[i], adContainers[i]);
}

但这确实需要您在之前运行以及之后的运行一些代码。此解决方案也与旧版本的IE不兼容。

Javascript全局变量用于不同的实例，即adSense

1 个答案: