简述用原生Javascripts实现jquery插件的链式范式编程的原理。

最新推荐文章于 2021-12-28 14:48:36 发布

Cpp_cpp_cpp

最新推荐文章于 2021-12-28 14:48:36 发布

阅读量553

点赞数

分类专栏： this 文章标签： jquery javascript jquery插件编程对象

本文链接：https://blog.csdn.net/qq_39046727/article/details/78934622

版权

this 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 JavaScript是一种基于对象的语言，已经封装好了很多对象，但很多时候更需要自己去封装对象来满足需求，此文简述了，js中this 关键字，json 对象，以及链式编程的概念。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<script>
		//在js 中一切皆对象，函数也为对象
			function DivTag(){
	    //获得dom结点	，用this为此对象创建属性，应特别注意js中的this指的是当前上下文，即对调用者的引用，而不是当前对象。
			this.DOM=document.createElement("div");
	
	        //此处仿写jq里面的appendTo方法
			this.appendTo=function(node){
					var Node=document.getElementsByTagName(node)[0];
					Node.appendChild(this.DOM);
					//链式编程核心，返回自身，其他过程在函数内部实现
					return this;
//此处仿写了JQuery中的css方法，传入的是json对象，并用增强for遍历赋值。
				this.css=function(style){
					for (var k in style) {
						this.DOM.style[k]=style[k];
					}
					return this;
				}
			}
			//实例化对象，和使用jq感觉差不多
			new DivTag().appendTo('body').css({
				border:"1px solid blue",
				width:"200px",
				height:"200px"
			});
			
		</script>
	</body>
</html>

运行结果如下：