精读大型网站架构：前端架构模块化的方法及困境，自研框架Trick

最新推荐文章于 2025-02-26 21:21:50 发布

做梦都在改BUG

最新推荐文章于 2025-02-26 21:21:50 发布

阅读量654

点赞数

文章标签：前端 javascript java

本文链接：https://blog.youkuaiyun.com/weixin_60707895/article/details/127731332

版权

模块化的方法

网页和网页之间有很多相似或者相同的模块，模块化就是把这些模块抽离并独立管理。而模块化的方法，就是把模块的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();

最低0.47元/天解锁文章