[武汉|结业弟子]JS-万晶|2020年04月12日的日报-技能树.IT修真院

发表于： 2020-04-12 23:47:27

1 1822

今天完成的事情：今天学到了一些js应用的小技巧以及回顾了一些以前的知识
明天计划的事情：继续学习angular框架的内容以及回顾一下原生js的技巧应用
遇到的问题：实际操作还是不太熟练逻辑思维还是需要锻炼练习
收获：今天也学到了几个好用的小技巧

时间格式化之后，前面个位数少零处理

处理起来有很多方法，但是如下方法比较简单，也有效一些，记录一下！

function paddingLeftZero(str) {
      return ("00" + str).substr(str.length);
    }

从整数中，随机选取一个数值

有如下公式，非常有用，可以让我们随机显示某些名人名言或者新闻事件！

值=Math.floor(Math.random()*可能值的总数+第一个可能的值)

例如：要想选择一个介于2到10之间的值，我们可以这么写

var num=Math.floor(Math.random()*9+2)

记，原始运算符始终比函数调用要高效。使用VanillaJS。

举例来说，不使用：

var min = Math.min(a,b);

A.push(v);

而用：

var min = a < b ? a b;

A[A.length] = v;

处理WebSocket超时

通常，在一个WebSocket连接创建之后，如果你没有活动的话，服务器会在30秒之后断开（time out）你的连接。防火墙也会在一段时间不活动之后断开连接。

为了防止超时的问题，你可能需要间歇性地向服务器端发送空消息。要这样做的话，你可以在你的代码里添加下面的两个函数：一个用来保持连接，另一个用来取消连接的保持。通过这个技巧，你可以控制超时的问题。

使用一个 timerID：

var timerID = 0;
    function keepAlive() {
      var timeout = 15000;
      if (webSocket.readyState == webSocket.OPEN) {
        webSocket.send('');
      }
      timerId = setTimeout(keepAlive, timeout);
    }
    function cancelKeepAlive() {
      if (timerId) {
        cancelTimeout(timerId);
      }
    }

keepAlive()方法应该被添加在webSOcket连接的 onOpen() 方法的最后，而 cancelKeepAlive() 添加在 onClose() 方法的最后。

为 XMLHttpRequests 设置超时。

在一个XHR请求占用很长时间后（比如由于网络问题），你可能需要中止这次请求，那么你可以对XHR调用配套使用 setTimeout()。

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (this.readyState == 4) {
        clearTimeout(timeout);
        // do something with response data
      }
    }
    var timeout = setTimeout(function () {
      xhr.abort(); // call error callback
    }, 60 * 1000 /* timeout after a minute */);
    xhr.open('GET', url, true);

    xhr.send();

此外，一般应该完全避免同步的Ajax请求。

避免在循环内部使用 try-catch-finally

在运行时，每次当 catch 从句被执行的时候，被捕获的异常对象会赋值给一个变量，而在 try-catch-finally 结构中，每次都会新建这个变量。

避免这样的写法：

var object = ['foo', 'bar'], i;
    for (i = 0, len = object.length; i < len; i++) {
      try {
        // do something that throws an exception
      }
      catch (e) {
        // handle exception
      }
    }

而是用

 var object = ['foo', 'bar'], i;
    try {
      for (i = 0, len = object.length; i < len; i++) {
        // do something that throws an exception
      }
    }
    catch (e) {
      // handle exception
    }

一个HTML转义函数

