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; }; })();Prototypeprototype属性允许通过构造器创建的对象重用现有方法：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');argumentsarguments是JavaScript的关键字，实际的参数是传给arguments的，而定义的参数实际上相当于根据index取arguments相对应的值var fn = function() { console.log(arguments); }; fn(5,6,'abc',[3,4,5]);jQuery的fnvar $ = 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]