KISSY基础篇乄KISSY之Node（1）

KISSY之Node（1）

今日任务：学习Node模块,对拆合菜单实例代码进行优化重构.

前面我们分别讲解了DOM 和Event模块，那时是按照使用什么模块就引用什么模块的原则编写代码的。同时，我们也在Event章节提到过：通常DOM事件无需直接引用event，只需use('node')即可。使用use('base')时也无需手动引入 event。那么本节我们就来具体体会下Node模块的功能。

一、Node.one与DOM.get

one和get同样是获取符合选择器的第一个元素，但有本质上的区别，one属于node模块，而get属于dom模块。使用one意味着使用类似于jquery获取元素的方式，而get是类似YUI获取元素的方式，二者的返回值也是不同的，接下来以一个demo来具体演示其差别：

KISSY.use('node',function(S,Node){

var menu=Node.one("#menu");

alert(menu);

});

KISSY.use('dom',function(S,DOM){

var menu=DOM.get("#menu");

alert(menu);

});

效果图分别是：

可以看到二者的返回值是不一样的，使用Node模块的menu是object，而使用DOM模块的menu是HTNLUListElement。其实可以把one方法看做是对get的二次封装。当元素存在时，S.one返回的是Node实例（就可以使用类似jquery的链式调用，继续调用node的其他方法）；不存在返回null。

二、Node.one的链式调用

在DOM章节里，有这样一段代码：

var menu = DOM.get("#menu");

Event.on('#btn-4','click',function(evt){

var menuChildrens = DOM.children(menu);

alert(menuChildrens.length);

});

用途是点击id为btn-4的按钮，弹出获取到的拆合菜单的子节点li的个数。那么下面看看用one如何实现这个功能：