function escapeHTML(text) {
      var replacements = {
        "<": "<", ">": ">", "&": "&", "\"": """};
    return text.replace(/[<>&"]/g, function (character) {
          return replacements[character];
        });
      }

为创建的对象指定prototype对象

写一个函数来创建一个以指定参数作为prototype的对象是有可能：

function clone(object) {
      function OneShotConstructor() { };
      OneShotConstructor.prototype = object;
      return new OneShotConstructor();
    }
    clone(Array).prototype;  // []

在判断数值范围时使用 switch/case

在下面的这种情况，使用 switch/case 判断数值范围的时候是合理的：

function getCategory(age) {
      var category = "";
      switch (true) {
        case isNaN(age):
          category = "not an age";
          break;
        case (age >= 50):
          category = "Old";
          break;
        case (age <= 20):
          category = "Baby";
          break;
        default:
          category = "Young";
          break;
      };
      return category;
    }
    getCategory(5);  // will return "Baby"

使用 switch/case 语句，而不是一长串的 if/else

在判断情况大于2种的时候，使用 switch/case 更高效，而且更优雅（更易于组织代码）。但在判断的情况超过10种的时候不要使用 switch/case。

在调用 setTimeout() 和 setInterval() 的时候传入函数，而不是字符串。

如果你将字符串传递给 setTimeout() 或者 setInterval()，这个字符串将被如使用 eval 一样被解析，这个是非常耗时的。

不要使用：

setInterval('doSomethingPeriodically()', 1000);

setTimeOut('doSomethingAfterFiveSeconds()', 5000)

而用：

setInterval(doSomethingPeriodically, 1000);

setTimeOut(doSomethingAfterFiveSeconds, 5000);

避免使用 with()

使用 with() 会插入一个全局变量。因此，同名的变量会被覆盖值而引起不必要的麻烦。

避免使用 for-in 来遍历一个数组

避免使用这样的方式：

var sum = 0;
    for (var i in arrayNumbers) {
      sum += arrayNumbers[i];
    }

更好的方式是：

var sum = 0;
    for (var i = 0, len = arrayNumbers.length; i < len; i++) {
      sum += arrayNumbers[i];
    }

附加的好处是，i 和 len 两个变量的取值都只执行了一次，会比下面的方式更高效：

for (var i = 0; i < arrayNumbers.length; i++)

因为arrayNumbers.length每次循环的时候都会被计算。

基于JSON的序列化和反序列化（serialization and deserialization）

var person = { name: 'Saad', age: 26, department: { ID: 15, name: "R&D" } };
    var stringFromPerson = JSON.stringify(person);
    /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
    var personFromString = JSON.parse(stringFromPerson);
    /* personFromString is equal to person object  */

避免数组中的负数索引（negative indexes）

var numbersArray = [1,2,3,4,5];

var from = numbersArray.indexOf("foo") ; // from is equal to -1

numbersArray.splice(from,2); // will return [5]

确保调用 indexOf 时的参数不是负数。

在调用 isFinite()之前验证参数

isFinite(0 / 0); // false
    isFinite("foo"); // false
    isFinite("10"); // true
    isFinite(10);   // true
    isFinite(undifined);  // false
    isFinite();   // false
    isFinite(null);  // true  !!!

缓存需要计算和查询（calculation or querying）的变量

对于jQuery选择器，我们最好缓存这些DOM元素。

var navright = document.querySelector('#right');
    var navleft = document.querySelector('#left');
    var navup = document.querySelector('#up');
    var navdown = document.querySelector('#down');

逗号操作符

var a = 0;
    var b = (a++, 99);
    console.log(a);  // a will be equal to 1
    console.log(b);  // b is equal to 99
  </body >

用for-in遍历一个对象内部属性的时候注意检查属性

下面的代码片段能够避免在遍历一个对象属性的时候访问原型的属性

for (var name in object) {
      if (object.hasOwnProperty(name)) {
        // do something with name
      }
    }

浮点数问题

0.1 + 0.2 === 0.3 // is false

9007199254740992 + 1 // is equal to 9007199254740992

9007199254740992 + 2 // is equal to 9007199254740994

四舍五入一个数字，保留N位小数

var num =2.443242342;

num = num.toFixed(4); // num will be equal to 2.4432

明天继续练习angular框架的使用还是回顾之前的知识

返回列表

【任务1】 [武汉|结业弟子]JS-万晶 | 2020年04月12日 的日报 中品

评论

分享到

【任务1】 [武汉|结业弟子]JS-万晶 | 2020年04月12日的日报中品