ES6 —项目综合实战（完结篇）

头像
彬哥头发多
    阅读 10 分钟
    42

    上一篇通过TodoList的练习，目的是为了让大家理解ES6中各种新特性的实际用途。

    最好的学习方法就是实践，所以这节课结合实际项目，来更好的理解和掌握ES6的用途和使用场景，达到灵活运用的目的。

    1、模块化

    以项目中普遍会有的config.js文件为例，实现export导出：

    const githubURL = "OUR GITHUB URL HERE";
const staticServer = "http://xxx.com";
const testsPath = `zaz-${type}-${name}/tests/index.htm?zaz[env]=tests`;
const name = "stalker";
const type = "mod";
const version = "0.0.1";
const state = "ok";
const description = "JavaScript API to deal with user data";
let globalpkg = null; 
const config = {
  _static: {
  name,
  version,
  state,
  description,
  docs: `${githubURL}/pages/terra/zaz-${type}-${name}`,
  source: `${githubURL}/Terra/zaz-${type}-${name}`,
  tests: `${staticServer}/fe/${testsPath}`,
  dependencies: ['mod.wilson']
  }
};
export default config;

    再在其他文件中通过import实现导入：

    import config from './config';//导入ES6模块
import { globalpkg } from './config';
import factory from './factory';

 zaz.use((pkg) => {
   "use strict";
    config.dynamic.globalpkg = pkg;
    pkg.require(['modFactory'], (modFactory) => {
        modFactory.create(pkg.utils.deepMerge(config._static, factory));
    });
 });

    使用ES6统一的模块化规范，可以提高代码的可读性，更易于维护。

    2、数组操作

    import React,{Component} from 'react';
