JQlite

詳細
映画「葉問」では、甄子丹演じる葉問が毎日木人杭を利用して武芸を練習し、泳春拳法を筋肉記憶の一部にしている.臨場応変に敵を迎える時、体は正しい拳式を使うことができて、自然です.
JSプログラミング基本技の練習は武術拳法の練習と同じだと思います.効果的な『拳法』でJSの基本技を内蔵し、練習を繰り返し、JSの技を指の記憶の一部にした.このように、実際の開発に直面すると、基本的なスキルに気を使う必要がなく、ビジネスロジックの思考に多くの時間を応用する必要があります.
では、どの「拳法」が木人杭としての演習拳法に適しているのだろうか.個人的にはjQueryをお勧めします.一方、jQueryは使用量が最大のJSクラスライブラリとして、実用的な原則を学ぶのに最適である.一方、jQueryのデザインは、JSプログラミングの基本的なスキルに必要なすべてのテクニックをほぼカバーしています.
これに基づいて、私はjQueryからいくつかのコアテクノロジーの実装を抽出し、それを繰り返し練習できるJSKataに設計しました.その中でJSが実戦の过程の中で缲り返し现れる技术とモードに関连して、まめに练习して、简単に大部分のJSの开発の実践を応用することができます.
関数の定義
関数は、JavaScript言語の一等公民です.どうしてわかるの?次の図を参照してください.

> var i = 5;
undefined
> var str = 'abc'
undefined
> typeof i
'number'
> typeof str
'string'
> typeof Number
'function'
> typeof String
'function'
> typeof Function
'function'

関数には3つの定義方法があります.
匿名関数

var fn = function(name) {
    return 'hello, ' + name;
};

めいめいかんすう

function fn (name) { 
   return 'hello, ' + name;
}

関数オブジェクトの作成

var fn = new Function('name','return "hello, " + name');

匿名関数は最も一般的な関数定義方法であり、匿名関数に対して具名関数は変数の宣言タイミングを向上させ、デバッグ時にも名前表示があります.しかし、匿名関数は変数によって匿名関数を指し、この関数が不要になった場合、JSの実行時環境は自動的にメモリゴミを収集します.
jQueryの$
jQueryの$はDOMオブジェクトを簡単に選択できます.実際には関数です

var $ = function(selector) {
    return document.querySelector(selector);
};

字面量オブジェクト
JavaScriptは動的オブジェクト向け言語です.

var o = new Object();
o.name = 'jobs';
o.age = 55;
o.sayHello = function() {
    console.log(this.name + ":" + this.age);
};

しかし、字面量の定義方法を推奨します.

var o = {
    name:'jobs',
    age:55,
    sayHello:function() {
        console.log(this.name + ":" + this.age);
    }
};

jQueryのshow/hideメソッド
show/hide関数はDOMを利用してCSSスタイルシート操作をカプセル化し、方法としてオブジェクトの属性で存在する:

var $ = function(selector) {
    var el = document.querySelector(selector);
    var o = {
        hide:function() {
            el.style.display = 'none';
        },
        show:function(){
            el.style.display = 'block';
        }
    };
    return o;
};

JSオブジェクトは集合です
JavaScriptオブジェクトは、次のような種類の集合で存在します.

for(var key in o){
    console.log(key + ":" + o[key]);
}
console.log(o.name === o['name']);

この特性は非常に柔軟で、文字列に基づいて属性情報を動的に取得または設定することができます.
jQueryのgetStyle/cssメソッド

getStyle: function(name) {
    var style = document.defaultView.getComputedStyle(el);
    return style[name];
},
css:function(options) {
    for(var attr in options){
        el.style[attr] = options[attr];
    }
}

コールバック
関数もオブジェクトです.

var fn = new Function('name','return "hello, " + name');

JavaScriptでは、他のオブジェクトと同様に、関数オブジェクトを別の関数にパラメータとして渡すこともできます.

var foo = function(arg) {
    if(typeof arg === 'function')
        console.log(arg('jobs'));
    else
        console.log(arg);
};
foo(function(arg){
    return 'hello, ' + arg;
});

どのようなクライアント実装があるか分からないので、コールバックを使用して、jQueryのreadyメソッドのような、クライアント実装の定義をサービス呼び出しに遅延させることができます.

$(document).ready(function(){
    
});

次の例は、NodeJSがコールバック関数を使用して迅速に構築した静的サーバです.

var http = require('http'),
    fs = require('fs');
http.createServer(function(req, res) {
    var path = req.url.slice(1);
    fs.exists(path,function(exist){
            console.log(path);
        if(exist){
            fs.readFile(path,'utf-8',function(err,content){
                res.write(content);
                res.end();
            });
        }        else{
            res.write('404');
            res.end();
        }
    });
}).listen(9432);

jQueryのbindメソッド

bind: function(event, fn) {
    el.addEventListener(event, fn);
}

コンストラクタ
JavaScriptのフォント量オブジェクトは便利ですが、同じメソッドを持つオブジェクトを作成する必要がある場合は、コンストラクタを使用すると便利です.

var Person = function(name) {
    this.name = name; 
    this.sayHello = function() {
       return "Hello, " + this.name;
    };
};
var o1 = new Person('jobs');
var o2 = new Person('gates');

