javascript इन - <a>में जावास्क्रिप्ट कोड डालने के विभिन्न तरीकों के बीच क्या अंतर है?




भाषाओं से (7)

मैंने जावास्क्रिप्ट कोड को <a> टैग में डालने के निम्नलिखित तरीकों को देखा है:

function DoSomething() { ... return false; }
  1. <a href="javascript:;" onClick="return DoSomething();">link</a>
  2. <a href="javascript:DoSomething();">link</a>
  3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
  4. <a href="#" onClick="return DoSomething();">link</a>

मैं केवल जावास्क्रिप्ट कोड के बजाय एक वैध यूआरएल डालने की कोशिश करने के विचार को समझता हूं, बस उपयोगकर्ता के पास जावास्क्रिप्ट सक्षम नहीं है। लेकिन इस चर्चा के उद्देश्य के लिए, मुझे लगता है कि जावास्क्रिप्ट सक्षम है (वे इसके बिना लॉगिन नहीं कर सकते हैं)।

मुझे व्यक्तिगत रूप से विकल्प 2 पसंद है क्योंकि यह आपको यह देखने की अनुमति देता है कि क्या चल रहा है-विशेष रूप से उपयोगी जब फ़ंक्शन पर पैरामीटर पारित किए जाते हैं। मैंने इसे थोड़ा सा उपयोग किया है और ब्राउज़र के मुद्दों को नहीं मिला है।

मैंने पढ़ा है कि लोग 4 की सिफारिश करते हैं, क्योंकि यह उपयोगकर्ता को वास्तविक लिंक का पालन करने देता है, लेकिन वास्तव में, # "वास्तविक" नहीं है। यह बिल्कुल नहीं होगा।

क्या कोई ऐसा है जो समर्थन नहीं करता है या वास्तव में बुरा है, जब आप जानते हैं कि उपयोगकर्ता जावास्क्रिप्ट सक्षम है?

संबंधित प्रश्न: जावास्क्रिप्ट लिंक के लिए Href: "#" या "जावास्क्रिप्ट: शून्य (0)"?


Answers

विधि # 2 में एफएफ 3 और आईई 7 में एक वाक्यविन्यास त्रुटि है। मैं विधियों # 1 और # 3 पसंद करता हूं, क्योंकि # 4 गंदे यूआरआई '#' के साथ गंदे हैं हालांकि कम टाइपिंग का कारण बनता है ... जाहिर है, जैसा कि अन्य प्रतिक्रियाओं के अनुसार उल्लेख किया गया है, सबसे अच्छा समाधान ईवेंट हैंडलिंग से अलग HTML है।


केवल आधुनिक ब्राउज़र

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

क्रॉस ब्राउज़र

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

दस्तावेज़ तैयार होने से पहले आप इसे चला सकते हैं, बटन क्लिक करने से काम होगा क्योंकि हम ईवेंट को दस्तावेज़ में संलग्न करते हैं।

सूत्रों का कहना है:


<a href="#" onClick="DoSomething(); return false;">link</a>

मैं यह करूँगा, या:

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

दशा पर निर्भर करता है। बड़े ऐप्स के लिए, दूसरा सबसे अच्छा है क्योंकि यह आपके इवेंट कोड को समेकित करता है।


आप एक और विधि भूल गए:

5: <a href="#" id="myLink">Link</a>

जावास्क्रिप्ट कोड के साथ:

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

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


एक अंतर मैंने इसके बीच देखा है:

<a class="actor" href="javascript:act1()">Click me</a>

और इस:

<a class="actor" onclick="act1();">Click me</a>

यह है कि यदि आपके पास किसी भी मामले में है:

<script>$('.actor').click(act2);</script>

फिर पहले उदाहरण के लिए, act2 act1 से पहले चलाएगा और दूसरे उदाहरण में, यह दूसरी तरफ होगा।


मैं मैट क्रूस के जावास्क्रिप्ट बेस्ट प्रैक्टिस लेख का काफी आनंद लेता हूं। इसमें, वह बताता है कि जावास्क्रिप्ट कोड निष्पादित करने के लिए href सेक्शन का उपयोग करना एक बुरा विचार है। भले ही आपने कहा है कि आपके उपयोगकर्ताओं के पास जावास्क्रिप्ट सक्षम होना चाहिए, इसलिए कोई कारण नहीं है कि आपके पास एक साधारण HTML पृष्ठ नहीं हो सकता है कि आपके सभी जावास्क्रिप्ट लिंक अपने href अनुभाग के लिए इंगित कर सकते हैं कि कोई लॉग इन करने के बाद जावास्क्रिप्ट को बंद करने के लिए होता है मैं आपको इस फॉलबैक तंत्र को अभी भी अनुमति देने के लिए प्रोत्साहित करता हूं। ऐसा कुछ "सर्वोत्तम प्रथाओं" का पालन करेगा और आपका लक्ष्य पूरा करेगा:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

कभी-कभी किसी ऑब्जेक्ट के किसी ऑब्जेक्ट के फ़ंक्शन को उधार लेने में उपयोगी होता है, जिसका अर्थ है कि उधार लेने वाली वस्तु बस लेंट फ़ंक्शन निष्पादित करती है जैसे कि यह स्वयं थी।

एक छोटा कोड उदाहरण:

var friend = {
    car: false,
    lendCar: function ( canLend ){
      this.car = canLend;
 }

}; 

var me = {
    car: false,
    gotCar: function(){
      return this.car === true;
  }
};

console.log(me.gotCar()); // false

friend.lendCar.call(me, true); 

console.log(me.gotCar()); // true

friend.lendCar.apply(me, [false]);

console.log(me.gotCar()); // false

ऑब्जेक्ट अस्थायी कार्यक्षमता देने के लिए ये विधियां बहुत उपयोगी हैं।





javascript html href