KISSY.use('node',function (S,Node) {

var len= Node.one("#menu").children().length;

Node.one("#btn-4").on('click',function(){

alert(len);

});

代码是不是简洁多了？既然有children(),可以预见还有prev()、next()、parent()、text()等，只要是dom模块中的方法，node模块都有对应的接口。不仅是dom模块，event和anim模块中的方法，node模块都有对应的接口。

三、Node演练：向第二个子菜单添加新的菜单项

先来看看DOM章节的代码：

KISSY.use('dom,event', function (S,DOM,Event) {

//向第二个子菜单添加新的菜单项

Event.on('#btn-7','click',function(evt){

var menuChildrens = DOM.children(menu);

var secondUl = DOM.children(menuChildrens[1],'ul');

//创建一个新的li节点

var newLi = DOM.create('<li class="new"><a>test13</a></li>');

DOM.append(newLi,secondUl);

});

再来看下使用node的API的代码：

KISSY.use('node', function (S,Node) {

//向第二个子菜单添加新的菜单项

Node.one('#btn-7').on('click',function(){

Node.one("#menu").children().item(1).children('ul').append('<li class="new"><a>test13</a></li>');

});

一行代码搞定，node模块的简洁性是dom模块无法比拟的，如果你熟悉jquery，那么无疑可以快速掌握node模块用法，node模块的API命名，基本上与jquery的API保持一致，但有一些事不同的，这要留意，比如获取第二个子菜单，jquery是$("#menu").children('li').eq(1)，而kissy是S.one("#menu").children().item(1)。

另外，对于Node的事件操作：

KISSY.use('node',function (S,Node) {

Node.one('#btn-3').on('click', function(e) {

e.halt();

alert('event: ' + e.type + ' target: ' + e.target.tagName);

});

弹出的窗口如下图：

回调传回一个门面对象e，注意e不是原生事件对象，是封装后的，这时e.target是裸的节点。除了preventDefault()和stopPropagation()之外，e还包含halt()方法，停止事件加阻止默认行为。

四、什么是nodelist

nodelist很好理解，就是节点集合，比如你要获取拆合菜单的三个li节点。

KISSY.use('node', function (S,Node) {

var list=Node.all("#menu li");

alert(list.length);

});

list长度是：

all遍历出了拆合菜单下的所有li，包括二级菜单的li。即，如果在上节的实例中结果将会是12。

查找节点集合最简单的办法即使用S.all，DOM 操作方法中，KISSY库会尽可能的返回节点集合，而非节点。通过nodeList[i]来获取第i个节点（从0开始计算）。

节点集合暴露each()方法，方便我们对节点集合进行遍历。对一个Nodelist执行attr方法，将返回第一个节点的属性值。

Node 实例支持逐级查找S.all('.s1').all('.s2')和S.all('.s1 .s2')是等价的。

S.all('.s1').all('.s2')和S.all('.s1 .s2')毕竟还是不同的，在一个多次遍历的场景中，无报错的情况下，通常第一个用法速度优于第二个，因为S.one始终从document根节点开始查找。

五、each

非常常用的一个方法，用于遍历节点集合。

KISSY.use('node', function (S,Node) {

//向第二个子菜单添加新的菜单项

Node.one('#btn-9').on('click',function(evt){

Node.all("#menu div").each(function(o,i){

var txt = o.text();

if(txt == 'test2') alert(i);

});

弹出的窗口是：

each的参数为一个函数，该函数带有2个参数，一个是元素（KISSY.Node的实例），一个是元素索引值。

当然，关于Node模块以上内容是远远不够的，但是，相信学习到现在，一定对KISSY的理解更加深入了。还有些方法equals、item、slice、append、appendTo、insertBefore等等都很重要，请查看API文档自行理解学习。

KISSY基础篇乄KISSY之Node（1）相关推荐

KISSY基础篇乄KISSY之DOM（1）
KISSY之DOM(1) 今日任务:了解学习DOM的基础知识以及学习拆合菜单实例 KISSY的DOM模块的子模块和方法众多,但又很重要,最好的情况是全部熟练掌握,当然一开始学是不可能全部记住DOM的方 ...
KISSY基础篇乄KISSY简介
KISSY简介今日任务:了解学习有关Kissy的一些知识,以便于后续的学习一.相约KISSY,必先了解 KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的 ...
KISSY基础篇乄KISSY之HelloWorld
KISSY之HelloWorld 今日任务:使用kissy实现简单的hello World! 一.新建Kissy测试项目打开STS,File->StaticWeb Project,命名其Pro ...
KISSY基础篇乄KISSY之Node（2）
KISSY之Node(2) 今日任务:学习Node模块有关动画效果的方法. 在学习Anim模块之前,先看看Node模块里有关动画效果的方法的实现.查看相应的API 文档你会发现一些有关动画效果的方法: ...
KISSY基础篇乄KISSY之Event
KISSY之Event事件今日任务:了解学习Event事件的基础知识 Event 模块是KISSY最重要的模块之一,他包含自定义事件机制.事件对象封装.DOM事件封装.面向多终端的事件行为统一.下辖 ...
KISSY基础篇乄KISSY之Seed
KISSY之Seed 今日任务:了解Kissy的模块载入机制首先恭喜你已经成功使用kissy想世界打了个招呼,不过这只是刚起步,咱们还有很多地方需要学习.在本节咱们就推开kissy的大门,看看房间里 ...
KISSY基础篇乄KISSY之IO（2）
第14天:KISSY之IO(2) 今日任务:创建Maven Project并学习IO模块. 这一节我们主要来看一下IO模块里的一些方法. 一.Maven Project (1)创建mavenproje ...
KISSY基础篇乄KISSY之DOM（2）
KISSY之DOM(2) 今日任务:深入学习DOM知识及进一步完善拆合菜单实例在上一篇的教程中,明河使用KISSY.DOM的常用方法制作了一个拆合菜单,同时也演练到了几个常用方法,比如addClas ...
KISSY基础篇乄KISSY之IO前奏
KISSY之IO前奏今日任务:了解学习IO模块之前必备知识. 在学习Kissy的IO之前,咱们先来了解下ajax,http,json等知识,这些是学习IO模块的必备知识.这里只是给出了一些概念性的介 ...

KISSY基础篇乄KISSY之Node（1）

KISSY之Node（1）

KISSY基础篇乄KISSY之Node（1）相关推荐

最新文章

热门文章