o 1、o 2はいずれもsayHelloメソッドを呼び出すことができるが、2つのメモリから来ている.作成されたオブジェクトが多ければ多いほど、無駄なメモリが多くなります.しかし、メモリの浪費を減らすにはどうすればいいのでしょうか.
関数のスコープ
デフォルトでは、関数の役割ドメインはlocalとglobalで構成されています.時々、よく使用するglobalオブジェクトをパラメータを介してlocalに渡してメモリを節約する必要があります.

var fn = function(document,a,b,c) {
    console.log('break');
    var e,d,f;
    e = function() {};
    function d () {}
    f = 5;

};
fn(document);

変数を関数にカプセル化してPrivateの効果を達成することもできます.

var Person = (function() {    //private
    var sayHello = function() { 
       return 'Hello, ' + this.name;
    }    //public
    return function(name) {
       this.name = name;
       this.sayHello = sayHello;
    };
})();

Prototype
prototypeプロパティを使用すると、コンストラクタで作成したオブジェクトを既存のメソッドで再利用できます.

var Person = function(name) {
    this.name = name;
};
Person.prototype.sayHello = function() {
    return "Hello, " + this.name;
};
var o1 = new Person('jobs');
var o2 = new Person('gates');

o 1とo 2のsayHelloメソッドは、同じメモリアドレスを指す.var o1 = new Person('jobs');次のコードと同等です.

var o1 = new Object();
o1.__proto__ = Person.prototype;
Person.call(o1,'jobs');

prototypeを使用すると、JavaScriptに飛ぶ翼を挿入できます.

Function.prototype.method = function(name,fn) {
    this.prototype[name] = fn;
    return this;
};
function Person (name) {
    this.name = name;
}
Person
.method('sayHello',function() {
     return 'Hello,' + this.name;
})
.method('show',function() {
     return 'show';
});
var jobs = new Person('jobs');
console.log('Hello,jobs' === jobs.sayHello());
console.log('show' === jobs.show());

this
関数が直接呼び出された場合、thisはグローバル役割ドメイン(window or global)であるべきです.

var fn = function(name) {
    this.name = name;
};
fn('jobs');

関数がオブジェクトによって呼び出された場合、thisはそのオブジェクトです.

var fn = function(name) {
    this.name = name;
};
var o = {
    setName:fn
}
o.setName('jobs');

これは、関数の定義ではなく、関数の呼び出しに依存します.

var fn = function(name) {
    this.name = name;
};
var o = {
    setName:fn
}
var method = o.setName;
method('jobs');

関数は実際には関数オブジェクトであるため、call,applyの2つの方法が含まれています.callとapplyでは、最初のパラメータでthisを指定できます.

var fn = function(name) {
    this.name = name;
};
// var fn = new Function('name','this.name = name');
var o = {};
fn.call(o,'jobs');
fn.apply(o,['jobs']);

コンストラクタで呼び出すと、thisは作成されたオブジェクトです.

var Person = function(name) {
    this.name = name;
    this.sayHello = function() {
            return 'Hello, ' + this.name;
    };
    this.show = function() {
            console.log(this.name);
    }
};
var o1 = new Person('jobs');

arguments
ArgumentsはJavaScriptのキーワードで、実際のパラメータはargumentsに渡されますが、定義されたパラメータは実際にindexに基づいてargumentsに対応する値を取ることに相当します.

var fn = function() {
    console.log(arguments);
};

fn(5,6,'abc',[3,4,5]);

jQueryのfn

var $ = function(selector) {
    return new $.fn.init(selector);
};
$.fn = $.prototype = {
    init:function(selector) { 
        this.el = document.querySelector(selector);
        for(var method in $.fn){
           this[method] = $.fn[method];
        }
    },
    slideDown: function() {
        var height = parseInt(this.getStyle('height'));
        this.el.style.overflow = 'auto';
        var that = this;
        for (var i = 0; i <= height; i++) {
            (function(i) {
                var h = i;
                setTimeout(function() {
                    that.el.style.height = h + "px";
                }, h * 50);
            })(i);
        }
    },
    val:function(content) {
        if(typeof content === 'string'){ 
            this.el.value = content;
        }
        else{
            return this.el.value;
        }
    },
    append:function(e) {
       var tagRegexp = /^(.*)$/;
       var match = tagRegexp.exec(e);
       var tag = document.createElement(match[1]);
       tag.innerHTML = match[2];
       this.el.appendChild(tag);
    },
    hide: function() {
       this.el.style['display'] = 'none';
    },
    show: function() {
       this.el.style['display'] = 'block';
    },
    getStyle: function(name) {
       var style = document.defaultView.getComputedStyle(this.el);
       return style[name];
    },
    css:function(options) {
       for(var attr in options){
           this.el.style[attr] = options[attr];
       }
    },
    bind: function(event, fn) {
       this.el.addEventListener(event, fn);
    }
}

[url=に転載]https://mp.weixin.qq.com/s?__biz=MzIxMjE4NzM5MA==&mid=402734795&idx=1&sn=4aad46fb822b73cbbe677e7fd7c717aa&scene=1&srcid=07011aI7OWcfb11SWIPkBZbd&key=77421cf58af4a65305382e3f51eb8831d39401df98d3686797e45cbf551866ea9a23f321906fcaee5e2e59156a2f0dbf&ascene=0&uin=MjAzNzM1NjQwMQ%3D%3D&devicetype=iMac+MacBookPro12%2C1+OSX+OSX+10.10.5+build(14F1808)&version=11020201&pass_ticket=GOKC%2BtdzItwvKmfRnnbZkw3quvjSCwM9a%2FC0UsWD1oVTWUQWQ8DPXMYI5MbjgTsT]JQlite
[/url]