我的JS笔记

/\d/ // 数字
/\w/ // 字母/数字/下划线
/\b/ // 单词边界
/\s/ // 空白

/a*/ // 闭包，0-n个a
/a+/ // 非零闭包，1-n个a
/a?/ // 0或1个a
/a{n}/   // n个a
/a{n,m}/ // n-m个a
/a{n,}/  // 最少n个

/a|b/      // a或b
/a[qwe]c/  // aqc/awc/aec
/[a-z]/    // a,b,c,...z
/[a-zA-Z]/ // a-z或A-Z
/[12-49]/  // 1或2-4或9 (1, 2, 3, 4, 9)
/a[^ab]c/  // a后字母非a或b,然后c

// 这里面i和g就是参数，用来调整匹配选项
// 常用的: i(忽略大小写ignore) g(全局global) m(多行multi-line) u(unicode)
var exp = new RegExp('A', 'ig');
const exp1 = new RegExp(/\d/ig, 'i') // es5报错 es6中ig会被i覆盖

str.search(expr|str); // 找到了返回位置，找不到返回-1，类似indexOf
str.match(expr|str); // 找到了返回结果数组，找不到返回null
str.split(expr|str); // 切数组

str.replace(expr|str, str|fn);
str.replace(expr|str, function(s) {
        // s: 每次匹配到的东西
        // return 要替换成xx
    });

str.startsWith('abc'); // 用正则代替: /^abc/
str.endWith('abc');    // 用正则代替: /abc$/

reg.test(str) // 需要在reg前后加^和$才能用，测试能不能匹配到，返回Boolean

JSON.stringify('{"a":1,"b":2}'); // object to stirng
JSON.parse({"a":1,"b":2});       // string to object
/*
 * JSON.parse() 解析的对象最后一个不能加逗号
 */

const obj = document.getElementById('id');
obj.tagName = 'LI'; // UpperCase

obj.getBoundingClientRect(); // 获取绝对位置;
                        // .left 左边距离页面左边的距离
                        // .top  上边距离页面上边的距离
                        // .right  右边距离页面左边的距离
                        // .bottom  下边距离页面上边的距离

with(obj.style){ // 性能低下
    styleName = value;
    styleName = value;
}

obj.style.cssText='width:200px;height:200px;'; // 会将当前行间样式清除后再添加

    try{
        // code try running
    }catch(e){
        // if error
        // e: error msg
    }

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
// etc..

/* usually */
return false; // 同时会阻止冒泡

/* ie */
// 鼠标事件捕获
obj.setCapture && obj.setCapture(); // 捕获当前鼠标事件
// 释放捕获
obj.setCapture && obj.setCapture();

/* 兼容 */
function stopDef(e){
    const oE = e || event;
    oE.preventDefault ?
    oE.preventDefault() :
    window.event.returnValue = false;
}

oEvent.cancelBubble = true; // ie, 但可兼容其他浏览器
oEvent.stopPropagation();   // chrome etc..

obj.addEventListener('event', function() {
        // statement..
    }, useCapture); // Boolean; true:使用事件捕获，反转事件流; false:冒泡;
                    // true的优先级大于false,同时出现true,父级优先;

obj.attachEvent('on' + 'event');

Object.prototype.rmEv = function(ev, fn) { // 必须指定函数名
    if (this.removeEventListener) {
        this.removeEventListener(ev, fn, false);
    } else {
        this.detachEvent('on' + ev, fn);
    }
};

function a(e) {
    const oE = e || event;
    const target = oE.srcElement || oE.target;
    alert(target.tagName); // 这里获取的标签名是大写，如果用标签名匹配记得大写
}

oUl.onclick = function(ev) { // 添加点击事件给父级
    var oEvent = ev || event;
    var oS = oEvent.srcElement || oEvent.target; //  获取点击的事件源(父级及所有子代)
    if (oS.tagName == 'LI') { // 用某种方法匹配到需要元素
        oS.style.background = 'red';
    }
};

/* 不含特殊字符 */
encodeURI(str);
decodeURI(str);
/* 含特殊字符 */
encodeURIComponent(str);
decodeURIComponent(str);

// 调用fn, 使this指向obj, 一般用作固定this到某个函数
fn.call(obj,arg1,arg2...);
fn.apply(obj,[arg1,arg2...]);

// 使用箭头函数，this指向父级
function aaa() {
    () => {
        console.log(this); // function aaa
    }
}

/*多态的基本概念：一个引用类型（变量）在不同情况下的多种状态。
     js本身是无态的，天生就支持多态。*/
//Master类
function Master(name) {
    this.name = name;
    //方法[给动物喂食物]
}
//原型法添加成员函数
Master.prototype.feed = function(animal, food) {
    window.alert('给' + animal.name + '喂' + food.name);
};
    //动物类
