10个有用的JavaScript实用程序功能-DEV365 开发者社区

嘿，那里！ ð

今天，我们将在JavaScript中介绍10个自定义实用程序功能，在您的大多数项目中可以派上用场。

01.冷0

是的，我们所有人都喜欢打印，调试等的工具。因此，为什么不缩短它以减少打字并节省一些时间？

const { log } = console;

log("Hello world!");
// Expected output: Hello world!

// SAME AS //

console.log("Hello world!");
// Expected output: Hello world!

说明：我们使用destructuring assignment能够从console中提取log方法。

02. `querySelector()`

使用JavaScript时，您可能已经听过术语DOM Manipulation，并使用getElementById()，querySelector()和其他方法来访问DOM元素。因此，让我们变得更容易与。

const select = (selector, scope = document) => {
  return scope.querySelector(selector);
};

const title = select("h1");
const className = select(".class");
const message = select("#message", formElem);

// SAME AS //

const title = document.querySelector("h1");
const className = document.querySelector(".class");
const message = formElem.querySelector("#message");

说明：我们在select()函数中传递了2个参数：

1st：DOM元素您要选择
第二：访问该元素的范围（default = document）;

03. `addEventListener()`

处理点击，mousemove和其他事件主要使用koude2方法实现。

const listen = (target, event, callback, ...options) => {
  return target.addEventListener(event, callback, ...options);
};

listen(buttonElem, "click", () => console.log("Clicked!"));

listen(document, "mouseover", () => console.log("Mouse over!"));

listen(formElem, "submit", () => {
    console.log("Form submitted!");
  }, { once: true }
);

说明：我们正在通过listen()函数中的4个参数：

1st：您要定位的元素（例如'窗口'，'文档'或特定的dom元素）
第二：事件类型（例如'click'，'提交'，'domcontentloaded'等）
第三：回调功能
第四：剩余的可选options（例如“捕获”，“一次”等）。另外，我们使用spread syntax在必要时允许其他选项。否则，可以像addEventListener方法一样省略它。

04. `random()`

您可能会意识到从0到1生成随机数的Math.random()函数限制，我们对最低值的控制不多。

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

random(5, 10);
// 7

解释：这是MDN Docs

的更好解释

05.冷4

有时，我们经常发现自己需要多次运行特定功能。

当然，我们可以使用koude26这样的每一个间隔量的时间：

setInterval(() => {
  randomFunction();
}, 5000); // runs every 5 seconds

问题是我们无法指定要运行多少次。所以，让我们修复它！

const times = (func, n) => {
  Array.from(Array(n)).forEach(() => {
    func();
  });
};

times(() => {
  randomFunction();
}, 3); // runs 3 times

说明：

koude27-创建一个具有n长度的新数组。

Array(5); // => [,,]

koude29-创建了Array(n)的浅副本。它可以帮助我们制作一个可用的数组，并用“未定义”填充它。您也可以使用koude31方法来达到相同的结果。

Array.from(Array(3)); // => [undefined,undefined,undefined]

注意：在研究此实用程序功能时，我意识到有些程序员更喜欢将n参数放在首位，然后将功能times(n, func)放在首位。但是，这对我来说似乎很奇怪，所以我决定交换它们的位置，从而使语法与setInterval()功能更相似：

setInterval(func, delay);

times(func, n);

另外，您将其称为setTimes()，而不是times()与setInterval()和setTimeout()方法匹配。

06. `slugify()`

您是否曾经发现自己需要将博客文章的标题转换为“ URL”格式？

JS Utility Functions => js-utility-functions

这是一个这样做的小实用功能：

const slugify = (string, separator = "-") => {
  return string
    .toString() // Cast to string (optional)
    .toLowerCase() // Convert the string to lowercase letters
    .trim() // Remove whitespace from both sides of a string (optional)
    .replace(/\s+/g, separator) // Replace spaces with -
    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
    .replace(/\_/g, separator) // Replace _ with -
    .replace(/\-\-+/g, separator) // Replace multiple - with single -
    .replace(/\-$/g, ""); // Remove trailing -
};

slugify("Hello, World!");
// Expected output: "hello-world"

slugify("Hello, Universe!", "_");
// Expected output: "hello_universe"

说明：这是GitHub community的讨论

07.冷6

在从事小型项目并尝试对表格进行电子邮件验证时，您可以使用此超简单方法来实现目标。另外，对于小型测试可能非常方便。

const validateEmail = (email) => {
  const regex = /^\S+@\S+\.\S+$/;
  return regex.test(email);
};

validateEmail("youremail@org.com"); // true
validateEmail("youremail@com"); // false
validateEmail("youremail.org@com"); // false

说明：您可以使用Regex here。

koude41搜索是否提供的REGEX表达式与字符串匹配

注意：对于较大的项目，我建议使用validator.js等图书馆为您处理繁重的举重。

08. `capitalize()`

我们在JavaScript中具有内置的toUpperCase()和toLowerCase()方法。但是，我们没有内置的资本支持。所以，让我们构建一个！

const capitalize = (str) => {
  const arr = str.trim().toLowerCase().split(" ");

  for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  }

  return arr.join(" ");
};

capitalize("hello, world!");
// Expected output: "Hello, World!"

说明：

koude45-将字符串变成数组
arr[i].charAt(0).toUpperCase()-上案例每个单词的第一个字母
arr[i].slice(1)-返回剩余的单词字母。
arr.join(" ")-将数组返回字符串

09. `sanitizeHTML()`

听说过Cross-site scripting (XSS) attacks吗？如果没有，这是大多数网站上发生的一种攻击。例如，提交表格时，攻击者可能会尝试发送恶意脚本以闯入系统。为了防止您的表格上的这种情况，您可以使用此方便的功能，该功能将“消毒”脚本代码。

const sanitizeHTML = (str) => {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
};

sanitizeHTML("<h1>Hello, World!</h1>");
// Expected output: "&lt;h1&gt;Hello, World!&lt;/h1&gt;"

说明：与innerHTML不同，textContent不将字符串分解为HTML，而innerText仅显示“人类可读”元素。

此外，使用textContent可以防止XSS攻击。 -MDN Docs

10.冷54

您可能已经在待办事项列表应用程序或任何其他项目中使用了localStorage，以将特定数据保存在用户的计算机内存中。获取和设置项目时，您必须使用JSON parse()和stringify()方法来达到所需的结果。因此，让我们更容易与他们合作。

const storage = {
  get: (key, defaultValue = null) => {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : defaultValue;
  },
  set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
  remove: (key) => localStorage.removeItem(key),
  clear: () => localStorage.clear(),
};

storage.set("motto", "Eat, Sleep, Code, Repeat");
storage.get("motto");

说明：如果您不知道JSON parse()和stringify()方法，请查看MDN Docs以获取更好的解释。

注意：我很难想出一个好名声，这比storage更有意义。因为乍一看，开发人员可能不知道它是指“ localstorage”还是其他。但是，您可以随心所欲地命名。另外，如果您找到了任何好名字，请在评论部分中告诉我。

资源

MDN Docs
10 JavaScript Functions - YouTube
JS Utility Functions - Web Dev Simplified
更多...ð

结论

如果您有任何疑问或建议，则评论部分就是您的。我们可能会与您的建议一起制作本文的第2部分。

感谢您的阅读！ ð

目录

01.冷0

02. querySelector()

03. addEventListener()

04. random()