javascript插件问题
我是JS的新手，对于以下代码，我有两个问题要确认：
// JavaScript Document
;(function($){
$.fn.extend({
//set a object-level plugin: border
"border":function(options){
//set options
options=$.extend({
width:"1px",
line:"solid",
color:"#090"
},options);
//set styles
this.css("border",options.width+' '+options.line+' '+options.color);
//to support chain grammar
return this;
}
});
})(jQuery)第一个问题是为什么我们要立即执行函数($){}(JQuery)？这是否意味着插件在DOM准备好之前就开始了？如果我们不立即执行这个函数，会发生什么？
第二个问题是为什么在这里使用$.extend扩展选项？这是因为我们想合并两个对象吗？(选项是object，{width:"1px"，行：“固态”，颜色：“#090”}也是对象)
最好的。
添加了html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>plugin example</title>
<style type="text/css">
#test{
font-size:9pt;
width:500px;
height:50px;
}
</style>
<!--jQuery library inclusion-->
<script type="text/javascript" src="jQuery/jquery-1.11.2.js"></script>
<!--jQuery plugin inclusion -->
<script type="text/javascript" src="CustomPlugin/jquery.border.js"></script>
<script type="text/javascript">
//when the document is loaded，defining div's border
$(document).ready(function(e) {
//using border plugin
$("#test").border({width:"5px","line":"dotted",color:"blue"}).css("background","green");
});
</script>
</head>
<body>
<div id="test">this example shows how to use plugin</div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2017-08-09 15:55:55
- 您不需要在执行您发布的代码段之前准备好文档。
$.fn.extend()向jQuery添加了一个函数，您可以在DOM准备好将边框添加到元素之后调用该函数。但是在您真正调用$.border之前，插件需要注册到jQuery。为了做到这一点，jQuery必须在插件之前完成加载，而不是DOM。
如果我们不立即执行这个函数，会发生什么？
除非在函数执行之前调用$.border，否则不会出错。但是，如果将插件和函数调用都包装在$(document).ready中，则不能保证脚本首先加载。
- 是。在本例中，这些选项通过使用
$.extend()与默认选项合并。请记住，$.extend和$.fn.extend是两个完全不同的函数。
请参见：
<div id="#myContainer">Hello World</div>
<script src="./jquery.js"></script>
<!-- jquery loaded and declares $ -->
<script src="./jquery.borderPlugin.js"></script>
<!-- script is loaded and registers $.border() -->
<script>
// now you can use $.border()
$(document).ready(function() {
$('#myContainer').border({width:"5px"});
}
</script>当您真正想要对DOM进行更改时，您只需要准备好DOM。因为插件只是扩展了一个变量，并且没有转换DOM，所以它不需要在DOM就绪中执行。
Stack Overflow用户
发布于 2017-08-09 17:38:33
立即调用的函数用于确保在此函数范围内的代码的整个生命周期中，某些值不会更改。对于jQuery插件来说，通常的做法是：
(function($){
// jQuery related code
})(jQuery)这将确保使用$的函数中的所有代码都引用传递给该函数的jQuery版本。您可以看到这段代码的不同之处：
(function($) {
$.fn.extend({
//set a object-level plugin: border
"borderA": function(options) {
//set options
options = $.extend({
width: "1px",
line: "solid",
color: "#090"
}, options);
//set styles
this.css("border", options.width + ' ' + options.line + ' ' + options.color);
//to support chain grammar
return this;
}
});
})(jQuery)
$.fn.extend({
//set a object-level plugin: border
"borderB": function(options) {
//set options
options = $.extend({
width: "1px",
line: "solid",
color: "#090"
}, options);
//set styles
this.css("border", options.width + ' ' + options.line + ' ' + options.color);
//to support chain grammar
return this;
}
});
// some other code overwrites $
$ = {}
console.log('call borderA')
jQuery('.test').borderA(); // works fine
console.log('call borderB')
jQuery('.test').borderB(); // fails because $ was overwritten<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
使用jQuery扩展$.fn.extend()的功能不需要任何DOM元素，因为它不需要查询任何内容。
$.fn.extend()扩展了jQuery函数，$.extend合并了两个对象。
https://stackoverflow.com/questions/45595193
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号