前端开发经验总结和分享

前端开发经验总结和分享

我要分享的内容有3点

1. 　　代码规范
2. 　　mockdata
3. 　　RxJS

正文

一、代码规范

 1. vscode 代码格式化工具 Prettier

配置一致

1.1 vscode安装Prettier

搜索插件名称：Prettier - Code formatter

1.2 项目根目录下添加配置文件.prettierrc

{
    "tabWidth": 2,
    "printWidth": 100,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "overrides": [
        {
            "files": ".prettierrc",
            "options": {"parser": "json"}
        }
    ]
}

2. 小函数

坚持定义简单函数

考虑限制在75行之内

为什么呢？

• 简单函数更易于测试，特别是当它们只做一件事，只为一个目的服务时。
• 简单函数促进代码重用
• 简单函数更易于阅读
• 简单函数更易于维护
• 小函数可避免易在大函数中产生的隐蔽性错误，例如与外界共享变量、创建意外的闭包或与依赖之间产生意外耦合等。

3. 命名约定

看到名字立刻知道它包含了什么，代表了什么

4. 扁平

坚持尽可能保持扁平的目录结构

5. 惰性加载

二、mockdata

 提前跟后端把接口数据约定好，包括接口名称，数据字段等

http://mockjs.com/

 因为上一家公司用的框架是Angular，实现方法是把mockdata写成一个底层服务。Vue应该有也它的实现方式。

https://www.cnblogs.com/famensaodiseng/p/12015281.html

三、 rxjs

1. rxjs是什么？

RxJS是一个库，它通过使用observable序列来编写异步和基于事件的程序。

它提供了一个核心类型Observable和各种操作符（map, filter, reduce, every, 等等），这些数组操作符可以把异步事件作为集合来处理。

2. rxjs能做什么？

javascript写前端页面的时候，除了展示数据UI之外，还需要相应用户的操作，展示动态的数据，动态加载UI。于是前端的异步有：事件，ajax，动画，定时器等，处理这些的时候常见的问题有：异步的回调地狱，race condition，内存泄漏，管理复杂状态，错误处理等

（1）回调地狱：按照普通的javascript方法写，所有的处理写在某个事件的完成后的回调中，当有多个回调一次执行后1->2->3->4很容易将代码写成火箭形，很大一团根本没法改。

（2）race condition:是指系统出现不恰当的执行时序，而得到不正确的结果。比如搜索框中，每次输入后发送请求获取结果展示在搜索框下面，由于网络或者后端查询的原因有可能导致最后发送的请求比之前的请求更快的完成了，这时最终展现的并不是最后那个请求的结果。

（3）内存泄漏：当单页面应用切换页面时，未在合适的时机移除监听事件造成内存泄漏

（4）复杂状态的管理：异步带来了状态的改变，可能会使状态管理变得非常复杂，尤其是某个状态有多个来源时，比如有些应用，一开始有一个默认值，再通过Ajax获取初始状态，存储在localStorage，之后通过WebSocket获取更新。这时查询状态可能是同步或者异步的，状态的变更可能是主动获取也可能是被动推送的，如果还有各种排序、筛选、状态管理将会更加复杂

（5）错误处理：javascript中的try catch只能捕获同步的错误，对于异步的错误难以获取。

promise中可以使用一个全局的catch

3. 有了promise，为什么还需要rxjs?

Promise已经解决了很多异步的难点，比如将回调地狱改为了链式调用，统一同步和异步代码，但是promise只有一个结果，并且不可以被提前取消。

通过使用rxjs，我们得以将业务逻辑，与流本身的变化规律分离，获得更高级的表达能力。

这里有一个潜藏的重要问题，就是这些流的具体取值，实际上运行时决定的，我们在编码期并不知道，但是不妨碍我们在编码期描述针对流的操作。

RxJS项目实战——请求依赖合并，代码如下：

https://stackblitz.com/edit/rxjs-jq8wmr

参考：https://segmentfault.com/a/1190000020268578