javascript原生框架(一)--jq框架详解

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

框架结构说明

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

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

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

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

  4. init构造函数 的 位置

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

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

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

  1. init创建出来的对象，最终继承自moyas.prototype。所以可以将init对象称为 moyas对象。

  2. 由于暴露给用户 的 是 moyas 和 其原型。所以在扩展成员时，只能在这两个对象上扩展。
    而在函数对象上扩展的成员 为 静态成员。可以直接通过函数名字来访问。但是，在原型上的成员，
    必须创建实例来访问。因此为了实现init对象可以访问 moyas原型上的成员，就基于原型来实现继承。

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
(function(global) {
	var init;
	// 核心函数（工厂函数）
	var moyas = function(selector) {
		return new moyas.fn.init(selector);
	};
	// 核心原型
	moyas.fn = moyas.prototype = {
		constructor: moyas
	};
	// 构造函数
	init = moyas.fn.init = function(selector) {};
	// 实现init对象继承自moyas原型
	init.prototype = moyas.fn;
	// 可扩展方法
	// 如果target为undefined值，那么就是给this扩展成员
	// 否则就是给target对象扩展。
	moyas.extend = moyas.fn.extend = function(source, target) {
		var k;
		// 如果target为undefined值，就赋值为this
		// 给this扩展成员
		if (target == undefined) {
			target = this;
		}
		// target = target || this;
		for(k in source){
			target[k] = source[k];
		}
	};
	// 暴露给用户
	global.$ = global.moyas = moyas;
}(window));