javascript - 如果不借助react等，怎么样设计可复用的UI组件

Question

我设想组件是：html+css+js

-modulesA
|_modulesA.tpl
|_modulesA.css
|_modulesA.js

-modulesB
|_modulesB.tpl
|_modulesB.css
|_modulesB.js

问题1：两个组件，modulesA、modulesB 独立设计，又想照顾到SEO
有需要的时候就载入到具体页面，最终合并压缩发布上线
具体该如何实现的呢？

问题2：常规的UI组件又是怎么实现的呢，尤其是做到可复用

Answer 1

这不就是 Sea.js 吗

Answer 2

requirejs

webcompoents

Answer 3

1、Js在该组件内生效，不能对别的模块产生污染，原始做法是利用命名空间，比较现代的做法是利用AMD或者CMD，比如webpack,requires.js,sea.js
2、组件对外暴露接口以便调用该组件。比如初始化等。
3、js应当可以渲染tpl，这个可以借助一些模版引擎，将数据渲染到模版里，模版里尽量少写逻辑，js承担数据渲染和逻辑编写的任务。
4、css可以作为一种资源加载到该组件，比如webpack的一个做法就是把所有的东西作为js资源。

Answer 4

1 这样一个业务模块在异步加载的时候其中有一个有异常,然后整个业务就卡住了
2 渲染后的模板业面又需要添加事件响应 ,这些界面响应的事件不能跟模板混在一起,是单独做为一个js 再异步加载吗 这样一个简单的页面block至少需要 模板.tpl data.json style.css eventLogic.js