John Resig

John Resig, the creator and lead developer of the jQuery JavaScript library.
His blog address: http://ejohn.org/, we can learn more about
javascript from his articles.

"Object()" or "new Object()" in javascript

We can implement an Object, which can be instance by "Object()" or
"new Object()", here's an example:

function User(name, age){
//if ( !(this instanceof User) )这个也是可以工作的, 但是arguments.callee更通用

if ( !(this instanceof arguments.callee) )
return new User(name, age);

this.name = name + " - " + age;
}

var user = User("xlty", 27); <==> var user = new User("xlty", 27);

flexible arguments

more generic usage of "apply":

Math.min accept a list of number:
> Math.min(1,43);

We want to pass an array to Math.min
> Math.min.apply( Math, array );

实现了一个简单的js test工具集

一时兴起, 实现了一个简单的js测试框架, 结构如下:
==========================================================================
//测试项
var TestEntry = function(id){
return {
//目前只实现了一个简单的方法, 其他的可以自由扩展
assertTrue: function(result){
var r = ET.get(id);
r.append(result? "Ok" : "Error");
r.addClass(result? "ok" : "error");
}
}
}
//测试执行器
var Test=function(){
var mc;
return {
init:function(dom){
ET.get(dom || document.body).append("<div
id='messageconsole'><b>Message console:</b></div>");
mc = ET.get("messageconsole");
},
addTest: function(msg){
var id = UUID.generate("v4");
mc.append("<br><b class='item'>test "+msg+" <b class='result'
id='"+id+"'></b></b>");
return TestEntry(id);
},
reset: function(){
mc.html("<br>");
},
report: function(){
//设置延时是为了, 等待异步执行的部分ajax测试完成
setTimeout(function(){
var total = ET.getByJQSelector("b.item").length;
var error = ET.getByJQSelector("b.error").length;
var ok = ET.getByJQSelector("b.ok").length;
mc.append("<br><br>"+
"<b class='item'>Totally "+total+" tests,</b>"+
"<b class='passed'> passed "+ok+" tests,</b>"+
"<b class='failed'> failed "+error+" tests,</b>"+
"<b class='unfinished'> unfinished "+(total-ok-error)+" tests</b>");
},
1000);
}
}
}();
==========================================================================
css代码:
.item {
color: blue;
}

.result, .unfinished, .failed {
color: red;
}
.passed {
color: #55FF55;
}
==========================================================================
用法:
Test.init();

//普通测试项
Test.addTest("log message here").assertTrue(1+2==3);

//异步操作的测试
var ajaxTest = Test.addTest("ajax request test");
Ajax.request({data:{id:1}, url:'../getName.htm', callback:function(data){
ajaxTest.assertTrue(data.name='apple');
}
});

Test.report();

解释说明:
Test.addTest在系统中添加一条测试记录,
返回一个TestEntry, 用返回的TestEntry的assert系列方法, 来断定此测试项的正确与否

JQuery 树插件介绍: jQuery SimpleTree Drag&Drop plugin

发现一个很好的树插件: jQuery SimpleTree Drag&Drop, 感觉很好, 代码质量不错, 支持拖拽, 风格清晰, 这里推荐一下. Demo看这里.

利用event bus来降低前台业务代码耦合度, Event bus - javascript, js实现

/*

demo:

var observer = function(paramObj){

alert("bomb event comes!" + paramObj);

}

//add business event listener

EventBus.subscribe("tree-node-change",observer);

//remove business event listener

//EventBus.unsubscribe("tree-node-change",observer);

//publish business event

EventBus.publish("tree-node-change",{oldName:"abc", newName:"cdef", id: 123});

*/

/*

ReadMe:

Goal: Using business event dispatcher to reduce code couple between web moudle,
目标: 为了尽可能的减少模块之间业务逻辑的耦合度, 而开发了这个消息总线, 主要用于业务逻辑的事件传递

使用规范: 每个js模块尽可能通过事件去通信, 减少模块之间的直接调用和依赖(耦合)

*/

var EventBus = function(){

var observers={};

var publish=function(eventName, argObj){

var obs = observers[eventName];

if(!obs){

return;

}

for(var i=0;i<obs.length;i++){

obs[i](argObj);

}

}

var subscribe=function(eventName, observer){

var obs = observers[eventName];

if(!obs){

obs=[];

observers[eventName]=obs;

}

obs.push(observer);

}

var unsubscribe=function(eventName, observer){

var obs = observers[eventName];

if(!obs){

return;

}

for(var i=0;i<obs.length;i++){

if(obs[i]==observer){

obs.splice(i,1);

break;

}

}

}

var unsubscribeByObserver=function(observer){

for(var eventName in observers){

removeByName(eventName, observer);

}

}

return {

publish:publish,

subscribe:subscribe,

unsubscribe:unsubscribe,

subscribeByObserver:unsubscribeByObserver

}

}();

js简单继承的实现, 改进篇

前文表述: js简单继承的实现

前文问题:
alert(child instanceof base); 打印false, 此处并没有实现真正的继承

改进:
function base() {
this.member = "dnnsun_Member";
this.test=function(){
window.alert('in base');
}
}

base.prototype.test= function() {
window.alert("base member "+this.member);
}

function extend(child, b) {
b.call(child);
child.prototype=new b;
}
var childclass=function(){
this.test=function(){
window.alert("in child");
}
};


extend(childclass, base);

child = new childclass;

window.alert(child.member);
window.alert(child.test);
child.test();
window.alert(child instanceof base);

不能没有doctype

* 有他的好处, 我这里放下不表, 今天就说说没有他时, 在开发中遇到的问题

   * 在不同的浏览器下网页莫名其妙的布局问题

   * document.body与document.documentElement谁的属性是准的?

      * scrollLeft
    * Right
    * Top
    * Bottom

javascript 正则表达式在线测试 (javascript regexp online demo)

javascript regexp online demo http://www.regular-expressions.info/javascriptexample.html

http://www.regextester.com

用js需要注意的问题:

1. new RegExp的时候, 要手动转义, 例如: \w应该写成\\w

2. 这种方式var reg=/\w/ig, 不用手动转义

* re = new RegExp("\\w+") 等价于 re = /\w+/

3. test, match和search的区别:

* test:

* regexp对象的方法: 快速的判断给定的str是否匹配pattern

* search:

* string对象的方法: 快速的判断给定的str是否匹配pattern, 只返回第一个匹配的位置

* match:

* string对象的方法: 识别str中所有的pattern, 较前者速度稍慢