没有合适的资源?快使用搜索试试~ 我知道了~
是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库。我们其乎每天都在使用JavaScript库。当你刚入门时,利用jQuery是一件非常奇妙的事,主要是因为它的DOM操作。首先,DOM对于入门者来说可能是相对困难的事情;其次用它我们几乎可以不用考虑跨浏览器兼容的问题。在这个教程中,我们将试着从头开始实现一个很简单的库。是的,它非常有意思,但是在你高兴之前让我申明几点:1.这不会是全功能的库。我们有很多方法要写,但是它不是jQuery。我们将会做足工作来让你感受到在你
资源推荐
资源详情
资源评论
创建一个属于你自己的创建一个属于你自己的JavaScript库库
是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了
解它们背后的东西并且动手创建一个超级简单的你最喜欢的库。
我们其乎每天都在使用JavaScript库。当你刚入门时,利用jQuery是一件非常奇妙的事,主要是因为它的DOM操作。首
先,DOM对于入门者来说可能是相对困难的事情;其次用它我们几乎可以不用考虑跨浏览器兼容的问题。
在这个教程中,我们将试着从头开始实现一个很简单的库。是的,它非常有意思,但是在你高兴之前让我申明几点:
1.这不会是全功能的库。我们有很多方法要写,但是它不是jQuery。我们将会做足工作来让你感受到在你创建一个库时会遇到
的各种问题。
2.我们不会完全解决所有浏览器的兼容性问题。我们写的代码能支持IE8+,Firefox 5+,Opera 10+,Chrome和Safari。
3.我们不会覆盖使用我们库的所有可能性。比如我们的append和prepend方法只在你传入一个我们库的实例时才有效,它们不
支持原生的DOM节点或节点集合。
步骤1: 创建库样板文件Creating the Library Boilerplate
我们以一些封装代码开始,它将会包含我们整个库。它就是你经常用到的立即执行函数表达式。
window.dome
= (function
() {
function
Dome (els) {
}
var
dome = {
get:
function
(selector) {
}
};
return
dome;
}());
如你所见,我们把我们的库叫Dome,因为它主要就是一个针对DOM的库,是的,它很不完整。
到此我们做了两件事。首先,我们定义了一个函数,它最终会是实例化我们库的构造函数,这些对象将会封装我们选择或创建
的元素。
接下来我们创建了dome对象,它是我们实际的库对象;你能看到,它在最后被返回。它有一个空的get函数,我们将用它来从
页面中选择元素。所以,让我们现在来填充它的代码。
步骤2: 获取元素
dome.get函数传入一个参数,但是它可以有好几种情况。如果它是一个字符串,我们假定它是一个CSS选择器;但是我们也
可以传入单个DOM节点或是一个NodeList。
get:
function
(selector) {
var
els;
if
(typeof
selector === "string")
{
els
= document.querySelectorAll(selector);
}
else
if
(selector.length) {
els
= selector;
}
else
{
els
= [selector];
}
return
new
Dome(els);
}
我们使用document.querySelectorAll来简化元素的查找:当然这有浏览器兼容性问题,但是对于我们的例子来说它是ok的。如
果selector不是字符串,我们将检查它的length属性。如果它存在,我们就知道它是一个NodeList;否则它是单个元素然后我
们将它放到一个数组中。这就是我们下面需要将调用Dome的结果传给一个数组的原因;你可以看到我们返回一个新的Dome
对象。所以让我们回头看看Dome函数并填充它。
步骤3: 创建Dome实例
下面是Dome函数:
function
Dome (els) {
for(var
i = 0; i < els.length; i++ ) {
this[i]
= els[i];
}
this.length
= els.length;
}
它确实很简单:我们只是遍历我们选择的元素并把它们附到带有数字索引的新对象中。然后我们添加一个length属性。
但是这的关键是什么呢?为什么不直接返回元素?我们将元素封装到一个对象因为我们想为这个对象创建方法;这些方法可以
让我们与这些元素交互。这实际上就是jQuery采用的方法的简化版本。
所以,我们返回了Dome对象,让我们在它的原型上添加一些方法。我把这些方法直接写在Dome函数中。
步骤4: 添加一些常用工具函数
我们要写的第一个方法是一个简单的工具函数。因为我们的Dome对象可以封装多个DOM元素,几乎每个方法都需要遍历每个
元素;所以,这些工具函数会非常便利。
让我们以一个map函数开始:
Dome.prototype.map
= function
(callback) {
var
results = [], i = 0;
for
( ; i < this.length;
i++) {
results.push(callback.call(this,
this[i],
i));
}
return
results;
};
当然,map函数传入单个参数,一个回调函数。我们遍历数组中的每一项,收集回调函数返回的所有内容放到results数组中。
注意我们如何调用回调函数:
callback.call(this,
this[i],
i));
这样函数就会在我们的Dome实例的上下文中被调用,它接受两个参数:当前元素,以及索引号。
我们也想要一个forEach函数。它确实非常简单:
Dome.prototype.forEach(callback)
{
this.map(callback);
return
this;
};
map和forEach间的唯一区别是map需要返回一些东西,因此我们也可以只传入我们的回调函数给this.map并忽略返回的数
组,我们将返回this来使得我们的库支持链式操作。我们将经常使用forEach。所以,注意当返回我们的this.forEach对函数的
调用时,我们事实上是返回了this。例如,下面的方法实际上返回相同的东西:
剩余17页未读,继续阅读
资源评论
weixin_38725734
- 粉丝: 4
- 资源: 933
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功