मैंने जेएस फ़ंक्शंस को अलग-अलग वेब पेजों (इंडेक्स, लॉगिन, रजिस्टर और अन्य) से अपनी जेएस फाइलों में अलग कर दिया है, जिन्हें बाद में मुख्य जेएस फाइल में आयात किया जाता है, जिसमें एक से अधिक पेजों में साझा किए गए फ़ंक्शन शामिल होते हैं। मैंने कोड के रखरखाव और पठनीयता के उद्देश्य से ऐसा किया है (मुझे आशा है), अन्यथा मेरे पास एक फ़ाइल में कोड की सैकड़ों लाइनें होंगी।

login.js

export function loginSubmit() {
  $("#login-form").submit(function (event) {
    event.preventDefault();
    event.stopPropagation();
    let formValid;

    $("#login-form input").each(function () {
      if ($(this).val() === "") {
        fieldInputInvalid($(this));
        formValid = false;
      }
    });

    if (formValid !== false) {
      // submit the form for authentication
    }
  });
}

register.js

export function loginSubmit() {
  $("#register-form").submit(function (event) {
    event.preventDefault();
    event.stopPropagation();
    let formValid;

    // other form validation functions (not shown as not necessary to post)  

    $("#register-form input").each(function () {
      if ($(this).val() === "") {
        fieldInputInvalid($(this));
        formValid = false;
      }
    });

    if (formValid !== false) {
      // submit the form for user registration
    }
  });
}

main.js

// import all functions from these js files
import * as login from "../scripts/login.js";
import * as register from "../scripts/register.js";

// general functions used on more than one page
function fieldInputInvalid(inputField) {
  // Changes styling of inputField to display to user that it is invalid.
}

function fieldInputValid(inputField) {
  // Changes styling of inputField to display to user that it is valid.
}

function createElement(elemName, elemAttributes) {
  // Create document element
  var elem = document.createElement(elemName);
  // Check if element attirbutes were passed
  if (elemAttributes !== "undefined") {
    // Loop through each argument
    $.each(elemAttributes, function (key, value) {
      // and assign it to the document element
      elem.setAttribute(key, value);
    });
  }
  // Return document element
  return elem;
}

जैसा कि आप मेरे कोड नमूने से देख सकते हैं, दोनों login.js और register.js फ़ंक्शन main.js से फ़ंक्शन फ़ील्डइनपुटइनवैलिड () को कॉल करते हैं, हालांकि, मुझे Uncaught ReferenceError: fieldInputInvalid is not defined त्रुटि मिलती है जब कोई भी फॉर्म सबमिट किया जाता है। मुझे पता है कि मैं फ़ील्डइनपुटइनवैलिड फ़ंक्शन को login.js और register.js दोनों में डालकर इसे प्राप्त कर सकता हूं, लेकिन मुझे लगा कि यह डुप्लिकेट कोड नियम को तोड़ देगा। क्या यह मेरी वर्तमान संरचना के साथ काम करने का कोई तरीका है या मेरी इच्छा के परिणाम को प्राप्त करने का एक बेहतर तरीका है?

(नोट: मेरे पास कई अन्य सामान्य कार्य हैं जो इस पोस्ट में शामिल नहीं हैं जिनका उपयोग मेरी वेबसाइट पर किया जाएगा। मुझे पता है कि मैं login.js और register.js से कोड को एक साथ पहचान नाम की एक फ़ाइल में डाल सकता हूं। fieldInputInvalid और fieldInputValid कार्य करता है और फिर निर्यात करता है, लेकिन यह मेरी परियोजना में शामिल किसी भी अन्य सामान्य कार्यों को हल नहीं करेगा।

1
JLI_98 26 अगस्त 2020, 20:02

1 उत्तर

सबसे बढ़िया उत्तर

अपनी फ़ाइल में fieldInputInvalid घोषित करें, और फिर login और register इसे आयात करें:

// fieldInputInvalid.js
export const fieldInputInvalid = () => {
  // ...
}
// login.js
import { fieldInputInvalid } from './fieldInputInvalid';
// ...

एक अन्य विकल्प यह होगा कि जब भी loginSubmit को कॉल किया जाए, तो इसे fieldInputInvalid फ़ंक्शन पास करें, यदि आप कर सकते हैं, जैसे:

loginSubmit(fieldInputInvalid);
// login.js (and register.js):
export function loginSubmit(fieldInputInvalid) {
  // ...

तब आप fieldInputInvalid को loginSubmit के अंदर कॉल कर पाएंगे।

यदि आपके पास एकाधिक साझा फ़ंक्शन हैं और आप प्रत्येक को अलग-अलग पास नहीं करना चाहते हैं, तो आप सभी loginSubmit को फ़ंक्शन का एक ऑब्जेक्ट भी पास कर सकते हैं, जैसे:

loginSubmit({ fieldInputInvalid, someOtherHelper });
// login.js (and register.js):
export function loginSubmit({ fieldInputInvalid, someOtherHelper }) {
  // ...
1
CertainPerformance 26 अगस्त 2020, 20:07