项目心得(三)

前两天做了项目中前台的几个功能以及对接的部分,对于 angularjs 这门语言有了更好的理解.在这里做下总结.

功能简述

这次实现的功能有三个,数据的新增,编辑以及对所有数据以列表形式显示.其中新增和编辑两部分都是直接表单提交,所用的前台界面完全一样.

遇到的问题

由于前台的有一部分代码已经有了,所以只需在这个基础上做些修改.修改中出现了许多问题.解决这些问题的同时也加深了自己对 angularjs 的理解.

变量污染问题

先看一段代码:

self.load = function () {
    var standardDevice = {id: $stateParams.standardDeviceId};
    StandardDeviceCheckDetailService.pageAllByStandardDevice(self.generateQueryParams(), standardDevice, function (data) {
    $scope.data = data;
    });
};

这段代码的功能是加载页面信息,通过standardDevice来查询对应的信息,然后回调函数会返回一个data,也就是我们要显示的所有信息,它应该是一个json对象.

可以看到,我们这里用$scope.data = data来将返回的数据赋值给当前的域$scope.但是这样的写法存在一些问题.会出现如下的报错.

这个报错的原因就是产生了变量污染,我们在子scope中变量名用 data 来表示,在父scope中变量名也用 data,那么我们在获取信息的时候就不知道当前要获取的data是子scope中的还是父scope中的,这就产生了歧义.

解决办法

我们知道了问题的原因,这个问题就好解决了.既然污染产生的原因是变量名称相同,那我们在每个scope定义的时候都用不同的变量名来定义就可以了.

 self.load = self.reload = function () {
    var standardDevice = {id: $stateParams.standardDeviceId};
    StandardDeviceCheckDetailService.pageAllByStandardDevice(self.generateQueryParams(), standardDevice, function (data) {
    $scope.checkDetailList = data;
    });
};

路径绑定id问题

还是先看一段代码:

var id = $stateParams.id;
var url = '/StandardDeviceCheckDetail/' + id;
$http.get(url)
    .then(function success(response) {
    	...
    }, function error(response) {
    	...
	});

这段代码是用来发起http请求的,以连接后台.通过id获取对应的对象.可以看到,我在开始定义了一个变量id,而这个id是通过路由参数获取的,然后又将该id拼接到路由中去.

这样的定义变量方式会产生一个隐患.试想一下,我们的页面逐层深入,路由中就会拼接许多个都叫id的id,那么,如果我想获取一个id,我该怎么获取呢?

所以,变量显然是不能这么定义的.

解决办法

var checkDetailId = $stateParams.id;
var url = '/StandardDeviceCheckDetail/' + checkDetailId;
$http.get(url)
    .then(function success(response) {
    	...
    }, function error(response) {
        ...
	});

根据不同的页面为不同的id定义不同的名称.

总结

在变量定义的格式上,我们不能一味地只追求代码的复用,这样的复用只会给我们带来更大的工作量. 在适当的位置做用适当的变量名称,做好区分 , 不仅能让我们快速直接的找到我们想要的信息,在以后的维护上也会减少很多查错的时间.