Heim > Web-Frontend > H5-Tutorial > Hauptteil

关于页面组件化的问题?

WBOY
Freigeben: 2016-06-07 08:44:05
Original
1764 Leute haben es durchsucht

前端小菜,最近写公司的网页,发现页面上的很多内容都是可以重复使用的,例如页面导航栏,也听说过一点web component,想尝试着把这些可以复用的东西分离出来,这时候,我考虑到一个问题

**分离出来的组件怎么导入的页面中呢?**
之前弄过博客系统(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 ,去看看吧,,,,很不错的一个解决方案 页面结构的行为组合,定义个节点相互间的行为的
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage