【JS实用技巧篇】03-封装思想

​

​

📖JavaScript专栏：📑js实用技巧篇

👊👊👊该专栏博主会持续更新，目的是给大家分享一些常用实用技巧，同时巩固自己的基础，共同进步✨✨✨

💡💡💡欢迎大家在评论区留言交流技术以及学习方法、心得方面的问题。💡💡💡

👇🏻👇🏻👇🏻你的一键三连是对我的最大支持❤️❤️❤️

​

📑前言

该篇主要是针对初学者，培养编程思想当中的——抽象思维，即能抽取关键信息，聚焦重点，而我们本篇所讲的封装思想便是这种思想的一部分，通常需要经过长期锻炼才能达到根深蒂固的程度，所以需要慢慢理解并加以实践——多敲

📑主要内容

📃随机数or字符串获取

• 随机数获取

/**
 * 得到一个指定范围内的随机整数
 * @param {number} min 范围的最小值
 * @param {number} max 范围的最大值
 * @return {number} 范围内的随机整数
 */
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min ))+min;
}

**代码分析：**上面随机数获取函数的封装有一定局限性，只可以取到最小值，而无法取到最大值；但return Math.floor(Math.random() * (max - min +1))+min;可取到两端；但个人认为考虑到数学中的概率性，假设获取某范围内的随机数，则不能超出其范围，即获取该闭区间[min,max]的任一值的概率不是均等的；若此处+1虽然保证两端最值都可获取，但超出该范围获取随机数，则该[min,max]获取任一数的概率均等；所以按实际情况而定

常用的Math方法归纳：

API	含义	备注
Math.PI	得到圆周率π
Math.abs()	求某个数绝对值	传入一个数
Math.ceil()	向上取整	传入一个数
Math.floor()	向下取整	传入一个数
Math.max()	求一个数列中的最大值	把数列依次传入
Math.min()	求一个数列中的最小值	把数列依次传入
Math.random()	得到一个0-1之间的随机小数	无参；无法取到1
Math.round()	返回四舍五入的结果	传入一个数

• 随机字符串获取

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
/**
 * 得到一个指定长度的随机字符串
 * 字符串包含：数字、字母
 * @param {number} length 字符串的长度
 * @return {number} 随机字符串
 */
function getRandomString(length) {
  const result = "";
  const characters =
    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  for (let i = 0; i < length; i++) {
    const index = getRandom(0, characters.length);
    result += characters[index];
  }
  return result;
}

主要思想：随机字符串获取函数其实就是将要获取的数据存储在数组当中，然后再通过前面封装好的获取随机数函数来随机获取数组当中的数据

📃三个函数搞定dom获取及创建

• 新旧API对比

以前获取dom的方式：

API	含义	备注
document.getElementById()	根据元素 id 获取 dom	得到单个 dom
document.getElementsByTagName() dom.getElementsByTagName()	根据元素名称获取 dom	得到 dom 的伪数组
document.getElementsByClassName() dom.getElementsByClassName()	根据元素类样式获取 dom	得到 dom 的伪数组

H5以后获取dom方式

API	含义	备注
document.querySelector() dom.querySelector()	根据 CSS 选择器获取 dom	得到第一个匹配的 dom
document.querySelectorAll() dom.querySelectorAll()	根据 CSS 选择器获取 dom	得到所有匹配的 dom 伪数组

自此，dom节点的获取变得十分简单，但有时我们会大量使用获取dom的API，为了简化代码，我们对其API进行了如下封装

function $(selector) {
  return document.querySelector(selector);
}

function $$(selector) {
  return document.querySelectorAll(selector);
}

function $$$(selector) {
  return document.createElement(selector);//创建dom节点
}

• 实用小技巧：

仅限在broswer控制台调试时，可以直接用 $ 代替dom.querySelector()，$$代替dom.querySelectorAll()，下面展示了浏览器控制台对$的使用

📃时间格式化

• GMT和UTC

世界划分为24个时区，北京在东8区，格林威治在0时区

GMT：Greenwish Mean Time 格林威治世界时；太阳时，精确到毫秒

UTC：Universal Time Coodinated 世界协调时；以原子时间为计时标准，精确到纳秒

国际标准中，已全面使用UTC时间，而不再使用GMT时间

GMT和UTC时间在文本表示格式上是一致的，均为星期缩写, 日期 月份 年份 时间 GMT，例如：

Sun, 23 Aug 2020 08:08:08 GMT

注意：GMT、UTC都表示的是零时区的时间

• Unix 时间戳

Unix 时间戳（Unix Timestamp）是Unix系统最早提出的概念

它将UTC时间1970年1月1日凌晨作为起始时间，到指定时间经过的秒数（毫秒数）

• 常用日期API

Date()构造函数：

new Date(); // 得到一个当前日期对象
new Date(value); // 根据时间戳得到一个日期对象
new Date(dateString); // 根据一个标准日期字符串得到一个日期对象
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]); // 根据年、月、日、小时、分钟、秒、毫秒得到一个日期对象

API	含义	备注
Date.now()	得到当前时间戳	无参
Date.prototype.getFullYear()	得到年	无参；本地时间；
Date.prototype.getMonth()	得到月	无参；本地时间；范围0-11
Date.prototype.getDate()	得到日	无参；本地时间；
Date.prototype.getHours()	得到小时	无参；本地时间；
Date.prototype.getMinutes()	得到分钟	无参；本地时间；
Date.prototype.getSeconds()	得到秒	无参；本地时间；
Date.prototype.getMilliseconds()	得到毫秒	无参；本地时间；
Date.prototype.toLocaleString()	得到日期本地的表示方式

• 时间格式化

/**
 * 传入某一时刻的时间戳，返回当前具体时间
 * @param {Number} timestamp 时间戳
 * @returns 格式化时间
 */
function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hour = date.getHours().toString().padStart(2, "0");
  const minute = date.getMinutes().toString().padStart(2, "0");
  const second = date.getSeconds().toString().padStart(2, "0");
  return `${year}年${month}月${day}日${hour}:${minute}:${second}`;
}
console.log(formatDate(23423423423));

输出：

主要思想：根据传入的时间戳创建一个Date对象，然后再分别获取当前时间对象的年月日…如：date.getFullYear()获取的结果是number类型，所以我们将其转换成string类型以便能使用padStart()，对不足两位的用“0”进行占位。另外，各位有没有发现.toString().padStart(2, "0")这一部分重复了很多次，那我们就可以对其封装，如果你早已发现，那么恭喜你封装思想已经初步成形

📑总结

看完本篇可能对封装思想有了一定了解，但要想达到真正透彻的地步还需在敲中去切身感受…
​