前端的那些事之jquery篇---原码和插件

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yongxinke/blog/811665

文章标签：

#javascript #前端 #python #ViewUI

本文介绍了jQuery插件扩展机制的实现原理，包括如何通过扩展$.fn对象来为所有jQuery代理对象实例添加功能，以及如何使用工厂模式实现jQuery插件。

2019独角兽企业重金招聘Python工程师标准>>>

jquery中的插件扩展机制

所有的Jquery代理对象的实例，都是扩展自$.fn对象的
扩展$.fn这个对象的功能，就相当于扩展了所有的Jquery代理对象的实例的功能

插件扩展机制的实现原理

所有jquery核心函数返回的代理对象的构造器的原型就是$.fn
注意：只要看到new关键字，一定是在堆中创建了一块空间

jquery内存

<script>
		var str1 = "abc";//开辟了两个空间
		var str2 = new String("abc");//开辟了三个空间
		var str3 = 'abc';

		
		console.log(str1==str3);//true   两个等于号比较的是符号左右两个变量的值
		console.log(str1===str3);//true		三个等于号比较是的符号左右两个变量的内存地址

		console.log(str1==str2);//true
		console.log(str1===str2);//false
		//{} 等同于 new Object();
		//[] 等同于 new Array();
		console.log([]===[]);//false
		console.log({}==={});//false
</script>

3.内存结构图如下：

jquery中的内存方法

<script>
		//首字母为大写的函数是构造器函数
		function Proxy(){

		}
		//给proxy构造器的原型增加了功能，意味着会给通过proxy构造器所new出来的所有的实例都增加这个功能
		Proxy.prototype = {
			show : function(){
				console.log("this is show");
			}
		};

		var p1 = new Proxy();//创建第一个Proxy的实例
		var p2 = new Proxy();//创建第二个Proxy的实例
		// console.log(p1==p2);//false
		p1.show();
		p2.show();
	</script>

结构图如下：

4.利用工厂模式实现的jquery插件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="dnlist1" class="dn-list-plug"></div>
	<div id="dnlist2" class="dn-list-plug"></div>

	<script src="assets/plug-in/jquery/jquery-2.2.4.js"></script>
	<script src="assets/plug-in/dn-list/sg-list.1.1.0.js"></script>
	<script>
	//有两种调用方式，一种是直接传入对象
		$("#dnlist1").dnList({
				data : ["刘备","曹操","孙权","诸葛亮"],
				p1:"abc"
		});
//面向对象方式创建
		new dnList({
			dom:document.getElementById("dnlist2"),
			data : ["关羽","张飞","赵云","黄忠","马超"],
			p1:123
		});

	</script>
</body>
</html>
******************************************************************
其中sg-list.1.1.0.js代码如下
******************************************************************
/*
*工厂模式有三个参数
*外边传入三个参数第一个传入window,第二个传入function涵数，第三个传入字符串
*里面接收参数为：root，factory,plug
*/
(function (root,factory,plug){
	root[plug] = factory(root.jQuery,plug);
})(window,function($,plug){
	var __def__ = {
		data : [],
		p1 : 0,
		p2 : "",
		p3 : false
	};
	var __prop__ = {
		_init : function(){
			var $ul = $("<ul></ul>");
			for(var i=0;i<this.data.length;i++){
				$ul.append($("<li>"+this.data[i]+"</li>"));
			}
			this.append($ul);
			console.log(this.p1);
		}
	};
	$.fn[plug] = function(options){
		$.extend(this,__def__,options,__prop__);
		this._init();
	}
	return function(options){
		var dom = options.dom;
		$(dom)[plug].call($(dom),options);
	}
},"dnList");

5.一个简单的jquery实现代码

var $ = Jquery = (function(root){
	var _proxy = function(selector){
		return root.document.querySelectorAll(selector);
	}
	var $ = function(selector,parent){
		return _proxy(selector);
	};
	$.extend = function(target){
		for (var i = 1; i < arguments.length; i++) {
			for(var prop in arguments[i]){
				target[prop] = arguments[i][prop];
			}
		}
		return target;
	}

	var __PROTO__ = {
		each : function(callback){
			for (var i = 0; i < this.length; i++) {
				callback&&callback.call(this[i],i,this[i]);
			}
		},
		get : function(index){
			return this[index];
		},
		find : function(selector){
			return $(selector);
		},
		html : function(html){
			this.each(function(index,object){
				object.innerHTML = html;
			});
			return this;
		},
		addClass : function(clazz){
			this.each(function(index,object){
				object.className = clazz;
			});
			return this;
		},
		removeClass : function(){
			this.each(function(index,object){
				object.className = "";
			});
			return this;
		}
	};

	//[native code] prototype 是 const
	$.fn = $.extend(NodeList.prototype,__PROTO__);
	//创建了一个闭包空间
	return $;
}(window));

# 工厂模式实现jquery插件

//工厂模式封装插件
(function (root, factory, plug) {
    factory(root.jQuery, plug);
})(window, function ($, plug) {
    var __PROTOTYPE__ = {
        //初始化架构层面的dom的样式，初始化一些属性
        _init: function () {

        },
        //绑定方法
        __bind: function () {

        },
        //等有可以绑定好多功能
    };
 	var __DEFAULTS__ = {
		showSerial : true//是否显示serial按钮
	}; 
    $.fn[plug] = function (options) {
        //扩展功能
        $.extend(this, __PROTOTYPE__, options)
        this._init();//初始化
        this.__bind();//设置功能事件
        return this;
    }

}, "sectionWrapper");

转载于:https://my.oschina.net/yongxinke/blog/811665