ฉันสามารถตั้งชื่อฟังก์ชัน JavaScript และเรียกใช้งานได้ทันทีหรือไม่?

ฉันมีไม่กี่สิ่งเหล่านี้:

function addEventsAndStuff() {
  // bla bla
}
addEventsAndStuff();

function sendStuffToServer() {
  // send stuff
  // get HTML in response
  // replace DOM
  // add events:
  addEventsAndStuff();
}

การเพิ่มเหตุการณ์ใหม่เป็นสิ่งที่จำเป็นเนื่องจาก DOM มีการเปลี่ยนแปลงดังนั้นเหตุการณ์ที่แนบมาก่อนหน้านี้จึงหายไป เนื่องจากต้องติดตั้งในตอนแรกเช่นกัน (duh) จึงอยู่ในฟังก์ชันที่ดีที่จะแห้ง

ไม่มีอะไรผิดปกติกับการตั้งค่านี้ (หรือมี) แต่ฉันจะทำให้มันราบรื่นได้ไหม ฉันต้องการสร้างaddEventsAndStuff()ฟังก์ชันและเรียกมันทันทีดังนั้นมันจึงไม่ดูเป็นมือสมัครเล่น

ทั้งสองต่อไปนี้ตอบสนองด้วยข้อผิดพลาดทางไวยากรณ์:

function addEventsAndStuff() {
  alert('oele');
}();

(function addEventsAndStuff() {
  alert('oele');
})();

ผู้รับใด ๆ ?

ตัวอย่างที่คุณโพสต์ในคำถามไม่มีอะไรผิด .. วิธีอื่นในการทำเช่นนี้อาจดูแปลก แต่:

var addEventsAndStuff;
(addEventsAndStuff = function(){
    // add events, and ... stuff
})();

มีสองวิธีในการกำหนดฟังก์ชันใน JavaScript การประกาศฟังก์ชัน:

function foo(){ ... }

และนิพจน์ฟังก์ชันซึ่งเป็นวิธีใด ๆในการกำหนดฟังก์ชันอื่นนอกเหนือจากข้างต้น:

var foo = function(){};
(function(){})();
var foo = {bar : function(){}};

... ฯลฯ

สามารถตั้งชื่อนิพจน์ฟังก์ชันได้ แต่ชื่อของนิพจน์จะไม่แพร่กระจายไปยังขอบเขตที่มี หมายความว่ารหัสนี้ถูกต้อง:

(function foo(){
   foo(); // recursion for some reason
}());

แต่นี่ไม่ใช่:

(function foo(){
    ...
}());
foo(); // foo does not exist

ดังนั้นในการตั้งชื่อฟังก์ชันของคุณและเรียกใช้ทันทีคุณต้องกำหนดตัวแปรท้องถิ่นกำหนดฟังก์ชันของคุณให้เป็นนิพจน์จากนั้นเรียกมัน

มีชวเลขที่ดีสำหรับสิ่งนี้ (ไม่จำเป็นต้องประกาศตัวแปรใด ๆ ในแถบการกำหนดฟังก์ชัน):

var func = (function f(a) { console.log(a); return f; })('Blammo')

ไม่มีอะไรผิดปกติกับการตั้งค่านี้ (หรือมี) แต่ฉันจะทำให้มันราบรื่นได้ไหม

ดูที่การใช้การมอบหมายเหตุการณ์แทน นั่นคือสิ่งที่คุณเฝ้าดูเหตุการณ์บนคอนเทนเนอร์ที่ไม่หายไปจากนั้นใช้event.target(หรือevent.srcElementบน IE) เพื่อดูว่าเหตุการณ์เกิดขึ้นจริงที่ใดและจัดการได้อย่างถูกต้อง

ด้วยวิธีนี้คุณจะแนบตัวจัดการเพียงครั้งเดียวและมันก็ยังทำงานต่อไปแม้ว่าคุณจะเปลี่ยนเนื้อหาออกไป

นี่คือตัวอย่างของการมอบหมายงานโดยไม่ใช้ตัวช่วย libs:

