这是我参与「第四届青训营 」笔记创作活动的的第3天
一、如何写好JavaScript
各司其职
让html、css javascript的职能分离
- HTML/CSS/JS 各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS解决方案
\
组件封装
什么是组件？
组件是指web页面上抽出来的一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元
组件设计的原则
封装性、正确性、扩展性、复用性。
组件封装基本方法和步骤：
- 结构分析设计
- 展现效果
- 行为设计（API（功能）、Event（控制流））
组件封装的三次重构
- 插件化：将控制元素抽取成插件、插件与组件之间通过依赖注入方式建立联系。
- 模板化：将HTML模板化，更易于kuoz。
- 抽象化（组件框架）：将组件通用模型抽象出来。
过程抽象
什么是过程抽象
为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
过程抽象的特点
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数
高阶函数式对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。
常用的高阶函数
- Once：是一个简单执行一次的函数，无视后来产生的多次执行请求。
- Throttle：一个函数持续地、频繁地触发，那么让它在一定时间间隔后再触发。
- Debounce：一个函数持续地触发，那么只在它结束后过一段时间只执行一次
- Consumer：每隔一段时间才会去调用函数，但是会根据用户需求次数执行到底。
- lterative：可迭代方法，它会返回新的函数，在新的函数中并进行判断，如果可迭代，则迭代的调用新函数里的方法，如果不可迭代，只执行一次。
编程范式
编程范式有三种:命令式，声明式，函数式，
-
命令式: 是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。。
-
声明式：是以数据结构的形式来表达程序执行的逻辑。即告诉计算机应该做什么，但不指定具体要怎么做
-
函数式：以函数为第一位，即函数可以出现在任何地方，可以把函数作为参数传递给另一个函数，即关注做什么而不是怎么做
1、Js的常用数学方法
Math.round：四舍五入 Math.ceil：向上取整 Math.floor：向下取整 Math.pow：求幂 Math.max：求最大值 Math.min：求最小值 Math.radom：随机数
2、Js数据类型
number(数字) String(字符串) Boolean(布尔) null(空占) undefined(未定义) object(引用对象)
3、Js判断数据类型的方法
- typeof：
是可以对基本类型做出准确的判断，但对引用类型就有点力不从心，type返回一个表示数据类型的字符串。
- instanceof：
判断是否是某个类的实例。
- constructor：
查看对象对应的构造函数。
- Object.prototype.toString：
可以立即判断出所有的类型，也是判断数据最简单的判断方法。
二、typescipt的知识
TypeScript 简称是Javascript的超集，
typescript在Js的基础上增加了类型支持
1、ts相比于js的优势
- 更早的发现错误，减少找bug和改bug的时间，提升开发效率
- 程序中任何我i在的代码都有代码提示，
- 强大的类型系统提升了代码的可维护性，使得重构代码更加容易
- 支持最新的ES语法，
- ts类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低成本。
2、安装ts
安装命令 npm i -g typescript
查看版本 tsc -v
编译命令， tsc 文件名
3、简化运行ts的步骤
问题描述： 每次修改代码之后，都要重复执行两个命令，才能运行ts代码，比较繁琐
简化方式: 使用ts-node包 直接在node.js中执行js代码
安装命令 npm i -g ts-node
使用方式 ts-node hello,.ts
