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'

函数有三种定义方式。

匿名函数

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

o1、o2都可调用sayHello方法，但是却来自两块内存。创建的对象越多，浪费的内存就越多。 可是如何减少内存的浪费呢？

函数作用域

默认情况下，函数的作用域由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');

o1与o2的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');

this取决于函数的调用，而不是函数的定义:

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

因为函数实际上是函数对象，其中包括了两个方法call,apply。 通过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 = /^<(\w+)>(.*)<\/\1>$/;
       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]