# ES3模块化

**Repository Path**: drawingz/es3-modularization

## Basic Information

- **Project Name**: ES3模块化
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-06
- **Last Updated**: 2021-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 2021.03.06完成

ES3使用立即执行函数，会执行完成之后立即销毁变量，避免全局变量污染，通过return各种方法，来封装

;(function(){

})();

#### 这次写的是一个在元素上填写data数据，我们自动帮助渲染出来

所以我们要获取元素，获取data，创建模板，数据替换，dom操作，绑定事件，获取源事件，修改_index，判断我们点击的哪一个，然后修改class。

1.获取元素（document.querySelector(el)）

2.获取data（el.getAttribute('data')）

3.创建模板。因为操作dom会导致页面回流 会消耗很大的内存，所以我们先把模板放在文档碎片中
```js
var tabWrapper = document.createElement('div')
var pageWrapper = document.createElement('div')
var oFrag = document.createDocumentFragment()
```
4.数据替换，通过正则replace
```js
tpl.replace(/\{\{(.*?)\}\}/g,function(match,key){
    return replaceObj[key.trim()]
})
```
这里的replaceObj是我们要替换的数据集合，我们匹配到之后，返回我们需要的data的key

5.dom操作
```js
oFrag.appendChild(tabWrapper)
oFrag.appendChild(pageWrapper)
el.appendChild(oFrag)
```

6.绑定事件

7.获取源事件（因为我们只能点击tab，并且在点击tab时要知道对应元素在整个nodeArray中的index）
点击会自动传入参数，arguments
第一项是整个nodeArray
第二项是MouseEvent
包含鼠标点击时候的坐标，还有点击的那个dom元素
然后判断我们点击的是不是tab

```js
if(tar.className === 'tab-item'){
    //还原之前那个元素的class
    doms.tabItems[_index].className = 'tab-item';
    doms.pageItems[_index].className = 'page=item';
    //获取点击元素的index,并且修改默认的_index
    var _index = [].indexOf.call(tabItems,tar);
    //给现在的点击元素添加，触发时的class
    doms.tabItems[_index] += ' current';
    doms.pageItems[_index] += ' current';
}


这个例子对我的难度来说中等偏难，主要是分离工具函数的方法，需要更多的经验；
这个例子，分离了两个工具，一个是根据数据，创建对应的元素，
                        另一个是用来替换元素中的data


```