一.各司其责

1. JavaScript 好代码的标准

1、使用 Let 和 Const 声明变量
2、尽可能的使用隐式构造函数
3、字符串首选单引号
4、尽可能使用字符串插值
5、选择命名函数表达式
6、在回调中首选箭头函数
7、使用严格等式进行等式比较
8、不要嵌套三元组

2. HTML/CSS/JS 各司其责

HTML、CSS和JS三部分代码各司其责，也就是各自控制各自所负责的部分。

避免不必要的由JS直接操作CSS
使用class来切换样式而不是修改style
能单独使用CSS实现的样式，尽量使用CSS，追求纯展示性内容0JS

二.组件封装

组件是 Web 页面上所抽取的模版、功能与样式的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。

1. 组件的定义解析及特征

JavaScript组件是一种用于构建用户界面的技术，它允许将用户界面分解为独立、可重用的部分。组件在JavaScript中可以使用函数或类来定义。

函数组件: 它是一个纯函数，接收props作为输入并返回一个React元素。

类组件: 以ES6 class语法实现，有自己的状态和生命周期方法。

在使用组件时，可以为其传递props，在组件内部可以使用这些props来渲染输出。组件可以在应用程序的任何地方重用。

React提供了一个JSX语法来方便地渲染组件, JSX是一种JavaScript扩展，允许在JavaScript代码中嵌入XML类型的语法。在JavaScript中组件还有一些其他特征，如：

状态(state)：组件可以有自己的状态，这些状态可以在组件内部进行更改，并且会影响组件的渲染输出。
生命周期方法：组件在其生命周期中会调用一些特定的方法，如componentDidMount和componentWillUnmount。这些方法可以用来在组件加载和卸载时执行特定的操作。
上下文(context)：组件可以通过上下文来访问全局的数据和方法，而不必通过props传递。
插槽(slot)：组件可以定义插槽来允许其他组件在其内部渲染内容。

2. 组件封装基本方法

在 JavaScript 中，组件封装的基本方法是使用 JavaScript 类来实现。JavaScript 类可以被用来创建可重用的组件，并且能够通过继承和多态等特性来实现组件的封装。

简单来说，组件封装的过程主要包括以下几步：

定义组件类，类中包含组件的属性和方法。
定义组件的构造函数，用来初始化组件的属性。
定义组件的渲染函数，用来实现组件的渲染。
定义组件的生命周期函数，用来控制组件的生命周期。
在主程序中实例化组件对象并进行渲染。

三.过程抽象

在学习编程的过程中，一个核心的任务是编写可以完成任务的函数。

1. 过程抽象概念

在JavaScript中，过程抽象是通过函数来实现的。函数可以将代码块封装起来，并且可以在程序的其他地方重复使用。函数可以接受参数并返回结果，这样可以避免重复的代码并提高程序的可重用性。

2. 高阶函数使用模式

高阶函数是指接受其他函数作为参数或返回一个函数的函数。在JavaScript中，常用的高阶函数有map、filter、reduce等，它们都是Array对象的方法。

可以使用高阶函数创建新函数。

也可以使用高阶函数来实现很多常见的编程模式，例如函数组合、柯里化、控制反转等。

3. JavaScript 编程范式

JavaScript是一种脚本语言，它的编程范式主要包括面向对象编程（Object-Oriented Programming）、函数式编程（Functional Programming）和事件驱动编程（Event-Driven Programming）。面向对象编程（OOP）是JavaScript中常用的编程范式之一，它通过封装数据和方法来构建对象，使得代码更易于维护和重用。

函数式编程（FP）是另一种常用的编程范式，它将函数作为一等公民，通过抽象和柯里化等技术来构建程序。

事件驱动编程是JavaScript中另一个重要的编程范式，它通过响应用户或浏览器事件来控制程序流程，使得程序能够动态响应用户输入。

JavaScript还支持其它的编程范式，例如：迭代器模式、观察者模式等。对于面向对象编程（OOP），JavaScript提供了类和原型继承两种方式来创建对象。

类是 ES6 中新增的特性，可以通过 class 关键字来定义类，它实现了类的继承和多态。

原型继承是 JavaScript 中最早的继承方式，通过原型对象来实现继承。

对于函数式编程（FP），JavaScript 提供了高阶函数、闭包、柯里化等特性来支持函数式编程。

对于事件驱动编程，JavaScript提供了事件监听器和回调函数来响应用户或浏览器事件。

JavaScript还支持多线程编程，使用worker对象可以在后台运行脚本，不会阻塞UI的渲染。 JavaScript还支持异步编程，通过回调函数，Promise对象和async/await等特性来支持异步编程。

回调函数是 JavaScript 中最早的异步编程方式，通过将回调函数作为参数传递给异步函数来实现异步操作。

Promise对象是 ES6 中新增的特性，它可以解决回调地狱问题，使得代码更具可读性。

async/await是ES2017中新增的特性，它可以使异步代码看起来像同步代码，更加简洁易读。

在JavaScript中，还有一种流程控制范式叫做协程，它可以在单线程中实现多任务并发执行。

总的来说，JavaScript是一种灵活的语言，支持多种编程范式，可以根据项目需求来选择合适的编程方式。

JavaScript 编码原则 | 青训营笔记