# jQuery.masterPage.js
**Repository Path**: Esmool/jQuery.masterPage.js
## Basic Information
- **Project Name**: jQuery.masterPage.js
- **Description**: 基于jQuery母版页驱动引擎
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 5
- **Forks**: 3
- **Created**: 2016-04-24
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: jquery-plugins
**Tags**: None
## README
# jQuery.masterPage.js
基于 jQuery 的母版页驱动引擎
## 依赖
jQuery 1.11.1 (通过测试, 早期版本不做保证)
## 用法
### 母版页制作
使用jsp制作母版页, 在母版页中按照完整的HTML格式书写HTML, 需要使用占位符时给对应元素添加属性masterPlaceHolder, 其中填写占位符名称, 例如
```HTML
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
默认标题
```
上例中三处占位符分别为
```HTML
默认标题
```
```HTML
默认标题
```
```HTML
```
占位符中可以填充默认HTML内容, 当引用母版页的子页没有指定占位符内容时, 将会使用母版页中默认的内容, 如上例中title占位符所示.
可以在母版页中多次引用同名占位符, 如上例中title占位符所示.
**注意**
可以在母版页中引用公共的库、样式, 定义公共的javascript函数、javascript全局变量, 定义公共的样式, 所有上述内容均在子页中可见. 因此也应当注意进行命名规避, 以避免冲突.
### 子页面制作
在子页面中, 首先需要以JSP方式声明对母版页的引用, 按照如下格式
```HTML
<%@ include file="母版页文件路径" %>
```
之后使用如下格式填充母版页中
```HTML
```
子页面的填充元素应当为div, 且不应当给其设置除masterTag以外的任何属性.
当需要执行页面加载完毕后动作时, 建议定义页面内全局pageLoad()函数代替使用body的onload事件和$(document).ready事件. 使用pageLoad()可以确保母版页完成了前端解析之后方被触发.
若子页面不提供pageLoad()函数, 浏览器控制台将输出警告, 指示无法找到该函数, 若确实不需要此函数, 可以忽略此警告.
假设上例的母版页保存在路径/view/master/demoMaster.jsp下, 引用该母版的完整的示例如下
```HTML
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/masters/demoMaster.jsp" %>
Demo Page for jQuery Master Page plugin
```
**注意**
1. 子页中若不提供母版页中要求的占位符实现, 将会采用母版页中默认的实现;
2. 子页中若提供了母板页中未要求的占位符实现, 将会自动抛弃该实现;
3. 母版页中的所有前端脚本、样式子页中均可见, 应注意命名规避避免冲突.
### 页面初始化动作
在母板页中可以声明函数 beforePageLoad 和 afterPageLoad
```javascript
function beforePageLoad() { ... } // 或
window.beforePageLoad = function () { ... }
function afterPageLoad() { ... } // 或
window.afterPageLoad = function () { ... }
```
在子页面中可以声明函数 pageLoad
```javascript
function pageLoad() { ... } // 或
window.pageLoad = function () { ... }
```
以完成页面初始化动作.
上述三个函数的调用顺序为
1. beforePageLoad
2. pageLoad
3. afterPageLoad
### 其它注意事项
本插件为前端母版解析插件, 所有占位符匹配、替换动作均在前端完成.
目前本插件在JSP环境下测试正常, 理论上可在ASP/ASP.NET, PHP等任何动态网页中应用, 相应的对头部服务器脚本引用格式进行对应调整即可. 但未经测试不做保证. 有兴趣参与贡献者, 欢迎加入测试和改进行列.
本插件为针对传统多页面应用设计, 不兼容单页应用(Single Page Application, SPA)框架.