class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    const names = ['Alice', 'Emily', 'Kate'];
    return (
      <div>
      {
         let p=document.querySelectorAll('p');
           let pArr=Array.from(p);
           pArr.forEach(function(item){
           console.log(item.textContent);
         });
           Array.from(pArr,function(item){return item + 'ES6'}); 
      }
      </div>
    );
  }
}

    使用Array.from 同时对每个元素进行操作。

    3、模板字符串

    常见的使用场景便是写组件模板时使用：

    $('#result').append(`
   There are <b>${basket.count}</b> items
    in your basket, <em>${basket.onSale}</em>
   are on sale!
 `);

    可以在模板字符串中任意的嵌入变量， 调用函数等。

    图片描述

    4、解构与扩展操作符

    扩展操作符在父组件给子组件传递一批属性的情境中更为方便。

    下面的例子把className以外的所有属性传递给div标签

    class AutoloadingPostsGrid extends React.Component {
    render() {
        var {
            className,
            ...others,  // contains all properties of this.props except for className
        } = this.props;
        return (
            <div className={className}>
                <PostsGrid {...others} />
                <button onClick={this.handleLoadMoreClick}>Load more</button>
            </div>
        );
    }
}

    使用react开发最常见的问题就是父组件要传给子组件的属性较多时比较麻烦

    class MyComponent extends React.Component{
//假设MyComponent已经有了name和age属性
  render(){
    return (
      <SubComponent name={this.props.name} age={this.props.age}/>
     )
  }
}

    使用扩展操作符可以变得很简单

    class MyComponent extends React.Component{
//假设MyComponent已经有了name和age属性
  render(){
    return (
      <SubComponent {...this.props}/>
     )
  }
}

    上述方式是将父组件的所有属性都传递下去，如果这其中有些属性不需要传递呢？也很简单

    class MyComponent extends React.Component{
//假设MyComponent有很多属性，而name属性不需要传递给子组件
  var {name,...MyProps}=this.props;
  render(){
    return (
      <SubComponent {...Myprops}/>
     )
  }
}

    上述方法最常用的场景就是父组件的class属性需要被单独提取出来作为某个元素的class，而其他属性需要传递给子组件。

    在构建通用容器时，扩展属性会非常有用。

    function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

    5、Promise

    场景一 : 所有图片加载完再显示在页面上，避免页面闪动。

      function loadImg(src) {
    return new Promise((resolve, reject) => {
       let img = document.createElement('img');
       img.src = src;
       img.onload = function () {
         resolve(img)
       }
       img.onerror = function (err) {
         reject(err)
       }
    })
  }

  function showImgs(imgs) {
    imgs.forEach(function(img){
      document.body.appendChild(img);
    })
  }

  Promise.all([
    loadImg('https://example.com/pic1')
    loadImg('https://example.com/pic2')
    loadImg('https://example.com/pic3')
  ]).then(showImgs)

    场景二: 多个资源中只要加载了其中一种就可。

    {
  function loadImg(src) {
    return new Promise((resolve, reject) => {
       let img = document.createElement('img');
       img.src = src;
       img.onload = function () {
         resolve(img)
       }
       img.onerror = function (err) {
         reject(err)
       }
    })
  }

  function showImgs(img) {
    document.body.appendChild(img);
  }

  Promise.race([
    loadImg('https://example.com/pic1')
    loadImg('https://example.com/pic2')
    loadImg('https://example.com/pic3')
  ]).then(showImgs)
}

    6、Generator

    在异步编程的解决方案中，Generator比Promise更高级些。

    使用场景：抽奖次数逻辑控制、长轮询（服务器请求报错再次请求, 定时发送请求）

      // 以前控制次数是在全局中申明，既不安全又影响性能
  let draw = function (count) {
    // 具体抽奖逻辑
    console.info(`剩余${count}次`)
  }

  let residue = function* (count) {
    while (count > 0) {
      count--
      yield draw(count)
    }
  }

  let start = residue(5)
  let btn = document.createElement('button')
  btn.id='start'
  btn.textContent = '抽奖'
  document.body.appendChild(btn);
  document.getElementById('start').addEventListener('click', function() {
    start.next()
  }, false)
}
{
  // 长轮询
  let ajax = function* () {
    yield new Promise(function(resolve, reject) {
      setTimeout(() => {
        resolve({code: 0})
      }, 200);
    })
  }

  let pull = function () {
    let generator = ajax()
    let step = generator.next()
    step.value.then(function(d){
      if (d.code !=0 ) {
        setTimeout(() => {
          console.info('wait')
          pull()
        }, 100);
      } else {
        console.info(d)
      }
    })
  }

  pull()

    通过下面这张流程图，再加深下对Generator的理解。

    图片描述

    7、await

    在项目中，有时会出现需要同时依赖多个接口，而且必须在这几个请求都处理完后，才能开始处理数据的情况。我们可以在一个 async函数 中写多个await 语法的请求，然后逐个处理，但是这样效率太低了。

    多个请求是可以并行执行的。这时就可以结合 Promise.all 高级方法来处理，可以同时发起多个请求，然后统一处理接口返回数据。

    为了方便，这里演示同时请求2个url，多个的也是一样的， 如下：

    export default {
  name: 'hello1',
  data () {
    return {
      msg: 'Hello Vue.js',
      info: {},
      user1: {},
      user2: {}
    }
  },
  methods: {
    async getUserInfo () {
      try {
        const res = await this.$http.get('http://aaa.com/userinfo');
        this.info = res.data
      } catch (e) {
        console.log(e);
      }
    },
    async get2UserInfo () {
      try {
        const res = await Promise.all([
          this.$http.get('http://aaa.com/userinfo1'),
          this.$http.get('http://aaa.com/userinfo2'),
        ])
        this.user1 = res[0].data;
        this.user2 = res[1].data;
      } catch (e) {
        console.log(e);
      }
    }
  },
  created () {
    this.getUserInfo();
    this.get2UserInfo();
  }
}

    再次运行项目，可以发现页面在初始化的时候同时发起了3个请求，并正常渲染出了接口数据。

    注意：这里的 Promise.all() 的参数是一个函数执行队列，它们会同时发起，然后都请求成功后，会将队列的每个任务的结果组装成一个结果数据，然后返回。

    图片描述
    8、类操作

    先实战创建一个List类

    import Utils from "./Utils.js";
class List {
    constructor(title = "", items = [], isEditable = true, id = "") {
        this.id = (id) ? id : Utils.guid();
        this.title = title;
        this.items = items;
        this.isEditable = isEditable;
    }
    render() {
        var html = `<div class="list" data-id="${this.id}" data-iseditable="${this.isEditable}">
                  <h2 class="list-title">${this.title}</h2>
                  ${(this.isEditable) ? "<div class='btn delete-list danger' data-action='delete-list'>X</div>" : ""}
                  <ul class="items">`;
        this.items.forEach(function(item) {
            html += item.render();
        });
        html += `
                </ul>
                ${(this.isEditable) ? "<div class='btn add-item success' data-action='add-item'>Add Item</div>" : ""}
            </div>`;
        return html;
    }
    getItemById(id) {
        let item = this.items.filter(i => i.id === id);
        return ((item.length) ? item[0] : null);
    }
    add(item) {
        this.items.push(item);
    }
    remove(item) {
        this.items = this.items.filter(i => (i.id !== item.id));
    }
}
export default List;

    在app.js中创建List实例：

    import List from "./List.js";
import Utils from "./Utils.js";
import Status from "./Status.js";
class App {
    constructor(lists = []) {
        this.lists = lists;
    }
    getDueItems() {
        let dueItems = [];
        this.lists.forEach(function(list) {
            list.items.forEach(function(item) {
                if (item.date && item.status === Status.PENDING && Utils.dateDiffInDays(new Date(item.date), new Date()) > 0) {
                    dueItems.push(item);
                }
            });
        });
        return dueItems;
    }
    getItemById(id) {
        const filterById = (function filterById(id1) {
            return function(listItem) {
                return listItem.id === id1;
            };
        }(id));
        for (let i = 0; i < this.lists.length; i++) {
            let item = this.lists[i].items.filter(filterById);
            if (item.length) {
                return item[0];
            }
        }
        return null;
    }
    getListById(id) {
        let list = this.lists.filter(l => l.id === id);
        return ((list.length) ? list[0] : null);
    }
    render() {
        let pastDueList = new List("Past Due Date", this.getDueItems(), false);
        let html = `<div class="app">
            <div class="btn add-list success" data-action="add-list">[+] Add List</div>
          `;
        this.lists.forEach(function(list) {
            html += list.render();
        });
        html += pastDueList.render();
        html += "</div>";
        return html;
    }
    add(list) {
        this.lists.push(list);
    }
    remove(list) {
        this.lists = this.lists.filter(l => (l.id !== list.id));
    }
}
export default App;

    ES6中的类能让我们可以用更简明的语法实现继承，也使代码的可读性变得更高。

    9、Proxy

    Proxy可以让我们根据不同的业务逻辑进行相应的处理， 对原对象进行映射，生成新的对象，操作新对象的同时通过一定的规则修改原对象。

      // 先定义一个函数
  function validator(target,validator) {
    return new Proxy(target, {
      _validator: validator,
      set(targer,key,value,proxy){
        if (targer.hasOwnProperty(key)) {
          let va = this._validator[key];
          if (!!va(value)) {
            return Reflect.set(target,key,value,proxy)
          }else {
            throw Error(`不能设置${key}到${value}`)
          }
        }else {
          throw Error(`${key} 不存在`)
        }
      }
    })
  }
  const personValidator={
    name(val){
      return typeof val === 'string'
    },
    age(val){
      return typeof val === 'number' && val >18
    }
  }

  class Person{
    constructor(name,age) {
      this.name = name
      this.age = age
      return validator(this, personValidator)
    }
  }

  const person  = new Person('lilei', 30)
  console.info(person) // Proxy {name: "lilei", age: 30}
  // person.name = 48 // Uncaught Error: 不能设置name到48
  // console.info(person)
  person.name = 'han mei mei'
  console.info(person) // Proxy {name: "han mei mei", age: 30}

    点评：使用Proxy进行数据校验，将对象和验证分离开，便于后期代码的维护。

    总结

    本篇主要通过实际项目中的例子回顾ES6的知识点，帮大家梳理重点和难点。学会ES6语法不难，活学活用到项目才是关键。

    希望各位小伙伴能充分认识到ES6的强大，通过在实际工作中不断地使用ES6，提升代码质量和工作效率，这样就能多一点喝茶看电影的时间。

    最后祝大家都能成为别人眼中的程序猿大牛，O(∩_∩)O哈哈~
    图片描述

    javascriptecmascript-6项目实战前端
    彬哥头发多
    4.3k 声望1.4k 粉丝

    一个会写代码的职业规划师，2本职业规划书作者。争取未来1年帮100个朋友薪资上涨50%。

    « 上一篇
    Gatsby极速入门—添加上一页下一页功能（完结篇）
    下一篇 »
    Vue实战—路由轻松设置vue-router（3）

    引用和评论

    推荐阅读
    头像
    vue3公司自用项目实战入门（vue3+router4+antdv+pinia实现）

    彬哥头发多赞 2阅读 3.4k评论 1

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新