JAvascript共有会ノート

注:これは共有記録ノート(共有者Jerry)、筆者(PokerMe)に整理され、転載は出典を明記してください.
Javascriptは何ができますか?

ダイナミックインタラクティブ効果、ランニングランプ、DOM切替

HTML 5、キャンバスおよびベクトルグラフィックス、オフラインアプリケーション、ローカルインタフェース、モバイルエンドクラスオリジナルアプリケーション

Jsフレームワークコンポーネント、AngularJs、backbone、extjs、dojoToolkit、jqueryUI

Nodeに基づく.jsのツールクラスアプリケーション、Grunt、bower、nodewebkit

ではJavascriptの機能はこんなに強くて、私たちは何をすべきですか?
More and more development energy is being put into new technologies, such as the ones coming out of HTML5 or the new versions of ECMAScript. But there isn’t any point to diving into new technologies, or using the hottest libraries, if you don’t have a proper understanding of the fundamental characteristics of the JavaScript language.
-John Resig Secrets of the javascript ninja
これは「js忍者の秘訣」の著者が言った2つの言葉で、HTML 5や新しいバージョンのECMAScriptの特性など、ますます多くの新しい開発方法が流行しているという意味だ.でも!どんなに新しい技術や人気のあるクラスライブラリでも、基礎的なJs文法を本当に理解していなければ、これは無駄です.
PS:実は仕事と学习の过程の中で见ることができて、私达はいつもいくつかの初级の先端の技师に出会って特にいくつかの特効の特にきらびやかな各种の体积の巨大なプラグインを探すことに热中して、ただ使うことができることを求めて、しかしいくつかの基础の概念に対してすべてはっきりしません(例えば私^^).
Javascript関数
JAvascriptの主な内容は次の図で説明できます.
javascript-dom-bom
ホスト(通常はブラウザ)を含むドキュメントオブジェクトモデル(DOM)とブラウザオブジェクトモデル(BOM)、そしてコアECMAScript t.この共有ではcoreについて簡単に説明します.
関数の呼び出し方法
The level of the sophistication of all the code you’ll ever write in JavaScript hinges upon this realization.
-John Resig Secrets of the javascript ninja
あなたのコードの優雅さは関数に対する認識の深さにかかっています.
Javascriptでは、関数はfirst-class objectsと呼ばれ、一等公民と言えることが重要です.なぜ関数が一等公民なのかは、以下の特性のためです.

created via literals(字面で作成可能)

var array = [];
/*    var array = new Array();*/

assigned to variables or properties(パラメータとして付与可能)

var fun = function(){};

passed as parameters(パラメータとして渡すことができる)

var fun = {
    a:function(){},
    b:function(){}
}

returned as function results(値を返す)

function fun(args){
    return function a(){};
}

possess properties and methods(持つ属性と方法)

window.height();
/*height      */

では、その呼び出し方法(invoke)はどれらがありますか?PS:呼び出し方法を熟知してこそ、thisの指向をよりよく理解することができる.

一般呼び出し

function a(){}
a()/*    */

メソッド呼び出し

var obj = {
    a:2,
    fun2:function(){}
}
obj.fun2()//      

は、構築関数として

を呼び出す.

var Person = funtion(){
    this.name = "PokerMe";
    this.age  = 24;
}
var persion = new Person();//        ，    

apply and call(これは理解しにくいが、thisの指向を変えると理解できる)

var color = "white";
var colors = {
    color:"black";
} 
function getColor(a,b,c){
    console.log(this.color);
}

getColor();//this     color,    white

getColor.call(colors,a,b,c)
//this    colors   color，   black
getColor.apply(colors,arguments);
//apply call           ，call       ， apply            

関数の役割ドメイン
以上の 、 invokeについて説明することで、thisの指向について初歩的な理解が得られるはずです.では、 (scope)について説明します.
scope
図に示すように、役割ドメインチェーンは現在定義されている関数から外に探し、小さい頃から大きな役割ドメインが見つかっている.
まず、2つのコードを見てみましょう.

function JQuery(){
    console.log(global);
}

(function(global){
    var jQuery = function(){
        console.log(global);
    };
    global.jQuery = jQuery /*               */
}(this))

1つ目のコードはカプセル化されていません.globalはグローバルwindow属性を呼び出し、任意に変更することができます.2つ目は、カプセル化を追加し、thisを内部にのみ書くメリットがあります.このように書くメリットは、関数の内部変数の汚染を避け、インタフェースを直接露出させ、外部に呼び出すことができます.PS:第2種は匿名関数である.一般的なプラグインでは、次のコードが表示されます.

(function( $ , undefined ) {
    //todo....
})( jQuery );

