青云笔试题的思路

青云笔试题的思路

step1: require.js构建目录，设计模块，理清依赖关系

小的项目就没必要用node npm构建了，这里使用require.js进行模块化开发是挺合适的；
我画了一张图处理依赖关系：

step2：mock数据，劫持Ajax

根据青云提供的API中返回值类型，将其作为数据模版，使用mock.js进行数据模拟，生成大量符合要求的随机数据，然后拦截并模拟 ajax 请求；

mock.js示例：

var data = Mock.mock({    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素    'list|1-10': [{        // 属性 id 是一个自增数，起始值为 1，每次增 1        'id|+1': 1    }]})

step3: 发送Ajax请求，解析数据

前端编写Ajax请求，获取data数据，提取含有70-100台主机及相关描述的数组hostList，其格式如下：

[{      cup :"2核2G",      hostId: "i-yl9w1xnt",      instance_class : "高性能型",      security_group_id: "sg-fon6smsm",      setTime:"3个月前",      status:"running" },{      cup: "1核4G",      hostId:"i-ue2v7ikj",      instance_class:"高性能型",      security_group_id:"sg-pgj9qibq",      setTime:"2个月前",      status:"running" },...]

step4: 写HTML结构和简单样式

首先把静态的结构写在index.html中，本项目对应的是控制条中的刷新、上一页、下一页等功能，界面如图：

step5: 根据数据的长度，动态拼接HTML

因为列表展示的数量是根据后端数据不同而动态更新的，所以不能写在静态的index.html文件中，而是通过js字符串拼接的方式动态生成HTML，最终附加到静态的根节点下；
代码示例如下：

// 遍历拼接表内的内容 for (var i = (pageNumber - 1) * 20; i < 20 * pageNumber; i ++){     // 如果列表不满20个，退出循环；      if (!hostList[i]) break;      tableContentHtml = tableContentHtml + "<tr>" +                                    "<td>" + hostList[i].hostId + "</td>" +                                    "<td>运行中</td>" +                                    "<td>" + hostList[i].instance_class + "</td>" +                                    "<td>" + hostList[i].cup + "</td>" +                                    "<td>" + hostList[i].security_group_id +"</td>" +                                    "<td>" + hostList[i].setTime +"</td>"                                    "</tr>";         }

step6: 刷新数据、上下翻页、等业务逻辑的编写

业务逻辑没有特定的写法，细节实现的化可以从减少回流、重绘方面提升性能；
在这个业务中，其实我觉得比较有意思的点是刷新数据，其实当点击刷新按钮时，触发了第二次Ajax请求，那么，上一次获取的数据都要清空、上一次绘制的DOM节点也要移除、还有绑定在元素上的事件函数也应该清楚，这里使用了jquery的$el.unbind()方法；

step7: 样式美化，添加svg字体图标