JavaScript
编码原则之各司其责
1.JavaScript
好代码的标准
——
代码可读性：良好的代码应该易于阅读和理解。使用有意义的变量名和函数名，遵循一致的命名规范，注释清晰明了，代码缩进和格式化一致等。
代码复用：遵循DRY（Don't Repeat Yourself）原则，尽量避免重复代码。可以通过封装可复用的功能模块，使用函数、类、模块等来实现代码的复用。
错误处理：良好的代码需要正确处理各种可能的错误情况，包括输入验证、异常处理等。使用
try-catch块来捕获和处理异常，确保程序在错误发生时能够正常运行或给出适当的错误提示。
性能优化：优化代码的执行效率是一个重要的方面。避免不必要的循环和递归，合理使用数据结构和算法，减少不必要的计算和网络请求等，以提高代码的性能。
安全性考虑：编写安全的JavaScript代码是非常重要的。必须注意对输入数据进行验证和过滤，避免XSS（跨站脚本攻击）和CSRF（跨站请求伪造）等安全漏洞。
模块化和依赖管理：利用模块化的方式组织代码，将功能分解为独立的模块。借助工具如
npm、Webpack、Rollup等来管理和打包依赖。
测试和调试：编写良好的测试用例以确保代码的正确性，并使用调试工具来定位和修复
bug。可使用单元测试、集成测试和端到端测试等各种测试方法。
版本控制：使用版本控制工具（如Git）来管理代码
2.HTML/CSS/JS各司其责
——总结：
HTML/CSS/JS
各司其责；应当避免不必要的由JS直接操作样式；可以用class来表示状态；纯展示类交互寻求零JS方案
JavaScript
编码原则之组件封装
1.组件的定义解析及特征
——HTML结构、CSS表现、JS行为API、控制流
2.组件封装基本方法
——1）结构设计、展现效果、行为设计-API（功能）、Event（控制流）
2）重构：插件化、模块化、抽象化（组件框架）
3）原则:封装性、正确性、扩展性、复用性
3.利用原生JS实现电商网站轮播图
可以使用原生JavaScript实现一个简单的电商网站轮播图。以下是一个示例：
HTML
结构：
<div class="slideshow"><div class="slide"><img src="img1.jpg" alt="Slide 1"></div><div class="slide"><img src="img2.jpg" alt="Slide 2"></div><div class="slide"><img src="img3.jpg" alt="Slide 3"></div></div>
CSS
样式：
.slideshow {width: 500px;height: 300px;overflow: hidden;}.slide {width: 100%;height: 100%;display: none;}.slide img {width: 100%;height: auto;}
JavaScript
代码：
window.addEventListener('DOMContentLoaded', function() {var slides = document.querySelectorAll('.slide');var currentSlide = 0;function showSlide(slideIndex) {slides[currentSlide].style.display = 'none';slides[slideIndex].style.display = 'block';currentSlide = slideIndex;}function nextSlide() {var nextSlideIndex = (currentSlide + 1) % slides.length;showSlide(nextSlideIndex);}setInterval(nextSlide, 3000); //每隔3秒切换到下一张幻灯片showSlide(0); //初始化显示第一张幻灯片});
这段代码会在页面加载完成后，自动轮播幻灯片。其中，.slideshow是包含轮播图的容器，.slide是每张幻灯片的外层元素，img是每张幻灯片的图片。通过JavaScript中的setInterval函数，我们可以定时切换幻灯片。在示例中，每隔3秒会自动切换到下一张幻灯片。可以根据需要调整切换间隔时间。
JavaScript
编码原则之过程抽象
1.过程抽象概念
——HOF、装饰器
2.高阶函数使用模式
——高阶函数是指能够接受函数作为参数或返回函数的函数。使用高阶函数可以帮助我们抽象通用的模式，使我们的代码更加简洁和灵活。
一种常见的高阶函数使用模式是函数柯里化（Function Currying）。柯里化是指将一个接受多个参数的函数转化为一系列只接受一个参数的函数的过程。这样做可以使我们能够更灵活地对函数进行组合和调用。
另一个常见的高阶函数使用模式是函数组合。函数组合是将多个函数结合起来形成一个新的函数的过程。通过函数组合，我们可以将多个简单的函数组合成一个复杂的功能。
还有一种常见的高阶函数使用模式是回调函数。回调函数是指将一个函数作为参数传递给另一个函数，并在特定的事件发生时被调用。回调函数常用于异步编程中，例如在网络请求完成后执行某些操作。
3.JavaScript编程范式
——命令式、声明式、三态
函数式编程（Functional Programming: FP）是一种 编程范式（指计算机编程中的典范模式或方法，就是一种思维方式），属于结构化编程，用于描述数据（函数）之间的映射关系 注意：函数式编程中的函数，不是指程序中的函数（方法），而是数学中的函数（映射关系），如：y = f(x)，指 x 和 y 之间的关系 常见的编程范式有：过程化（命令式）编程、面向对象编程、声明式编程等
1）过程化编程：最原始的传统编程，将问题抽象为一系列步骤，然后通过编程方式将这些步骤转换为程序指令集，这些指令集按照一定顺序排列；常见的过程化编程语言有机器语言、汇编语言、BASIC、C、FORTRAN 等；过程化语言特别适合解决线性（或者说按部就班）的算法问题。
2)面向对象编程：将待解决问题抽象为面向对象的程序中的对象，利用封装使每个对象都拥有个体的身份；程序就是成堆的对象，彼此通过信息的传递，请求其它对象进行工作；面向对象包括三个基本概念：封装性、继承性、多态性。常见的面向对象语言有 Java、C、C++、JavaScript。
3)声明式编程：以数据结构的形式来表达程序执行的逻辑。只需要定义好该如何处理数据，不需要指定具体实现；SQL 语句就是最明显的一种声明式编程的例子。
JavaScript
代码质量优化之路
代码实践
1 -交通灯
——1）数据抽象
状态列表
2）异步+函数式
- 异步函数：如果一个异步函数被调用时，该函数会立即返回尽管该函数规定的操作任务还没有完成。比如一个人边吃饭，边看手机，边说话，就是异步处理的方式。
代码实践
2 -洗牌
——1）错误算法-不均匀
2）正确算法
代码实践
3 -分红包
——1）需要改进
2）改进-抽值排序再切分
