क्या मैं एक जावास्क्रिप्ट फ़ंक्शन का नाम दे सकता हूं और इसे तुरंत निष्पादित कर सकता हूं?

Question 1

मेरे पास इनमें से कुछ हैं:

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

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

ईवेंट को फिर से जोड़ना आवश्यक है क्योंकि DOM बदल गया है, इसलिए पहले से जुड़ी ईवेंट चला गया है। चूँकि उन्हें शुरू में (दुहा) संलग्न होना होता है, वे DRY होने के लिए एक अच्छे कार्य में होते हैं।

इस सेट अप (या वहाँ है?) के साथ कुछ भी गलत नहीं है, लेकिन क्या मैं इसे थोड़ा चिकना कर सकता हूं? मैं addEventsAndStuff()फंक्शन बनाना चाहूंगा और तुरंत कॉल करूंगा , इसलिए यह इतना शौकिया नहीं लगता।

दोनों सिंटैक्स त्रुटि के साथ निम्नलिखित उत्तर देते हैं:

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

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

कोई लेने वाला?

Question 2

आपके प्रश्न में पोस्ट किए गए उदाहरण के साथ कुछ भी गलत नहीं है .. इसे करने का दूसरा तरीका अजीब लग सकता है, लेकिन:

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

जावास्क्रिप्ट में एक फ़ंक्शन को परिभाषित करने के दो तरीके हैं। एक समारोह घोषणा:

function foo(){ ... }

और एक फ़ंक्शन अभिव्यक्ति, जो उपरोक्त के अलावा किसी फ़ंक्शन को परिभाषित करने का कोई तरीका है:

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

...आदि

फ़ंक्शन अभिव्यक्तियों को नाम दिया जा सकता है, लेकिन उनका नाम युक्त स्कोप के लिए प्रचारित नहीं किया जाता है। मतलब यह कोड मान्य है:

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

लेकिन यह नहीं है:

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

इसलिए अपने फ़ंक्शन को नाम देने के लिए और तुरंत कॉल करने के लिए, आपको एक स्थानीय चर को परिभाषित करने की आवश्यकता है, अपने फ़ंक्शन को एक अभिव्यक्ति के रूप में असाइन करें, फिर इसे कॉल करें।

Question 3

इसके लिए एक अच्छा शॉर्टहैंड है (फ़ंक्शन के असाइनमेंट को किसी भी चर को घोषित करने की आवश्यकता नहीं है):

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

Question 4

इस सेट अप (या वहाँ है?) के साथ कुछ भी गलत नहीं है, लेकिन क्या मैं इसे थोड़ा चिकना कर सकता हूं?

इसके बजाय इवेंट डेलिगेशन का उपयोग करें। यही कारण है कि आप वास्तव में एक कंटेनर पर घटना के लिए देखते हैं जो दूर नहीं जाता है, और फिर यह पता लगाने के लिए event.target(या event.srcElementIE पर) का उपयोग करें जहां घटना वास्तव में हुई और इसे सही ढंग से संभालती है।

इस तरह, आप केवल एक बार हैंडलर (ओं) को संलग्न करते हैं, और वे तब भी काम करते रहते हैं जब आप सामग्री को स्वैप करते हैं।

यहां किसी भी सहायक काम का उपयोग किए बिना घटना प्रतिनिधिमंडल का एक उदाहरण है:

(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, लेकिन आप अपनी इच्छानुसार जटिल या सरल मिलान कर सकते हैं।

आधुनिक जावास्क्रिप्ट लाइब्रेरी जैसे jQuery , प्रोटोटाइप , YUI , क्लोजर या कई अन्य में से किसी को ब्राउज़र के मतभेदों को दूर करने और किनारे के मामलों को सफाई से संभालने के लिए इवेंट डेलिगेशन फीचर्स की पेशकश करनी चाहिए। 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);

लाइव कॉपी

Question 5

आप इस तरह एक सहायक समारोह बनाना चाहते हो सकता है:

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

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

Question 6

आपके कोड में एक टाइपो है:

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

इसलिए

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

काम करता है। चीयर्स!

[ संपादित करें ] टिप्पणी पर आधारित: और इसे चलाना चाहिए और फ़ंक्शन को एक बार में वापस करना चाहिए:

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

Question 7

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"

Question 8

यदि आप कोई फंक्शन बनाना चाहते हैं और तुरंत निष्पादित करें -

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

Question 9

ऐसा करने का प्रयास करें:

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