👋🏻 💆🏼 🆙 5 दिलचस्प जावास्क्रिप्ट Vue स्रोत कोड में बनाया गया है 🚖 ⛹️ 🙏🏻

प्रसिद्ध रूपरेखाओं के स्रोत कोड को पढ़ने से एक प्रोग्रामर को अपने पेशेवर कौशल को सुधारने में मदद मिल सकती है। लेख के लेखक, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, ने हाल ही में vue2.x कोड का विश्लेषण किया। उन्होंने इस कोड में कुछ दिलचस्प जावास्क्रिप्ट विचारों को पाया जो उन्होंने सभी के साथ साझा करने का फैसला किया।

1. किसी वस्तु का सटीक प्रकार निर्धारित करना

जैसा कि हम सभी जानते हैं, जावास्क्रिप्ट में छह आदिम डेटा प्रकार के होते हैं ( Boolean, Number, String, Null, Undefined, Symbol), और एक ऑब्जेक्ट प्रकार - Object। क्या आप जानते हैं कि विभिन्न प्रकार के ऑब्जेक्ट वैल्यू के बीच अंतर कैसे किया जाता है? ऑब्जेक्ट एक सरणी या फ़ंक्शन हो सकता है, यह मूल्यों Mapया कुछ और का संग्रह हो सकता है। सटीक प्रकार की वस्तु का पता लगाने के लिए क्या करने की आवश्यकता है?

इस प्रश्न का उत्तर खोजने से पहले, आइए Object.prototype.toString.call(arg)और इसके बीच अंतर के बारे में सोचें String(arg)।

इन अभिव्यक्तियों का उपयोग उनके लिए पारित पैरामीटर को एक स्ट्रिंग में परिवर्तित करने के उद्देश्य से है। लेकिन वे अलग तरह से काम करते हैं।

जब बुलाया जाता है, तो String(arg)सिस्टम कॉल करने का प्रयास करेगा arg.toString()या arg.valueOf()। नतीजतन, अगर argप्रोटोटाइप में या मेंargइन विधियों को अधिलेखित कर दिया जाएगा, कॉल Object.prototype.toString.call(arg)और String(arg)अलग-अलग परिणाम देंगे।

एक उदाहरण पर विचार करें।

const _toString = Object.prototype.toString
var obj = {}
obj.toString()  // [object Object]
_toString.call(obj) // [object Object]

हम ब्राउज़र डेवलपर टूल कंसोल में इस कोड को निष्पादित करेंगे।

इस मामले में कॉल obj.toString()और Object.prototype.toString.call(obj)एक ही परिणाम के लिए नेतृत्व।

यहाँ एक और उदाहरण है।

const _toString = Object.prototype.toString
var obj = {}
obj.toString = () => '111'
obj.toString()  // 111
_toString.call(obj) // [object Object]
/hello/.toString() // /hello/
_toString.call(/hello/) // [object RegExp]

कंसोल में कोड निष्पादित करते हैं।

अब, ऑब्जेक्ट की विधि को कॉल करना .toString()और निर्माण का उपयोग करना Object.prototype.toString.call(obj)अलग परिणाम देता है।

यहां वे नियम हैं जो ECMAScript मानक में एक विधि के व्यवहार का वर्णन करते हैं Object.prototype.toString()।

ECMAScript मानक में Object.prototyp.toString () विधि का विवरण

दस्तावेज़ीकरण को देखते हुए, हम यह निष्कर्ष निकाल सकते हैं कि जबObject.prototype.toString()विभिन्न वस्तुओं के लिएबुलाया जाता है, तो विभिन्न परिणाम वापस आ जाएंगे।

कंसोल में इस विचार का अन्वेषण करें।

इसके अलावा, लौटाया गया मान Object.prototype.toString()हमेशा निम्न प्रारूप में प्रस्तुत किया जाता है:

‘[object ’ + ‘tag’ +‘] ’

यदि हमें इस निर्माण से केवल एक भाग निकालने की आवश्यकता है tag, तो हम एक नियमित अभिव्यक्ति या विधि का उपयोग करके लाइन के आरंभ और अंत से अनावश्यक पात्रों को हटाकर इस हिस्से को प्राप्त कर सकते हैं String.prototype.slice()।

function toRawType (value) {
    const _toString = Object.prototype.toString
    return _toString.call(value).slice(8, -1)
}
toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"

कंसोल में इस सुविधा का अन्वेषण करें।

जैसा कि आप देख सकते हैं, उपरोक्त फ़ंक्शन का उपयोग करके आप ऑब्जेक्ट चर का सटीक प्रकार पता लगा सकते हैं।

→ यहाँ , Vue रिपॉजिटरी में, आप एक समान फ़ंक्शन के लिए कोड पा सकते हैं।

2. फ़ंक्शन के परिणामों को कैशिंग करना

मान लीजिए कि निम्नलिखित के समान एक फ़ंक्शन है जो लंबी गणना करता है:

function computed(str) {    
    console.log('2000s have passed')
    return 'a result'
}

