如何自定义一个javascript文件

Question

我想为我的客户提供从我的服务器到他们网站的 JS 脚本。 我希望集成超级简单。 他们应该做的就是在他们的页面上添加以下行：

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

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

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

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

Answer 1

我建议查看其他 3rd 方插件如何处理此问题。 让我们看几个例子：

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';查看那条线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>

看看他们如何提前设置一个迷你 api 来传递配置数据。 如果您只需要一套钥匙，那么我可能会选择 KISS 路线。 但是如果你需要传递很多东西，也许更像 Keen 的东西会做。 您也可以随时使用 Google Analytics（分析）经过验证的真实方式。

LMK你怎么想。 但是看看当前公司处理这个问题的方式应该会对你有所帮助。 最重要的是，您希望能够提供一个缓存的 JS 文件，并且可以非常快速地发送出去。 您肯定不想为每个人生成文件，那时服务器会非常密集。