JavaScript関数に名前を付けてすぐに実行できますか？

私はこれらのかなりの数を持っています：

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

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

DOMが変更されたため、イベントを再度追加する必要があり、以前に添付されていたイベントはなくなります。それらは最初にも取り付けられなければならないので（duh）、それらはDRYであるために素晴らしい機能にあります。

この設定に問題はありません（またはありますか？）が、少しスムーズにできますか？addEventsAndStuff()関数を作成してすぐに呼び出したいので、それほど素人っぽくはありません。

次の両方が構文エラーで応答します。

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

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

テイカーはいますか？

質問に投稿した例に問題はありません。他の方法は奇妙に見えるかもしれませんが、次のようになります。

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

JavaScriptで関数を定義する方法は2つあります。関数宣言：

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.srcElementIEで）使用して、イベントが実際に発生した場所を特定し、正しく処理します。

そうすれば、ハンドラーをアタッチするのは1回だけで、コンテンツを交換してもハンドラーは機能し続けます。

ヘルパーライブラリを使用しないイベント委任の例を次に示します。

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

})();

実例

ページに動的に追加されるメッセージをクリックすると、追加される新しい段落にイベントをフックするコードがない場合でも、クリックが登録されて処理されることに注意してください。また、ハンドラーがマップ内の単なるエントリであり、すべてのディスパッチを実行するハンドラーが1つあることにも注意してくださいdocument.body。さて、あなたはおそらくこれをよりターゲットを絞った何かに根ざしているでしょうdocument.body、しかしあなたはその考えを理解します。また、上記では基本的にはでディスパッチしてidいますが、複雑なものから単純なものまで、好きなだけマッチングを行うことができます。

jQuery、Prototype、YUI、Closure、またはその他のいくつかのような最新のJavaScriptライブラリは、ブラウザの違いをスムーズにし、エッジケースをきれいに処理するためのイベント委任機能を提供する必要があります。jQueryは、その関数liveとdelegate関数の両方で確かに機能します。これにより、CSS3セレクターの全範囲（および一部）を使用してハンドラーを指定できます。

たとえば、jQueryを使用した同等のコードは次のとおりです（jQueryがエッジケースを処理すると確信している場合を除きます）。

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