আমি কি কোনও জাভাস্ক্রিপ্ট ফাংশনটির নাম দিতে পারি এবং তাৎক্ষণিকভাবে এটি সম্পাদন করতে পারি?

Question 1

আমার এর মধ্যে বেশ কয়েকটি রয়েছে:

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

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

ইভেন্টগুলি পুনরায় যুক্ত করা প্রয়োজনীয় কারণ ডিওএম পরিবর্তিত হয়েছে, সুতরাং পূর্বে সংযুক্ত ইভেন্টগুলি চলে গেছে। যেহেতু তাদের প্রাথমিকভাবে সংযুক্ত করতে হবে (দুহ), তাই তারা শুভ্র হওয়ার জন্য একটি দুর্দান্ত ফাংশনে আছেন।

এই সেট আপ (বা আছে?) এর সাথে কোনও ভুল নেই, তবে আমি কি এটি কিছুটা মসৃণ করতে পারি? আমি 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.srcElementআইই তে) ব্যবহার করুন।

এইভাবে, আপনি কেবলমাত্র একবার হ্যান্ডলার (গুলি) সংযুক্ত করেন এবং আপনি সামগ্রী সরিয়ে নেওয়ার পরেও তারা কাজ চালিয়ে যান।

কোনও সহায়তা সহায়ককে ব্যবহার না করে ইভেন্ট প্রতিনিধি দলের উদাহরণ এখানে রয়েছে:

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