Blogs
Blogs copied to clipboard
SugarTurboS
SugarTurboS Blog
## 本文流水线  ## 看完这篇文章你能学到什么 - 科普 Redux 相关知识 - 什么是 Immutable，为什么要用它 - 科普所涉及的 `Event Sourcing`、`CQRS`、`Flux`相关知识 - Redux 这个磨人精在项目中的问题 - 为什么我们要用 redux-saga、redux-thunk 等 - 写惯了 hooks，能不能用 hooks 写状态管理，引入 hox -...
## 本文流水线 ## 看完这篇文章你能学到什么 - 科普下所涉及的 `函数式编程`、`洋葱模型`相关知识 - 手把手带你看 redux 源码 - 了解 redux 库中的一些设计理念 - 再也不怕面试官问你 redux 为什么返回一个新的 state ## 正文开始 ### redux 是啥？ Redux 是 JavaScript 状态容器，提供可预测化的状态管理方案, 官网里是这么介绍的...
不知道有没有跟我一样，对于设计模式存在困惑的，以我为例，不瞒大家，我对设计模式真的是“看山就是山”、“看水就是水”、“看理论就是看理论”。毕业之前，我自己捣鼓的东西/项目，几乎没有设计的思想。**老夫才不管那么多，直接梭哈**，But，正是因为这样，才导致因设计缺陷、代码实现缺陷，为后期维护、开发迭代，带来了麻烦。 很真实，职级晋升有一点要求就是需要掌握设计模式，开玩笑，我是那种为了`金钱`低头的人吗？我是真的想学习，所以，工作之余，也有去看《JavaScript 设计模式》，但真的就只掌握了一些理论知识，未实战过。 > 不是我不想实战，而是我没有形成这种潜意识，没有在日常开发中，能想到原来这块逻辑、这个核心模块可以这么设计~ 这不，前两天，组内开了一次组里内部分享，分享主题为：《前端设计模式》，听完了这场分享，嗯，**一语惊醒梦中人**，这不还热乎着，赶紧记录一下 - 主要讲 - 策略模式 - 发布-订阅模式 - 装饰器模式 - 适配器模式 - 代理模式 - 责任链模式 ## 正文开始 虽然前边我说不讲干巴巴的理论知识，但是呢，我们还是走一下流程的。就跟你相亲一样，你总不能一上来直接说我有房有车，无不良嗜好...最起码简单介绍一下吧~ ### 什么是设计模式？ 官方解释一点就是 : 模式是一种可服用的解决方案，用于解决软件设计中遇到的常见问题。 说白了，就是**套路**，举个 🌰，我们玩`贪玩蓝月`，你第一关用了半小时，第二关用了一小时，第三关用了两小时.......
## 开篇 最近在做一个chrome app的云相机应用，应用包括拍照、摄像、保存照片视频、上传文件等等核心功能，其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的，其一是总结梳理知识点，最重要是希望对有相关需求的读者提供一些指导。 注：本篇文章以实战为准，理论知识不做过多介绍。 ## 拍照 HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 浏览器兼容性如下：  从上图可以看到，主流浏览器Firefox、Chrome、Safari、Opera等等已经全面支持。 **1、获取视频流，并用video标签播放。** ``` -------------------------------------------------------------- const videoConstraints = { width: 1366, height: 768 }; const videoNode = document.querySelector('#video'); let stream...
## 概述 先聊一聊业务背景,随着系统服务的不断开发,我们的系统会充斥着各种个样的业务.这种时候,我们应该要开始考虑一下如何将系统的粒度细化.举个常见的例子: 电商系统可以拆分为 商品模块,订单模块,地址模块等等.这些模块都可以独立抽取出来,形成一个单独的服务.这就会涉及到各个模块之间的通信问题,一些简单的服务,我们可以通过 `rpc` 接口 直接进行通信,但是有些服务却不适用这种模式.本文主要讲一下在`多数据源`路上遇到的一些坑. #### 多数据源  #### 项目结构 源码地址: https://github.com/jaycekon/SpringBoot/tree/master/spring-boot-mybatis-multi  配置文件: `DataSourceConfig` ``` java @Bean(name = "masterDataSource") @Qualifier("masterDataSource") @ConfigurationProperties(prefix = "spring.datasource") public DataSource masterDataSource()...
# 概述： 最近在开发中遇到了一个刚好可以用AOP实现的例子，就顺便研究了AOP的实现原理，把学习到的东西进行一个总结。文章中用到的编程语言为kotlin，需要的可以在IDEA中直接转为java。 这篇文章将会按照如下目录展开： - AOP简介 - 代码中实现举例 - AOP实现原理 - 部分源码解析 # 1. AOP简介 相信大家或多或少的了解过AOP，都知道它是面向切面编程，在网上搜索可以找到很多的解释。这里我用一句话来总结：AOP是能够让我们在不影响原有功能的前提下，为软件**横向扩展**功能。 那么横向扩展怎么理解呢，我们在WEB项目开发中，通常都遵守三层原则，包括控制层（Controller）->业务层（Service）->数据层（dao）,那么从这个结构下来的为纵向，它具体的某一层就是我们所说的横向。我们的AOP就是可以作用于这某一个横向模块当中的所有方法。 我们在来看一下AOP和OOP的区别：AOP是OOP的补充，当我们需要为多个对象引入一个公共行为，比如日志，操作记录等，就需要在每个对象中引用公共行为，这样程序就产生了大量的重复代码，使用AOP可以完美解决这个问题。 接下来介绍一下提到AOP就必须要了解的知识点： - 切面：拦截器类，其中会定义切点以及通知 - 切点：具体拦截的某个业务点。 - 通知：切面当中的方法，声明通知方法在目标业务层的执行位置，通知类型如下： 1. 前置通知：@Before 在目标业务方法执行之前执行 2. 后置通知：@After...
## 背景 在[自定义Egg.js的请求级别日志](https://juejin.im/post/5bdcfd1f518825171b2d820d)这篇文章中，我们实现了自定义请求级别的日志模块。看上去功能是完整了，但好像还缺点什么。 大家在根据日志追查问题的过程中，很多时候看到了某条log信息想去找出处，但是实际上代码里面打相同类型的log地方可能不止一处，这时你就比较难去定位这行log到底是哪里打的。 举个最极端的例子 ```javascript //home.js class AppController extends app.Controller { async first() { this.ctx.swLog.info('in controller'); await this.ctx.render('first.html'); } async second(){ this.ctx.swLog.info('in controller') await this.ctx.render('second.html'); } } ``` 上面的例子虽然比较极端，但是我们在代码中难免会碰到类似的情况。两个route对于的controller中都打印了相同的log，你在查日志的时候，是无法区分log到底是first里面打的还是second里面打的。...
在之前的项目中遇上移动端微信h5页面上传用户录像的功能需求，在简单使用input type=file的时候发现，ios录像上传会做自动压缩，而安卓端会直接上传录制的原视频，在用户不主动设置降低分辨率的情况下导致录像体积巨大，上传缓慢，体验及其不好，便有了这次的优化之旅。  在当下浏览器的飞速发展，可以看到getUserMedia这个获取媒体功能权限的API已经有了很好的兼容性，那么我们便从浏览器端主动调用摄像头功能入手。实时音视频通信的未来是WebRTC的天下，在安卓微信浏览器（X5内核）上兼容性很好，直接使用开源的RecordRTC JS封装，交互体验好，未来可以支持实时活体审核。 在这里先给大家安利一个控件recordrtc：https://github.com/muaz-khan/RecordRTC 目前这个组件集成了录像录音录屏多种功能，本文暂以录像的应用为例，欢迎大家试验和探讨研究。 首先，调用浏览器获取流媒体权限必不可少 ``` const mediaConstraints = { audio: true, video: true } navigator.mediaDevices.getUserMedia(mediaConstraints) .then(this.successCallback) .catch(this.errorCallback) ``` 紧接着 succuess回调(successCallback(stream))中进行video标签与摄像头的相关绑定，同时初始化recordrtc，相关常见配置大家可以去查看下文档噢(这里碰上个小坑，一开始直接使用 new RecordRTC(stream)，结果发现微信里面录的视频有相当的卡顿感，改用了MediaStreamRecorder，神秘优化点...) ``` let recordingPlayer =...
> * 苏格团队 > * 作者：Brady # 背景 随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了。为解决这个问题，我们把这个组件写成了单独的页面挂到一个域名下，其他项目采用iframe或者webview的方式去加载这个页面，从而实现功能的简单复用。 不过这过程中也产生了很多问题，单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。 # 为什么会跨域 为了保证用户信息的安全，95年的时候Netscape公司引进了同源策略，里面的同源指的是三个相同：协议、域名、端口。 违反了同源策略就会出现跨域问题，主要表现为以下三方面： * 无法读取cookie、localStorage、indexDB * DOM无法获得 * ajax请求无法发送 # 场景 最近在做一个需求，需要用iframe引入一个别人封装好的类似视频播放器的东西。iframe里面有一个全屏的按钮，点击后需要页面让iframe全屏，由于受到同源策略的限制，iframe无法告诉页面全屏。 # 解决办法 ## 设置domain document.domain作用是获取/设置当前文档的原始域部分，同源策略会判断两个文档的原始域是否相同来判断是否跨域。这意味着只要把这个值设置成一样就可以解决跨域问题了。 在此我将domain设置为一级域名的值，a页面url为a.demo.com，a页面中iframe引用的b页面url为b.demo.com，具体设置为 ```...
最近开发的时候遇到一个问题：当项目越来越大的时候，webpack构建和编译的速度变得很慢。尽管webpack4官方宣称速度提高了90%以上，但实际使用的时候感觉速度和webpack2也差不多。我实在受不了热加载的时候要等几秒才能编译好，于是就开始了优化之路。 最终优化的效果不错，提速达到了80%以上。一路上按着以前做实验的思维去优化，经历了各种问题，相比于分享解决问题的方法，我反而更想分享下解决问题的思路。 ## 先量化目标 一般做实验之前，我们都要先定一个目标。 但是问题来了，虽然感觉很慢，但我不知道具体花了多少时间，慢是慢在哪里，所以也没办法知道我们可以优化到什么程度，优化也无从下手了。 于是首要的任务就是获得webpack编译过程的信息。 在webpack的官方文档中找了一大圈后，发现了配置中devServer.stats属性可以获得编译过程的完整信息 ``` stats: { timings: true, modules: false, assets: false, entrypoints: false, assetsSort: 'field', builtAt: false, cached: false, cachedAssets: false, children: false, chunks:...