JavaScript Advanced

 

# Source Map

It's a way to map a combined/minified file back to an unbuilt state.

Reference:

[Introduction to JavaScript Source Map](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)

 

# //@ sourceURL=filename.js

----------------------------------------------------------

heating with eval() and //@ sourceurl

Back in the day, a feature in Firebug that I copied into Web Inspector was "sourceURL" support, described in "Give your eval a name with //@ sourceURL". I recently made use of this in my "unminified" version of the injected target weinre script. weinre ships with two versions of the code that gets injected into the target: target-script.js and target-script-min.js. The "min" version is what you should be using for typical weinre debugging, the non-"min" version is what I use when debugging the debugger.

The file target-script-min.js contains gently minized JS files, just concatenated together. The target-script.js file is a bit different. For every JS file, it adds a "//@ sourceurl" comment to the bottom of the file, converts the script content to a string with JSON.stringify(), and then writes an eval([that string here]) to the concatenated file.

The difference between debugging these in a browser which supports sourceurl is night and day. Try it: after visiting these pages, open your web debugger and look at the scripts which are loaded. Note, this works on Google Chrome 16.0.912.36 beta on a Mac (and likely other versions).

• target-script-min
• target-script

----------------------------------------------------------

References:

[Give your eval a name with //@ sourceURL ](http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/)

[Introduction to JavaScript Source Map](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)

 

# CoffeScript --> JavaScript

CoffeeScript的目的在于为引入JavaScript Good Parts提供一种途径，我们可以利用CoffeeScript JavaScript Compiler将CoffeeScript编译成JavaScript代码。

 <textarea id="code">square = (x) -> x * x

cube   = (x) -> square(x) * x



alert cube(5)</textarea>

  <label>Name your code:</label>

  <input type="text" placeholder="Coffeeeeeeee!" id="evalName" />

  <button id="compile">Compile</button>

  <script>

    var code = document.getElementById("code"),

        compile = document.getElementById("compile"),

        evalName = document.getElementById("evalName");

    

    compile.onclick = function(e) {

        var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");

        

        eval(coffee);

    }

  </script>

    - CoffeeScript

square = (x) -> x * x

cube   = (x) -> square(x) * x



alert cube(5)

    - JavaScript:

(function() {

var cube, square;

 

square = function(x) {

return x * x;

};

 

cube = function(x) {

return square(x) * x;

};

 

alert(cube(5));

 

}).call(this);

//@ sourceURL=f

   - How to Compile and Evaluate

      它的作用在于将CoffeeScript代码编程成JavaScript代码，然后eval,而//@ sourceURL则暗示在Debugger中使得这段JavaScript代码以Coffeeeeeeeee的面貌体现出来，似乎此时它就是一个文件。

var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" +
   (evalName.value || "Coffeeeeeeee!"); eval(coffee);

Reference:

[A simple example of //@ sourceURL eval naming](http://www.thecssninja.com/demo/source_mapping/compile.html)

[debugging concatenated JavaScript files](http://pmuellr.blogspot.com/2011/11/debugging-concatenated-javascript-files.html)

 

# Delay loading JavaScript

    - Dynamic Insert

(function() {

    function async_load(){

        var s = document.createElement('script');

        s.type = 'text/javascript';

        s.async = true;

        s.src = 'http://yourdomain.com/script.js';

        var x = document.getElementsByTagName('script')[0];

        x.parentNode.insertBefore(s, x);

    }

    if (window.attachEvent)

        window.attachEvent('onload', async_load);

    else

        window.addEventListener('load', async_load, false);

})();

 

Reference:

[CoffeeScript Home Page](http://coffeescript.org/)

[Lazy Loading Asyncronous Javascript](http://friendlybit.com/js/lazy-loading-asyncronous-javascript/)

[HIGH PERFORMANCE WEB SITES BLOG](http://stevesouders.com/)

 

# OO JavaScript

## class

-

var apple = function () {



    return {

        type: ‘macintosh’,

        color: ‘red’,

        getInfo: function () {

             return this.color + ‘ ‘ this.type + ‘ apple’;

        }

   };



}

-

function Apple (type) {

    this.type = type;

    this.color = "red";

    this.getInfo = function() {

        return this.color + ' ' + this.type + ' apple';

    };

}

-

function Apple (type) {

    this.type = type;

    this.color = "red";

}



Apple.prototype.getInfo = function() {

    return this.color + ' ' + this.type + ' apple';

};

-

var apple = {

    type: "macintosh",

    color: "red",

    getInfo: function () {

        return this.color + ' ' + this.type + ' apple';

    }

}

 

 

-

 

http://yuiblog.com/blog/2006/11/13/javascript-we-hardly-new-ya/

http://www.phpied.com/3-ways-to-define-a-javascript-class/

 

## Singleton

function Singleton() {

}

 

Singleton.getInstance = function( )

{

    if (Singleton.instance == undefined) {

         Singleton.instance = new Singleton();

    }

    return Singleton.instance;

}

 

## static method

function Calculator() {

 

}



Calculator.multiply = function(val1 , val2) {

    return (val1*val2);

}