JQlite
2016-08-13 | 来源:网络 | 人气: | | 关键字:
在电影《叶问》中,甄子丹饰演的叶问每天会利用木人桩练习武艺,使得泳春拳法成为肌肉记忆的一部分。临场迎敌时,身体会使用正确的拳式,自然而
在电影《叶问》中,甄子丹饰演的叶问每天会利用木人桩练习武艺,使得泳春拳法成为肌肉记忆的一部分。临场迎敌时,身体会使用正确的拳式,自然而然。我以为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]
为您推荐
- 推荐
-
JQlite
2016-08-13
-
HTML5校验
2016-08-13
-
HTML5电信网络拓扑图性能优化
2016-08-13
-
HTML5的CSS3MediaQueries实践
2016-08-13
-
HTML5网络拓扑图性能优化
2016-08-13
-
超详细的Web前端开发规范文档
2016-08-13
-
HTML5VideoAPI,打造自己的Web视频播放器
2016-08-12
-
如何将HTML5性能发挥到极致
2016-08-12
-
H5你真的了解吗?(绝对干货)
2016-08-12
-
2015-2016前端架构体系技术精简版
2016-08-12
- 更多Html5教程信息
头条推荐
- 热门排行
- 评论排行
- 图文排行
- 评论排行
评论
评论数10