前端组件化的三种方案:

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代码修改起来不方便。
优点:单文件闯关东。
将来:将来就是当下。

原文地址:https://www.cnblogs.com/samwu/p/4512949.html