jQuery 组件化开发

本文将介绍如何使用 jQuery 的 load 方法实现组件化开发。

一、为什么需要组件化？

应项目要求，使用 HTML 、 jQuery 等技术开发网站。

在开发过程中，因为缺少组件化机制而感觉到强烈的不适，具体表现为：

  • 同一段代码需要粘贴到多个位置

  • 修改公共部分时，需要进行多次重复修改

缺乏组件化机制，导致了开发的繁琐和易错。

二、网站结构

假设 html 文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
    ···引入必须的JS、CSS···
    ···引入公共部分的JS、CSS···
    ···引入当前页面的JS、CSS···
</head>

<body>
    <!-- Header -->
    <header>
        <div>
        	header
        </div>
    </header>
    <!-- 页面主体 -->
    ···
    <!-- footer -->
    <footer>
        <div>
        	footer
        </div>
    </footer>
</body>

</html>

三、document.write()

1. 做法

通过工具将 HTML 文档转换为 JS 文件，通过 script 的方式引入。

HTML 文档

1
2
3
4
5
6
7
8
9
<style>
	···
</style>

<header>
    <div>
    	header
    </div>
</header>

转换后的 JS 文件

1
2
3
4
5
6
7
8
9
document.writeln("<style>");
document.writeln("	···");
document.writeln("</style>");
document.writeln("");
document.writeln("<header>");
document.writeln("    <div>");
document.writeln("    	header");
document.writeln("    </div>");
document.writeln("</header>");

通过 script 的方式引入 JS 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    ···引入必须的JS、CSS···
    ···引入当前页面的JS、CSS···
</head>

<body>
    <!-- Header -->
    <header>
    	<script type="text/javascript" src="./js/header.js"></script>
    </header>
    <!-- 页面主体 -->
    ···
    <!-- footer -->
    <footer>
    	<script type="text/javascript" src="./js/footer.js"></script>
    </footer>
</body>

</html>

2. 问题

在载入页面完成后，浏览器的输入流将会关闭。此时如果继续向页面 document.write()，将会清除当前的页面内容，并打开一个新的输出流，再继续向其中写入内容。

浏览器将会逐个加载 js 文件以防止发生清空内容的错误。因此，包含了 document.write() 的 script 将会显著地减慢页面的加载，容易出现加载堵塞的问题。

四、 jQuery load

使用 HTML 的方式编写组件，并用 jQuery 的 load 方法加载至页面中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
    ···引入必须的JS、CSS···
    ···引入当前页面的JS、CSS···
</head>

<body>
    <!-- Header -->
    <header id="header">
    </header>
    <!-- 页面主体 -->
    ···
    <!-- footer -->
    <footer id="footer">
    </footer>
</body>

<script>
    (function () {
        $('#header').load('/header.html')
        $('#footer').load('/footer.html')
    })()
</script>

</html>

​

参考