最近在看《javascript dom 高级程序设计》,想着跟着里面的代码敲一遍吧,也算是做一下学习笔记吧,所以这不是重新发明轮子,只是个学习的过程。

1.先确定自己的命名空间,并且加入几个常用的js方法。命名空间很重要啊,保证了自己库里的变量不污染全局空间,不和其他的库的变量名起冲突。命名空间的惯例就是把代码都放在自执行函数(function(){})()里了,然后暴露个方法给window对象了。所以0.1版本的代码就长下面这样了。(这里暂时没有用继承)

(function(){
//命名空间
var Lily = {}
if(!window.Lily){
window['Lily'] = Lily
} function isCompatible(other){}
Lily['isCompatible'] = isCompatible; function $(){}
Lily['$'] = $; function addEvent(node, type, listener){}
Lily['addEvent'] = addEvent; function removeEvent(node, type, listener){}
Lily['removeEvent'] = removeEvent; function getElementsByClassName(className, tag, parent){}
Lily['getElementsByClassName'] = getElementsByClassName; function toggleDisplay(node, value){}
Lily['toggleDisplay'] = toggleDisplay; function insertAfter(node, referenceNode){}
Lily['insertAfter'] = insertAfter; function removeChildren(parent){}
Lily['removeChildren'] = removeChildren; function prependChild(parent, newChild){}
Lily['prependChild'] = prependChild; })()

2.开始填充方法了。isCompatible是看浏览器是否能与这个库兼容,这里用能力检测来看浏览器是否能支持库中所使用的方法。

function isCompatible(other){
if(other === false
|| !Array.prototype.push
|| !Object.hasOwnProperty
|| !document.createElment
|| !document.getElementsByTagName
){
return false;
}
return true;
}

3.$是查找dom对象的方法,这个要比jquery的$方法简单许多,只支持代表id的字符串或字符串数组,或者dom对象。支持dom对象是方便库中的方法,当参数为字符串或者dom都可以用$转成dom对象。

function $(){
var elements = new Array(); for(var i = 0; i < arguments.length; i++){
var element = arguments[i]; if(typeof element == "string"){
element = document.getElementById(element);
} if(arguments.length == 1){
return element;
}
elements.push(element);
} return elements;
}

4.addEvent是支持跨浏览器必须实现的一个方法,ie的事件绑定方法是attachEvent,并且它的方法参数中没有event对象,所以手动将window.event传入到listener中。之前有点困惑为什么没有用匿名函数绑定,查了下用匿名函数的话,就无法解除绑定了。ie6,7,8中用attachEvent绑定的事件中,this指向的是window,所以用node.call修正了this的指向问题。addEventListener的第三个参数指是否使用捕获,默认值是false,而且ie6,7,8中只支持冒泡,所以一般都用false。关于addEvent有个更周全的版本就是Dean Edwards的,jquery中也参考了他的很多方法,目前为了保持简单,先用这个,以后可能会替换成Dean Edwards版本的。

function addEvent(node, type, listener){
if(!isCompatible()) return false;
if(!(node = $(node))) return false; if(node.addEventListener){
node.addEventListener(type, listener, false);
return true;
}else if(node.attachEvent){
node[type + listener] = function(){
listener.call(node, window.event);
};
node.attachEvent('on'+type, node[type + listener]);
return true;
}
return false;
}

5.removeEvent就没什么好说的了,就是detach之后,别忘了把node[type + listener]释放掉。

function removeEvent(node, type, listener){
if(!(node = $(node))) return false;
if(node.removeEventListener){
node.removeEventListener(type, listener, false);
return true;
}else if(node.detachEvent){
node.detachEvent('on'+type, node[type + listener]);
node[type + listener] = null;
return true;
}
return false;
}

6.getElementsByClassName根据class选择dom对象,后两个参数可以不传。parent.all貌似是解决ie5的bug吧,没有细研究,总之满足条件就用document.all吧。正则表达式(^|\\s+)匹配起始位置或者空格。

