关于页面组件化的问题?-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

关于页面组件化的问题?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 08:44 AM

componentweb

前端小菜,最近写公司的网页,发现页面上的很多内容都是可以重复使用的,例如页面导航栏,也听说过一点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 ，去看看吧，，，，很不错的一个解决方案页面结构的行为组合，定义个节点相互间的行为的

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Web Speech API开发者指南：它是什么以及如何工作Apr 11, 2023 pm 07:22 PM

译者 | 李睿审校 | 孙淑娟Web Speech API是一种Web技术，允许用户将语音数据合并到应用程序中。它可以通过浏览器将语音转换为文本，反之亦然。Web Speech API于2012年由W3C社区引入。而在十年之后，这个API仍在开发中，这是因为浏览器兼容性有限。该API既支持短时输入片段，例如一个口头命令，也支持长时连续的输入。广泛的听写能力使它非常适合与Applause应用程序集成，而简短的输入很适合语言翻译。语音识别对可访问性产生了巨大的影响。残疾用户可以使用语音更轻松地浏览

如何使用Docker部署Java Web应用程序Apr 25, 2023 pm 08:28 PM

docker部署javaweb系统1.在root目录下创建一个路径test/appmkdirtest&&cdtest&&mkdirapp&&cdapp2.将apache-tomcat-7.0.29.tar.gz及jdk-7u25-linux-x64.tar.gz拷贝到app目录下3.解压两个tar.gz文件tar-zxvfapache-tomcat-7.0.29.tar.gztar-zxvfjdk-7u25-linux-x64.tar.gz4.对解

web端是什么意思Apr 17, 2019 pm 04:01 PM

web端指的是电脑端的网页版。在网页设计中我们称web为网页，它表现为三种形式，分别是超文本（hypertext）、超媒体（hypermedia）和超文本传输协议（HTTP）。

vue3怎么使用defineAsyncComponent与component标签实现动态渲染组件May 12, 2023 pm 05:55 PM

一、基础的动态引入组件：简单的动态引入的意思是，前端知道要引入哪些组件，将多个组件引入到父组件中，但不渲染它，满足一定条件后，才去在某个位置渲染指定的组件。import{reactive,ref,shallowReactive,onActivated,defineAsyncComponent,}from'vue';constcustomModal=defineAsyncComponent(()=>import('./modal/CustomM

面试官：@Configuration 和 @Component 的区别Aug 15, 2023 pm 04:29 PM

调用@Configuration类中的@Bean注解的方法，返回的是同一个示例；而调用@Component类中的@Bean注解的方法，返回的是一个新的实例。

web前端和后端开发有什么区别Jan 29, 2023 am 10:27 AM

区别：1、前端指的是用户可见的界面，后端是指用户看不见的东西，考虑的是底层业务逻辑的实现，平台的稳定性与性能等。2、前端开发用到的技术包括html5、css3、js、jquery、Bootstrap、Node.js、Vue等；而后端开发用到的是java、php、Http协议等服务器技术。3、从应用范围来看，前端开发不仅被常人所知，且应用场景也要比后端广泛的太多太多。

Python轻量级Web框架：Bottle库！Apr 13, 2023 pm 02:10 PM

和它本身的轻便一样，Bottle库的使用也十分简单。相信在看到本文前，读者对python也已经有了简单的了解。那么究竟何种神秘的操作，才能用百行代码完成一个服务器的功能？让我们拭目以待。1. Bottle库安装1）使用pip安装2）下载Bottle文件https://github.com/bottlepy/bottle/blob/master/bottle.py2.“HelloWorld！”所谓万事功成先HelloWorld，从这个简单的示例中，了解Bottle的基本机制。先上代码：首先我们从b

web前端打包工具有哪些Aug 23, 2022 pm 05:31 PM

web前端打包工具有：1、Webpack，是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序；2、Grunt，一个前端打包构建工具；3、Gulp，用代码方式来写打包脚本；4、Rollup，ES6模块化打包工具；5、Parcel，一款速度极快、零配置的web应用程序打包器；6、equireJS，是一个JS文件和模块加载器。

See all articles