function Animal(name) {
    this.name = name;
}
//猫猫
function Cat(name) {
    this.animal = Animal;
    this.animal(name);
}
//狗狗
function Dog(name) {
    this.animal = Animal;
    this.animal(name);
}
//食物类
function Food(name) {
    this.name = name;
}
//鱼
function Fish(name) {
    this.food = Food;
    this.food(name);
}
//骨头
function Bone(name) {
    this.food = Food;
    this.food(name);
}
var cat = new Cat('大花猫');
var fish = new Fish('黄花鱼');
var dog = new Dog('大花狗');
var bone = new Bone('猪骨头');
//创建一个主人
var master = new Master();
master.feed(cat, fish);
master.feed(dog, bone);

/**
 * date: 2017-03-21 15:49:34
 * author: AllocatorXy
 * description: 原生cookie方法
 */
function setCookie(name, value, json) {
    let str = name + '=' + value;
    if (json) {
        for (const k in json) {
            switch (k) {
                case 'expires': {
                    if (Number(json[k])) {
                        const oDate = new Date();
                        oDate.setDate(oDate.getUTCDate() + json[k]);
                        str += ';expires=' + oDate.toUTCString();
                    } else {
                        str += ';expires=' + json[k];
                    }
                    break;
                }
                default:
                    str += `;${k}=${json[k]}`;
                    break;
            }
        }
    }
    document.cookie = str;
}

function getCookie(name) {
    const arr = document.cookie.split('; ');
    for (let i = 0; i < arr.length; i++) {
        const arr2 = arr[i].split('=');
        if (name == arr2[0]) {
            return arr2[1];
        }
    }
    return ''; // 不存在的情况
}

function getCookieAll() {
    const arr = document.cookie.split('; ');
    const res = {};
    for (let i = 0; i < arr.length; i++) {
        const arr2 = arr[i].split('=');
        res[`${arr2[0]}`] = arr2[1];
    }
    return res;
}

function removeCookie(name) {
    setCookie(name, '', -2);
}

/* localStorage和sessionStorage用法完全一样，只是有效期不一样 */
const ls = window.localStorage;
/* 设定一个值 */
ls.a = 'abc';
ls['b'] = '1234';
ls.setItem('c',89);

/* 获取一个值 */
alert(ls.a);
alert(ls['b']);
alert(ls.getItem('c'));

/* 删除 */
ls.removeItem('c'); // 删除一个
ls.clear();         // 清空

/* key */
ls.key(i);             // 按索引取出某个键
ls.getItem(ls.key(i)); // 按索引取出某个键的值

obj.getAttribute('abc') // 获取obj的abc属性，返回的数据类型是string
obj.setAttribute('abc', 111) // 为obj设置abc属性
var a = obj.attributes; // 返回obj的属性集合NamedNodeMap

const a = obj.dataset; // 获取obj的所有以'data-'为前缀的属性
const b = obj.dataset.aaa; // 获取obj的'data-aaa'属性
const c = obj.dataset.aaBb // 获取obj的'data-aa-bb'属性，类似于angularJS
obj.dataset.aaBbCc = 1; // 设置obj的'aa-bb-cc'属性为1

for (let k in obj) {
    console.log(k); // obj的所有属性全都被打印出来了，很恶心
}

for (let v in obj.dataset) {
    console.log(v + '=' + obj.dataset[v]); // 这样只会打印'data-*'属性
}

let c = obj.classList; // 返回DOMTokenList, 即obj的class集合
let d = obj.classList.value; // 标签的class值 形如：'class1 class2 class3'

obj.classList.add('active', 'a'); // 为obj添加类
obj.classList.remove('active');   // 为obj移除类
obj.classList.contains('active'); // 返回Boolean, 用于检测是否有某个类名
obj.classList.item(n); // 返回索引值为n的类名，若参数错误则返回第一个类名，但参数不能为空

/* 类似于jq的toggleClass, 若不存在类名返回true并为之添加类, 第二个参数可以不填 */
obj.classList.toggle('active', true|false); 

oBox.ondragenter // 拖动文件进入oBox
oBox.ondragleave // 拖动文件离开oBox
oBox.ondragover  // 拖动文件悬停在oBox
oBox.ondrop      // 在oBox释放拖动的文件
////////////////////////////////////////////////
// oBox中drop事件触发必须阻止oBox中的dragover事件 //
////////////////////////////////////////////////

oBox.ondrop = ev => {
    // 拿到文件
    const oFile = ev.dataTransfer.files[0];
    // 读取文件基本信息
    // alert(oFile.name);
    // alert(oFile.size);
    // alert(oFile.type);
    // alert(oFile.lastModifiedDate);
    const reader = new FileReader();
    // reader.readAsText(oFile); // 以文本方式读取
    reader.readAsDataURL(oFile); // 以base64方式读取

    reader.onload = () => { //文件读取完毕后
        alert(reader.result); //文件读取结果
    };

    return false; // 这里不组织默认事件会被浏览器打开文件
};