अन्य साइटों के लिए जावास्क्रिप्ट विजेट बनाना

Question

मैं एक जावास्क्रिप्ट "विजेट" बनाना चाहता हूं जिसे अन्य साइटों पर होस्ट किया जा सकता है। उदाहरण के लिए। मैं अपनी साइट पर जावास्क्रिप्ट कोड होस्ट करना चाहते हैं:

http://scripts.mysite.com/mywidget.js

(Google Analytics जैसे यह के बारे में सोचो)।

असल में मैं इस जावास्क्रिप्ट के माध्यम से डेटा वितरित करना चाहता हूं। लेकिन क्या मैं को लेकर अनिश्चित हूं है:

• नियमों के विकास के लिए अलग है जब एक अन्य साइट (क्रॉस साइट)
• वहाँ रहे हैं किसी भी वेबसाइट है कि इन मतभेदों को समझाने के लिए एक जावास्क्रिप्ट बनाने हैं?

Answer 1

मैं करने की कोशिश करेंगे:

1. इसे विन्यास

   • लोड बाह्य शैलीपत्रक?
   • मुझे संसाधनों को कहां मिल सकता है? (छवियों, स्टाइलशीट्स)
   • मेरे पास क्या लेआउट/आकार होना चाहिए?

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

2. कोड का एक टुकड़ा पैदा पेज
   • पर शामिल करने के लिए एक जादूगर प्रदान करें सुनिश्चित करता है कि यहां तक ​​कि मामूली तकनीकी प्रयोक्ताओं अपने विजेट का उपयोग कर सकते
3. यह हल्के वजन बनाओ
   • सबकुछ छोटा और संपीड़ित करें
   • कैश-हेडर, ई-टैग, अंतिम-संशोधित और अन्य सभी उपयोगी हेडर के साथ सेवा करें जिनके बारे में आप सोच सकते हैं। यह दोनों आपके सर्वर पर लोड को कम करेगा और साथ ही साथ आपके विजेट को अधिक उत्तरदायी बना देगा।
   • पुस्तकालयों पर निर्भरता से बचने के लिए प्रयास करें, या जाँच अगर वे पेज जहां विजेट उन्हें लोड करने से पहले प्रयोग किया जाता है पर लोड किए गए हैं
4. संघर्ष से सावधान रहें
   • प्रोटोटाइप $ का उपयोग करता है, और इसलिए jQuery करता है यदि आपका विजेट प्रोटोटाइप पर निर्भर करता है, और पेज को noConflict-mode के बिना jQuery पर उपयोग किया जाता है, तो समस्याएं उत्पन्न हो जाएंगी
   • वैश्विक नामस्थान को न दबाएं!
     • आप किसी को भी, अपने विजेट के साथ बातचीत को बंद करने में एक स्वयं को क्रियान्वित समारोह में रख और सभी
     • पर किसी भी वैश्विक चर पैदा नहीं आप उपयोगकर्ताओं के लिए सक्षम होने के लिए चाहते हैं करते हैं करने के लिए नहीं करना चाहते हैं अपने विजेट से बातचीत करें, ईवेंट श्रोताओं को जोड़ने के लिए कहें और ऐसे में, एक वैश्विक वैरिएबल वैरिएबल का दावा करें, आइए उदाहरण कॉमविड्ज को ऑब्जेक्ट शाब्दिक के रूप में कहें और वहां अपनी विधियां डालें। उपयोगकर्ता की तो बातचीत कर सकता है जैसे:

       • ExampleComWidget.addListener('update', callback);

   • उपयोग चालाक मार्कअप जितना संभव हो उतना टकराव से बचने के लिए अपने वर्गों और आईडी, पर देखते हुए का उपयोग सुनिश्चित करें

     आईई अगर आपकी कंपनी का नाम example.com है, तो आप कक्षाओं का उपयोग कर सकते हैं: com-ex-widget-newsItem

   • अपने मार्कअप को मान्य करें! आप किसी उपयोगकर्ता की साइट को तोड़ना नहीं चाहते हैं
   • अर्थपूर्ण मार्कअप ठीक है, लेकिन आप <h1> -tags से बचना चाहेंगे, क्योंकि उनमें विशेष रूप से एसईओ में उच्च रैंकिंग है। आप शायद <h4> और उससे कम का उपयोग कर प्राप्त कर सकते हैं। यह गोली थोड़ा सा हो सकता है। संदेह में, यह अर्थपूर्ण मार्कअप का उपयोग करने के लिए बेहतर नहीं है।
5. स्क्रिप्ट तत्वों
   • डालने यह सुनिश्चित करने के लिए कि आप एक ही मूल के प्रतिबंध के आसपास एक पक्का रास्ता है कर अपनी साइट से डेटा प्राप्त करें।
   • स्क्रिप्ट तत्व के लिए एक ऑनलोड-श्रोता संलग्न जब डेटा तैयार है जानते हैं, या का उपयोग jsonp

Answer 2

आपकी स्क्रिप्ट को शेष पृष्ठ में हस्तक्षेप नहीं करना चाहिए।

• एक न्यूनतम करने वैश्विक की संख्या रखें (एक नाम स्थान वस्तु पर्याप्त होना चाहिए)
• बिना किसी कारण के बिल्ट-इन वस्तुओं
• नहीं करने के लिए गुण न जोड़ें एकमात्र स्क्रिप्ट होने की उम्मीद है जो window.onload
• जैसी घटनाओं को सुनें यदि आप ..in loops के लिए उपयोग कर रहे हैं अन्य स्क्रिप्ट्स ऐरे में सामग्री जोड़ सकते हैं .prototype
• स्टाइल-शीट को ध्यान में रखें। HTML तत्वों की डिफ़ॉल्ट शैली बदल दी गई हो सकती है।
• बिना किसी कारण के अपनी स्क्रिप्ट को अपडेट न करें क्योंकि आप कई साइटों को तोड़ने का जोखिम उठाते हैं।

Answer 3

मुझे लगता है कि यह कैसे एक एम्बेड स्क्रिप्ट को लागू करने का एक बहुत अच्छा लिखने अप है। http://alexmarandon.com/articles/web_widget_jquery/