Чи можу я назвати функцію 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), щоб з’ясувати, де подія насправді сталася, і правильно її обробити.

Таким чином, ви прикріплюєте обробник (и) лише один раз, і вони продовжують працювати, навіть коли ви замінюєте вміст.

Ось приклад делегування подій без використання допоміжних бібліотек:

(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 обробляє крайові випадки, не вказані вище вихідною вихідною версією):

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