【发布时间】：2010-03-09 02:03:41
【问题描述】：
我想制作一个 html/js 小部件，人们可以将它添加到他们的博客、网站等中。
我以前从未制作过小部件，所以我想知道应该做什么，不应该做什么。 例如，如何制作样式？内联，自己的css文件或最佳做法是什么？我相信我不能在里面使用头部和身体的东西。那么h1，h2等呢？他们搞砸了有小部件的网站还是我可以使用它们？
如果你有什么好的建议，我想听听。
谢谢。
【问题讨论】：
标签： javascript html widget
【发布时间】：2010-03-09 02:03:41
【问题描述】：
我会尝试：
-
使其可配置
- 加载外部样式表？
- 在哪里可以找到我需要的资源？ （图片、样式表）
- 我应该有什么布局/尺寸？
通过这样做，您可以让用户决定他是否希望您的小部件自动加载样式表，或者他是否想自己托管它。如果这样做，他还可以更新样式以更好地适应小部件所在的页面。
-
提供一个向导，用于生成要包含在页面上的代码 sn-p
- 确保即使是技术水平中等的用户也可以使用您的小部件
-
轻量化
- 提供所有压缩和压缩的内容
- 使用缓存标头、电子标签、最后修改的标头和您能想到的所有其他有用标头。这既可以减少服务器上的负载，也可以让您的小部件更具响应性。
- 尽量避免对库的依赖，或者在加载它们之前检查它们是否在使用小部件的页面上加载
-
警惕冲突
- 原型使用 $，jQuery 也是如此。如果您的小部件依赖于 Prototype，并且它所在的页面使用 jQuery 而没有 noConflict-mode，则会出现问题
- 不要破坏全局命名空间！
- 如果您不希望任何人与您的小部件交互，请将其放在闭包中的自执行函数中，并且根本不要创建任何全局变量
- 如果您希望用户能够与您的小部件进行交互，例如添加事件侦听器等，请声明一个全局变量，例如将 ExampleComWidget 作为对象文字并将您的方法放在那里。然后用户可以像这样进行交互：
ExampleComWidget.addListener('update', callback);
-
使用巧妙的标记
-
确保对您的类和 ID 使用范围，尽可能避免冲突
即如果您的公司名称是 example.com，您可以使用如下类：
com-ex-widget-newsItem - 验证您的标记！您不想破坏用户的网站
- 语义标记很好，但您可能希望避免使用
<h1>-tags，因为它们在 SEO 中的排名特别高。您可能可以使用<h4>或更少。这颗子弹可能有点偏。如有疑问，使用语义标记比不使用要好得多。
-
【讨论】：