20160202 URL编码 && 生成随机字符串 && parseInt(string, radix) && addEventListener 和 attachEvent

URL编码

百分号编码(Percent-encoding), 也称作URL编码(URL encoding), 是特定上下文的统一资源定位符 (URL)的编码机制. 实际上也适用于统一资源标志符(URI)的编码。也用于为”application/x-www-form-urlencoded” MIME准备数据, 因为它用于通过HTTP的请求操作(request)提交HTML表单数据。
对 url 进行 encode 将编码变为 url 编码,已符合 url 规范。
url 中未保留字符都要进行 url 编码,如果保留字符用于其他目的,也要进行 url 编码。
保留字符有:! * ' ( ) ; : @ & = + $ , / ? # [ ]

生成随机字符串

我写的:

function getRandom(count) {
  var str = Math.random().toString(36).substring(2, 2 + count);
  console.log(str);
}
getRandom(8);

1.用 Math.random 生成 [0, 1) 之间的随机数
2.将随机数转换为字符串, 用 0-9 和 a-z 编码,注意 toString() 里的数字就像是代表进制,2 就是用 0 和 1 编码,8就是用 0-7 编码,16就是用 0-9 和 a-f 编码,这里 36 就是用 0-9 和 a-z 编码,就是要让生成的字符串中包含数字和所有的小写字母。从而生成可能带有所有字母的随机数。
3.将生成的随机字符串截取指定位数,从第二位 ( 小数点后面一位开始截取 ) ,截取输入的位数

可能出现的问题:用 toString() 生成的数字小数部分位数比想要截的位数还少,最后默认截到末尾,比想要的位数少。

更好的方法:

function getRandom(count) {
  var str = "";
  for(var i = 0;i < count;i++){
    str += Math.random().toString(36).charAt(Math.floor(Math.random()*5+2))
  }
  console.log(str);
}
getRandom(8);

1.前两步不变
2.最外层加一个循环,每次截取一个字符,截取随机位置的字符,这里是在 [2, 7) 中间随机选一个位置截取字符,不知道为什么是 [2, 7) …,会不会连第 6 位也没有…

老大写的:

export function getRandomStr(count: number = 8): string {
        var str: string = "";
        for (var i = 0; i < count; i++) {
            str += (Math.random() * 10).toString(36).charAt(parseInt(((Math.random() * 5) + 2).toString()));
        }
        return str;
    };

不知道为什么先转换为字符串再用 parseInt() 取整…

parseInt(string, radix)

将字符串转换为整数。
默认转换为 10 进制数,指定的 radix 规定把字符串看做多少进制的,然后转换为 10 进制整数。

可以用正则表达式解析一个数是不是整型

filterInt = function (value) {
  if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
    return Number(value);
  return NaN;
}

console.log(filterInt('421'));               // 421
console.log(filterInt('-421'));              // -421
console.log(filterInt('+421'));              // 421
console.log(filterInt('Infinity'));          // Infinity
console.log(filterInt('421e+0'));            // NaN
console.log(filterInt('421hop'));            // NaN
console.log(filterInt('hop1.61803398875'));  // NaN
console.log(filterInt('1.61803398875'));     // NaN

addEventListener 和 attachEvent

老大写的:

/**
  * 兼容IE的原生添加事件方法
  * @param {EventTarget} element DOM对象
  * @param {string} eventType 事件名称
  * @param {Function} listener 事件响应函数
  * @param {boolean} useCapture 是否为捕获模式,默认为false
  */
  export function addEvent(element: EventTarget, eventType: string, listener: (e?: Event) => any, useCapture: boolean = false) {
    var w3cType: string = eventType.replace(/^on/i, "");
    var ieType: string = "on" + w3cType;
    if (document["addEventListener"] != undefined) {
       // addEventListener 用于 w3c 中添加方法,可以设置捕获和冒泡模式,方法之前不用加 on
       element.addEventListener(w3cType, listener, useCapture);
    } else {
       // attactEvent 用于在 ie 中添加方法,需要加 on
       (<any>element).attachEvent(ieType, listener);
    }
}

我写的:

function addEvent(element, eventType, listener, userCapture) {
    // 正则表达式 i 的意思是 忽略大小写
    var w3cType = eventType.repalce(/^on/i,"");
    var ieType = "on" + eventType;
    if (document["addEventListener"] != undefined) {
        element.addEventListener(w3cType, listener, userCapture);
    } else {
        element.attachEvent(ieType, listener);
    }
}