@charset "UTF-8";
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; overflow-x: hidden; color: rgba(43, 43, 43, 1); font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; background-image: linear-gradient(90deg, rgba(159, 219, 252, 0.15) 3%, rgba(0, 0, 0, 0) 0), linear-gradient(1turn, rgba(159, 219, 252, 0.15) 3%, rgba(0, 0, 0, 0) 0); background-size: 20px 20px; background-position: center }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { padding: 30px 0; margin-top: 35px; margin-bottom: 10px; color: rgba(77, 208, 225, 1) }
.markdown-body h1 { font-size: 30px; text-align: center; position: relative; width: max-content; margin: 0 auto }
.markdown-body h1:before { position: absolute; content: ""; z-index: -1; top: -20px; height: 100%; width: 100px; left: 0; right: 0; margin: 0 auto; background: url("data:image/png;base64,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") center / 64px 64px no-repeat; opacity: 0.84 }
.markdown-body h1:after { position: absolute; content: ""; width: 150%; left: -25%; height: 50%; bottom: 12px; border-radius: 50%; background: linear-gradient(rgba(0, 0, 0, 0) 80%, rgba(77, 208, 225, 0.8)); opacity: 0.6; animation: 6s linear infinite h1animate }
@keyframes h1Animate { 0% { background-position: right bottom } 50% { background-position: right } 100% { background-position: right bottom } }
.markdown-body h2 { display: block; border-bottom: 4px solid rgba(77, 208, 225, 1); position: relative; font-size: 24px; padding: 12px 32px; margin: 30px 0 }
.markdown-body h2:before { width: 24px; height: 24px; left: 0; top: 0; margin: auto; background-size: 24px 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADGklEQVRYR81X32vTYBQ999s6mFjQgQ+DrbHiVFZYU4cDcQ/6pGhTFVYFEXGi82H+Bz448UnEF1Fx9ccEEcXpZE3d5tP2ooKiTacTHaLNpigMHDgnU9tcSbrWrkwWR0sbyEOSe885ObnfvV8IRT6oyPwoLQHBx+OVM5WJvSyEVAhnBOjt7yU/+/rr6r6l8TMO+F/EN0JQhICqQpD/xaRpcpAc9tS+M+9lBCia/oqBamK+zeDuQogQZaKJk3wcQjxSva7tGQGB2Ke1zIk3DNyMyNL+QpCnMQOaPsDAVuGAp9cjvbYc8Ec/bCYSg0zoiHilk1tHxqsqEsYlML4kjIpT/eurJxRNPweQU5VdrWaOEo1fgKAVbBgXIz73kF3R/ph+ghgdzMYWM29eAWlBJqgZaFlFYtC6nhWpaDqnSGlIlV1WjJ3DloDNgyNLncudqgX//Ucg3LxuStHGuhi8pqKCW3rqV342rwFjRznKm+/LNaN2yC237ThgF2wxcfMLeP6+ncrKzoPoKTGeLQbYbg4TNoC5iZPJY5HGVRdSNZAWYBclD3FzBQzrR8hACAKdzBzKA/4/IYioDQaOskBbpEG6PO8qKKSAEi3CnEb0Pw4oMf0OmKbTDWqh3Lw6EIiNBZi5lxh3wz4puBD5ovqAMvxhHSdFKxE1CQe3m/07TeTX4lcJdAhE+1Sv65Z5P/ByvIGTRowIZ9igbtXnmrOsbTvgj+kHBNMuBu9OdVw8EeU4nC1A0cYmAHZOTRrLhra4Z8ywnSN6vZHAFTA2WnnMfQB3qz73ddsOZM8CACFDIPSgQXqebXEgqgeZcAeEe6pXasm1f8ew3igMtAHWac0Uc/jYdyAaP0xEBwFsmgUPqbJ0NE2UKj4EGcahiOzuyhagaHpnmtgcVgTcCMuua7YdyAHbA3ArQNscVFbb4635aD6fnYaTvxxi9UNP7ddMXaRWVBdAcaLk6bDXPZCNZ9uBXEsDUX1T2Cc9yjig6Z0EHg3LK8/aqf6MwJKchkXfks1+0+JtSq3qLPa23BRR1B+T/6nkfMaW1r9hPt/MLtYfTLEpP+T9FNoAAAAASUVORK5CYII=") }
.markdown-body h2:after, .markdown-body h2:before { content: ""; display: block; position: absolute; bottom: 0 }
.markdown-body h2:after { right: 0; width: 400px; height: 10px; border-top-right-radius: 24px; background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(77, 208, 225, 1)); max-width: 50vw }
.markdown-body h3 { margin: 30px 0; font-size: 18px; position: relative; padding: 4px 32px; width: max-content }
.markdown-body h3:before { border-bottom: 2px solid rgba(77, 208, 225, 1); width: 100%; content: ""; display: block; height: 28px; position: absolute; left: 0; top: 0; bottom: -2px; margin: auto; background-size: 28px 28px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII="); background-repeat: no-repeat; animation: 2s infinite alternate h3animationbefore }
@keyframes h3AnimationBefore { 0% { width: 28px } 25% { width: 100% } 50% { width: 100% } 100% { width: 100% } }
.markdown-body h3:after { content: ""; display: block; width: 28px; height: 28px; position: absolute; border: 2px solid rgba(77, 208, 225, 1); border-radius: 50%; right: -15px; top: 0; bottom: 0; margin: auto; background-size: 28px 28px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII="); animation: 2s infinite alternate h3animationafter }
@keyframes h3AnimationAfter { 0% { } 10% { } 50% { transform: rotate(-1turn) } 100% { transform: rotate(-1turn) } }
.markdown-body h4 { font-size: 16px }
.markdown-body h5 { font-size: 15px }
.markdown-body h6 { margin-top: 5px }
.markdown-body p { line-height: inherit; margin: 22px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px }
.markdown-body img { max-width: 80%; border-radius: 6px; display: block; margin: 20px auto !important; object-fit: contain; box-shadow: 0 0 16px rgba(110, 110, 110, 0.45) }
.markdown-body figcaption { display: block; font-size: 13px; color: rgba(43, 43, 43, 1) }
.markdown-body figcaption:before { content: ""; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEVHcExAuPtAuPpAuPtAuPpAuPtAvPxAuPokzOX5AAAAB3RSTlMAkDLqNegkoiUM7wAAAGBJREFUKM9jYBhcgMkBTUDVBE1BeDGqEtXychNUBeXlKEqACsrLQxB8lnCQQClCiWt5OYoSiAIkJVAF5eVBqAqAShTAAs7l5ShKWMwRAmAlSArASpAVgJUkCqIAscESHwCVVjMBK9JnbQAAAABJRU5ErkJggg=="); display: inline-block; width: 18px; height: 18px; background-size: 18px; background-repeat: no-repeat; background-position: center; margin-right: 5px; margin-bottom: -5px }
.markdown-body hr { border-top: 1px solid rgba(77, 208, 225, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body del { color: rgba(77, 208, 225, 1) }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(77, 208, 225, 0.08); color: rgba(38, 198, 218, 1); padding: 0.195em 0.4em }
.markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace; overflow: auto; position: relative; line-height: 1.75; box-shadow: 0 0 8px rgba(110, 110, 110, 0.45); border-radius: 4px; margin: 16px }
.markdown-body pre:before { content: ""; display: block; height: 30px; width: 100%; margin-bottom: -7px; background: url("data:image/png;base64,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") 10px 10px / 40px no-repeat }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { color: rgba(77, 208, 225, 1); border-bottom: 1px solid rgba(77, 208, 225, 1); font-weight: 400; text-decoration: none; margin: 0 4px }
.markdown-body a:active, .markdown-body a:hover { background-color: rgba(77, 208, 225, 0.1) }
.markdown-body strong { color: rgba(38, 198, 218, 1) }
.markdown-body strong:before { content: "「" }
.markdown-body strong:after { content: "」" }
.markdown-body em { font-style: normal; color: rgba(77, 208, 225, 1); font-weight: 700 }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(77, 208, 225, 0.05) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { margin: 2em 0; padding: 24px 32px; border-left: 4px solid rgba(38, 198, 218, 1); background: rgba(77, 208, 225, 0.15); position: relative }
.markdown-body blockquote:before { content: "❝"; top: 8px; left: 8px; color: rgba(77, 208, 225, 1); font-size: 30px; line-height: 1; font-weight: 700; position: absolute; opacity: 0.7 }
.markdown-body blockquote:after { content: "❞"; font-size: 30px; position: absolute; right: 8px; bottom: 0; color: rgba(77, 208, 225, 1); opacity: 0.7 }
.markdown-body blockquote p { color: rgba(89, 89, 89, 1); line-height: 2 }
.markdown-body ol, .markdown-body ul { color: rgba(89, 89, 89, 1); padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { background: rgba(30, 30, 30, 1); color: rgba(220, 220, 220, 1) }
.hljs-keyword, .hljs-link, .hljs-literal, .hljs-name, .hljs-symbol { color: rgba(86, 156, 214, 1) }
.hljs-link { text-decoration: underline }
.hljs-built_in, .hljs-type { color: rgba(78, 201, 176, 1) }
.hljs-class, .hljs-number { color: rgba(184, 215, 163, 1) }
.hljs-meta-string, .hljs-string { color: rgba(214, 157, 133, 1) }
.hljs-regexp, .hljs-template-tag { color: rgba(154, 83, 52, 1) }
.hljs-formula, .hljs-function, .hljs-params, .hljs-subst, .hljs-title { color: rgba(220, 220, 220, 1) }
.hljs-comment, .hljs-quote { color: rgba(87, 166, 74, 1); font-style: italic }
.hljs-doctag { color: rgba(96, 139, 78, 1) }
.hljs-meta, .hljs-meta-keyword, .hljs-tag { color: rgba(155, 155, 155, 1) }
.hljs-template-variable, .hljs-variable { color: rgba(189, 99, 197, 1) }
.hljs-attr, .hljs-attribute, .hljs-builtin-name { color: rgba(156, 220, 254, 1) }
.hljs-section { color: rgba(255, 215, 0, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
.hljs-bullet, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-selector-tag { color: rgba(215, 186, 125, 1) }
.hljs-addition { background-color: rgba(20, 66, 18, 1) }
.hljs-addition, .hljs-deletion { display: inline-block; width: 100% }
.hljs-deletion { background-color: rgba(102, 0, 0, 1) }

年底了，不知道该写点啥？想了想就不给大家推荐新东西了，给大家分享点我的工作迄今为止的一些编程经验，让大家查缺补漏，希望可以帮助掘友们提高开发效率、编写优雅且易于维护的JavaScript代码。

1.启用严格模式

严格模式是JavaScript的一个语言特性，它允许你在一个更严格的操作环境下编写代码。

好处

  • 消除JavaScript语法的一些不合理、不严谨之处，减少一些怪异行为。
  • 消除代码运行的一些不安全之处，保证代码运行的安全。
  • 提高编译器效率，增加运行速度。
  • 为未来新版本的JavaScript做好铺垫。

弊端

  • 一些旧的代码可能不兼容严格模式，可能需要进行修改才能在严格模式下运行。
  • 对于一些开发者来说，过于严格的规则可能限制了编程的自由度和灵活性。
  • 有些浏览器对严格模式的支持不完全，可能导致跨浏览器的兼容性问题。

但总的来说，开启严格模式还是利大于弊，它可以使你的代码更加的安全和高效，当然了，具体实际使用中大家根据情况择优而用即可。

'use strict';

x = 3.14; // 抛出错误，因为 x 没有声明

delete Object; // 抛出错误，因为不能删除一个对象

2.变量声明的新法则

let和const推荐用于JavaScript代码中的变量声明，它们提供了更严格的作用域控制和更好的代码可维护性。

var如今主要用于与老代码的兼容性。在可能的情况下，应优先使用const，以明确表示变量值不应更改，如果需要可以修改变量，那么使用let

let name = '掌门人'; //局部变量

const BIRTHDAY = '2024-02-01'; // 常量

// name = '纯爱掌门人'; // 正确

// BIRTHDAY = '2024-02-01'; // 错误，常量不可改变

3.模板字符串

模板字符串提供了一些很有用的新功能，例如可以直接在字符串中嵌入变量和表达式，以及多行字符串的简化。

好处

  • 增强的可读性和简洁性：字符串模板允许在字符串中嵌入变量和表达式，使得字符串的构建更加直观和简洁。不再需要使用字符串连接操作符 +。
  • 多行字符串支持：使用字符串模板可以很容易地创建多行字符串，而不需要使用换行符或连接多个字符串。
  • 标签模板：字符串模板可以与标签一起使用，这些标签允许你创建自定义的字符串处理函数，以执行复杂的操作。
  • 更好的局部化支持：字符串模板可以配合国际化库更轻松地实现字符串的局部化。
  • 嵌套模板：字符串模板可以进行嵌套，允许在一个模板字符串中嵌入另一个模板字符串。

弊端

  • 兼容性问题：旧的浏览器和JavaScript环境可能不支持字符串模板。
  • 性能影响：字符串模板的解析可能稍微慢于传统字符串拼接，特别是在涉及到许多复杂操作和嵌套时。
  • 潜在的安全风险：如果不正确处理，将用户输入包含在字符串模板中可能导致代码注入攻击。需要确保在使用模板字符串时妥善处理用户输入。

字符串模板在编写代码时提供了很多便利。极大地增强了字符串的功能，使得它们更易于使用和维护。然而，开发者应该意识到它们可能引发的兼容性和性能问题，以及防止潜在的安全漏洞。

let name = '掌门人';

let greeting = `你好，${name}！`; //使用${}便捷地嵌入变量

let salary = `你这个月的工资是${1000000 - 10 + 78}！`; //使用${}便捷地嵌入变量

console.log(`${greeting}${salary}`); // 输出：你好，掌门人！你这个月的工资是1000068！

4.全局变量的禁忌

全局变量像乱箭，可能误伤自己人。尽量将变量限定在作用域内。

好处

  • 避免污染全局空间：通过将变量限定在局部作用域内，可以避免对全局命名空间的污染，减少命名冲突的可能性。
  • 降低代码耦合度：局部变量只能在定义它的块或函数内使用，这有助于创建模块化的代码，使得代码的维护和理解更容易。
  • 提高内存效率：局部变量通常在它们的作用域结束时被回收，这有助于减少内存占用和防止内存泄漏。
  • 代码可维护性和可读性提升：减少了代码的相互依赖，增加了代码的清晰度和可读性，方便日后的代码维护和调试。
  • 减少意外操作：限制变量在作用域内，可以减少因误操作全局变量导致的潜在错误和副作用。

弊端

  • 可能增加代码量：有时候为了避免使用全局变量，需要设计额外的结构（如闭包），从而可能会使代码量略有增加。
  • 性能开销：虽然通常影响非常小，但在某些情况下，创建大量的局部作用域可能会造成一定的性能开销。
  • 可访问性减少：限制变量的可见性意味着它们不能在全局范围内访问，有时这可能导致一些不便，需要设计额外的接口或模式来跨作用域共享信息。

总体而言，尽量将变量限定在作用域内是一种掌门人推荐的做法。这有助于编写清晰、易于维护的代码，同时避免了许多因变量冲突和意外全局操作而引起的错误。然而，在实现特定功能时，也应该权衡局部变量和全局变量的使用，并且确保变量的作用域与其用途适当匹配。

function printName() {

    let name = '掌门人';

    console.log(name); // 正确

}

console.log(name); // 报错，name 在这里不可见

5.函数表达式的利刃

箭头函数(=>)让this的指向更加稳定，没有函数提升的困扰

好处

  • 词法作用域：箭头函数不绑定自己的this，而是继承上下文中的this值，使得this的行为更加可预测，特别是在回调函数中。
  • 更简洁的语法：箭头函数提供了一种更加简洁的函数声明方式，减少了代码的冗余，并且看起来更清爽。
  • 没有函数提升：箭头函数是匿名的，不存在函数提升，这意味着它们必须在使用之前定义，这可以减少由于提升导致的误解。
  • 没有arguments对象：箭头函数没有自己的arguments对象，但可以通过剩余参数（...args）来访问函数的参数，这导致比传统函数更明确和简洁的参数处理方式。
  • 适用于高阶函数：箭头函数的语法特点使其特别适用于高阶函数，如map、filter和reduce等数组方法的回调函数。

弊端

  • 不能作为构造函数：箭头函数不能使用new操作符调用，因为它们没有[[Construct]]方法。尝试这样做会抛出一个错误。
  • 没有原型：箭头函数没有prototype属性，因此你不能向箭头函数添加新的原型方法。
  • 不能绑定this：由于箭头函数没有自己的this，你不能使用call、apply或bind方法来改变this的绑定。
  • 不适合所有场合：箭头函数不能用于所有函数场合，特别是那些需要动态this的场合，如对象方法或事件处理器。
  • 可读性问题：虽然箭头函数可以使代码更简洁，但在复杂的情况下，过度使用箭头函数可能会降低代码的可读性。
const add = (a, b) => a + b; //简洁且不改变this指向

const add = (a, b) => {

    console.log('掌门人');

    return a + b;

};

6.代码的重构秘诀

ES6模块引入了一种组织和加载JavaScript代码的标准方式，提供了import和export语句用于导入和导出模块。

好处

  • 易于维护：模块化代码更易于维护，因为每一个模块都是独立的，具有特定的功能，使得代码组织更加清晰。
  • 重用性：可以轻松重用模块，减少代码冗余。模块可以被多个项目共享，也可以通过npm等包管理器进行分发。
  • 名称空间：模块提供了名称空间，帮助避免全局命名空间污染。
  • 依赖管理：使用import语句可以清晰地声明模块间的依赖关系，使得依赖关系更加明确，模块加载更加有序。
  • Tree Shaking：支持Tree Shaking技术，这意味着现代JavaScript打包工具（如Webpack）可以移除未使用的代码，使最终的打包文件尺寸更小。
  • 更好的性能：可以实现按需加载，只导入所需的模块，从而提升应用程序的性能。
  • 提高代码质量：强制性的使得代码"显式"依赖，增加了代码的可读性和可维护性。

弊端

  • 浏览器支持：尽管现代浏览器大多支持ES6模块，但在一些老旧的浏览器中可能需要使用babel等工具进行转译。
  • 打包和构建工具：可能需要搭配打包和构建工具（如Webpack、Rollup等）来处理模块依赖，增加了项目的复杂性。
  • 严格模式：ES6模块自动运行在严格模式下，且不能被禁用，这可能会影响一些老的代码库。
  • 静态结构：模块的导入和导出被设计为静态，这意味着不能使用表达式和条件导入或导出模块，限制了动态加载模块的能力。

总体而言，ES6模块提供了一种强大和标准的方法来组织JavaScript代码。使用ES6模块有利于实现代码的高内聚低耦合，并且在大型项目中尤其有益。然而，根据项目环境和目标浏览器的支持情况，可能需要额外的工作来确保代码的兼容性和性能。

// math.js

export function sum(x, y) {

    return x + y;

}

// app.js

import { sum } from './math';

console.log(sum(1, 2)); // 输出：3

7.严格比较的智慧

在JavaScript中，使用双等号 (==) 进行比较时将进行类型转换（也称为强制转换），而使用三等号 (===) 进行比较则不会，称为"严格比较"。

好处

  • 预测性强: 使用三等号 (===) 进行比较要求比较的两个值既要类型相同，也要值相同。这让比较的结果更加可预测，避免了因隐式类型转换而产生的意外。
  • 减少错误: 严格比较避免了一些错误，例如，'0' == false 为 true，但是 '0' === false 为 false。
  • 提高性能: 当使用三等号 (===) 时，如果两个变量类型不同，JavaScript引擎不需要进行额外的类型转换，直接返回 false，这比双等号 (==) 可能需要的类型转换步骤要少，所以性能上稍胜一筹。
  • 代码一致性: 在代码中一致使用三等号 (===) 可以增加代码风格的一致性，减少混淆。
  • 更符合编码标准: 许多编码标准和代码联结工具都建议使用三等号 (===) 作为默认的比较操作。

弊端

  • 某些类型转换需求: 在某些情况下，你可能希望进行类型转换。例如，如果你比较来自表单输入的数字字符串和数字类型，你可能会需要双等号 (==) 来提供正确的比较，而使用三等号 (===) 就需要你手动转换类型。
  • 学习成本: 对于初学者来说，理解为什么 0 == '0' 为 true 但 0 === '0' 为 false 可能需要一些时间去理解。
  • 旧代码维护: 如果你正在维护老的代码库，突然改变比较操作符可能会导致新的bug，因此，你可能需要仔细测试代码。
  • api和库的兼容性: 在与某些第三方API和库交互时，可能需要依赖于弱类型比较，如果这些库预期使用双等号 (==) 来允许类型转换，则强制使用三等号 (===) 可能导致不兼容。

总体上来说，在大多数情况下，三等号 (===) 提供了更加安全和清晰的代码。尽管在特定情况下可能需要更灵活的双等号 (==) 实现某些功能，但一般推荐在日常编码中使用三等号 (===) 作为标准的比较操作。

0 === '0' // false, 不同类型

1 === 1   // true,  值和类型都相同

8.错误处理的防线

使用try...catch捕获异常在JavaScript中是一种常见的错误处理策略，它可以让程序在遇到错误时继续执行，而不是直接失败。

好处

  • 提高稳定性：通过捕获可能引起程序崩溃的错误，可以保持程序的运行，防止程序因异常而中断。
  • 用户体验：可以给用户提供更友好的错误信息，而不是让用户看到程序突然的崩溃或者不响应。
  • 错误处理逻辑：可以对捕获的异常执行特定的逻辑，比如记录日志、通知开发者、系统重试等。
  • 控制流管理：try...catch可以帮助控制程序的流程，尤其是在一块代码可能抛出多个错误并需要不同处理方式时。
  • 异步错误捕获：在使用Promises和async/await时，try...catch可以捕获异步代码中的异常。

弊端

  • 性能成本：如果try...catch被过度使用，尤其是在大型循环中，它可能会对性能产生一定的影响。
  • 隐匿问题：如果错误被捕获后没有得到适当处理，可能会导致程序运行中出现难以发现的逻辑错误和隐蔽的bug。
  • 滥用风险：错误捕获如果用得不当，开发者可能会委过于依赖它来“治标不治本”，忽视了更好的代码设计和错误预防策略。
  • 异常流控制：对于控制流异常，如果滥用也可能导致代码结构混乱，增加代码理解和维护的难度。
  • 调试困难：捕获了错误后没有输出或处理，会使得问题调试变得更加困难，因为错误的原因和位置被隐藏了。

总而言之，合理的使用try...catch可以提升错误处理的能力和用户体验，但需要谨慎使用以免掩盖问题和影响性能。在某些情况下，使用前期验证和条件检查来预防错误，比起等错误发生后再处理，会是更好的编程实践。

try {

    JSON.parse('不是JSON串');

} catch (error) {

    console.error('数据解析失败', error);

}

9.远离eval()的诱惑

eval()函数是一个强大但也很危险的JavaScript功能。它允许一个字符串参数被当作JavaScript代码进行执行。虽然它能够为某些特定情况提供方便，但在JavaScript开发中，通常建议避免使用。

好处

  • 灵活性：eval()可以执行一个字符串形式的代码，这在尝试解析来自外部来源的代码片段时可能看起来很方便。
  • 动态执行：它可以在运行时动态地执行代码，这在某些需要动态编译代码的情况下可能很有用。
  • 通过JSON解析：在JSON格式成为标准之前，eval()常被用于解析JSON数据，尽管现在有更安全的JSON.parse方法。

弊端

  • 安全风险：eval()可以执行任何JavaScript代码，因而也可能执行恶意代码。如果eval()使用了用户提供的数据，它可能容易受到注入攻击，如跨站脚本（XSS）攻击。
  • 性能问题：使用eval()通常比直接使用JavaScript代码运行慢，因为引擎需要对字符串进行解析，降低了代码优化的可能性。
  • 调试困难：由eval()执行的代码很难调试，因为它是动态生成的；bug也更难跟踪，因为源代码中不存在。
  • 可读性与维护性：eval()使得代码更难理解和维护，因为它执行的是字符串形式的代码，而不是直观的源代码。
  • 作用域混乱：eval()在局部作用域中执行字符串代码时会引入变量到当前作用域，这可能导致预期之外的变量覆盖。
  • 严格模式的限制：在ES5严格模式中，eval()的行为有所不同，有些之前允许的作用域创建不再被允许。
  • 已有更好的替代方案：几乎所有eval()的用例都可以使用更安全和更高效的替代方案来实现，比如使用new Function构造函数创建函数，或者直接写成JavaScript代码，以及JSON.parse方法解析JSON字符串等。

鉴于以上种种弊端，eval()的使用应该被严格限制，只在没有其他选择且能够完全控制输入的安全环境下使用，并且经过彻底的测试和代码审核。在大多数情况下，应该寻找更现代、安全、高效的替代解决方案。

eval('var a = 2;'); // 不安全，有性能副作用

10.性能的小秘密

缓存DOM查询结果是指在进行DOM操作时，将通过查询获得的DOM元素存储在变量中，这样在下一次需要时就不需要重新查询，提高了效率、避免频繁的DOM操作消耗性能。

好处

  • 性能提升：DOM操作是JavaScript中最耗费性能的操作之一。通过缓存查询结果，减少了对DOM的查询次数，从而减少了页面重绘和重排，提升了应用的响应速度和性能。
  • 减少代码量：当你重复使用某个DOM元素时，通过缓存来引用它，可以减少重复的查询代码，使代码更加简洁。
  • 可读性增强：为DOM元素命名，并在代码中使用这些命名的变量，可以提升代码的可读性。
  • 防止重复查找：如果页面结构复杂，DOM查询可能非常耗时，缓存结果避免了每次操作时的重复查找。

弊端

  • 内存使用：虽然现代浏览器的内存管理已经非常高效，但是不当的DOM缓存可能导致内存占用增加，特别是当缓存了大量未使用或不再使用的DOM引用时。
  • 可能导致过时的DOM引用：如果DOM元素在页面上被动态删除或添加，那么缓存的引用可能会过时。如果继续使用过时的引用，可能会导致错误或无法预见的行为。
  • 可能的内存泄漏：如果不仔细处理，缓存的DOM引用可能导致内存泄漏。特别是当这些缓存的变量在其生命周期结束后没有被适当清除时。
  • 同步更新的挑战：在一些复杂的应用中，保持缓存的DOM元素与页面实际显示的同步可能是一项挑战，需要保证缓存的DOM元素与实际的DOM树保持一致。

综上所述，缓存DOM查询结果在很多情况下是一个提高性能和响应速度的好方法，但需要注意管理好缓存的生命周期和时效性。开发者应确保在元素发生变化时更新缓存，同时在适当的时机清理不再需要的DOM引用，以防内存泄漏。

const button = document.getElementById('submit-button');

for (let i = 0; i < 1000; i++) {

    button.classList.add('clicked');

}

11.DOM操作的奥义

使用DocumentFragment是一种DOM操作的最佳实践，它允许开发者在一个虚拟的节点上进行所有DOM更改，然后一次性将更改应用到实际的DOM树中，减少页面渲染。

好处

  • 性能提升：DocumentFragment是一个轻量级的DOM节点，它不是真实DOM树的一部分，所以在这上面进行操作不会引起页面重排和重绘。
  • 减少操作次数：通过批量的操作减少了DOM的修改次数，降低了由于多次操作DOM而导致的性能问题。
  • 代码整洁：使用DocumentFragment组织代码，可使批量操作更加整洁、集中，并且容易维护。
  • 提高用户体验：DocumentFragment在实际的DOM树中一次性的升级操作，减少了操作时的页面闪烁和卡顿，提供了更流畅的用户体验。

弊端

  • 复杂性增加：对于不熟悉DocumentFragment的开发者来说，它可能会增加代码的复杂性，造成理解和维护上的困难。
  • 兼容性问题：在一些较旧的浏览器中可能不支持DocumentFragment，或者表现存在差异，因此在使用时需要考虑兼容性。
  • 可能的过度使用：如果一味追求性能优化而滥用DocumentFragment，也有可能导致代码可读性和可维护性的下降。
  • 调试难度：DocumentFragment不是真实DOM树的一部分，这可能导致开发者在调试时无法直接见到中间状态，需要更细心地跟踪程序的逻辑。

在绝大多数情况下，DocumentFragment的好处远远大于弊端，它是一个强大的工具，可以在保持良好性能的同时提供丰富的用户界面。正确使用DocumentFragment需要开发者对DOM操作有深入的理解，慎重地评估使用情景，并在必要的时候进行性能测试，以确保其真正地为应用带来了性能提升。

const list = document.getElementById('list');

const fragment = document.createDocumentFragment();

for (let i= 0; i < 10; i++) {

  const li = document.createElement('li');

  li.innerHTML = `Item ${i}`;

  fragment.appendChild(li);

}

list.appendChild(fragment); // 一次性DOM操作

12.事件委托的灵魂

在父元素上监听事件，通常称为事件委托或事件代理，是一种利用事件冒泡机制来优化事件处理的技术，可以利用事件冒泡原理管理多个子元素的事件。

好处

  • 内存使用减少：相比为每个子元素分别绑定事件监听器，事件委托只需要在父元素上绑定一个监听器，可以减少内存使用。
  • 动态元素管理：对于不断变化（如增加和删除）的元素，不需要每次都手动添加和移除事件监听器，因为这些都是在父元素上委托处理的。
  • 性能提升：初始化时，减少了大量事件绑定的操作，减轻了页面载入时的性能负担。
  • 代码简洁：可以使代码更加简洁，因为只需要管理父元素的一个监听器，而不是多个子元素的多个监听器。
  • 程序复用增强：事件处理函数可以更加通用，同一个处理函数可以处理多个子元素的事件。

弊端

  • 事件冒泡的依赖：某些事件不会冒泡，例如focus、blur和mouseenter等，对于这些事件事件委托不起作用。
  • 更复杂的事件对象处理：事件处理函数需要逻辑来确定触发事件的子元素，这可能导致代码相对复杂。
  • 可能的事件冒泡问题：在某些情况下，子元素的事件可能不需要冒泡，或者的确需要被阻止冒泡到父元素，使用事件委托可能就不合适。
  • 事件处理器中的逻辑增加：需要在事件处理器中判断实际触发事件的元素，这可能会造成事件处理器逻辑的复杂化。
  • 延迟处理：由于事件需要冒泡到父元素才会被处理，可能会有一点点的延迟，并且如果冒泡过程中的某个元素调用了event.stopPropagation()，事件处理函数将不会执行。

事件委托是一种强大的技术，可以帮助开发者编写更少、更简洁的代码，并提高Web应用的性能。然而，选择使用事件委托时应考虑具体的使用情境，并确保它不会引入新的问题。在设计事件处理机制时，应合理评估是否应该使用事件委托、在哪个级别的父元素上使用，以及如何处理事件委托带来的潜在问题。

document.getElementById('parent').addEventListener('click', function(e) {

  if(e.target.tagName === 'BUTTON') {

    console.log(`Clicked ${e.target.textContent}`);

  }

});

13.Web Workers的神秘力量

为复杂计算使用Web Workers，避免阻塞UI线程，给用户流畅体验。

好处

  • 防止UI阻塞: 复杂的计算任务或密集的数据处理操作会占用大量CPU时间，如果在UI线程中执行这些操作，将导致界面卡顿或不响应。Web Workers将这些耗时任务移至背后线程执行，避免了主线程的阻塞，使得UI可以持续响应用户操作。
  • 性能提升: 在多核心处理器上，Web Workers使得Web应用能够并行处理，能够更充分地利用现代硬件的计算资源。
  • 背景计算: Web Workers适用于那些在背后长时间运行的任务，而用户可能根本不会注意到这些计算在进行中。
  • 代码组织: 使用Web Workers可以帮助开发者将复杂计算的代码与UI的代码分离，制造出更模块化、结构更清晰的项目结构。
  • 不干扰DOM: Web Workers不能直接操作DOM，这意味着它们在背景执行复杂计算时，不会影响到页面的渲染和展现。

弊端

  • 通信成本: Web Workers是通过消息传递与主线程通信的，大量的数据传递可能会引入额外的性能开销，特别是对于大量的复杂数据结构。
  • 兼容性限制: 虽然现代浏览器普遍支持Web Workers，但在旧的浏览器上可能不可用，这可能会限制应用的兼容性。
  • 调试难度: 调试Web Workers比调试主线程更加困难，这可能会给开发者带来一些麻烦。
  • 资源使用: 如果不合理地创建过多的Workers，有可能会消耗大量的系统资源，反而影响到应用的整体性能。
  • 内存使用: 大数据在Worker和主线程间传递时，如果不是可转移对象(transferable object), 则会被复制，而不是共享，这可能会导致内存使用量的增加。
  • 脚本文件依赖: 创建Web Worker通常需要一个外部的JavaScript文件，这意味着浏览器需要额外发起请求去加载这个文件。

尽管Web Workers并不是适用于所有场景，但它们对于那些需要后台执行复杂或耗时任务的应用来说是一项很有价值的技术。合理地设计和使用Web Workers可以大幅提升应用的性能和用户体验。在决定使用Workers时，必须权衡性能提升与可能引入的复杂性、额外的开销以及兼容性问题。在编码过程中也应注意资源和内存的管理，避免因为不当使用而导致的性能问题。

if (window.Worker) {

    const myWorker = new Worker('worker.js');

    myWorker.postMessage([first.value, second.value]);

    myWorker.onmessage = function(e) {

        result.textContent = e.data;

        console.log('Message received from worker');

    };

}

14.注释的艺术

清晰的代码需要恰如其分的注释，让别人和未来的你易于理解。

好处

  • 增加可读性: 注释可以提供对代码意图和逻辑的说明，帮助开发者快速理解代码。
  • 提高维护性: 当代码需要被修改或扩展时，注释可以帮助维护者理解当初的设计决策。
  • 代码复用: 在函数和类上的注释可以帮助开发者理解如何使用它们，提高代码的复用性。
  • 错误检查: 通过解释复杂的算法和逻辑，注释有助于错误检查和调试过程。
  • 团队合作: 注释是沟通工具，确保了团队成员之间对代码的理解是一致的，尤其是当团队分布在不同地点或存在语言障碍时。

弊端

  • 维护困难: 代码注释需要维护。如果代码在没有对注释进行相应更新的情况下被修改，那么注释可能会变得过时甚至误导人。
  • 过多冗余: 过多或不必要的注释可能会使代码变得混乱，让人难以区分哪些是代码，哪些只是解释。这会降低代码整体的可读性。
  • 可能导致依赖: 如果代码本身不够清晰，开发者可能过分依赖注释来理解代码，而不是改进代码本身的可读性。
  • 影响代码审查: 过多的注释可能会干扰代码审查过程，审查者可能会更多地关注注释，而忽略了实际的代码质量。
  • 提高入门门槛: 对于初学者编写和维护注释可能是一个挑战，他们可能难以确定需要注释的内容和注释的详细程度。

总之，注释是代码通信的重要手段，正确地使用注释可以显著提升代码的可理解性和维护性。然而，注释不是代码不清晰的借口，应该以编写自解释代码为首要任务，辅之以必要的、恰如其分的注释。务必确保注释保持最新和准确，以免引起混淆。

/**

 * 计算两数之和

 * @param {number} a - 第一个数字

 * @param {number} b - 第二个数字

 * @return {number} 返回和

 */

function sum(a, b) {

    return a + b; // 返回整数的和

}

15.代码审查的智慧

定期的代码审查能够确保开发团队内的知识共享和代码质量。

  • 代码审查，通常不是代码实例，而是一个团队工作流程。
  • 通过pull requests（PRs）或其他平台进行同伴间的代码审查。

好处

  • 提高代码质量: 审查过程可以发现潜在的错误和问题，提早修复这些问题可以避免未来的故障。
  • 知识共享: 审查过程可以帮助团队成员了解项目中其他部分的代码，促进知识共享和团队协作。
  • 代码一致性: 审查可以确保代码遵循团队的编码标准和风格指南，保持代码的一致性。
  • 提高开发技能: 接受别人的审查经验可以帮助开发者学习新技能和最佳实践，提高其编程能力。
  • 减少重构: 发现潜在问题的早期阶段可以在问题变得严重和昂贵之前解决问题。
  • 风险管理: 可以帮助团队预见未来维护和功能扩展过程中可能的风险。

弊端

  • 时间消耗: 审查代码是一个耗时的过程，可能会减缓开发流程，尤其在紧迫的项目截止日期情况下。
  • 人际关系压力: 可能会导致团队内的紧张关系，尤其是当代码审查的反馈被视为批评时。
  • 滥用: 代码审查的过程可能滥用，例如审查者可能通过不合理的批评来显示自己的权力。

总结

在这篇文章中，我向各位揭示了JavaScript开发中学习到的一些深藏不露的秘诀。如同练就内功心法，掌握这些最佳实践，同样需要日积月累的实战锻炼。

记住，持之以恒的练习和不断的学习，是通往顶峰的唯一通行证。掌门人祝各位同道中人都能成为披荆斩棘，通向顶峰。

以上仅属于个人的代码实践心得，如有不认可或者错漏之处，请大家嘴下留情哈。

JavaScript编程艺术：掌门人的代码之道的更多相关文章

  1. JavaScript编程艺术-第7章代码汇总（2）

    [7.4节] 重回“JavaScript美术馆”代码 ***亲测可用*** HTML: JS:

  2. JavaScript编程艺术-第7章代码汇总（1）

    1.document.write()(HTML与JS未分离) HTML: JS: 2..innerHTML(直接覆盖) HTML: JS: 3.getAttribute.setAttribute.ge ...

  3. JavaScript编程艺术-第6章（JavaScript美术馆改进版）代码

    基于[第4章(JavaScript美术馆)代码]进行改进(***HTML与JS分离***) (*亲测可用) HTML: JS: CSS:

  4. JavaScript 编程艺术-第4章（JavaScript美术馆）代码

    功      能:在同一个网页上切换显示不同的图片与文本(*亲测可用) 使用属性: a) document.getElementById(" ") ——返回一个与给定的id属性值的 ...

  5. JavaScript编程艺术-第10章-10.2-实用的动画

    10.2-实用的动画 ***代码亲测可用*** HTML: <!DOCTYPE HTML> <html> <head> <meta charset=" ...

  6. JavaScript编程艺术-第10章-10.1-动画

    10.1—最简单的动画 ***代码亲测可用*** 动画:让元素位置随着时间而不断地发生变化 HTML: <!DOCTYPE HTML> <html> <head> ...

  7. JavaScript编程艺术-第8章-8.6.1-显示“缩略词语表”

    8.6.1-显示“缩略词语表” ***代码亲测可用*** HTML: JS: ***end***

  8. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  9. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  10. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

随机推荐

  1. 15. Docker容器监控之(CAdvisor+InfluxDB+Granfana)的详细安装和常规使用

    15. Docker容器监控之(CAdvisor+InfluxDB+Granfana)的详细安装和常规使用 @ 目录 15. Docker容器监控之(CAdvisor+InfluxDB+Granfan ...

  2. yolov5 train报错：TypeError: expected np.ndarray (got numpy.ndarray)

    前言 mac intel 机器上,使用 yolov5 物体检测训练时报错:TypeError: expected np.ndarray (got numpy.ndarray) 这个错误信息 TypeE ...

  3. GBJ 97-1987 水泥混凝土路面施工及验收规范（电子版）PDF 版本 下载

    本规范适用于新建和改建的公路 城市道路 厂矿道路和民航机场道面等就地浇筑的水泥混凝土路面的施工及验收 链接:https://pan.baidu.com/s/17t88jnEU6IrptmEWsyuN3 ...

  4. 可视化|数据可视化文档之 echarts 项目初始化

    数据可视化文档之 echarts 项目初始化 环境搭建 # node 环境 nvm install v11.15.0 # or nvm use 11.15.0 # 查看 node 版本 node -V ...

  5. Bitcoin部署到openEuler RISC-V

      Bitcoin项目源码是用C++写的,我对C++以及它的编译工具又比较熟悉,这次我尝试了在openEuler RISC-V 24.09上面部署Bitcoin.网上编译Bitcoin源码的很多都是以 ...

  6. zk基础—3.集群与核心参数

    大纲 1.zk单机模式是如何启动的 2.zk集群是如何部署和启动的 3.zk集群部署要用什么样配置的机器 4.如何合理设置zk的JVM参数以及内存大小 5.zk配置的核心参数之tickTime.dat ...

  7. Python字典及基本操作(超级详细)

    今天小张帮大家简单介绍下Python的一种数据结构: 字典,字典是 Python 提供的一种常用的数据结构,它用于存放具有映射关系的数据. 比如有份成绩表数据,语文:79,数学:80,英语:92,这组 ...

  8. 从源码解析 QGraphicsItem 旋转、缩放、平移、transform等变换操作，利用QGraphicsTransform实现变形动画

    QGraphicsItem 有3种方式进行变换:1. 最简单方便的是使用 setRotation() .setScale():2. 使用 setTransform() 进行复杂变换:3. 还可以使用 ...

  9. c流程控制

    关于流程控制,一般来说,计算机使用有着三种流程:一就是正常走,按照预先设定的语句序列执行,二就是重复做那么几个动作,直到满足条件,三就是有几条分支走向,根据目前条件去选择分支序列执行. 一.C中的循环 ...

  10. v-bind，v-if，v-for，v-on，v-model基本用法

    总结: 1.v-bind绑定数据:标签属性v-bind:title='xxx',简写:title='xxx', 标签内容{{xxx}} <span :title='message'>{{m ...