小部件 - 做什么和不做什么

2022-01-18 00:00:00 widget javascript html

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

I would like to make a html/js widget that people can add to their blogs, sites etc.

我以前从未制作过小部件，所以我想知道应该做什么，不应该做什么.例如，如何制作样式?内联，自己的css文件或最佳做法是什么?我相信我不能在里面使用头部和身体的东西.那么h1，h2等呢?他们会搞砸有小部件的网站还是我可以使用它们?

I have never made widgets before so I would like to hear what should be done and what not. For example, how do I make the styling? Inline, own css file or what is the best practise? I believe i cant use head and body stuff in it. What about h1, h2 etc? Do they screw the website that has the widget or can i use them?

如果你有什么好的建议，我想听听.

If you have any good tips I would like to hear those.

谢谢.

推荐答案

我会尝试:

  1. 使其可配置

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

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

By doing this you let the user decide if he wants your widget to automatically load the stylesheet, or if he wants to host it himself. If he does, he can also update the styles to better fit the page the widget resides on.

  • 确保即使是技术水平中等的用户也可以使用您的小部件
  • 提供所有压缩和压缩的内容
  • 使用缓存标头、电子标签、最后修改的标头以及您能想到的所有其他有用的标头.这既可以减少服务器上的负载，也可以让您的小部件更具响应性.
  • 尽量避免对库的依赖，或者在加载它们之前检查它们是否加载到使用小部件的页面上
  • Prototype 使用 $，jQuery 也是如此.如果您的小部件依赖于 Prototype，并且托管它的页面使用没有 noConflict-mode 的 jQuery, 就会出现问题
  • 不要破坏全局命名空间！
    • 如果您不希望任何人与您的小部件交互，请将其放在闭包中的自执行函数中，并且根本不要创建任何全局变量
    • 如果您希望用户能够与您的小部件进行交互，例如添加事件侦听器等，请声明一个全局变量，假设 ExampleComWidget 作为对象文字并将您的方法放在那里.然后用户可以像这样进行交互:ExampleComWidget.addListener('update', callback);
    • Prototype uses $, and so does jQuery. If your widget depends on Prototype, and the page it is hosted on uses jQuery without noConflict-mode, problems WILL arise
    • Do not clobber the global namespace!
      • If you don't want anyone to interact with your widget, put it in a self-executing function in a closure and don't create any global variables at all
      • If you want users to be able to interact with your widget, say for adding event listeners and such, claim a single global variable, let's say ExampleComWidget as an object literal and put your methods there. User's could then interact like: ExampleComWidget.addListener('update', callback);

      使用巧妙的标记

      • 确保对你的类和 id 使用范围，尽可能避免冲突

      • Be sure to use scoping on your classes and ids, to avoid conflicts as much as possible

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

      I.e. if your company's name is example.com, you could use classes like: com-ex-widget-newsItem

相关文章