ES6内置对象Proxy代理数据demo

代码语言：javascript复制

首先在页面上定义几个按钮并绑定点击事件

代码语言：javascript复制

<button onclick="asc()">升序</button>
<button onclick="desc()">降序</button>
<button onclick="reset()">重置</button>

需要网络请求数据这里引入jquery

代码语言：javascript复制

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

入口函数进行网络请求并对请求的数据进行代理

代码语言：javascript复制

let proxy

window.onload = async function() {
  const data = await $.ajax({type: "GET", url: ""})
  proxy = new Proxy({}, {
    get(target, key) {
      if(key === 'asc') { //升序排序
        return [].concat(data).sort((a, b) => a.name > b.name ? 1 : -1)
      } else if(key === 'desc') { //降序排序
        return [].concat(data).sort((a,b) => b.name > a.name ? 1 : -1)
      } else { //默认
		return data
      }
    }
  })
}

function asc() {
  let a = proxy.asc
  console.log(a)
}

function desc() {
  let b = proxy.desc
}

function reset() {
  let c = proxy.default
}

代码语言：javascript复制

点击按钮触发函数后执行proxy.asc会触发代理对象的get函数，返回的就是处理完成的数据

jquery 代理 函数 数据 网络

0 人点赞