关于页面组件化的问题?
程序员文章站
2022-05-24 12:37:19
...
前端小菜,最近写公司的网页,发现页面上的很多内容都是可以重复使用的,例如页面导航栏,也听说过一点web component,想尝试着把这些可以复用的东西分离出来,这时候,我考虑到一个问题
**分离出来的组件怎么导入的页面中呢?**
之前弄过博客系统(jekyll和hexo),所以我知道后端有这种类似的功能,但是作为一个前端的话,我该怎么处理这个问题呢?
是交给后端来完成呢,还是我自己使用某些开发工具来合并组件?
大家给个意见~!
只是针对你问题的推测一些简单的解决方案。
推测你的项目还是传统项目， 所以不用考虑的太复杂。
提取出项目中的 公共部分。 比如 header footer 以及你说的 导航栏。
1：通过服务端配合 include到 页面当中，简单易用，维护成本低。具体的方法可以google对应的服务器端语言 对应的 include snippet 的方法
2: 通过构建工具 如 Grunt Gulp FIS... 比如grunt-include-html（插件比较多，我就不细说了）
与服务器做拼接的区别就是 通过编译的方式 把 html snippet 替换掉 html文件中的标记。 就你的项目而言，各项成本都比较高，不推荐。
当然还有其他没有价值的方案， 比如写成template文件，页面初始化的时候 append到页面当中。 当然硬是要用 web component的方法也不是不行，只是不推荐。 页面由前端渲染，一个页面一个组件参数配置 推荐React，A JavaScript library for building user interfaces。
可以用组件的方式开发Web页面。 有框架么？可以写在组件js里，用的时候“.”出来就ok web component 怎么说呢 大家概念还不清楚 fisp ，去看看吧，，，，很不错的一个解决方案 页面结构的行为组合，定义个节点相互间的行为的
**分离出来的组件怎么导入的页面中呢?**
之前弄过博客系统(jekyll和hexo),所以我知道后端有这种类似的功能,但是作为一个前端的话,我该怎么处理这个问题呢?
是交给后端来完成呢,还是我自己使用某些开发工具来合并组件?
大家给个意见~!
回复内容：
你的力度还不在 web component。只是针对你问题的推测一些简单的解决方案。
推测你的项目还是传统项目， 所以不用考虑的太复杂。
提取出项目中的 公共部分。 比如 header footer 以及你说的 导航栏。
1：通过服务端配合 include到 页面当中，简单易用，维护成本低。具体的方法可以google对应的服务器端语言 对应的 include snippet 的方法
2: 通过构建工具 如 Grunt Gulp FIS... 比如grunt-include-html（插件比较多，我就不细说了）
与服务器做拼接的区别就是 通过编译的方式 把 html snippet 替换掉 html文件中的标记。 就你的项目而言，各项成本都比较高，不推荐。
当然还有其他没有价值的方案， 比如写成template文件，页面初始化的时候 append到页面当中。 当然硬是要用 web component的方法也不是不行，只是不推荐。 页面由前端渲染，一个页面一个组件参数配置 推荐React，A JavaScript library for building user interfaces。
可以用组件的方式开发Web页面。 有框架么？可以写在组件js里，用的时候“.”出来就ok web component 怎么说呢 大家概念还不清楚 fisp ，去看看吧，，，，很不错的一个解决方案 页面结构的行为组合，定义个节点相互间的行为的