Question

我是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扩展选项？是因为我们要合并两个对象？（选项是对象和{宽度：“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>

Answer 1

立即调用的函数用于确保某些值在此函数范围内的代码的整个生命周期内都不会更改。对于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()扩展jQuery的功能不需要任何DOM元素，因为它不会查询任何内容。

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

Answer 2

在您发布的代码段被执行之前，您不需要准备好文档。 $.fn.extend()为DOM添加了一个函数，在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 Ready中执行

javascript插件问题

2 个答案: