javascript进阶(一)

原创 2013年12月03日 02:15:32



javascript进阶(一)

主博客:http://xiaocaoblog.diandian.com/

在建网站:http://xiaocao.sinaapp.com/


今天的代码都保存了。
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.对了,明天去烧烤,人生啊,满满的欢乐。写写代码,玩玩,吃吃。

(做事情总是跟着乐趣走,接触新的东西,但是遇到一点难处就放弃,真的很不好。)



协会第五届网络攻防大赛,花花绿绿的,真的好有爱,阳光。

各任的会长,事实告诉我们,会长都是大胖子。


蛋疼,个人网站什么时候写。。。感觉期末要来了。感觉,东哥的android程序完成不了了。感觉华哥的日志系统,要再想想了。


夏日小草
2013/11/29 19:01:52

相关文章推荐

JS和Jquery操作label标签

获取label值:  label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值:   代码如下: var label=document.getElementById("s...

javascript 中的label语句 的使用

使用label语句可以在javascript中添加标签以便将来使用。 label的语法: label:statement label 可以break或者continue联合使用 //l...
  • uuus007
  • uuus007
  • 2012年10月01日 20:05
  • 915

JavaScript代码案例_进阶入门.doc

  • 2013年01月15日 19:40
  • 400KB
  • 下载

JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

JS实现本地文件上传至阿里云服务器 前言       在前面的博客《 AngularJS进阶(二十五)JS实现图片预览并导入服务器功能》(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服...

JavaScript入门进阶课件

  • 2013年01月10日 23:08
  • 1.09MB
  • 下载

编程实践:JavaScript进阶100例

  • 2012年04月17日 16:23
  • 59.02MB
  • 下载

JavaScript进阶设计模式系列——基础篇——this-call-apply

this在JavaScript的世界中,this是一个很让人挠头的概念,为什么呢?第一,它总是指向一个对象,使用起来可以简化代码。第二,它是基于函数的执行环境进行动态绑定的,而不是在函数被声明时的环境...

你不知道的JavaScript--Item30 数组进阶全掌握

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只...

JavaScript 进阶(二)变量作用域

局部变量陷阱
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript进阶(一)
举报原因:
原因补充:

(最多只允许输入30个字)