目前比较流行的前端框架(精读大型网站架构)
目前比较流行的前端框架(精读大型网站架构)iframe是HTML原生支持的,iframe的作用是将一个网页嵌入另外的网页中,被模块化的播放器一般以这种方式嵌入页面。使用iframe嵌入模块无疑是最理想的方式,被iframe嵌入的模块本身是一个完整的网页,拥有自己独立的HTML、CSS和JavaScript文件,模块的内部是直观的。另外,由于模块是一个完整的网页,单独调试模块会很方便。1.iframe一些比较复杂、相对独立,而且需要被多个网页使用的模块值得被模块化。如播放器就是一个很好的例子,播放器比较复杂,并且很多网页都会用到播放器。这些模块被模块化后,会减轻很多工作量。一些大部分网页都需要的模块值得被模块化,如标头(Header)、底部(Footer)。这些部分被模块化后,可以很好地集中管理,当发生样式变更时,能避免修改遗漏等情况发生。在明确了哪些模块需要被模块化之后,我们开始讨论具体的模块化方法。
模块化的方法网页和网页之间有很多相似或者相同的模块,模块化就是把这些模块抽离并独立管理。而模块化的方法,就是把模块的HTML、CSS和JavaScript文件独立出来,然后通过某种方法关联到使用这些模块的网页上。
在介绍模块化的具体方法之前,需要清楚一个点,“可以模块化”和“值得模块化”是两个完全不同的概念。如果把所有可以模块化的模块都独立出来,那么会有很多零碎的模块,这样很大程度上又会回到混乱的局面。
因此,下面先说明什么样的模块值得被模块化。
首先,模块的颗粒度需要有一个清晰的界定。模块的界定最好是3.4.1小节中提到的模块层中的某个模块区域,而不是模块区域内的一些零碎控件组合,这样能避免模块过于零碎。
一些比较复杂、相对独立,而且需要被多个网页使用的模块值得被模块化。如播放器就是一个很好的例子,播放器比较复杂,并且很多网页都会用到播放器。这些模块被模块化后,会减轻很多工作量。
一些大部分网页都需要的模块值得被模块化,如标头(Header)、底部(Footer)。这些部分被模块化后,可以很好地集中管理,当发生样式变更时,能避免修改遗漏等情况发生。
在明确了哪些模块需要被模块化之后,我们开始讨论具体的模块化方法。
1.iframe
iframe是HTML原生支持的,iframe的作用是将一个网页嵌入另外的网页中,被模块化的播放器一般以这种方式嵌入页面。使用iframe嵌入模块无疑是最理想的方式,被iframe嵌入的模块本身是一个完整的网页,拥有自己独立的HTML、CSS和JavaScript文件,模块的内部是直观的。另外,由于模块是一个完整的网页,单独调试模块会很方便。
但是,过度使用iframe往往是不被提倡的,这是由于iframe会对网页性能带来一定影响,也会提高HTTP的请求次数,所以一个网页嵌入iframe的个数最好不要超过3个。
HTML使用iframe嵌入网页的方式如代码3.32所示,其中frameborder="0"表示消除iframe边框,allowfullscreen="true"表示允许iframe全屏显示,这两个属性一般都要设置。
代码3.32 HTML使用iframe嵌入网页
<html>
<iframe frameborder="0" allowfullscreen="true" src="/module/xxx.html?
param=xx"></iframe>
</html>
如果父网页和iframe中被嵌入的网页同源(网页地址的域名和端口都一致),则它们之间是可以互相通信的,如代码3.33所示。
代码3.33 父网页和iframe中被嵌入的网页相互调用JavaScript函数
//网页调用iframe页面的play()函数,其中id_frame为iframe的id
document.getElementById("id_frame").contentWindow.play()
// iframe页面调用父页面的stop()函数
parent.window. stop();
2.以插件的方式
在3.3.1小节中提到过第三方插件,这些插件一般是由CSS和JavaScript文件组成的。模块也可以以这种方式构造,只需要封装好CSS文件和JavaScript文件即可,而模块的HTML部分则需要变成JavaScript中的字符串塞到JavaScript文件里。以3.4.3小节中的例子为例(搜索框加按钮这个模块区域),为了封装完整的模块,增加了初始化函数,初始化函数被调用后,模块内容才被添加到网页上。在调用初始化函数时,可以绑定回调函数,当按钮被单击后,调用该函数。搜索框加按钮模块化的例子如下,模块的CSS文件如代码3.34所示,模块的JavaScript文件如代码3.35所示,在引用模块的CSS和JavaScript文件后,页面使用模块的JavaScript代码如代码3.36所示。
代码3.34 模块的CSS文件
/* 设置搜索区域的输入框样式 */
.Body_Search_Input{
width: calc(100% - 100px - 10px);
margin-right: 10px;
float: left;
}
/* 设置搜索区域的“搜索”按钮样式 */
.Body_Search_Button{
width: 100px;
}
代码3.35 模块的JavaScript文件
Function ControlSearchBar(data) {
//插入的模板,模块的HTML部分
var template = `<input class="form-control Body_Search_Input">
<button class="btn btn-primary Body_Search_Button" >搜索
</button>`;
//记录参数,包括目标div的id和回调函数
var targetId = data["id"];
var callBackFunction = data["callBackfunction"];
//初始化函数
this.initialize = function(){
//向目标div插入模板代码
document.getElementById(targetId).innerHTML = template;
//绑定单击事件
var button = document.getElementById(targetId).getElementsBy
TagName('button')[0];
button.addEventListener("click" function(){
if(callBackFunction){
return;
}//获取输入内容并返回
var input = document.getElementById(targetId).getElementsByTag
Name('input')[0];
callBackFunction(input.value);
});
}
}
代码3.36 网页使用模块的JavaScript代码
//“搜索”按钮被单击后回调
var DoSearch = function(data){
…
}
var SearchbarInfo = {
"id":"id_Search" //目标div的id
"callBackFunction":DoSearch //回调函数的函数名
};
var Searchbar = new ControlSearchBar(SearchbarInfo); //新建一个模块对象
Searchbar.initialize();
以上是以插件形式做的模块化,这么做的好处是,网页可以像使用插件一样使用模块,非常方便。这样的做法有一个不好的地方,就是需要把HTML塞到JavaScript里,由于模块本身已经不是一个完整的网页,这样便使得模块不能以网页的形式打开,对模块本身的调试比较麻烦。另外,由于HTML需要转换成JavaScript的字符串,所以HTML部分如果内容太多的话,维护起来还是很麻烦的。
说明:例子中的代码写法不是唯一的标准,这里只是让读者有一个以插件形式实现模块化的具体感受。
3.利用框架
一些框架是提供模块化功能的,但一般有两种方式,一种方式是类似于插件的方式,需要把HTML部分塞到JavaScript里,如Vue.js、React.js等,由于它跟上面“以插件的方式”中介绍的形式类似,所以在这里不展开介绍;另一种方式是提供独立的HTML、CSS和JavaScript代码空间,开发者根据框架的规则开发和关联模块后,再通过一些额外的辅助工具来编译或构造前端工程,如Angular 2及后续版本,这里我们称它们为模块化框架。
这些模块化框架相对于插件形式的模块化,由于加入了额外的辅助工具生成一部分代码,所以这些模块化框架对于模块的构造形式相对简单。
而且由于可以独立HTML、CSS和JavaScript代码,所以也相对直观一些。对于关联模块而言,也会有更直观的关联语法。以Angular 2及后续版本为例,搜索框加按钮模块化的例子如下,其中,CSS文件的代码如代码3.37所示,HTML文件的代码如代码3.38所示,TypeScript文件的代码如代码3.39所示,其他HTML引用模块如代码3.40所示。
说明:Angular 2及后续版本只能用TypeScript作为脚本语言。
TypeScript其实是JavaScript的超集,最后TypeScript还是会被编译成JavaScript。
代码3.37 模块的CSS文件
/* 设置搜索区域的输入框样式 */
.Body_Search_Input{
width: calc(100% - 100px - 10px);
margin-right: 10px;
float: left;
}
/* 设置搜索区域的“搜索”按钮样式 */
.Body_Search_Button{
width: 100px;
}
代码3.38 模块的HTML文件
<!--只需要模块自身的标签,不需要<body></body>等标签 -->
<input class="form-control Body_Search_Input" [(ngModel)]="searchText">
<button class="btn btn-primary Body_Search_Button" (click)="search()" >
搜索</button>
代码3.39 模块的TypeScript文件
import { Component OnInit } from "@angular/core";@Component({
selector: "app-search" //定义模块名称
templateUrl: "./ app-search.html" //引用代码3.38的HTML文件
styleUrls: ["./app-search.css"] //引用代码3.37的CSS文件
})
export class SearchComponent implements OnInit {
public searchText: string = ""; //与代码3.38中的input双向绑定的变量
constructor() {}
ngOnInit() {}
public search(): void { //单击“搜索”按钮触发函数
…
this.searchText; //通过searchText变量即可获取输入框的值
…
}
}
代码3.40 引用模块(其他HTML文件)
<!--只需要用模块名称作为标签即可引用到别的HTML文件中-->
<div>
…
<app-search ></app-search>
…
</div>
以上例子的模块化形式确实很好,模块代码独立,引用时也只需要通过标签的形式引入即可。但是上面的例子忽略了很多细节,如果真的使用这些框架实现模块化的话,会发现它有点颠覆我们对网页开发的认知。这些框架会让网页开发变得复杂起来,需要开发者学习一套新的规则,开发出来的网站对框架也有强依赖。
笔者不推荐使用这些模块化框架,因为当使用这些框架的过程中出现问题时,网上能查到的资料十分有限,而官方文档的有些描述也是模棱两可,经常在一个问题上需要花很大的精力才能解决,所以在不知不觉中反而会浪费更多的时间。
在笔者过去经历的一个失败的项目里,同事们真的是各出奇招,但是不可改变的是,项目进度完全失控,网站会有源源不断的问题出现。因此,使用这种模块化方式是有代价的,那就是过高的学习成本。综上,虽然这些模块化的框架能提供更好的模块化方式,但是,如果没有过成功的项目经验,或者还没学会这些模块化框架之前,最好不要使用。
对于大型网站而言更需要慎重,因为如果有相当一部分开发人员不会使用这个模块化框架的话,那么一定会造成很大的项目失控风险。
说明:这里不推荐使用的是一些改变普通网页开发模式,且需要很高学习成本的框架,如Angular 2及后续版本。像Vue.js这种轻量级且不需要过多学习成本的框架还是值得使用的。
现今前端模块化的困局模块化必然是前端架构发展的方向,现在的前端工程,通过3.5.1小节中介绍的方法勉强能做到模块化,但是这样的模块化形式不够好。iframe形式的网页嵌入会对性能带来问题,不能在一个网页中多处使用;插件的形式没有一个完整的网页结构,单独测试时会比较麻烦;使用一些模块化框架的话,学习曲线又过于陡峭,引用了很多工具,会把简单的网页开发变得复杂。
所以个人认为,好的前端模块化应该具备以下几个优点:
·模块的嵌入是简单的,尽量少的给网站带来性能问题。
·模块本身是完整的网页结构,可以单独调试。
·虽然不可避免地引用一些其他工具,但应该尽量保持普通网页开发的模式及简单性。
自研框架Trick未来模块化的发展方向应该会解决3.5.2小节中提到的几个问题。而解决这些问题的关键,其实是解决一个网页怎么拥有多个HTML文件的问题。网页本身是只允许拥有一个HTML文件的(除去iframe和一些框架外),让一个网页拥有多个HTML文件似乎是不可能的,除非某一天浏览器支持这样的做法。
但是在计算机的世界里,有一个万能法则,如果A不能到达B的话,那么可以在A和B之间增加一个C作为跳板。也就是说,虽然我们不能直接让浏览器支持多个HTML文件,但可以通过一些手段,把多个HTML文件自动合并成一个。
基于上述考虑,笔者做了一个框架,这个框架将页面分成网页布局层和模块层。网页布局层中的网页只负责网页布局和引用模块;模块层里的每个模块都拥有独立的HTML、JavaScript和CSS文件,可单独调试。于是网页变成了一个沙盘,网页负责拼接和关联这些模块,如图3.43所示。
图3.43 自制的框架
页面布局层引用模块时,只需要如代码3.41所示即可引用Searchbar模块,框架会自动加载模块的CSS和JavaScript文件,HTML部分会自动替换到<!--@@Searchbar@@-->的位置,自动把多个HTML文件合并成一个。
代码3.41 页面引用模块
<div>
…
<!--@@Searchbar@@-->
…
</div>
由于自动加载是JavaScript脚本完成的,性能上不允许作为生产环境的产物,所以额外加了一个编译器,当需要生成生产环境代码时,编译器可以自动拼接这些代码,将页面代码和模块代码拼接到一起。
这个框架是一个顶层框架,只是做了拼接的工作,所以不影响使用其他JavaScript库、组件工具箱和框架。除此之外,模块代码是可以单独抽离并放到下一个前端工程里的,因为一个好的框架,除了有强大的功能以外,还需要有成长性,能让使用者把当前项目的积累作用在下一个项目当中。
综上,笔者个人认为,现今比较流行的模块化框架,都过于追求模块化的完备性,而让简单的网页开发变得十分复杂。在笔者个人的理解里,网页开发其实很简单,网页就是一个HTML文件加上几个JavaScript文件和几个CSS文件,而好的模块化方式,应该是在保持普通网页开发模式的前提下,保留模块本身的网页性质(能独立运行调试)的同时,可以方便地引用和使用模块。
本文给大家讲解的内容是大型网站架构的技术细节:前端架构,模块化- 下篇文章给大家讲解的内容是大型网站架构的技术细节:前端架构,单页应用
- 觉得文章不错的朋友可以转发此文关注小编;
- 感谢大家的支持!