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的插件問題

回答

相關問題