javascript进阶（一）
主博客：http://xiaocaoblog.diandian.com/
最近在看《编写高质量代码-web前端修炼之道》，写了3篇博客，写写感想。
第一篇写了关于javascript封装以及模块化插件设计。
第二篇写了关于javascript面向对象思想以及原型和构造器。
第三篇主要写关于javascript的编写风格以及细节设计问题。
今天的代码都保存了。
http://xiaocao.u.qiniudn.com/work/base-2013-11-29.zip
以前写代码都是，罗列函数，全局变量。
最近想弄些高质量的代码，看些javascript进阶，感觉收获很多，写些想法和笔记。
日志主要包涵如下：
javascript是一种面向对象性语言，所以具有面向对象的特点，每个节点都是一个对象。
类似MVC思想，可以把javascript分成：base层，common层，page层。
base层：主要兼容一些浏览器特性，比较底层，类似mvc中的m层，封装不同浏览器特性公common层调用。
common层：主要集成化插件，实现功能供page调用，mvc中典型的c层，控制页面的主体。
page：其实我们平时用的插件都在用page层多，插件都是封装了base和common层，提供接口供码农们调用。
base层：
- event：
平时用事件会是什么情况？如果你不是用类似jquery的插件，是自己写的话，可能要兼容很多浏览器。
对于IE来说，event作为一个window全局属性调用，但是对于现代浏览器（firfox，chrome，opera），event作为事件对象。其次，event对象的属性也是不同的，IE用event对象的srcElement，firefox用target访问。
下面我们来封装event对象。
function getEventTarget(e){
e=window.event || e;
return e.srcElement || e.target; //返回e对象
}
/*===测试下===*/
document.getElementById('test').onclick=function(e){
var test=getEventTarget(e);
console.log("对象的名称是:"+test.tagName);
}
- on、attachEvent、addEventListener事件监听函数
这几个函数经常见到，但是有时候不知道怎么用，attachEvent是IE支持的方法，addEventListener是firefox支持的方法。
on+事件类型(){...}比较难用，而且容易出现重叠。
attachEvent(eventType, callback){...}
addEventListener(eventType, callback, useCapture){...}
其中addEventListener传入三个参数，第三个是一个bool，选择是否事件冒泡。
下面来实现函数封装成on函数：
function on(elem, eventType, handler){
/*====转化elem格式====*/
elem=typeof elem == "string" ? document.getElementById(elem):elem;
/*====这样子，elem就支持id输入，也支持选择器输入了====*/
if(document.all){//检测是否为IE(妈蛋的，IE个垃圾)
elem.attachEvent("on"+eventType, handler);
}else{
elem.addEventListener(eventType, handler, false);
}
}
/*====下面来测试下====*/
var node =document.getElementById('test');
on(node, "click", function(){
console.log("测试陈功，点击了id为："+node+"的节点");
});
trim去除空格函数
表单验证获取value要去除开始的空格，和结尾的空格。但是js里面没有原生函数，那就自己写个。function trim(value){ return value.replace(/^\s+|\s+$/g,""); }阻止事件冒泡
假如你有2个点击事件，DOM文档为
你的事件函数为：
document.getElementById('test1').onclick=function(){
console.log("你单击了test1");
}
document.getElementById('test2').onclick=function(){
console.log("你单击了test2");
}
当你点击了test2，在conlose里面会显示“你单击了test1”和“你单击了test2”。
事件冒泡，因为test2在test1里面，所以你单击test2了，同时也单击了test1.
下面解决这个问题。
/*====上面的点击会冒泡，下面的不会了*/
function stopPropagation(e){
e=window.event || e;
if(document.all){
e.cancelBubble=true;
}else{
e.stopPropagation();
}
}
/*====测试=====*/
document.getElementById('test2').onclick=function(){
console.log("你单击了test2,此时事件不会冒泡");
stopPropagation(e);
}
- get或者$()获取函数节点元素
类似jquery简洁模式获元素取节。函数很简单。
function $(elem){
elem=typeof elem=="string" ? document.getElementById(elem) : elem;
return elem;
}
如果是class呢，也不难。
function getElementByclassName(elem, root, tag){
/*====包涵三个参数====*/
/*====只有elem是必选项，其他可不选。elem代表className，root是父节点，默认为根节点，tag是标签的名字*/
if(root){
root = typeof root="string" ? document.getElementById(root) : root;
}else{
root = document.body;
}
tag = tag || *;
var els=root.getElementsByTagName(tag), arr=[];
for(var j=0, n=els.length; i<n, i++){
for(var j=0, k=els[i].className.split(" "), l<k.length; j<l; j++){
if(k[j]==elem){
arr.push(els[i]);
break;
}
}
}
return arr;
}
- extend继承对象
javascript是面向对象语言，但是javascript没有类，可以自定义函数继承。
javascript属于原型语言，通过new实例化对象，属性和行为来自两部分，一部分来自构造函数，一部分来自原原型。当我们生成一个类时，同时生成一个队形原型。
例如：构造了对象A；
var test = new A( ) ;
那么，
test.prototype
就指向原型。原型通过constructor指向类。
下面试试这个。
function extend(subClass, superClass){
var C=function(){};
C.prototype=superClass.prototype;
subClass.prototype=new C();
subClass.prototype.constructor=subClass;
subClass.superClass=superClass.prototype;
if(superClass.prototype.constructor == Object.prototype.constructor){
superClass.prototype.constructor=superClass;
}
}
/*=====搞定了=====*/
好了今天就写到这里了。
下一篇写个common的一些相关。
感觉最近啥都没做，但是又忙半死。还是要多记录一些东西。
最近做的事情：
1.看了本MySQL，写了写东西，准备写些日志。
2.看这本《高质量的javascript》
3.写了几个小php，昨晚想弄个php抓取页面信息的东西，发现读取节点好麻烦，就没弄了。
4.对了，明天去烧烤，人生啊，满满的欢乐。写写代码，玩玩，吃吃。
（做事情总是跟着乐趣走，接触新的东西，但是遇到一点难处就放弃，真的很不好。）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。