(function() {
  var handlers = {};

  if (document.body.addEventListener) {
    document.body.addEventListener('click', handleBodyClick, false);
  }
  else if (document.body.attachEvent) {
    document.body.attachEvent('onclick', handleBodyClick);
  }
  else {
    document.body.onclick = handleBodyClick;
  }

  handlers.button1 = function() {
    display("Button One clicked");
    return false;
  };
  handlers.button2 = function() {
    display("Button Two clicked");
    return false;
  };
  handlers.outerDiv = function() {
    display("Outer div clicked");
    return false;
  };
  handlers.innerDiv1 = function() {
    display("Inner div 1 clicked, not cancelling event");
  };
  handlers.innerDiv2 = function() {
    display("Inner div 2 clicked, cancelling event");
    return false;
  };

  function handleBodyClick(event) {
    var target, handler;

    event = event || window.event;
    target = event.target || event.srcElement;

    while (target && target !== this) {
      if (target.id) {
        handler = handlers[target.id];
        if (handler) {
          if (handler.call(this, event) === false) {
            if (event.preventDefault) {
              event.preventDefault();
            }
            return false;
          }
        }
      }
      else if (target.tagName === "P") {
        display("You clicked the message '" + target.innerHTML + "'");
      }
      target = target.parentNode;
    }
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

})();

ตัวอย่างสด

สังเกตว่าหากคุณคลิกข้อความที่เพิ่มลงในเพจแบบไดนามิกการคลิกของคุณจะได้รับการลงทะเบียนและจัดการแม้ว่าจะไม่มีรหัสที่จะเชื่อมโยงเหตุการณ์ในย่อหน้าใหม่ที่เพิ่มเข้ามา โปรดสังเกตด้วยว่าตัวจัดการของคุณเป็นเพียงรายการในแผนที่อย่างไรและคุณมีตัวจัดการหนึ่งตัวในdocument.bodyการจัดส่งทั้งหมด ตอนนี้คุณอาจรูทสิ่งนี้ในบางสิ่งที่ตรงเป้าหมายมากกว่าdocument.bodyแต่คุณได้รับแนวคิด นอกจากนี้ในข้างต้นเรามักจะจัดส่งโดยทั่วไปidแต่คุณสามารถจับคู่แบบซับซ้อนหรือเรียบง่ายเท่าที่คุณต้องการ

ไลบรารี JavaScript สมัยใหม่เช่นjQuery , Prototype , YUI , Closureหรืออื่น ๆ อีกมากมายควรนำเสนอคุณสมบัติการมอบหมายเหตุการณ์เพื่อให้ราบรื่นเหนือความแตกต่างของเบราว์เซอร์และจัดการกรณีขอบได้อย่างหมดจด jQuery มีทั้งฟังก์ชันliveและdelegateฟังก์ชันซึ่งช่วยให้คุณสามารถระบุตัวจัดการโดยใช้ตัวเลือก CSS3 แบบเต็มรูปแบบ (และบางตัว)

ตัวอย่างเช่นนี่คือรหัสที่เทียบเท่าโดยใช้ jQuery (ยกเว้นฉันแน่ใจว่า jQuery จัดการกับ edge case แต่เวอร์ชันดิบนอกข้อมือข้างต้นไม่ได้):

(function($) {

  $("#button1").live('click', function() {
    display("Button One clicked");
    return false;
  });
  $("#button2").live('click', function() {
    display("Button Two clicked");
    return false;
  });
  $("#outerDiv").live('click', function() {
    display("Outer div clicked");
    return false;
  });
  $("#innerDiv1").live('click', function() {
    display("Inner div 1 clicked, not cancelling event");
  });
  $("#innerDiv2").live('click', function() {
    display("Inner div 2 clicked, cancelling event");
    return false;
  });
  $("p").live('click', function() {
    display("You clicked the message '" + this.innerHTML + "'");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

})(jQuery);

สำเนาสด

คุณอาจต้องการสร้างฟังก์ชันตัวช่วยดังนี้:

function defineAndRun(name, func) {
    window[name] = func;
    func();
}

defineAndRun('addEventsAndStuff', function() {
    alert('oele');
});

รหัสของคุณมีการพิมพ์ผิด:

(function addEventsAndStuff() {
  alert('oele');
)/*typo here, should be }*/)();

ดังนั้น

(function addEventsAndStuff() {
  alert('oele');
 })();

ได้ผล ไชโย!

[ แก้ไข ] ตามความคิดเห็น: และสิ่งนี้ควรเรียกใช้และส่งคืนฟังก์ชันในครั้งเดียว:

var addEventsAndStuff = (
 function(){
  var addeventsandstuff =  function(){
    alert('oele');
  };
  addeventsandstuff();
  return addeventsandstuff;
 }()
);

ง่ายกว่าด้วย ES6:

var result = ((a, b) => `${a} ${b}`)('Hello','World')
// result = "Hello World"
var result2 = (a => a*2)(5)
// result2 = 10
var result3 = (concat_two = (a, b) => `${a} ${b}`)('Hello','World')
// result3 = "Hello World"
concat_two("My name", "is Foo")
// "My name is Foo"

หากคุณต้องการสร้างฟังก์ชันและดำเนินการทันที -

// this will create as well as execute the function a()
(a=function a() {alert("test");})();

// this will execute the function a() i.e. alert("test")
a();

ลองทำเช่นนั้น:

var addEventsAndStuff = (function(){
    var func = function(){
        alert('ole!');
    };
    func();
    return func;
})();