Question

我想向我的客户提供从我的服务器提供给他们网站的JS脚本。我希望整合变得非常简单。他们应该做的就是在他们的页面上添加以下行：

<script type="text/javascript" src="http:/myserver.com/client_script.js?some_parameter=some_value"></script>

我想为每个用户提供略有不同的JS文件。基本上我想根据some_parameter的值添加一些变量。

事情是我想有效地做到这一点。我首先想到的是在脚本中放置一些占位符，然后在文件内容上使用字符串替换方法。但是，如果JS文件很大，这可能需要很长时间。

有没有聪明的方法来做到这一点？

Answer 1

我建议看一下其他第三方插件如何处理这个问题。让我们看一对夫妇为例：

KISSmetrics

<script type="text/javascript">var _kmq = _kmq || [];
var _kmk = _kmk || 'xxx';
function _kms(u){
  setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0],
    s = d.createElement('script');
    s.type = 'text/javascript'; s.async = true; s.src = u;
    f.parentNode.insertBefore(s, f);
  }, 1);
}
_kms('//i.kissmetrics.com/i.js');
_kms('//doug1izaerwt3.cloudfront.net/' + _kmk + '.1.js');
</script>

查看var _kmk = _kmk || 'xxx';的该行。 'xxx'是我的密钥所在的位置。然后在加载库之后，它可以查看已设置的_kmk变量并对其执行某些操作。

一个稍微复杂的例子是Keen：

<script type="text/javascript">
    var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
    Keen.configure({
        projectId: "xxxxxx",
        writeKey: "xxxxxx", // required for sending events
        readKey: "xxxxxx"    // required for doing analysis
    });
</script>

看看他们如何提前使用mini api设置自己以传递配置数据。如果您只需要一个按键，那么我可能会采用KISS路线。但是如果你需要经过很多努力，也许更像Keen会做的事情。您可以随时回到Google Analytics所做的尝试和真实的方式。

LMK您的想法。但看看当前公司处理这个问题的方式应该对你有帮助。最重要的是你希望能够提供一个缓存且速度非常快的JS文件。你肯定不想为每个人生成文件，那时它将是非常服务器密集的。

如何自定义javascript文件

1 个答案: