前端组件化的三种方案:

1.预编译语言
在开发阶段,用更完善的第三方程序语言,生成html,css,js代码。
缺点:css有sass,less;js有CoffeeScript,TypeScripty;HTML呢?
优点:如果语言有缺陷,那我就再套一层语言来隐藏这些缺陷。
将来:据说hex语言...

2.css和html写在html文件里

然后以

{
type:"get",
dataType:"text",
url:"module.html",
async:true,
cache:true
}

这个配置,ajax get请求html,
再把请求过来的文本,转换为dom节点即可。
缺点:请求过多。
优点:html代码和css代码修改起来方便。
将来:多个http请求可以在同一个tcp连接进行,浏览器的页面缓存策略升级。这个方案不错。

3.css和html,js都写在一个js文件

方式一,
var $html = $(‘<div class="moduleHtml"></div>‘),
$css = $(‘<style>.moduleHtml{}</style>‘);

$("head").append($css);
$("body").append($html);

方式二,
因为dom是一个树形结构,json也是一个树形结构,于是可以用json生成html。
因为css是一个层叠结构,json也能表达层叠结构,于是可以用json生成css。
貌似,好像,react就是这么做。

缺点:html代码和css代码修改起来不方便。
优点:单文件闯关东。
将来:将来就是当下。

时间: 2024-10-13 04:48:11

前端组件化的三种方案:的相关文章

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

2015前端组件化框架之路(转)

https://github.com/xufei/blog/issues/19 1. 为什么组件化这么难做 Web应用的组件化是一个很复杂的话题. 在大型软件中,组件化是一种共识,它一方面提高了开发效率,另一方面降低了维护成本.但是在Web前端这个领域,并没有很通用的组件模式,因为缺少一个大家都能认同的实现方式,所以很多框架/库都实现了自己的组件化方式. 前端圈最热衷于造轮子了,没有哪个别的领域能出现这么混乱而欣欣向荣的景象.这一方面说明前端领域的创造力很旺盛,另一方面却说明了基础设施是不完善的

2015前端组件化框架之路

特别声明:本文转自@民工精髓的<2015前端组件化框架之路>.谢谢@民工精髓的分享!著作权归作者所有. 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货. 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.原文: http://www.w3cplus.com/components-in-webapp.html ? w

【转】前端组件化框架之路

1. 为什么组件化这么难做 Web应用的组件化是一个很复杂的话题. 在大型软件中,组件化是一种共识,它一方面提高了开发效率,另一方面降低了维护成本.但是在Web前端这个领域,并没有很通用的组件模式,因为缺少一个大家都能认同的实现方式,所以很多框架/库都实现了自己的组件化方式. 前端圈最热衷于造轮子了,没有哪个别的领域能出现这么混乱而欣欣向荣的景象.这一方面说明前端领域的创造力很旺盛,另一方面却说明了基础设施是不完善的. 我曾经有过这么一个类比,说明某种编程技术及其生态发展的几个阶段: 最初的时候

AppBoxFuture(六): 前端组件化开发

??前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端工程(IDE及Web应用)的开发. ??当初框架的设计目标是:前端.后端.存储端统统一锅端,为什么这么设计,一方面是想减少开发人员对于开发环境及各类工具的安装配置时间,另一方面是想消除各端之间的集成调试问题,使开发人员更多的关注数据结构.业务逻辑.用户界面的设计与开发.为了达成这一目标,作者在框架的

MySQL冗余数据的三种方案

一,为什么要冗余数据 互联网数据量很大的业务场景,往往数据库需要进行水平切分来降低单库数据量. 水平切分会有一个patition key,通过patition key的查询能够直接定位到库,但是非patition key上的查询可能就需要扫描多个库了. 此时常见的架构设计方案,是使用数据冗余这种反范式设计来满足分库后不同维度的查询需求. 例如:订单业务,对用户和商家都有订单查询需求: Order(oid, info_detail); T(buyer_id, seller_id, oid); 如果

Opencv——彩色图像灰度化的三种算法

为了加快处理速度在图像处理算法中,往往需要把彩色图像转换为灰度图像.24为彩色图像每个像素用3个字节表示,每个字节对应着RGB分量的亮度. 当RGB分量值不同时,表现为彩色图像:当RGB分量相同时,变现为灰度图像: 一般来说,转换公式有3中. (1)Gray(i,j)=[R(i,j)+G(i,j)+B(i,j)]/3; (2)Gray(i,j)=0.299*R(i,j)+0.587*G(i,j)+0.144*B(i,j); (3)Gray(i,j)=G(i,j);//从2可以看出G的分量比较大所

三种方案实现日志记录功能

三种方案实现日志记录功能 方案一.使用拦截器实现日志记录功能 步骤一.首先需要我们自定义一个注解类 package cn.hmy.Util; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; /** * 自定义操作日志注解接口类

ORACLE SQL前端补0的三种方式。

前端补0的三种方式. select lpad(sal,8,'0') from emp;select to_char(sal,'00000000') from emp;select substr('00000000'||sal,-8) from emp;