分类目录归档:前端

How to Create a Javascript Console in Sublime Text – wikiHow

Two Methods:Using JSC (Mac OS X)Using Node.js

Javascript consoles are very handy for debugging and getting live results from your script. Although Sublime Text comes with build systems for many other scripting languages, it does not come with a built-in Javascript build system. Many sources will tell you to create a .html page with a link to the .js file, then use a web browser console to see the results of your code. This equates to constant window-switching and browser reloading; leading to frustration, heartache, and ultimately inefficiency.

 

Fortunately, constructing your own Javascript build system for Sublime Text is quick and easy!

Method 1 of 2: Using JSC (Mac OS X)

JSC is a command-line Javascript runner, cooked directly into Mac OS X. Because your Mac already contains everything you need to run the script, creating the build system in Sublime Text is incredibly easy. (If you have a Windows computer, see the directions for Node.js below.)

Creating The Build System

  1. 1

    Launch Sublime Text.

  2. ToolsBuildSytemCreate.png
    2

    Go to “Tools > Build System > New Build System” in the top bar.

  3. Screen Shot 2013 10 26 at 10.10.27.png
    3

    Paste this code into the resulting new tab that Sublime Text opened, replacing anything else in it:

    {
      "cmd":["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc","$file"],
      "selector":"source.js"
    }
    
  4. JSCSave.png
    4

    Save the file as “JSC.sublime-build” in the default “user” folder.?Now you have created your build system!

Usage

  1. 1

    Open the Javascript file that you want to run in Sublime Text.

  2. 2

    Use?debug()?instead of?console.log()?in your script.

  3. ChooseJSC.png
    3

    Go to “Tools > Build System” in the top bar and select “JSC”.?This is the build system that you just created.

  4. JSCBuilded4.png
    4

    Build the Javascript file, using either the shortcut ?B, or by choosing “Build” from the “Tools” menu.?A console will now appear in a pane at the bottom of the window, showing the results of your script!

Method 2 of 2: Using Node.js

Node.js (Node) is a platform built to allow Javascript to run on a server. However, it can also be installed on your local computer, providing a relatively simple way to run Javascript and get the results without using a browser.

  1. 1

    Download the Node installer from the?project’s homepage?and run it.?Simply use the default settings.

  2. ToolsBuildSytemCreate.png
    2

    Go to “Tools > Build System > New Build System” in the top bar.

  3. Creatingnodebuilder.png
    3

    Paste this code into the resulting new tab that Sublime Text opened, replacing anything else in it:

    {
      "cmd":["node","$file"],
      "selector":"source.js"
    }
    
  4. NodeSave.png
    4

    Save the file as “node.sublime-build” in the default “user” folder.?Now you have created your build system!

Usage

  1. 1

    Open the Javascript file that you want to run in Sublime Text.

  2. ChooseNode.png
    2

    Go to “Tools > Build System” in the top bar and select “node”.?This is the build system that you just created.

  3. NodeBuilded1.png
    3

    Build the Javascript file, using either the build shortcut (Ctrl + B for Windows, and ? + B for Mac), or by choosing “Build” from the “Tools” menu.?A console will now appear in a pane at the bottom of the window, showing the results of your script!

JavaScript中模块模式的应用

模块模式是JavaScript中使用最广泛的模式,模块利用了闭包的特性
Module模式的基本特征:

  1. 模块化,可重用
  2. 封装了变量和function,和全局的namaspace不接触,松耦合
  3. 只暴露可用public的方法,其它私有方法全部隐藏
//自执行函数(immediately invoked function)
(function(){
}());
//这样也可以(this works too)
(function(){})();
//增加参数(add params to first)
(function(my){
}(variable));
//增加返回值(add return)
(function(my){//
    return my;
}(variable));
//这样MODULE就是返回的my(give my to MODULE)
//js加载完就会运行这个函数,并且把返回值赋予MODULE
var MODULE = (function(my){//
    return my;
}(variable));
//把自执行函数的参数换成返回的变量(change immediately invoked function parameter)
var MODULE = (function(my){//
    return my;
}(MODULE || {}));
//你可以在其他任意地方这样定义MODULE
//所有的方法都会可以用MODULE来调用
//now you can define MODULE anywhere you like,
//all the functions inside will be extended to others
// 增加功能(add capabilities)
var MODULE = (function (my) {
    //you cannot access inner variable
    var variable = {};
    // this is inner function, you cannot call it outside of the MODULE
    function innerFun(){
        console.log(variable);//you can access inner variable here
    }
    //this function will be exported, you can call it outside
    my.someFun = function(){
        //you can call inner variable and function here
        console.log(variable);
        innerFun();
    };
    return my;
}(MODULE || {}));
//MODULE || {} is the parameter passed to this MODULE,
//equals "my" inside MODULE
//you can define MODULE anywhere else

null and undefined in javascript

> var un;
> console.log(un);
undefined
> var nu = null;
> console.log(nu);
null
> typeof un
'undefined'
> typeof nu
'object'
> un == nu
true
> un === nu
false
> Number(undefined)
NaN
> Number(null)

undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时,默认返回undefined。