JavaScript的插件问题

我是一个新手，JS，我只是有两个问题，以下代码来确认：JavaScript的插件问题

// 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扩展选项？是因为我们想合并两个对象吗？（选项是对象和{width：“1px”，line：“solid”，color：“＃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>

来源

2017-08-09 LeonloveKaren

1：不显示如何*加载*这个插件，我们不能回答这个问题。 2：我们也不能回答，因为我们不知道你为什么（或者作者是谁）这样写代码。我们所能做的就是指向https://api.jquery.com/jquery.extend/并说“这就是它的作用，所以这就是你（或者写这个代码的人）打算做的事情。” –

嗨，html文件被添加。 – LeonloveKaren

-1

你不需要的文件准备好您发布的片段被执行之前。 $.fn.extend()增加了一个函数jQuery，你可以调用 DOM准备好后，添加一个边框到元素。但在实际调用$.border之前，需要将插件注册到jQuery。为了做到这一点，jQuery必须在插件之前完成加载，而不是DOM。

如果我们不立即执行此功能，会发生什么？

除非在函数执行前调用$.border，否则不会出错。但是，如果同时包装这两个插件和函数，则不能保证该脚本首先加载。

是的。在这种情况下，使用$.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 Ready中执行。

来源

2017-08-09 15:55:55

谢谢。至于第二个问题，是否可以使用$ .fn.extend方法而不是$ .extend方法？如果是的话，代码将如何相应改变？ – LeonloveKaren

不，$ .fn.extend是为jQuery添加函数，$ .extend用于合并对象。这些功能完全不同。 –

立即调用的函数用于确保某些值在代码的整个生命周期中不会改变在这个函数的范围内。对于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>

使用$.fn.extend()不需要任何DOM元素扩展的jQuery的功能，因为它没有任何查询。

$.fn.extend()扩展了jQuery函数，$.extend合并了两个对象。

来源

2017-08-09 17:38:33

谢谢。我似乎明白你的意思。然而，当我尝试这段代码时（并不完全一样，我把这两个插件的定义放到一个单独的jquery.border.js文件中，并将这个js文件包含到一个html文件中），但是borderA也可能无法正常工作。我的代码有什么问题吗？ – LeonloveKaren

JavaScript的插件问题

回答

相关问题