如何自定义一个javascript文件

Question

I want to provide my clients with JS scripts served form my server to their websites. I want the integration to be super easy. All they're supposed to do is to add the following line on their page:

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

I want to serve each user a slightly different JS file. Basically I want to add some variables based on some_parameter 's value.

The thing is I want to do it efficiently. First thing that comes to my mind is to put some placeholders in the script and just use the string replace method on the file's content. However if the JS file is big, this can take long.

Is there a smart way to do this?

Answer 1

I'd suggest looking at what other 3rd party plugins do to handle this. Lets look at a couple for sake of example:

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>

See that line with var _kmk = _kmk || 'xxx';var _kmk = _kmk || 'xxx'; . The 'xxx' is where my key would sit. Then after the library is loaded, it can look at the _kmk variable that has been set and do something with it.

A slightly more complicated example would be 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>

Look how they set themselves up with a mini api ahead of time to pass configuration data along. If all you need is one key set, then i'd probably take the KISS route. But if you need to pass a lot along, maybe something more like Keen would do it. You can always go back to the tried and true way Google Analytics do it as well.

LMK what you think. But looking at the way current companies handle this should help you. The biggest thing is you want to be able to serve one JS file that is cached and very fast to send out. You for sure dont want to be generating files for everyone, it would be very server intensive at that point.