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

webtimes
  • 251

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

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

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

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

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

回复
阅读 1.5k
4 个回答

这不就是 Sea.js 吗

requirejs

webcompoents

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