JavaScript类的写法 ( 仿jQuery )

简介: 看了javascript 杂谈之哪种写法你更喜欢?后很是有收获,所以总结一下:   1.js支持“逻辑短路”,所谓逻辑短路是指: 在”||” 运算中,第一个条件符合就结束判断。 在”&&”运算中,第一个条件不符合就结束判断。
看了javascript 杂谈之哪种写法你更喜欢?后很是有收获,所以总结一下:
 

1.js支持“逻辑短路”,所谓逻辑短路是指:

  1. 在”||” 运算中,第一个条件符合就结束判断。
  2. 在”&&”运算中,第一个条件不符合就结束判断。

2.匿名函数

(
function
() {
    })();

这种写法作用是声明并执行一个方法,等同于:

function
 Test() {
    }
    Test();

3.连续赋值

var a = {n:1};    

var b = a;

a.x = a = {n:2};  //相当于a.x=(a={n:2})

console.log("a.x: " + a.x); //返回值:a.x: undefined

console.log("a.n: " + a.n); //返回值:a.n: 2

console.log("b.x: " + b.x); //返回值:b.x: [object Object]

console.log("b.n: " + b.n); //返回值:b.n: 1

 

说明:由于js中的连续赋值是按引用传递的,所以在a.x=a={n:2}后,两个a已经不是一个对象了,所以现在的a中并没x这个属性

4.下边这段代码类似与jquery中的写法

(function (windows) {
	var yQuery = function () {
		//获取对象本身
		return yQuery.fn.init();
	};
	yQuery.fn = yQuery.prototype = {
		//初始化
		inti: function () {
			return this;
		}
	};
	//这里定义扩展方法
	yQuery.extend = yQuery.fn.extend = function () {
		var options, src, copy,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length;
		if (length === i) {
			//this=yQuery=$
			target = this;
			--i;
		}

		for (; i < length; i++) {
			if ((options = arguments[i]) != null) {
				for (var name in options) {
					src = target[name];
					copy = options[name];
					//判断this中是否存在,存在则跳过,执行下一次循环
					if (src === copy) {
						continue;
					}
					//判断是不是对象,如果是对象则递归
					if (typeof copy === "object") {
						yQuery.extend(name, copy);
					}
					if (copy !== undefined) {
						//这里的target=yQuery=$
						target[name] = copy;
					}
				}
			}
		}
		return target;
	};
	//向window中添加yQuery和$属性
	windows.yQuery = windows.$ = yQuery;
})(window);
使用:

方法一:

$.extend({Name:””,getName:function(){alert($.Name)}});

方法二:

$.ui=$.ui || {}; //如果$.ui存在则把自己赋值给自己,反之添加ui并赋值为空对象{}

$.extend($.ui,{Name:””,getName:function(){alert($.Name)}});

目录
相关文章
|
28天前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
39 3
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
21 2
JavaScript 类(class)
|
25天前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
9 0
|
2月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
19 1
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
34 1
JavaScript基础知识-构造函数(也称为"类")定义
|
2月前
|
JavaScript 安全
ES6中JS类实现的解读
ES6中JS类实现的解读
22 2
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
2月前
|
JavaScript 前端开发 索引
|
2月前
|
JavaScript 前端开发
JS中Promise的类式实现写法
JS中Promise的类式实现写法
下一篇
无影云桌面