理解javascript自执行函数

2016.5.17 - 南京 javascript

在上一篇文章我要做一个返回顶部的按钮，得到如下的代码

<div id="backtotop" title="返回顶部" class="backtotop">
  &nbsp;&nbsp;↑
</div>

function backtotopFn() {
  var obj = document.getElementById('backtotop');

  function getScrollTop() {
    return document.documentElement.scrollTop + document.body.scrollTop;
  }

  function setScrollTop(value) {
    if (document.documentElement.scrollTop) {
      document.documentElement.scrollTop = value;
    } else {
      document.body.scrollTop = value;
    }
  }
  window.onscroll = function() {
    getScrollTop() > 0 ? obj.style.display = '' : obj.style.display = 'none';
  }
  obj.onclick = function() {
    var goTop = setInterval(scrollMove, 10);

    function scrollMove() {
      setScrollTop(getScrollTop() / 1.1);
      if (getScrollTop() < 1) clearInterval(goTop);
    }
  }
}

然后我需要在页面中调用它

<script type="text/javascript" src="/js/js.js"></script>
<script type="text/javascript">backtotopFn();</script>

对，是需要写2个script标签，假如你这样写

<script type="text/javascript" src="/js/js.js">backtotopFn();</script>

是不起作用的，除非你在js.js里面的末尾写backtotopFn();，这样也能消除在页面添加

<script type="text/javascript">backtotopFn();</script>

这行代码，并且马上执行这个函数，但是有没有不用写调用方式它就自己执行呢，当然有了，就是javascript的自执行函数

(function() {
  alert('a');
})()

或者

(function() {
  alert('a');
}())

不能这样写

function() {
  alert('a');
}()

现在来改造一下我们上面的javascript方法成自执行方法

(function() {
  var obj = document.getElementById('backtotop');

  function getScrollTop() {
    return document.documentElement.scrollTop + document.body.scrollTop;
  }

  function setScrollTop(value) {
    if (document.documentElement.scrollTop) {
      document.documentElement.scrollTop = value;
    } else {
      document.body.scrollTop = value;
    }
  }
  window.onscroll = function() {
    getScrollTop() > 0 ? obj.style.display = '' : obj.style.display = 'none';
  }
  obj.onclick = function() {
    var goTop = setInterval(scrollMove, 10);

    function scrollMove() {
      setScrollTop(getScrollTop() / 1.1);
      if (getScrollTop() < 1) clearInterval(goTop);
    }
  }
})();

如此，只要你的页面执行完后，脚本就已经生成了getScrollTop，setScrollTop这两个方法，并且给window添加了onscoll监听函数，当页面滚动的时候，判断是否显示backtotop按钮，还有给backtotop按钮添加了onclick监听函数，当单击它的时候，返回顶部。

使用google调试工具下的Profile可以监控执行过程，Start开始，Stop结束，然后就可以看到采集到的监控过程

GoogleProfile

更新列表：

参考文章：

相关阅读