その目的は,他のコードの影響を受けずに独自の役割ドメインを構築することである.また、その関数はすぐに実行されます.
基本的な関数特性、関数呼び出し方式、関数の役割ドメインを熟知しています.関数の拡張理解として、いくつかのばらばらなノートの点数がリストされています.
クローズドパッケージ
初級プログラマーの目には、これは非常に高い名詞かもしれませんが、プログラムを書く過程でその存在を知りませんが、面接をすると....この問題は必ず聞かなければならないいくつかの点で、私は前にも理解できなくて、比較的にあいまいで、今回分かち合ってから比較的にはっきりしました.では、閉鎖(closure)とは何ですか.まずコードを見てみましょう

//     
var a = "a";
function fun(){
    console.log(a);
}
fun();
//     
var b = "b";
globalC = null
function fun1(){
   var c = "c";
   globalC = function(){
        console.log(c);
   }
}
console.log(c);//undefined
fun1();//  globalC
globalC();//  c

この2つの関数のうち、1つ目は出力変数aであり、2つ目は注釈で出力結果を示す.fun()とglobalC()は同じ閉パケット関数である.ここには2つの理解があります.何が閉鎖なのか.1.閉パッケージはローカル変数にアクセスできる関数である.閉パケットとは、データ付き関数(正確ではない)です.つまり、関数がある場合、ローカルドメインの変数に相対的にアクセスし、閉パケットになります.閉パッケージは特殊な関数です.レンズ率の高いコードを見てみましょう.

var i=0,l=10,j=0,funs=[];
for(;i

まず注釈の中の2つの問題を見てください.i注釈がここに実行されたときに何に等しいですか?プロセスを分析します.forサイクルでは,iは10回累積され,10となる.2.パッケージを閉じて保存したデータは何ですか?どの関数が閉パッケージですか?

function(){
console.log(i);
}

でしょ?次のforループは、この閉パケット関数を10回実行します.その結果は何ですか?実行すると10個10だとわかります.最初のforループはすでにグローバルiを10に割り当てているので、どのようにループ呼び出してもこのiです.
きおくせい
関数記憶性は,コード効率を最適化する非常に良い手段であることを認めざるを得ない.次のコードとテスト結果では、天と地の違いの効率の問題に驚嘆し、コード最適化が重要であることもわかります.共有者は出力Fibonacci数列(Fibonacci数列とは何か?1,2,3,5,8….【後者の値が前の両者の値の和である】)でこの関数の特効を説明する.コードは次のとおりです.

 // [ 1, 1, 2, 3, 5, 8, 11 ]
//       fibo()
    var fibo = function( n ) {
        if ( n === 1 || n === 2 ) {
            return 1;
        } else {
            return fibo( n - 1 ) + fibo( n - 2 );
        }
    };
//         fibo2()
    var fibo2 = function( n ) {
        var n1, n2;
        if ( !fibo2.cache ) {
            fibo2.cache = [];
        }
        if ( n === 1 || n === 2 ) {
            return 1;
        } else {
            n1 = fibo2.cache[ n - 1 ];
            if ( !n1 ) {
                n1 = fibo2.cache[ n - 1 ] = fibo2( n - 1 );
            }

            n2 = fibo2.cache[ n - 2 ];
            if ( !n2 ) {
                n2 = fibo2.cache[ n - 2 ] = fibo2( n - 2 );
            }

            return n1 + n2;
        }
    };


    console.time( "fibo" );
    console.log( fibo(40) );
    console.timeEnd( "fibo" );

    console.log( "----" );

    console.time( "fibo2" );
    console.log( fibo2(40) );
    console.timeEnd( "fibo2" );

私たちは両者でフィボナcci数列の40位を出力するのはいくらですか.読者はこのコードをコピーして実行することができます.その結果,1番目の関数の実行時間は2289 msであり,2番目の関数は1 msであり,効率の差は数千倍であった.だから私たちがコードを書く時、最適化コードを考慮して、アルゴリズムの効率だけではなくて、ブラウザのレンダリング、ラベルのバインドの上ですべて記憶性を通じてコードを最適化することができて、とても簡単なJqueryイベントの登録例:

//      
$('.btn').click(...)
$('.btn').toggle(...)
//     
var clickbtn = $('.btn');
clickbtn.click(...);
clickbtn.toggle(...);
//                 。
    var util = {
        cache: [],
        $id: function( id ) {
            return cache[ id ] || $( "#" + id );
        }
    };

    $( "button" ).click(function() {
        var username = util.$id( "username" ).val();
    });

この共有ノートending~PS:PokerMeの能力は限られており、間違いがあれば修正を指摘してください.