JavaScript|监听对象与响应式原理

很多前端 JavaScript 框架,包含但不限于(Angular,React,Vue)都拥有自己的响应式方法,而这些方法其实都是基于监听对象来实现的,这里我们来看看监听对象实现响应式的原理。

Object.defineProperty 监听对象

如果需要监听对象的属性变化,可以使用Object.defineProperty的存储属性描述符的方法来监听。

const obj = {
  a: 1,
  b: 2,
  c: 3
}

// 监听一个属性的变化
Object.defineProperty(obj, 'a', {
  set(val) {
    console.log('a set', val)
  },
  get() {
    console.log('a get')
    return this.a
  }
})
阅读全文 »

Vite原理和好处

引言

前段时间我实习的时候把项目的构建工具升级到Vite,感觉体验确实比基于Webpack5的Vue-Cli3丝滑了不少,那么我们来一起探索一下Vite相对于Vue-Cli3好在哪吧。

阅读全文 »

微服务|现有技术框架选型与资料整理

框架集合

微服务是分布式架构的最佳实践方案,那这种方案它也需要具体的技术框架去落地。所以在全球有很多的互联网公司也都在去尝试开发自己的微服务落地技术。但是在这些技术里,真正广为人知的就是Spring Cloud。Spring Cloud 以微服务为核心的分布式系统构建标准,是一系列框架的有序集合,直至现在,由不同编程语言、不同技术框架所开发的微服务系统中,基于 Spring Cloud 的解决方案仍然是最为主流的选择。

Spring Cloud

Spring Cloud Alibaba

62fcb02ae2c64
阅读全文 »

JavaScript|Promise使用详解

Promise 之前实现异步的弊端

首先看一个例子,再没有Promise之前,实现一个网络异步请求:

function requestData(url, successCallback, failtureCallback) {
    // 模拟网络请求
    setTimeout(() => {
        // 获取请求结果
        // url 传入的是 ricky 则请求成功,否则请求失败
        if (url === 'ricky') {
            let res = {
                name: 'ricky',
                age: 18
            };
            successCallback(res);
        } else {
            let error = '请求失败';
            failtureCallback(error);
        }
    }, 3000);
}

requestData('ricky', (res) => {
    console.log(res);
} , (error) => {
    console.log(error);
} );

这种实现方法有很多弊端:

  1. 如果是我们自己封装的requestData,那么我们在封装的时候必须要自己设计好callback名称, 并且使用好
  2. 如果我们使用的是别人封装的requestData或者一些第三方库, 那么我们必须去看别人的源码或者文档, 才知道它这个函数需要怎么去获取到结果
阅读全文 »

微服务|概念认识与相关问题

认识微服务

微服务其实是一种架构风格,我们在开发一个应用的时候这个应用应该是由一组小型服务组成,每个小型服务都运行在自己的进程内;小服务之间通过 HTTP 的方式进行互联互通。

扩展性

在单体应用中,如果要对模块进行扩展,那么需要对所有模块进行扩展。比如一个电商系统,我可能只需要扩展秒杀服务,但是在单体应用下进行扩展时其他功能也会扩展,会造成大量的资源浪费。而利用微服务可以只扩展响应服务即可。

阅读全文 »