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);
}