• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 关于页面组件化的问题?

关于页面组件化的问题?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含component,jekyll,hexo,web等相关知识,匿名希望在学习及工作中可以帮助到您
前端小菜,最近写公司的网页,发现页面上的很多内容都是可以重复使用的,例如页面导航栏,也听说过一点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 ,去看看吧,,,,很不错的一个解决方案 页面结构的行为组合,定义个节点相互间的行为的

您可能想查找下面的文章:

  • 关于页面组件化的问题?

相关文章

  • 2018-12-03HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用_html5教程技巧
  • 2017-08-06自定义html标记替换html5新增元素
  • 2018-12-03HTML5仿微信聊天界面和朋友圈代码
  • 2017-08-06html5 web本地存储将取代我们的cookie
  • 2018-12-03HTML5教程之html 5 本地数据库(Web Sql Database)_html5教程技巧
  • 2018-12-0325岁如花的年纪自学前端是明智的选择么? 这几天正犹豫要不要辞职,希望知友能给点意见,先行谢过?
  • 2018-12-03h5之scrollIntoView用法详解
  • 2018-12-03HTML5制作表格样式
  • 2018-12-03html5实现把上传的图片转成base64编码在显示(代码实例)
  • 2018-12-03怎样用canvas绘制星空,月亮,大地,添加文字

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Html5 postMessage实现跨域消息传递
    • HTML5 声明兼容IE的写法_html5教程技巧
    • html5怎么实现图片转圈的动画效果
    • canvas实现爱心和彩虹雨的效果
    • HTML5 canvas画图并保存成图片的jcanvas插件
    • HTML5单页面手势滑屏切换原理分析
    • HTML5 Input 类型的详细介绍以及实例代码
    • h5canvas实现黑客帝国矩形阵效果代码
    • 让IE下支持Html5的placeholder属性的插件_html5教程技巧
    • HTML5 Notification(桌面提醒)功能使用实例_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有