前端模块化

网页中重要的三大块

    三大块： 网站的头部 网站中间内容部分 网站的底部
    通过代码的方式来实现 index.html的组成
1. 创建空文件夹 --> webpack
2. 创建index.html  index.js  header.js content.js footer.js

3. index.html
    <div id="root"></div>
4. header.js
    function Header(){  //构造函数
        var dom = document.getElementById("root");  //index.html中的root
        let header = document.createElement('div'); //创建一个div标签
        header.innerText = 'header';
        dom.append(header);
    } 

5. footer.js
    function Footer(){   //构造函数
        var dom = document.getElementById("root");  //index.html中的root
        let footer = document.createElement('div'); //创建一个div标签
        footer.innerText = 'footer';
        dom.append(footer);
    }

6. content.js
    function Content(){   //构造函数
        var dom = document.getElementById("root");  //index.html中的root
        let content = document.createElement('div'); //创建一个div标签
        content.innerText = 'content';
        dom.append(content);
    }

7. index.js
    new Header();   //构造函数 实例化
    new Content();
    new Footer();

8. index.html页面引入js文件
    <script src="./header.js"></script>
    <script src="./content.js"></script>
    <script src="./footer.js"></script>
    <script src="./index.js"></script>

    这就是之前的方式实现的网页。
    运行index.html 可以看到结果。
    
    弊端：模块化实现不明显，不利于后期的项目维护。

webpack模块化

    重要的两个关键字：
    export 导出  相当于之前讲到的return 将函数里的内容抛出去
    import 导入  接收export抛出来的内容


    代码中实现：
    // header.js文件
    function Header(){
        var dom = document.getElementById("root");  //index.html中的root
        let header = document.createElement('div'); //创建一个div标签
        header.innerText = 'header';
        dom.append(header);
    }
    export default Header;  //导出

    // index.js文件
    import Header from './header'; //导入

webpack的搭建

webpack 和 node.js 是不可分割的

基于npm管理

    第一步：初始化命令;  npm init  获得package.json文件  配置信息
    第二步：如果需要进入到某个文件夹  cd 文件夹的名字

安装webpack

   webpack的安装
    命令：cnpm i webpack webpack-cli -D  获得node_modules文件夹 安装的依赖
    -D 局部安装   -g 全局安装
 

局部安装使用

   npx webpack index.js    获得dist文件夹 打包后的代码 可以直接放在服务器

Iterator迭代器 和 for…of 循环

 
 遍历数组：
    let arr = [1,2,3,4,5];
    for(var i =0;i<arr.length;i++){
        console.log(arr[i])
    }

    let arr = [1,2,3,4,5];
    arr.forEach(function(value,index){
        console.log(value);
        console.log(index);
    })

    let arr = [1,2,3,4,5];
    for(let a of arr){
        console.log(a)
    }

为什么要有iterator？？

   Map Set 等数据结构 需要一个统一的接口去处理 iterator就是提供了这么一个机制

作用

   数据部署了iterator接口 就可以用for ... of 循环遍历

for…of 循环的遍历过程的本质

    let arr = [1,2,3,4,5];
    for(let a of arr){
        console.log(a)
    }
    // for...of循环遍历的过程是怎样的？
    需要有个游标指向1的位置，这里的游标也就是我们说的指针对象（iterator本质就是一个指针对象），
    接下来会移动游标的位置 指向2，
    再移动游标的位置，指向3，
    以此类推。也就是挨个走一遍。

    let arr = [1,2,3,4,5];
    function makeIterator(array){  //迭代器生成函数，作用就是返回一个迭代器对象。
        let nextIndex = 0;
        return {  //迭代器指针对象  里面有next方法 返回一个对象 对象里有value和done
            next:function(){  
                return nextIndex < array.length ? 
                {value:array[nextIndex++],done:false}:   //false 未完成状态
                {value:undefined,done:true}              //true  已完成状态
            }
        }
    }
    let res = makeIterator(arr);//对数组执行这个函数，就会返回该数组的迭代器对象
    // 接下来模拟下游动的位置，也就是执行next函数，每执行一次next函数 就相当于游标往后移动一下
    console.log(res.next());  //{value: 1, done: false}
    console.log(res.next());  //{value: 2, done: false}
    console.log(res.next());  //{value: 3, done: false}
    console.log(res.next());  //{value: 4, done: false}
    console.log(res.next());  //{value: 5, done: false}
    console.log(res.next());  //{value: undefined, done: true}
    console.log(res.next());  //{value: undefined, done: true}
    通过调用next函数，返回value和done两个属性；
    value属性返回当前位置的成员，value的类型无限制。
    done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next方法；
    当done为true时，即遍历完成。

            

Iterator接口部署在数据结构的Symbol.iterator属性

    let arr1 = [1,2,3,4,5];
    let iter = arr1[Symbol.iterator]();
    console.log(iter.next());
    console.log(iter.next());
    console.log(iter.next());
    console.log(iter.next());
    console.log(iter.next());
    console.log(iter.next());
    console.log(iter.next());

原生具备Iterator接口的数据结构

 具有iterator接口 Array Map Set String

对象不具备Iterator接口 可以手动部署迭代器接口 让对象可以用for…of 循环遍历

 //写法一：
    let myIterator = {  //对象
        a: 1,
        b: 2,
        c: 3
    }
    myIterator[Symbol.iterator] = function() {  //迭代器 
    // 给myIterator对象添加Symbol.iterator属性，同时在返回的next方法中，添加两个属性，既让它成为了一个可迭代对象。
        let self = this;
        let arr = Object.keys(self);
        let index = 0;
        return {  //指针
            next() {
                return index < arr.length ? {value: self[arr[index++]], done: false} : {value: undefined, done: true};
            }
        }
    }

    var it = myIterator[Symbol.iterator](); 
    // Symbol.Iterator属性  本质上就是一个函数，执行这个函数，会返回一个指针对象

    it.next();

    // 使用for...of遍历对象
    for(const i of myIterator) {
        console.log(i);
    }
 
    //写法二：也可以用字面量的方式来实现 for...of 循环遍历对象
    let obj = {
        data:[1,2,3,4],
        [Symbol.iterator](){
            let index = 0
            let that = this
            return {
                next(){
                    if(index<that.data.length){
                        return {
                            value:that.data[index++],
                            done:false
                        }
                    }else{
                        return {
                            value:undefined,
                            done:true
                        }
                    }
                }
            }
        }
    }

    for (let i of obj ){
        console.log(i);
    }