高大上Web前端开发环境

August 29, 2014

Reading time ~2 minutes

起因

前几天做阿里笔试题,最后一个问题是:在前端开发中,经常会遇到调用后端接口的情况,如果我们不想依赖后台的开发环境,比如:本地搭建熟悉的环境,模拟AJAX,说出你的解决方案 记得我当时是这样答的:

若java

1
2
1.使用tomcat环境
2.使用selvet
1
2
3
4
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	resp.getOutputStream().write("{status:'ok',value:'11'}".getBytes("UTF-8"));
	resp.setContentType("text/json; charset=UTF-8");
}

若php

1.使用wamp 环境
2.后端PHP构造json数据

1
2
3
echo "{status:'ok',value:'11'}";
//或者
echo json_encode($result);//$result 是数组

若对数据没有动态提取的要求,则直接放大xxx.json里面

json格式为

1
{'status':'ok','value':'11'}
  • 前台使用AJAX请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function ajax(url, success, fail){
    // 1. 创建连接
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 2. 连接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }
}
//请求到数据
var url =  'json.php'...其他地址
ajax(url, function(data) {
    data.status
})

后来自己又想了一下,其实这道题就看你平时前端开发的环境是怎样的,因为我是JAVA出生,所以一想就想到了启动一个tomcat来启动一个服务器,上面开启一个sevlet来输出json数据。 总感觉这样太“重量级”了,在网上查了一查,才知道了阿里真实的意图–。

先不说阿里意图是什么,先看看现在高大上的前端开发环境:

  • 代码编辑工具
  • 断点调试工具
  • 版本管理工具
  • 代码合并和混搅工具
  • 依赖管理工具
  • 单元测试工具
  • 集成测试工具

你没看错,这不是后端开发环境,这竟然是前端的开发环境!

下面,我们就来说说这些工具有哪些,在JAVA里面对应那些工具

未完待续…