Bir JavaScript işlevini adlandırıp hemen çalıştırabilir miyim?

Bende bunlardan birkaçı var:

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

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

Olayların yeniden eklenmesi gereklidir, çünkü DOM değişmiştir, bu nedenle önceden eklenen olaylar gitmiş olur. Başlangıçta da takılmaları gerektiğinden (duh), KURU olmak için güzel bir işleve sahipler.

Bu kurulumda yanlış bir şey yok (veya var mı?), Ama biraz düzeltebilir miyim? addEventsAndStuff()Fonksiyonu oluşturmak ve hemen çağırmak istiyorum , bu yüzden çok amatörce görünmesin.

Aşağıdaki her ikisi de bir sözdizimi hatasıyla yanıt verir:

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

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

Alıcı var mı?

Sorunuzda gönderdiğiniz örnekte yanlış bir şey yok .. Bunu yapmanın diğer yolu tuhaf görünebilir, ancak:

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

JavaScript'te bir işlevi tanımlamanın iki yolu vardır. Bir işlev bildirimi:

function foo(){ ... }

ve yukarıdakilerden farklı bir işlevi tanımlamanın herhangi bir yolu olan bir işlev ifadesi :

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

...vb

işlev ifadeleri adlandırılabilir, ancak adları kapsama alanına yayılmaz. Bu kodun geçerli olduğu anlamına gelir:

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

ama bu değil:

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

Fonksiyonunuzu adlandırmak ve hemen çağırmak için yerel bir değişken tanımlamanız, fonksiyonunuzu ona ifade olarak atamanız ve sonra çağırmanız gerekir.

Bunun için iyi bir kısaltma var (fonksiyonun atamasını herhangi bir değişkeni bar olarak bildirmeye gerek yoktur):

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

Bu kurulumda yanlış bir şey yok (veya var mı?), Ama biraz düzeltebilir miyim?

Bunun yerine olay yetkilendirmeyi kullanmaya bakın. Orası , gitmeyen bir kapta olayı izlediğiniz yer ve ardından olayın gerçekte nerede meydana geldiğini bulmak ve doğru şekilde ele almak için event.target(veya event.srcElementIE'de) kullanın.

Bu şekilde, işleyicileri yalnızca bir kez eklersiniz ve içerik değiştirdiğinizde bile çalışmaya devam ederler.

Herhangi bir yardımcı kitap kullanmadan olay yetkilendirmesine bir örnek:

(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);
  }

})();

Canlı örnek

Sayfaya dinamik olarak eklenen mesajları tıklarsanız, eklenen yeni paragraflarda olayları kancalamak için bir kod olmasa bile tıklamanızın nasıl kaydedileceğini ve işleneceğini unutmayın. Ayrıca işleyicilerinizin bir haritadaki girişler olduğunu ve tüm dağıtımı yapan bir işleyicinizin document.bodyolduğunu da unutmayın. Şimdi, muhtemelen bunu daha hedefli bir şeye dayandırıyorsunuz document.body, ama fikri anladınız. Ayrıca, yukarıda temelde gönderiyoruz id, ancak istediğiniz kadar karmaşık veya basit eşleştirme yapabilirsiniz.

JQuery , Prototype , YUI , Closure veya diğer birkaç gibi modern JavaScript kitaplıkları , tarayıcı farklılıklarını düzeltmek ve uç durumları temiz bir şekilde ele almak için olay yetkilendirme özellikleri sunmalıdır. jQuery kesinlikle hem ile, yapar liveve delegatesize (ve daha sonra) CSS3 seçicileri bir dizi kullanarak yakalayabilmek izin işlevleri.

Örneğin, jQuery kullanan eşdeğer kod burada (ancak jQuery'nin yukarıda belirtilen ham sürümün uç durumları ele aldığından eminim):

(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);

Canlı kopya

Bunun gibi bir yardımcı işlev oluşturmak isteyebilirsiniz:

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

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

Kodunuz bir yazım hatası içeriyor:

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

yani

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

İşler. Şerefe!

[ düzenle ] yoruma göre: ve bu, tek seferde çalışmalı ve işlevi döndürmelidir:

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

ES6 ile daha da basit:

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"

Bir işlev oluşturmak ve hemen yürütmek istiyorsanız -

// 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();

Böyle yapmaya çalışın:

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