如何自定義一個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 文件，並且可以非常快速地發送出去。 您肯定不想為每個人生成文件，那時服務器會非常密集。