JavaScript技巧篇：
1》状态机
var state = function () {
this.count = 0;
this.fun = null;
this.nowcount = 0;
};
state.prototype = {
load: function (count,fun) {
this.count = count;
this.fun = fun;
this.nowcount=0;
},
trigger: function () {
this.nowcount++;
if (this.nowcount >= this.count){
this.fun();
}
}
};
//--------------
function method1() {
s.trigger();
}
function method2() {
s.trigger();
}
var s = new state();
s.load(2, function () {
console.log('执行完毕');
});
setTimeout(method1, 1000);
setTimeout(method2, 1000);
状态机一般用在多个异步任务的情况下，任务执行到某个阶段执行某个函数!
场景：同时请求多个异步执行[并发异步or异步串行](ajax,nodejs的io)，并处理结果集合，以上的写法最简单，但却不够优美，
这是我发现的至今为止最好的一js异步流程文章: http://www.docin.com/p-687111809.html~
2》setTimeout 的特殊应用
var hander=setTimeout(function () { },100);
clearTimeout(hander);
场景1》：按钮三次快速点击才触发事件
var num = 0;
var hander = 0;
function btnClick() {
if (hander != 0){
clearTimeout(hander);
hander = 0;
}
num++;
if (num >= 3) {
Run();
num = 0;
clearTimeout(hander);
hander = 0;
}
hander = setTimeout(function () {
num = 0;
}, 300);
}
function Run() {
console.log('Run');
}
<input type="button" onclick="btnClick()" value="快速点击三次触发" />
场景2》：快速多次点击只触发最后一次
var hander = 0;
function btnClick() {
if (hander != 0) {
clearTimeout(hander);
hander = 0;
}
hander = setTimeout(function () {
Run();
}, 300);
}
function Run() {
console.log('Run');
}
<input type="button" onclick="btnClick()" value="快速点击只触发最后一次" />
其他(长期更新)....
JavaScript写法：
《. & []》
var obj = new Object();
obj.add = function (a, b) {
return a + b;
}
console.log(obj.add(1, 2));
var obj2 = new Object();
obj2['add'] = function (a, b) {
return a + b;
}
console.log(obj2.add(1, 2));
《prototype》 最常见
var obj = function (name) {
this.name = name;
}
obj.prototype.say = function () {
console.log(this.name);
}
obj.prototype.add = function (a, b) {
return a + n;
}
var o = new obj('fuck');
o.say();
var obj = function (age) {
this.age = age;
};
obj.prototype = {
add: function (a, b) {
return this.age;
},
say: function () {
console.log('@');
}
}
var o = new obj(23333);
console.log(o.add());
《运行创建对象》 简单闭包
var obj2 = function () {
var _name = '123';
function _add(a, b) {
return a + b+_name;
}
return {
add: _add,
name: _name
};
}();
console.log(obj2.add(1,3));
Object.create Object.defineProperty
var obj = function () {
this.add = function () {
console.log('add')
}
}
var outo = new obj();
var o = Object.create(outo, {
sub: {
value: function () {
console.log('sub')
}
}
});
o.add();
o.sub();
var obj = function () {
this.add = function () {
console.log('add')
}
}
var o = new obj();
Object.defineProperty(o, {
"sub": {
value: function () {
console.log('sub')
},
writeable: false
}
});
o.sub();
__proto__
var obj = function () {};
obj.prototype = {
add: function () {
console.log('add');
},
sub: function () {
console.log('sub');
}
};
var o = {};//new Object();
o.__proto__ = obj.prototype;
o.add();
o.sub();
var o = {};//new Object();
o.__proto__ = {
add: function () {
console.log('add');
},
sub: function () {
console.log('sub');
}
};
o.__proto__.go = function () {
console.log('go');
}
o.add();
o.sub();
o.go();
call bind
var obj = new Object();
obj.name = 'myname';
function add() {
console.log(this.name+':add');
}
add.call(obj);
var obj = new Object();
obj.name = 'myname';
function add() {
console.log(this.name + ':add');
}
var newadd = add.bind(obj);
newadd();
写在最后：
prototype》function的内置属性
__proto__》任意对象的内置属性
add.call(obj)》在obj对象域下执行add apply同是
add.bind(obj)》给add绑定一个obj对象执行域，obj对象并不会得到add，bind返回一个绑定执行域obj的函数add
类.add，为静态，不会被实例化
类.prototype.add，是修改原型，可以实例化 prototype 等价 this
对象.add 是为对象添加 add ，仅对象使用
对象.__proto__，是对象的所有属性集，
表达式:对象.__proto__= 某类.prototype 为原始属性完全继承，对象.__proto__=另一对象.__proto__ 为对象简单深层复制
表达式:对象.__proto__.add 为对象添加add或修改add，同理：对象.__proto__.add()为执行
同理:表达式：for (var i in o.__proto__) {console.log(o.__proto__[i])}为遍历对象属性
表达式：for (var i in 类.prototype ) {}为遍历类属性