इस तरह के एक समारोह का निर्माण करके, हम इसे वापस करने के परिणामों को कैश करने का इरादा रखते हैं। जब यह फ़ंक्शन अगली बार कहा जाता है, तो इसे पहले के समान पैरामीटर पास करते हुए, "भारी" फ़ंक्शन कोड निष्पादित नहीं किया जाएगा। इसके बजाय, कैश्ड परिणाम बिना किसी अतिरिक्त समय के वापस कर दिया जाएगा। यह कैसे करना है?

उदाहरण के लिए, आप एक वस्तुनिष्ठ फ़ंक्शन के लिए एक रैपर फ़ंक्शन लिख सकते हैं। इस तरह के फ़ंक्शन को एक नाम दिया जा सकता है cached। यह फ़ंक्शन एक तर्क, उद्देश्य फ़ंक्शन के रूप में स्वीकार करता है, और कैशिंग क्षमताओं से लैस एक नया फ़ंक्शन देता है। समारोह में, cachedआप इकाई का उपयोग कर लक्ष्य कार्य करने के लिए पिछले कॉल के परिणामों को कैश कर सकते Objectया Map। इस फ़ंक्शन का कोड इस प्रकार है:

function cached(fn){
  //     ,      
  const cache = Object.create(null);

  //      
  return function cachedFn (str) {

    //       -   
    if ( !cache[str] ) {
        let result = fn(str);

        //      
        cache[str] = result;
    }

    return cache[str]
  }
}

यहां उपरोक्त फ़ंक्शन का उपयोग करने का एक उदाहरण है।

→ यहाँ एक समान फ़ंक्शन के लिए कोड है जो Vue कोड बेस में उपलब्ध है।

3. प्रपत्र hello- विश्व की एक स्ट्रिंग को प्रपत्र helloWorld के स्ट्रिंग में कनवर्ट करें

जब कई प्रोग्रामर एक ही प्रोजेक्ट पर एक साथ काम करते हैं, तो उनके लिए कोड की एक समान शैली का ध्यान रखना बहुत महत्वपूर्ण है। उदाहरण के लिए, helloWorldकोई व्यक्ति किसी प्रारूप में कुछ समग्र पहचानकर्ताओं को रिकॉर्ड कर सकता है , और कोई किसी प्रारूप में hello-world। इस क्षेत्र में ऑर्डर लाने के लिए, आप एक फ़ंक्शन बना सकते हैं जो hello-worldलाइनों को देखने के लिए व्यू लाइनों को परिवर्तित करता है helloWorld।

const camelizeRE = /-(\w)/g
const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
camelize('hello-world')
// "helloWorld"

→ यह Vue कोड का स्थान है जहां से यह उदाहरण आता है।

4. जावास्क्रिप्ट कोड किस वातावरण में निर्धारित होता है

आजकल, ब्राउज़रों के तेजी से विकास को देखते हुए, जावास्क्रिप्ट कोड को विभिन्न वातावरणों में निष्पादित किया जा सकता है। विभिन्न वातावरणों के लिए बेहतर परियोजनाओं को अनुकूलित करने के लिए, आपको यह निर्धारित करने में सक्षम होना चाहिए कि कार्यक्रम कहां निष्पादित किए जाते हैं:

const inBrowser = typeof window !== 'undefined'
const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
const isPhantomJS = UA && /phantomjs/.test(UA)
const isFF = UA && UA.match(/firefox\/(\d+)/)

→ यह वह जगह है जहाँ मुझे यह कोड मिला है।

5. अंतर्निहित और उपयोगकर्ता-परिभाषित कार्यों के बीच अंतर

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

Array.isArray.toString() // "function isArray() { [native code] }"
function fn(){} 
fn.toString() // "function fn(){}"

हम कंसोल में इस कोड के साथ प्रयोग करेंगे।

toString()मूल फ़ंक्शन विधि हमेशा निम्न प्रपत्र का निर्माण लौटाती है:

function fnName() { [native code] }

यह जानकर, आप एक फ़ंक्शन लिख सकते हैं जो आपको देशी और उपयोगकर्ता-परिभाषित कार्यों के बीच अंतर करने की अनुमति देता है:

function isNative (Ctor){
  return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}

→ यह Vue कोड बेस में वह जगह है जहां इस तरह का फंक्शन होता है।

क्या आपने प्रसिद्ध जावास्क्रिप्ट परियोजनाओं के भंडार में कोड की खोज करके कुछ दिलचस्प खोजने का प्रबंधन किया?

5 दिलचस्प जावास्क्रिप्ट Vue स्रोत कोड में बनाया गया है

1. किसी वस्तु का सटीक प्रकार निर्धारित करना

2. फ़ंक्शन के परिणामों को कैशिंग करना

3. प्रपत्र hello- विश्व की एक स्ट्रिंग को प्रपत्र helloWorld के स्ट्रिंग में कनवर्ट करें

4. जावास्क्रिप्ट कोड किस वातावरण में निर्धारित होता है

5. अंतर्निहित और उपयोगकर्ता-परिभाषित कार्यों के बीच अंतर

More articles: