Question

我得到了facebook自动生成的功能，用于类似的按钮插件代码。但是，我不太确定函数中的变量，如果有人帮我找出每个函数的含义，我将非常感激。

该函数的html收集来自：

的数据

    <div class="fb-like" data-href="https://www.facebook.com/yanntiersen.official"   
data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div>

实际的javascript函数：

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=123456789";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

我看到该函数是为(document, 'script', 'facebook-jssdk')调用的，但我真的不明白它是如何工作的。有人可以解释一下吗？

Answer 1

(function ( d , s , id) {

}(document, 'script', 'facebook-jssdk));

意味着以下是真的

d = document;
s = 'script';
id = 'facebook-jssdk';

有了这方面的知识

// Get the first <script> tag in the document
var fjs = document.getElementsByTagName(s)[0]

// Return void from this function if '#facebook-jssdk' exists
if ( document.getElementById('facebook-jssdk') ) return ;

// Create a new script tag
var js = d.createElement(s)

// Assign the id to the script tag
js.id = id;

// Assign a source to load asyncrounously into this tag
js.src = '//connect...';

// Insert the script element into the DOM BEFORE the first script tag
fjs.parentNode.insertBefore( js , fjs )

希望有所帮助

Answer 2

//Create a function taking arguments `d`, `s` and `id`
(function(d, s, id) {

    //Initialise variable js, initialise variable fjs to the first element with the tag 
    //name s
    var js, fjs = d.getElementsByTagName(s)[0];

    //If the element with id = id exists already, escape from the function.
    if (d.getElementById(id)) return;

    //Create a new element of type s ('script') and set it's id to id ('facebookjssdk')
    js = d.createElement(s); js.id = id;

    //Set the script's src attribute to the path specified.
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=123456789";

    //Insert the new element immediately before the first <script> on the page.
    fjs.parentNode.insertBefore(js, fjs);

//Call the function immediately with document for d, 'script' for s and 'facebook-jssdk' 
//for id.
}(document, 'script', 'facebook-jssdk'));

如果你不熟悉模式(function () {})();，它只是一个封装它的代码的函数，并按照它的定义调用它自己。

Answer 3

基本上它是这样做的：

Gets the first "<script>" element in the document
If an object exists with the id of "facebook-jssdk" than
    return (dont process the rest of the code)
EndIf
Create a "<script>" element
Set the new "<script>" element's id to 'facebook-jssdk'
Set the new "<script>" element's src location to "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=123456789"
(this loads a javascript file from facebook's server onto the client)
Insert the new "<script>" tag before the first "<script>" tag in the page

希望有所帮助：）

Answer 4

脚本正在查找标记名为“script”的元素，然后获取对第一个脚本对象的引用。

然后查找id为“facebook-jssdk”的元素。如果找到此ID，则会停止处理。

然后创建一个新的脚本标记，将id设置为“facebook-jssdk”，源为“//connect.facebook.net/en_GB/all.js#xfbml=1&appId=123456789”，并插入页面上第一个脚本之前的脚本。

识别函数javascript的元素

4 个答案: