小工具 - 做什么,不做什么

Question

我想制作一个人们可以添加到他们的博客,网站等的html/js小部件.

我之前从未制作过小工具,所以我想知道应该做什么,不做什么.例如,我如何制作样式？内联,自己的CSS文件或什么是最佳实践？我相信我不能使用头部和身体的东西.那么h1,h2等呢？他们搞砸了有小部件的网站还是我可以使用它们？

如果您有任何好的提示,我希望听到这些.

谢谢.

Answer 1

我会尝试:

1. 使其可配置

   • 加载外部样式表？
   • 我在哪里可以找到我需要的资源？(图片,样式表)
   • 我应该有什么样的布局/尺寸？

   通过这样做,您可以让用户决定他是否希望您的小部件自动加载样式表,或者他是否想要自己托管样式表.如果他这样做,他还可以更新样式以更好地适应窗口小部件所在的页面.

2. 提供一个向导,用于生成要包含在页面上的代码片段
   • 确保即使是技术熟练的用户也可以使用您的小部件
3. 使它重量轻
   • 服务于缩小和压缩的一切
   • 提供缓存标题,电子标记,最后修改以及您可以想到的所有其他有用标题.这既可以减轻服务器的负担,也可以使您的小部件更具响应性.
   • 尽量避免对库的依赖,或者在加载它们之前检查它们是否在使用窗口小部件的页面上加载
4. 警惕冲突
   • Prototype使用$,jQuery也是如此.如果您的小部件依赖于Prototype,并且它托管的页面使用jQuery而没有noConflict-mode,则会出现问题
   • 不要破坏全局命名空间!
     • 如果您不希望任何人与您的窗口小部件进行交互,请将其放在闭包中的自执行函数中,并且根本不创建任何全局变量
     • 如果您希望用户能够与您的窗口小部件进行交互,比如添加事件侦听器等,请声明一个全局变量,让我们将ExampleComWidget称为对象文字并将您的方法放在那里.然后,用户可以进行以下互动:ExampleComWidget.addListener('update', callback);

5. 使用聪明的标记

   • 请务必在类和ID上使用作用域,以尽可能避免冲突

     即如果您公司的名称是example.com,您可以使用以下类: com-ex-widget-newsItem

   • 验证您的标记!您不想破坏用户的网站
   • 语义标记很好,但你可能想要避免<h1>-tags,因为它们在SEO中排名特别高.你可能会使用<h4>和更少.这个子弹可能有点过时了.如果有疑问,使用语义标记比使用语义标记要好得多.