javascript原生框架(四)--属性模块

发表于 | 分类于 | 阅读次数:

1.attr方法
2.html方法
3.text方法
4.val方法
5.prop方法

attr方法：（setAttribute 和 getAttribute）

  1. 功能：获取（设置）属性节点值
  2. 实现思路
    • 给原型添加attr方法，定义两个参数：属性节点名字name 以及 属性节点值
    • 如果只传入一个参数
      • 如果参数类型为对象，表示设置多个属性节点值
      • 否则，获取指定的属性节点值（默认获取第一个dom元素的属性节点值）
    • 如果传入两个参数，表示设置单个属性节点值。

html方法：

  1. 功能:
    • 不传入参数，表示 获取指定dom元素的innerHTML属性自
    • 否则，表示 设置指定dom元素的innerHTML属性
  2. 实现思路
    • 判断 是否传入参数
    • 如果没传，获取moyas对象上第一个dom元素的innerHTML属性值
    • 否则, 给moyas对象上每一个dom元素设置innerHTML属性。

text方法

  1. 功能：
    • 不传值，表示获取文本节点（返回的是后代中所有文本节点值）
    • 否则，设置指定dom元素文本节点值
  2. 实现思路
    • 如果不传值，优先考虑浏览器是否支持textContent属性，
      • 如果支持，就使用textContent返回结果集中每一个dom元素的文本节点值。
      • 否则，就使用innerText 返回结果集中每一个dom元素的文本节点值。
    • 如果传值，给moyas对象上的每一个dom元素设置文本节点值。
      • 如果支持textContent属性，就使用该属性设置文本
      • 否则，就使用innerText来设置文本。

val方法

  1. 功能：value属性
    • 如果不传值，表示获取输入框的文本值
    • 如果传值，表示给输入框 设置文本
  2. 实现思路
    • 如果不传值，表示获取输入框的文本值（获取第一个文本框值）
    • 如果传值，表示给输入框 设置文本
      • 遍历每一个输入框，同时给其设置文本

prop方法

  1. 功能：和attr相似
    • 注意：有些属性名称，比如for，class是保留字或关键字不能作为对象属性名称。
      所以要创建一个对象，转换这类的属性
    • 定义propFix对象，存储上述属性 到 新属性名称的 映射关系
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
// 属性模块
	moyas.propFix = {
		'for': 'htmlFor',
		'class': 'className'
	};
	moyas.each([
		"tabIndex",
		"readOnly",
		"maxLength",
		"cellSpacing",
		"cellPadding",
		"rowSpan",
		"colSpan",
		"useMap",
		"frameBorder",
		"contentEditable"
	], function() {
		moyas.propFix[this.toLowerCase()] = this;
	});
	console.log(moyas.propFix);
	moyas.fn.extend({
		attr: function(name, value) {
			// 只传入一个参数
			if (value == undefined) {
				// 如果类型为 对象，表示设置多个属性
				if (typeof name === 'object') {
					// 遍历moyas上的每一个dom元素，并设置属性节点值
					this.each(function(v) {
						// 枚举name对象上每一个属性
						for (var k in name) {
							v.setAttribute(k, name[k]);
						}
					});
				} else { // 如果类型为 字符串，获取属性节点值
					if (!this[0]) return null;
					return this[0].getAttribute(name);
				}
			} else { // 传入两个参数，表示设置单个属性节点值
				this.each(function(v) {
					v.setAttribute(name, value);
				});
			}
			// 实现链式编程
			return this;
		},
		html: function(html) {
			// 如果没有给html传入值，表示获取
			if (html == undefined) {
				// 如果moyas对象没有任何dom元素，就返回一个期望值 即空字符串
				// 如果有的话，就返回第一个dom元素的innerHTML属性值
				return this[0] ? this[0].innerHTML : '';
			} else { // 如果给html传值。给moyas对象上每一个dom元素设置innerHTML属性
				return this.each(function(v) {
					v.innerHTML = html;
				});
			}
		},
		text: function(text) {
			// 如果没有传值，表示获取文本值
			if (text == undefined) {
				// 定义结果变量，存储每个dom元素的文本
				var ret = '';
				// 遍历每一个dom元素
				this.each(function(v) {
					// 如果支持textContent，使用其获取文本，累加到ret上
					ret += 'textContent' in document ?
						v.textContent :
						v.innerText.replace(/\r\n/g, '');
				});
				// 返回所有文本
				return ret;
			} else { // 如果传值了，表示为每个dom设置文本
				return this.each(function(v) {
					// 如果支持textContent，就使用该属性为当前dom元素设置文本节点值
					// 否则，使用innerText设置文本节点值。
					if ('textContent' in document) {
						v.textContent = text;
					} else {
						v.innerText = text;
					}
				});
			}
		},
		val: function(value) {
			// 如果没有传值，表示获取第一个dom元素的value属性值
			// 如果moyas对象上没有任何dom元素，返回空字符串
			if (value == undefined) {
				return this[0] ? this[0].value : '';
			} else { // 否则，为每一个dom元素设置value属性值
				return this.each(function() {
					this.value = value;
				});
			}
		},
		prop: function(name, value) {
			// 如果没有给value传值
			var prop;
			if (value == undefined) {
				// 并且name的类型为 对象，表示给每一个dom对象添加多个属性
				if (typeof name === 'object') {
					this.each(function() {
						for (var k in name) {
							// 首先从propFix对象上获取属性名字
							// 如果有，就使用新的属性名字
							// 如果没有，就使用原来的属性名字
							prop = moyas.propFix[k] ? moyas.propFix[k] : k;
							this[prop] = name[k];
						}
					});
				} else { // 如果name的类型 为字符串，表示获取第一个dom对象的指定属性值
					prop = moyas.propFix[name] ? moyas.propFix[name]: name;
					return this.length > 0 ? this[0][prop] : null;
				}
			} else { // 如果传入两个参数，表示给每一个dom对象添加单个属性
				// 遍历moyas上的每一个dom对象，添加属性
				prop = moyas.propFix[name] ? moyas.propFix[name]: name;
				this.each(function() {
					this[prop] = value;
				});
			}
			// 实现链式编程
			return this;
		}
	});