# AMD概念
AMD 全称 Asynchronous Module Definition，即异步模块定义。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD模块化方案：require.js

# CMD概念
CMD 全称为 Common Module Definition，是 Sea.js 所推广的一个模块化方案的输出。在 CMD define 的入参中，也支持包含 id, deps 以及 factory 三个参数的形式。但推荐的是接受 factory 一个入参，然后在入参执行时，填入三个参数 require、exports 和 module。

CMD模块化方案：Sea.js


# 基于 gulp + require.js 构建兼容IE8项目
- es6语法支持；
- 模块按需引入，依赖前置；
- 开发阶段的产物即为发布产物，易于排查问题；

## Gulp
Gulp是一款基于流的自动化构建工具，它能够帮助开发者自动完成各种重复、繁琐的任务，如代码打包压缩、编译Less/Sass等CSS预处理器、缩小图片大小、代码风格检查等。

## require.js
require.js是一款JavaScript模块加载器和优化工具，它能够帮助开发者更好地组织和管理代码。通过使用require.js，开发者可以将代码拆分成多个独立的模块，并动态地根据需要加载这些模块，在提高代码可读性和可维护性的同时，也提高了网页的加载速度。

### 1、模块定义
```javascript
define(['jquery'], function ($) {
    return {
        showPageLoading() {
            $('body').css('visibility', 'visible');
            $('.page-loading').show();
        },
        hidePageLoading() {
            $('.page-loading').hide();
        },
    }
})
```

### 2、require.js全局配置
- require.config.js
```javascript
require.config({
    baseUrl: './js/', //基础路径
    useXhr: true,
    urlArgs: 't=' + (new Date()).getTime(),
    map: { // 插件
        '*': {
            'css': 'requirejs/css',
            'text': 'requirejs/text',
            'json': 'requirejs/json',
        }
    },
    // 用来映射模块的名称和路径
    paths: {
        'jquery': 'libs/jquery-1.8.1.min',
        'utils': 'module/utils',
        'package': '../../../package.json',
    },
    // 用来配置非AMD规范的模块
    shim: {
        // exports 表示该模块所对应的全局变量名，deps 表示该模块依赖的其他模块。
        'layui': {
            exports: 'layui',
            deps: ['jquery', 'css!./libs/layui/css/layui.css']
        },
    }
});
```
### 3、页面入口定义
```javascript
require([
    'jquery',
    'layui',
    'utils',
    'css!../static/css/detail.css'
], function ($, layui, utils) {
    utils.showPageLoading();

    const pageConfig = {
        init(){
            const self = this;
            // todo...
            self.bindEvents()
        },
        bindEvents(){
            // 事件绑定
        }
    }

    $(document).ready(() => {
        layui.config({
            base: './js/libs/extend/',
        }).extend({
            selectM: "selectM",
            selectInput: 'selectInput/selectInput',
        }).use(['selectM', 'selectInput'], () => {
            pageConfig.init();
        })
    })
})
```

### 4、html结构
```html
</html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>病例详情</title>
        <link rel="shortcut icon" href="./static/images/favicon.ico" type="image/x-icon">
        <script type="text/javascript">
            window.onerror = function () {
            return true
            }
        </script>
    </head>

    <body class="page-body" style="visibility: hidden;">
        <div class="page-loading" style="display: none"><img src="./static/images/loading.gif"></div>
        <div class="layui-row" id="detail-container-row" style="height: 100%"></div>
        <script type="text/javascript" src="js/requirejs/require.js"></script>
        <script type="text/javascript" src="js/requirejs/require.config.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
```

## 项目结构
```
├─ gulpfile.js 工程构建配置文件
├─ package.json
└─ src
   ├─ detail.html
   ├─ index.html
   ├─ js
   │  ├─ components 业务模块
   │  ├─ libs 三方插件
   │  ├─ detail.js
   │  ├─ index.js
   │  ├─ module
   │  │  ├─ cache.js 全局缓存模块
   │  │  ├─ clipboardIE.js 复制模块
   │  │  ├─ common.js 公共方法模块
   │  │  ├─ constant.js 常量模块
   │  │  ├─ logSdk.js 埋点模块
   │  │  ├─ polyfill.js 扩展补丁模块
   │  │  ├─ services.js 接口服务模块
   │  │  └─ utils.js 公共方法模块
   │  └─ requirejs
   │     ├─ css.js css文件加载插件
   │     ├─ json.js json文件加载插件
   │     ├─ require.config.js 全局配置文件
   │     ├─ require.js
   │     └─ text.js 模板文件加载插件
   ├─ static 静态资源文件
   └─ tpls 模板文件
```

## IE8圆角方案
基于PIE.htc实现ie圆角，如下：
```css
.test{
    position: relative;
    border-radius: 16px;
    behavior: url(/static/css/PIE.htc);
}
```
需要注意的点：
1、设置圆角的dom节点需要设置position属性，relative或absolute；
2、PIE.htc引用路径必须是基于html文件的相对路径；
3、设置圆角的元素不能有border属性，不然会存在阴影