控件 - 什麼做的，而不是

Question

我想什麼做一個HTML/JS小工具，人們可以添加到自己的博客，網站等

我從來沒有打過小部件之前，所以我想聽到的應該被完成，沒有。 例如，我如何製作造型？內聯，自己的CSS文件或最佳做法是什麼？我相信我不能使用頭部和身體的東西。那麼h1，h2等呢？他們是否搞砸了擁有這個小部件的網站，或者我可以使用它們嗎？

如果你有什麼好的提示，我想聽聽那些。

謝謝。

Answer 1

如果它包含一個JS文件，你可以做任何事情。但你顯然不想搞亂網站的風格。所以你所有的CSS應該使用class和/或id選擇器。

Answer 2

我想嘗試：

1. 讓它配置

   • 加載外部樣式表？
   • 我在哪裏可以找到我需要的資源？ （圖像，樣式表）
   • 我應該有什麼佈局/大小？

   通過這樣做，您可以讓用戶決定是否希望您的小部件自動加載樣式表，或者如果他想自己託管它。如果他這樣做，他還可以更新樣式以更好地適合小部件所在的頁面。

2. 提供一個嚮導生成的代碼片段，包括頁面
   • 上保證了即使適度的技術用戶可以利用你的widget
3. 讓它重量輕
   • 服務一切縮小和壓縮
   • 可以使用緩存標頭，電子標籤，最後修改以及所有您可以想到的有用標頭。這既可以減少服務器的負載，也可以讓您的小部件更具響應能力。
   • 儘量避免對圖書館的依賴，或者檢查它們是否在控件加載之前使用的網頁上加載
4. 警惕的衝突
   • 原型使用$等做jQuery。如果你的小部件依賴於Prototype，並且它所託管的頁面使用jQuery而不使用noConflict-mode，則會出現問題
   • 請勿打開全局命名空間！
     • 如果你不希望任何人使用你的widget交互，把它在一個封閉自動執行的功能，並在所有
     • 如果你希望用戶能夠不產生任何全局變量與你的小部件進行交互，比如說添加事件監聽器等等，聲明一個單一的全局變量，讓我們假設ExampleComWidget作爲一個對象字面值並把你的方法放在那裏。然後用戶可以交互，如：ExampleComWidget.addListener('update', callback);

5. 使用聰明的標記

   • 請務必使用範圍界定在你的class和id，以避免衝突儘可能

     即，

     也就是說如果您公司的名稱是example.com，則可以使用以下類：com-ex-widget-newsItem

   • 驗證您的標記！你不想破壞用戶的網站
   • 語義標記是好的，但你可能想要避免<h1>標籤，因爲它們在SEO中排名特別高。你可能會使用<h4>或更少。這個子彈可能有點關閉。如果有疑問，使用語義標記要好得多。