Blogs
Blogs copied to clipboard
SugarTurboS
SugarTurboS Blog
> * 苏格团队 > * 作者：Brady ## 背景 最近团队内部需要用到一个小程序，主要功能简单概括是团队成员之间可以相互发送评价，并能够查看自己收到和发出的评价以及团队中各成员收到的评价数量。 开发人员一开始是只有我一个人，之前并没有过开发小程序的经验。于是就毅然开始了小程序开发的踩坑之路。 ## 技术选型 技术选型包括前端框架以及服务端语言及数据库的选型。 **前端技术选型：** 在前端方面，希望能够达到的目标是： * 工程化、组件化 * 有好用的ui库 * 有良好的社区维护，比较少bug * 文档健全，容易上手的 目前流行的小程序框架主要有三款，分别是**WePy、mpvue、Taro**。 根据上述的目标来筛选的话，基本上这三款都是符合要求的。前两款的代码风格都是类似于vue，第三款是类似react的语法，并且可以将一份代码转换为h5、RN、支付宝小程序等。由于本人所在公司用的技术栈主要为react，为了减少学习成本和后期换人开发维护的成本，最终选择taro作为前端的框架。 **服务端技术选型：** 在服务端方面，由于我只会用nodejs和mongodb，所以选择不多。打开小程序的开发者了解到有提供云开发的功能，那就在这两种方案之中挑一个了。 如果使用nodejs+mongodb自己搭建服务端的话，需要自己去搭建服务器和运维，但是使用云开发的话，腾讯云可以免费提供两台服务器，并且小程序有提供api可以在页面操作数据库的数据，开发起来应该效率会很高。 考虑到需要开发的小程序并不复杂而且用户量只是部门内的几十个人，所以先选择云开发把小程序做出来再说。 ##...
背景 --- + 场景一：前后端对接接口，增删改查，一开始请求的参数，基本是单条数据，json格式基本是{"key":"value"}，产品后续扩展，传参变成批量操作json格式为[xxx,xxx]或者[{"key":"value"}]，此时后端修改原接口的接收对象为数组的话，前后端灰度发布，就会存在旧版本不兼容 + 场景二：产品的客户端，可能由web端，PC端，App端组成，例如当某个接口的参数结构改造为数组时，web端更新了，而App和PC端未更新，就存在不兼容其他端 解决思路 --- 1. 新增接口 - 优点：不影响旧接口，影响范围小 - 缺点：重复的代码，后期存在无用的接口 2. 前后端一开始约定数组的请求参数 - 优点：比较根本解决问题 - 缺点：程序员的缺点，不是所有程序员都能预先判断接口参数的类型 3. 绝大多数情况是遇到问题解决问题，思路是后端拦截处理接收的请求参数，校验正确后，统一将json数据封装为一个通用对象或者数组 - 优点：只需重构原先的接口即可兼容两种情况 - 缺点：需要自定义json的解析，解析不好会报json反序化失败 上代码 --- ### 以下是尝试用三种方法解决以上场景的过程...
>**与Synchonized的对照:** ThreadLocal和Synchonized都用于解决多线程并发訪问。可是ThreadLocal与synchronized有本质的差别。synchronized是利用锁的机制，使变量或代码块在某一时该仅仅能被一个线程訪问。而ThreadLocal为每个线程都提供了变量的副本，使得每个线程在某一时间訪问到的并非同一个对象，这样就隔离了多个线程对数据的数据共享。而Synchronized却正好相反，它用于在多个线程间通信时可以获得数据共享。 **Synchronized用于线程间的数据共享，而ThreadLocal则用于线程间的数据隔离。** ---------- ### 一、用法 ### 把要线程隔离的数据放进ThreadLocal static ThreadLocal threadLocal = new ThreadLocal() { protected T initialValue() { 这里一般new一个对象返回 } } 线程获取相关数据的时候只要 threadLocal.get(); 想修改、赋值只要 threadLocal.set(val) ### 二 、使用场景 ###...
**角色：产品汪小T，程序员小C** --- 小T：小C，有活干了。我们想做个在线题库系统，老师可以搜索题目来备课。 小C看着简易的需求稿，心想，我一分钟几百万上下，竟然找我做这么简单的需求。建个题目表不就完事了。 小C：题目数据从哪里来，包含什么属性？ 小T：我们第一期题目数据是从A公司那里买过来的，题目包含正文，选项，答案，题型，难度。 小C：嗯，也就是我要建一张question表，包括这五个属性。那题型和难度有哪些呢？ 小T：题型有五种，单选，多选，判断，填空，解答。难度有3种，简单，一般，困难。用户可以根据题型或者难度来筛选。 小C拿着笔画了一下：OK，表设计出来了 **t_question表** 字段 | 属性 | 描述 ---|---|--- uid | char(32)|唯一标示 body | TEXT | 正文 options | JSON | 题目选项 answer...
### 背景 最近在用Electron开发一款应用，其中有涉及到检测因特网是否断开的需求。Electron基于Chromium和Node.js，让你可以使用HTML、CSS和JavaScript构建应用。所以Electron提供nodejs、浏览器两套运行环境。 笔者最先考虑到的方案HTML5提供的online/offline网络连接事件。 ``` window.addEventListener('online', ...) window.addEventListener('offline', ...) ``` 结论很失望，这两个网络连接事件，只是检测本地网络连接状态。 既然浏览器没有提供检测因特网是否断开的接口，笔者只能在nodejs寻求答案。 ### 调研 说到nodejs，笔者最先想到是去npm仓库搜索现有的库。找到了两款检测因特网状态的库[internet-available](https://www.npmjs.com/package/internet-available)、[is-online](https://www.npmjs.com/package/is-online) #### internet-available 这个库检测因特网连接状态原理，是检测dns连接状态。 这里大家肯定有个疑问，使用nodejs原生模块dns不是更简洁吗？ 你说的没错，nodejs确实提供这样的方法，但是dns原生模块并没有提供超时检测。internet-available可以设置超时参数，默认是5000ms（依赖dns-socket库实现dns超时，有兴趣可以研究其源码，这里不做展开）。 #### internet-available使用举例： ``` var internetAvailable = require("internet-available"); internetAvailable().then(function(){ console.log("Internet available");...
### 一、调试技术的起源 对于每位开发者而言，bug已经是不能再寻常的东西，debug也是家常便饭的事情。然而寻根溯源起来，还得从上个世纪五十年代讲起。 1947年9月9日，哈佛大学在测试马克II型艾肯中继器计算机的时候，一只飞蛾粘在一个继电器上，导致计算机无法正常工作，操作员把飞蛾移除之后，计算机又恢复了正常运转。于是他们将这只飞蛾贴在了他们当时记录的日志上，并在日志最后写了这样一句话：First actual case of bug being found。这是他们发现的第一个真正意义上的 bug，这也是人类计算机软件历史上发现的第一个 bug。他们也提出了一个词，“debug（调试）”了机器，由此引出了计算机调试技术的发展。  ### 二、Chrome 开发者工具 对于web前端而言，我们每天都在使用开发调试工具进行查看dom结构、js断点和查看分析登录请求等操作，最熟悉的开发调试工具 应该莫过于Chrome的Devtools和Firefox的FireBug了。 Chrome 开发者工具其实是一个用 HTML，JavaScript 和 CSS 写的 Web 应用程序，被集成在浏览器中。其基于远程调试协议，与浏览器架构关系如下：  由图可知： - 远程调试协议基于...
在当下的的前端项目中，图片功能可以说是非常常见的，图片的展示、图片的裁剪编辑、图片的上传等，那么我们的项目便来了个需求。 当下我们项目中需要一个可自由编辑图片的功能，当图片可能出现需要频繁编辑，同时能满足发现裁剪不满意想要微调的时候，会发现如果我们处理图片按照平常的习惯，如裁剪后上传服务器或者转base64，都是不符合需求的。那么该怎么处理比较好呢？如何以尽量少的网络请求、少占用存储来解决应用场景呢？那么，便想到了只用纯数据来跟我们的功能打交道。 先安利个裁图神器cropperjs，个人认为是个易上手，配置和api方法蛮齐全的一个组件库。 项目内引入，一定不要漏了引用样式 ``` import Cropper from 'cropperjs'; import 'cropperjs/dist/cropper.css'; ``` 这里我们以react为例 ``` this.state = { width: 640, //图片展示宽 height: 360, //图片展示高 imgWidth: 640, //图片实际宽 imgHeight: 360, //图片实际高 imgLeft:...
 不知道小伙伴有没有注意到，自从react更新到16.3版本后，以前使用的`componentWillMount`、`componentWillReceiveProps`、`componentWillUpdate`三个生命周期函数都有eslint报警，让我们使用`UNSAFE_`前缀的新的生命周期函数。不禁有疑问“react这是意欲何为啊”？为什么要加`UNSAFE_`前缀？ ## 为什么要对这些生命周期函数报警？ **1、componentWillMount** `componentWillMount`生命周期发生在首次渲染前，一般使用的小伙伴大多在这里初始化数据或异步获取外部数据赋值。初始化数据，react官方建议放在`constructor`里面。而异步获取外部数据，渲染并不会等待数据返回后再去渲染。 案例一：如下是安装时监听外部事件调度程序的组件示例 ``` class Example extends React.Component { state = { value: '' }; componentWillMount() { this.setState({ value: this.props.source.value }); this.props.source.subscribe(this.handleChange); } componentWillUnmount() { this.props.source.unsubscribe(this.handleChange...
## 背景 最近，由于公司业务需要，接入了**微信web端分享**接口。虽然微信的接口文档已经很详细了，但是缺少实战代码。小编搜了一下掘金网站好像也很少这方面的分享（或许是太过简单，大神们都不屑于分享这类经验。当然也有客观原因，现在大多都做小程序了，微信web端的流量被分流了很多。 ## 准备 此为[微信公众平台接口文档](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432)地址 此为[微信公众平台接口测试帐号申请](https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login)地址 此为[获取基础access_token](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183)地址 此为[微信JS-SDK说明文档](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)地址 以下nodejs端是基于egg框架。 ## 开发 ### 1、申请公众号或测试版公众号 ### 公众号申请（这里不详说公众号申请，有需要自己去官网看文档）用于生产环境的开发。 对于前期开发阶段，可以去[微信公众平台接口测试帐号申请](https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login)，微信扫描二维码即可申请。 注意事项： 1、填写JS接口安全域名，绑定服务器域名 2、扫描“测试号二维码”，把你的微信号加入列表，然后你的微信就有权限进行测试了。**没有加入列表的微信号是没有权限使用微信接口的**，这里要注意一下。 至此，测试公众号配置完成。 ### 2、获取基础**access_token**接口。 ### 微信有两个**access_token**，一个是基础**access_token**，一个是网页授权**access_token**，具体区别，如图所述：  我们调用的微信分享接口只需要基础**access_token**就好。 #### 接口api: (get)https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET...
# 缘起 由于项目需要，我们要在web端实现录音功能。一开始，找到的方案有两个，一个是通过iframe，一个是html5的getUserMedia api。由于我们的录音功能不需要兼容IE浏览器，所以毫不犹豫的选择了html5提供的getUserMedia去实现。基本思路是参考了官方的api文档以及网上查找的一些方案做结合做出了适合项目需要的方案。但由于我们必须保证这个录音功能能够同时在pad端、pc端都可以打开，所以其中也踩了一些坑。以下为过程还原。 ## 步骤1 由于新的api是通过navigator.mediaDevices.getUserMedia，且返回一个promise。 而旧的api是navigator.getUserMedia，于是做了一个兼容性。代码如下： ```js // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。 if (navigator.mediaDevices.getUserMedia ===...