css样式模块的封装

each方法的实现

1.在写样式之前,先给核心函数添加一个each方法.

-实现的代码如下

1
2
3
4
5
6
7
8
9

moyas.extend({
each: function (obj, callback) {
            var i = 0,
                l = obj.length;
            for (; i < l; i++) {
                if (callback.call(obj[i], obj[i], i) === false) break;
            }
        }
})

完善init构造函数

+ selector类型：
    - 无效值： null undefined '' false
    - 字符串
        * 选择器：     'div' 根据选择器筛选dom元素，并以伪数组形式 存储在this上
        * html字符串 '<p>123</p><p>456</p>' '<p>' 将html字符串 转换成 html元素
    - DOM节点
    - DOM数组（伪数组）
    - function：入口函数 DOMContentLoaded
        * 使用静态属性isReady 存储 dom树是否加载完毕
        * 判断isReady值， 如果为true，就直接执行传入的函数。
        * 否则，就给document的DOMContentLoaded事件绑定处理程序，在处理程序中，先将isReady赋值为true，在执行传入的函数。

1. 如何判断字符串为html字符串，必须满足一下条件：
   • 以’<’开头
   • 以’>’结尾
   • 最小长度为3

框架结构说明

1. 在编写框架的时候，为了防止变量污染，尽量使用沙箱模式 封装框架

   • 在沙箱内部，如果经常使用全局变量或全局对象的话，最好的做法就是将它们当做实参传入沙箱内。

2. 核心函数为moyas，相当于jQuery。最终要暴露给用户使用的

3. 实现moyas函数，使用的是 工厂模式 来 创建对象。好处：用户 new 或 不 new 都可以得到正确的对象

4. init构造函数 的 位置

   • 如果放在沙箱内部，用户是无法修改或重写的。所以要容纳更改用户，尽量将构造函数暴露给用户

   • 可以把构造函数放在moyas函数上，也可以放在moyas函数原型上。

   • 处于jQuery之父，在写简单继承模式时，将构造函数放在其原型上。那么在编写框架时，即延续下来了

使用原生javascript获取元素的所有元素子节点的方法详细介绍

1利用childrenNodes的方法

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

// 实现思路：
// 通过childNodes获取到所有的子节点；
// 将上述所有的子节点中，元素节点获取出来。
/**
 * [getChildren 获取子元素]
 * @param  {[type]} parent [父节点]
 * @return {[type]}        [返回parent的所有子元素]
 */
function getChildren(parent) {
	// 存储结果集
	var ret = [],
		nodes;
	// 获取parent所有子节点
	nodes = parent.childNodes;
	// 遍历nodes
	for(var i = 0,l = nodes.length; i < l;i++){
		// 如果遍历到当前子节点类型为元素，即为所要结果。存储在ret内。
		if(nodes[i].nodeType === 1) {
			ret.push(nodes[i]);
		}
	}
	// 返回结果
	return ret;
}

继承的实现方式

混入式继承（mix-in）

1
2
3
4
5

var obj = {};
var obj1 = {name:"adsf",age:18};
for(var k in obj1){
    obj[k] = obj1[k];
}

原型继承

1.使用混入的方式为原型对象添加成员、

1
2
3
4
5
6

var human = {name:"",age:18}
function Person(){};
for(var k in human){
    Person.prototype[k] = human[k];
}