京东投票

京东投票

1. 打开项目

   • ‘$ yarn install / $ npm install’ : 跑环境（把项目依赖的插件进行安装）

   • ‘$ node admin.js’：启动服务（把自己的计算机作为服务器，创建一个指定端口的服务，来管理后台程序 - 后台程序会根据客户端请求的需求，把对应的数据和业务逻辑实现）

2. API.TXT :API接口文档

   • 真实项目中，后台开发人员会给前端开发人员提供一个技术文档(接口文档),文档中描述了前端需要调取后台的某些接口实现的某些功能，并且标注了请求的地址、请求方式、传递给服务器的内容、以及服务器返回的结果等信息

   • 这就是前后端分离：前端开发者不需要考虑后台是基于什么技术实现的，我们只需要按照API文档中提供的信息，去发送请求传递内容即可，这样就可以获取我们需要的数据（API文档就是约束前端和后台的规范文档）

面试题

有一万条数据，想让其绑定到页面中，怎么做好一些？

• 文档碎片：遍历数据，把对应的数据和结构都添加到文档碎片中，在把文档碎片扎入到页面中（优势：减少了DOM的回流 - 基于字符串拼接也可以）
• 虚拟DOM：类似于REACT框架，基于虚拟DOM以及DIFF算法，也可以优化数据绑定
• 本质来说，怎么做都不是最好的，我们不应该出现1万条这种大数据量的绑定
  • 从服务器获取1万条消耗很多时间
  • 页面渲染1万条也会消耗很多时间

异步数据加载（分页加载）

• 需要服务器端做支持
  • 客户端向服务器端发送一个GET请求，传递给服务器：每页展示的条数，当前要展示的页数等信息，例如传递的是?limit=20&page=1(每页展示20条，当前展示第一页)
  • 服务器端接收到请求后，在所有的数据中把第一页的20条数据返回给客户端
  • 当用户下拉加载更多或者点击第二页等页码按钮等的时候，重复第一步，把对应要展示的页码传递给服务器，服务器返回对应页码中的数据

第一步：跑通数据获取的逻辑

axios.defaults.baseURL = '';
let matchRender = (function($){
    //定位页面元素
    let $userList = $('.userList'),
    $wrapper = $userList.find('ul'),
    $tip = $userList.find('.tip')

    let limit = 10,//每页展示的数量
    page = 1,//当前是第几页
    search = '';//搜索的内容

    //query - data获取数据
    let queryData = function queryData(){
        axios.get('/getMatchList',{
            params:{
                limit,
                page,
                search
            }
        }).then(result => {

            
        }).then(bindHTML)
    };

    //数据绑定
    let bindHTML = function bindHTML(result){
        let {code,list = []} = result;
        if(parseFloat(code) !== 0 ){
            //获取数据失败 - 这个失败不是服务器返回失败，而是获取的数据不是我们最终想要的而已，非状态