标签: ecmascript-6

【前端知乎系列】ArrayBuffer 和 Blob 对象

本文首发在我的【个人博客】
更多丰富的前端学习资料，可以查看我的 Github : 《Leo-JavaScript》，内容涵盖 数据结构与算法 、 HTTP 、 Hybrid 、 面试题 、 React 、 Angular 、 TypeScript 和 Webpack 等等。
点个 Star 不迷路~

梁晨大约 7 分钟

Webpack 配置 React 开发环境

先完成基本的配置项，后面在根据项目的复杂度加入更多的配置内容和技巧

Webpack 是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

安装 Webpack ： npm install -g webpack

Webpack 使用一个名为 webpack.config.js 的配置文件，要编译 JSX ，先安装对应的 loader : npm install babel-loader --save-dev

梁晨大约 3 分钟

掌握TypeScript：10个最佳实践提高代码质量

TypeScript 是一种强类型的 JavaScript 超集，提供了很多优秀的工具和语言特性，可以帮助开发者提高代码质量和开发效率。在本文中，我们将介绍 10 个 TypeScript 最佳实践，帮助初级和中级的 Web 前端开发工程师更好地使用 TypeScript 开发高质量的代码。

1. 始终开启严格模式

在 TypeScript 中，严格模式可以提供更严格的类型检查和错误检测，帮助开发者在开发过程中发现潜在的错误和类型问题。

// 在 tsconfig.json 中开启严格模式
{
  "compilerOptions": {
    "strict": true
  }
}

梁晨大约 5 分钟

React 组件

一个 React 应用就是构建在 React组件 之上的。

组件有两个核心概念：

props
state

一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

**注意：组件生成的HTML 结构只能有一个单一的根节点。 **

梁晨大约 10 分钟

重学 JavaScript API - Page Visibility API

在前端开发中，我们经常需要根据页面的可见性来控制资源的使用和提高页面的性能和响应速度。而 JavaScript 中的 Page Visibility API 就提供了一种 检测页面是否可见 的方法。

本文将介绍 Page Visibility API 的概念、使用方法、兼容性和实际应用案例。

🍰什么是 Page Visibility API？

Page Visibility API 是一种浏览器 API，它提供了一种 检测页面是否可见 的方法。通过 Page Visibility API，我们可以知道 当前页面是否被隐藏或者最小化 ，从而可以根据页面的可见性来控制页面的行为和资源的使用。

梁晨大约 5 分钟

重学 JavaScript API - Broadcast Channel API

当我们网页需要在不同的浏览器窗口之间共享数据时，可能需要使用 WebSocket 或 WebRTC 等技术。但是，这些技术会过于复杂。而浏览器自带的 Broadcast Channel API 可以让我们轻松地在不同浏览器窗口之间共享数据，而无需使用复杂的技术。

本文将介绍 Broadcast Channel API 的基本和高级使用方法，并提供示例代码来帮助读者更好地理解和使用该 API。

🏝 什么是 Broadcast Channel API？

Broadcast Channel API 是一个浏览器 Web API，它允许我们创建一个 能够将数据广播给多个文档或浏览器窗口的通道 。通过该通道实现不同浏览器窗口之间的数据共享。我们可以向该频道发送消息，其他窗口则可以监听该频道以接收消息。

梁晨大约 5 分钟

JS校验身份证号

原文链接: js最全身份证号码校验

function validateIdCard (idCard) {
    let vcity = {
        11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古",
        21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏",
        33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南",
        42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆",
        51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃",
        63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
    };
    //是否为空
    if (idCard === "") {
        return false;
    }
    //校验长度，类型
    if (isCardNo(idCard) === false) {
        return false;
    }
    //检查省份
    if (checkProvince(idCard, vcity) === false) {
        return false;
    }
    //校验生日
    if (checkBirthday(idCard) === false) {
        return false;
    }
    //检验位的检测
    if (checkParity(idCard) === false) {
        return false;
    }
    return true;
}


// 校验号码长度、类型
function isCardNo (card) {
    // 身份证号码为15位或者18位，
    // 15位时全为数字，18位前17位为数字，
    // 最后一位是校验位，可能为数字或字符X
    let reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
    return reg.test(card)
}


// 校验省份，取号码前两位
function checkProvince (card, vcity) {
    let province = card.substr(0, 2);
    if (vcity[province] == undefined) {
        return false;
    }
    return true;
}


// 校验日期
function verifyBirthday (year, month, day, birthday) {
    let date = new Date();
    // 校验年月日
    if (birthday.getFullYear() == year
        && (birthday.getMonth() + 1) == month
        && birthday.getDate() == day) {
        // 判断年份的范围（0岁到100岁)
        let time = date.getFullYear() - year;
        if (time >= 0 && time <= 100) {
            return true;
        }
        return false;
    }
    return false;
}


// 校验生日
function checkBrithday (card) {
    let len = card.length;
    // 身份证15位时，
    // 次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），
    // 皆为数字
    if (len == "15") {
        let re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
        let arr_data = card.match(re_fifteen);
        let year = arr_data[2];
        let month = arr_data[3];
        let day = arr_data[4];
        let birthday = new Date("19" + year + '/' + month + '/' + day);
        return verifyBirthday("19" + year, month, day, birthday);
    }
    // 身份证18位时，
    // 次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），
    // 校验位末尾可能为X
    if (len == "18") {
        let re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X|x)$/;
        let arr_data = card.match(re_eighteen);
        let year = arr_data[2];
        let month = arr_data[3];
        let day = arr_data[4];
        let birthday = new Date(year + '/' + month + '/' + day);
        return verifyBirthday(year, month, day, birthday);
    }
    return false;
}


// 15位转18位身份证号
function changeFiveteenToEighteen (card) {
    if (card.length == "15") {
        let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
        let arrCh = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
        let cardTemp = 0, i;
        card = card.substr(0, 6) + "19" + card.substr(6, card.length - 6);
        for (i = 0; i < 17; i++) {
            cardTemp += card.substr(i, 1) * arrInt[i];
        }
        card += arrCh[cardTemp % 11];
        return card;
    }
    return card;
}


// 检测校验位
function checkParity (card) {
    // 15位转18位
    card = changeFiveteenToEighteen(card);
    let len = card.length;
    if (len == "18") {
        let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
        let arrCh = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
        let cardTemp = 0, i, valnum;
        for (i = 0; i < 17; i++) {
            cardTemp += card.substr(i, 1) * arrInt[i];
        }
        valnum = arrCh[cardTemp % 11];
        if (valnum == card.substr(17, 1).toLocaleUpperCase()) {
            return true;
        }
        return false;
    }
    return false;
}

梁晨大约 2 分钟

前端开发方法集```

日期格式化

    
    
    // 格式化日期类型,fmt格式可选择
    function dateFormat(fmt, date) {
      let ret;
      let opt = {
        "Y+": date.getFullYear().toString(), // 年
        "M+": (date.getMonth() + 1).toString(), // 月
        "D+": date.getDate().toString(), // 日
        "h+": date.getHours().toString(), // 时
        "m+": date.getMinutes().toString(), // 分
        "s+": date.getSeconds().toString(), // 秒
        "ms+": date.getMilliseconds().toString() // 毫秒
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
        }
      }
      return fmt;
    }
    // 格式化当前时间
    dateFormat("YYYY-MM-DD hh:mm:ss.ms", new Date());
    // 格式化特定时间
    let date = new Date();
    let fDate = dateFormat("YYYY-MM-DD hh:mm:ss.ms", new Date(date));