DOM模块

1、优化框架结构

  • 目标:在实现功能基础上优化代码使得框架更简单易用

1.1 简化存储DOM元素的容器 - elements

  • 目标:使用 this 作为容器

1.1.1 使用 elements 的优缺点:

  • 优势:使得数据和方法分离,结构清晰明了
  • 劣势:增加了使用数据的复杂度

1.1.2 jQuery中存储数据的容器

  • 思路:直接把数据存储到 this 中
  • 问题:如何jQuery对象转化为DOM对象?

1.2 使用this作为存储数据的容器

  • 思路:直接使用this存储数据并提供 length 属性
  • 问题:如何获取数据的个数?
  • 修改:appendTo 去掉 elements
var itcast = function(selector) {
return new itcast.prototype.init();
}; itcast.prototype = {
constructor: itcast,
length: 0,
init: function(selector) {
if(typeof selector === "string") {
if(selector.charAt(0) === "<") {
push.apply(this, parseHTML(selector));
}
}
}
}; itcast.prototype.init.prototype = itcast.prototype;

2、增强 appendTo 方法的功能

  • 目标:实现追加元素的功能并支持多种类型的参数
  • 问题:参数处理的逻辑放在哪?

2.1 可能存在的参数类型

  • 参数:字符串 / DOM对象 / DOM数组 / itcast对象
  • 思路:保证参数被处理后获取到的是一个伪数组即可(不管参数的类型是什么)

2.2 回顾 appendTo 方法的实现

  • 前提:假定参数为字符串(选择器或者html字符串)
  • 思路:将字符串转化为 DOM对象数组

2.3 重新考虑 itcast 的参数

  • 存在的参数类型:
1 "" / null / undefined
2 DOM对象
3 DOM数组
4 itcast对象
5 fn
6 string => 已经完成
7 无参数

2.3.1 修改 itcast 函数参数

  • 思路:分别针对不同的参数类型,进行不同的处理
init: function(selector) {
if(!selector) return this; if(itcast.isString(selector)) {
if(selector.charAt(0) === "<") {
itcast.push.apply(this, parseHTML(selector));
} else {
itcast.push.apply(this, select(selector));
this.selector = selector;
}
} else if(itcast.isDOM(selector)) {
this[0] = selector;
this.length = 1;
} else if(itcast.isItcast(selector)) {
return selector;
} else if(itcast.isLikeArray(selector)) {
itcast.push.apply(this, selector);
}
}

3、实现 append 方法 和其他方法

  • 目标:使用现有框架扩展DOM操作方法

3.1 append 方法实现

  • 思路:直接调用 appendTo 方法
itcast.fn.extend({
append: function(selector) {
itcast(selector).appendTo(this);
}
});

3.2 prependTo 方法实现

  • 思路:同 appendTo 方法

3.2.2 实现 prependTo

itcast.fn.extend({
prependTo: function(selector) {
var tar = itcast(selector),
i, j,
tarLen = tar.length,
srcLen = this.length;
for(i = 0; i < tarLen; i++) {
for(j = 0; j < srcLen; j++) {
tar[i].insertBefore(
i === tarLen - 1?
this[j]:
this[j].cloneNode(true), tar[i].firstChild
);
}
}
}
});

4、添加链式编程支持

  • 目标:实现链式调用简化操作

4.1 回顾 jQuery 的链式编程

  • 问题:如何实现链式编程?
  • 注意:有些方法中返回的不是 this (appendTo方法)

4.2 给 appendTo 添加链式

itcast.fn.extend({
appendTo: function(dom) {
// ...
arr.push(node);
// ...
return itcast(arr);
}
});

4.3 创建实例方法 each

  • 目标:实现链式编程简化操作
itcast.fn.extend({
each: function(callback) {
return itcast.each(this, callback);
}
});

5、提供remove方法

itcast.fn.extend({
remove: function() {
return this.each(function() {
this.parentNode.removeChild(this);
});
}
});

jQueryDOM操作模块(二)的更多相关文章

  1. jQueryDOM操作模块

    DOM操作模块 1.复习选择器模块(选择器模块结束) 目的:学而时习之 复习和总结选择器模块 2.DOM的基本操作方法 目标:回顾DOM操作的基本方法 3.1 DOM操作 -创建节点 练习 1:创建1 ...

  2. ansible笔记(5):常用模块之文件操作(二)

    ansible笔记():常用模块之文件操作(二) 文件操作类模块 find模块 find模块可以帮助我们在远程主机中查找符合条件的文件,就像find命令一样. 此处我们介绍一些find模块的常用参数, ...

  3. jQuery 源码解析(二十七) 样式操作模块 坐标详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...

  4. jQuery 源码解析(二十六) 样式操作模块 样式详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数 ...

  5. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  6. jQuery 源码解析(二十三) DOM操作模块 替换元素 详解

    本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value)     ;使用提供的新内容来替换匹配元素集合中的每个元 ...

  7. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  8. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  9. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

随机推荐

  1. wget 批量下载网站目录下的文件

    执行如下命令就会自动下载 http://www.iyunwei.com/docs/ 下面的所有文件: wget -nd -r -l1 --no-parent http://www.iyunwei.co ...

  2. PAT_A1034#Head of a Gang

    Source: PAT A1034 Head of a Gang (30 分) Description: One way that the police finds the head of a gan ...

  3. echarts 中 请求后台改变数据

    function tablenumber() { $.ajax({ type : "get", url : "../res/error.json", dataT ...

  4. Let's Encrypt,免费好用的 HTTPS 证书

    转自:   https://imququ.com/post/letsencrypt-certificate.html?hmsr=toutiao.io&utm_medium=toutiao.io ...

  5. js声明变量作用域会提前

    var s = 1; function test() { console.info(s); var s = 2; console.info(s); } test(); >>>unde ...

  6. 洛谷P1057 传球游戏【递归+搜索】

    上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:nn个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同学可以把 ...

  7. Ajax传递的参数如何在浏览器中查看

    如图当需要在浏览器中知道Ajax传递的参数可以,点击浏览器的右键检查,点击XHR,此时要记得提交带有参数的Ajax页面, 这样才可以显示出来传递的参数

  8. Java设计模式之 — 组合(Composite)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9153753 听说你们公司最近新推出了一款电子书阅读应用,市场反应很不错,应用里还有 ...

  9. (13)处理静态资源(默认资源映射)【从零开始学Spring Boot】

    Spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. 建议大家使用Spring Boot的默认配置方式,如果需要特殊处理的再通 ...

  10. C#带cookie模拟登录百度

    #region 同步通过POST方式发送数据 /// <summary> /// 通过POST方式发送数据 /// </summary> /// <param name= ...