function getElementsByClassName(className, tag, parent){
var elements = new Array();
parent = parent || document;
tag = tag || "*";
if(!(parent = $(parent))) return false; var allTags = (tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
className = className.replace(/\-/g, "\\-");
var regexp = new RegExp("(^|\\s+)" + className + "(\\s+|$)"); for(var i = 0; i < allTags.length; i++){
var element = allTags[i];
if(regexp.test(element.className)){
elements.push(element);
}
} return elements;
}

7.toggleDisplay第二个参数也可以不传,但是当元素的display不是空值时(比如display:inline-block),可以传入第二个参数,这样在切换时就保留了原来的值。

function toggleDisplay(node, value){
if(!(node = $(node))) return false; if(node.style.display != "none"){
node.style.display = "none"
}else{
node.style.display = value || '';
} return true;
}

8.insertAfter在referenceNode后插入元素。

function insertAfter(node, referenceNode){
if(!(node = $(node))) return false;
if(!(referenceNode = $(node))) return false; return referenceNode.parentNode.insertBefore(node, referenceNode.nextSibling);
}

9.removeChildren删除所以子节点。

function removeChildren(parent){
if(!(parent = $(parent))) return false;
while(parent.firstChild){
parent.firstChild.parentNode.removeChild(parent.firstChild);
}
return parent;
}

10.prependChild将子节点加入到父节点中的第一个。

function prependChild(parent, newChild){
if(!(parent = $(parent))) return false;
if(!(newChild = $(newChild))) return false; if(parent.firstChild){
parent.insertBefore(newChild, parent.firstChild);
}else{
parent.appendChild(newChild);
} return parent;
}

现在一个简单的框架就搭完了,用下面的代码测试一下啊。以下是改写a标签的默认事件,用弹出事件代替跳转事件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="Lily-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
Lily.addEvent(window, "load", function(){
var aTags = Lily.getElementsByClassName("popup");
for(var i = 0 ; i < aTags.length; i++){
Lily.addEvent(aTags[i], "click", function(){
alert(this.href);
return false;
});
}
});
</script>
</head>
<body>
<ul>
<li><a href="hello.html" class="popup">hello</a></li>
<li><a href="hello.html" class="popup">hello</a></li>
<li><a href="hello.html" class="popup">hello</a></li>
</ul>
</body>
</html>

还未进行浏览器兼容性测试,如有问题,请指正,谢谢~

【写一个自己的js库】 1.搭个架子先的更多相关文章

  1. 【写一个自己的js库】 2.实现自己的调试日志

    还是本着学习的目的,实现一个自己的调试日志,界面很简单,就是将调试信息显示在页面的正中央,用一个ul包裹,每条信息就是一个li. 1.新建一个myLogger.js文件,将需要的方法声明一下.其中va ...

  2. 【写一个自己的js库】 5.添加修改样式的方法

    1.根据id或class或tag修改样式,样式名是-连接格式的. function setStyleById(elem, styles){ if(!(elem = $(elem)) return fa ...

  3. 【写一个自己的js库】 3.添加几个处理字符串的方法

    1.生成重复的字符串 if(!String.repeat){ String.prototype.repeat = function (count){ return new Array(count + ...

  4. 【写一个自己的js库】 4.完善跨浏览器事件操作

    1.阻止冒泡. function stopPropagation(event){ event = event || getEvent(event); if(event.stopPropagation) ...

  5. 仿照jquery封装一个自己的js库(二)

    本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...

  6. 仿照jquery封装一个自己的js库(一)

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  7. 仿照jquery封装一个自己的js库

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...

  8. 自己动手写一个iOS 网络请求库的三部曲[转]

    代码示例:https://github.com/johnlui/Swift-On-iOS/blob/master/BuildYourHTTPRequestLibrary 开源项目:Pitaya,适合大 ...

  9. 如何写一个自定义的js文件

    自定义一个Utils.js文件,在其中写js代码即可.如: (function(w){ function Utils(){} Utils.prototype.getChilds = function( ...

随机推荐

  1. 如何查找ORACLE中的跟踪文件

    一.跟踪文件是干什么用的?        跟踪文件中包含了大量而详细的诊断和调试信息.通过对跟踪文件的解读和分析,我们可以定位问题.分析问题和解决问题.从跟踪文件的产生的来源来看,跟踪文件又可以分为两 ...

  2. SQL Server 控制锁升级

    背景知识: 锁升级的路线图.行--> 页 --> 区(extent)-->区(表分区)--> 表: alter table 控制锁的升级行为: 1.table SQL Serv ...

  3. 【STM32】用DMA实现多路ADC通道数据采集

    今天尝试了下STM32的ADC采样,并利用DMA实现采样数据的直接搬运存储,这样就不用CPU去参与操作了. 找了不少例子参考,ADC和DMA的设置了解了个大概,并直接利用开发板来做一些实验来验证相关的 ...

  4. Spring Boot 部署与服务配置

    Spring Boot 其默认是集成web容器的,启动方式由像普通Java程序一样,main函数入口启动.其内置Tomcat容器或Jetty容器,具体由配置来决定(默认Tomcat).当然你也可以将项 ...

  5. 【LeetCode练习题】Merge Sorted Array

    Merge Sorted Array Given two sorted integer arrays A and B, merge B into A as one sorted array. Note ...

  6. word2vec 入门基础(一)

    一.基本概念 word2vec是Google在2013年开源的一个工具,核心思想是将词表征映 射为对应的实数向量. 目前采用的模型有一下两种 CBOW(Continuous Bag-Of-Words, ...

  7. Codeforces 433 C. Ryouko&#39;s Memory Note

    C. Ryouko's Memory Note time limit per test 1 second memory limit per test 256 megabytes input stand ...

  8. Android控件(一)下拉刷新:SwipeRefreshLayout

    须要注意的是SwipeRefreshLayout以下仅仅能够有一个直接子节点. 布局文件例如以下. <FrameLayout xmlns:android="http://schemas ...

  9. OpenGLES 怎样在十天内掌握线性代数 - 希望这是真的!

    OpenGLES 怎样在十天内掌握线性代数 - 希望这是真的! 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...

  10. mysql 新增 删除用户和权限分配

    请一定安此步骤来创建新的用户. 1. 新增用户 mysql>insert into mysql.user(Host,User,Password) values("localhost&q ...