技术

JS近期心得

这个月接到了一个需求，使用HBuilder开发一个app，里面遇到了一些之前没有过的问题，记录一下。

前台由于使用了内置的mui，所以一开始的计划是，抛弃jquery。但实际使用下来，发现mui的功能太少了，于是想到打包一个部分功能的jquery来用，从git上pull到本地，按照git上说的输入命令。

1
grunt custom:-ajax,-event

这样就排除了mui已经有了的ajax和event功能，打包之后大小只有77K，很不错。

然后在页面数据获取的时候还存在多个异步请求同时发出，但loading必须要在所有请求都结束后再关闭。

之前的做法，是每个请求结束后，都将一个状态值加1，然后再声明一个计时器，不断检测状态值是否等于所有的请求数。这次采用了另一种做法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajaxNextRegister(){
  var
  args = arguments,
  count = 0;
  function nextTime(){
    count++;
    if(count < args.length){
      if(args[count] && isFunction(args[count])){
        args[count](nextTime);
      }
    }
  }
  if(args[count] && isFunction(args[count])){
    args[count](nextTime);
  }
}

使用一个方法，将所有的请求串联起来，依次执行，同时还需要所有的方法实现next的调用。
1
2
3
4
5
6
7
8
9
10
11
function makeIndexUserData(next){
  ...
  ...
  //ajax
  runFunc(next)
}
function runFunc(func){
  if(isFunction(func)){
    func();
  }
}

实际使用时只需要把所有要执行的异步方法都传进去就可以了。
1
2
3
4
5
6
ajaxNextRegister(
  makeIndexUserData,
  makeIndexNoticeData,
  makeUserCoinData,
  makeFriendList
)

还有一个判断对象类型的小技巧，之前代码里面也出现，比如isFunction之类的。
1
2
3
4
5
(["Object","Array","Function","String","Number","Boolean","Null"]).forEach(function(item){
  (window)["is" + item] = function(obj){
    return item === Object.prototype.toString.call(obj).slice(8, -1);
  };
});