Android Studio gradle 插件由 2.2.3 升级到 3.1.0

升级 gradle 插件的原因是因为项目里集成第三方依赖都已经需要 gradle3.x 的版本去编译，所以我也需要将项目的 gradle 插件进行升级；插件升级的过程中也遇到了一些乱七八糟编译失败的报错，网上搜了一大堆解决办法，结果没有一个方案让升级过程变得畅通无阻，没办法只好网上找了 gradle3.x 版本的 Demo 进行比对尝试，后来结果还算令人欣喜；现在开始奉上我升级 gradle 插件的方案，希望可以帮助有需要的人少走点弯路。

RN 开发之调用 WebView 爬坑记

解决 React Native 之 Android 手机中 WebView 不能调用相机相册的问题

记录最近在 RN 开发中踩的一个坑以及分享我的爬坑记：Android 手机不能在 WebView 中调用相机相册；我刚开始很困惑，大家都一致认为这是链接的第三方写的 H5 中调用相机相册的方法有问题所导致的，后来我通过查找原因，发现这是 Android 原生 WebView 中没有实现调用相机相册的功能；soga，知道原因后开始在网上查找解决方法，大概找到两三个类似的依赖包，于是开始尝试集成到现在的项目中去，结果全部 jj：不是和其他依赖包冲突就是 gradle build 失败；唉，各种心塞心累，于是决定自己尝试桥接原生 WebView，桥接的过程也是各种蜿蜒曲折啊；下面开始分享我桥接的过程，希望可以帮助有需要的人少踩点坑。

vue 中的 computed 和 watch 之间的区别

计算属性 computed 是计算属性，侦听器 watch 是侦听器 watch。

计算属性顾名思义就是通过其他变量计算得来的另一个属性，例如 fullName 在它所依赖 firstName，lastName 这两个变量变化时重新计算自己的值。

另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName 和 firstName 都没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数。

而侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。

redux-saga 的入门基础

redux-saga 是一个用于管理 Redux 应用异步操作（Side Effects。译注：直译成 “副作用” 不太通顺，所以这里译为 “异步操作” 更好理解）的中间件（又称异步 action）。 redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集在一个地方集中处理，可以用来代替 redux-thunk 中间件。

这意味着应用的逻辑会存在两个地方：

1. Reducers 负责处理 action 的 state 更新。

2. Sagas 负责协调那些复杂或异步的操作。

Sagas 是通过 Generator 函数来创建的。如果你还不熟悉 Generator，可以在这里找到 一些有用的链接。

前端常见跨域解决方案（全）

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

1. 资源跳转： A 链接、重定向、表单提交
2. 资源嵌入： <link>、<script>、<img>、<frame>等 dom 标签， 还有样式中 background:url()、 @font-face()等文件外链
3. 脚本请求： js 发起的 ajax 请求、dom 和 js 对象的跨域操作等

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

同源策略限制以下几种行为：

1. Cookie、LocalStorage 和 IndexDB 无法读取
2. DOM 和 js 对象无法获得
3. AJAX 请求不能发送跨域方法

dva 的几个核心概念

Concepts

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。

dva 入门开发的小总结

dva 是对 redux 的一层浅封装，基于 react 语言，实现前端代码的分层

一般会分为 3 层：

1. component：组件渲染、展示页面
2. models：数据组装、处理
3. services：接口调用、拿数据

框架主要构成模块：

Vim 命令笔记

基本操作

• i → Insert 模式，按 ESC 回到 Normal 模式.
• x → 删当前光标所在的一个字符。
• :wq → 存盘 + 退出 (:w 存盘, :q 退出) （注：:w 后可以跟文件名）
• dd → 删除当前行，并把删除的行存到剪贴板里
• p → 粘贴剪贴板
• hjkl (强例推荐使用其移动光标，但不必需) → 你也可以使用光标键 (←↓↑→). 注: j 就像下箭头。
• :help <command> → 显示相关命令的帮助。你也可以就输入 :help 而不跟命令。（注：退出帮助需要输入:q）

深入分析 javascript 中的错误处理机制

前面的话

错误处理对于 web 应用程序开发至关重要，不能提前预测到可能发生的错误，不能提前采取恢复策略，可能导致较差的用户体验。由于任何 javascript 错误都可能导致网页无法使用，因此作为开发人员，必须要知道何时可能出错，为什么会出错，以及会出什么错。本文将详细介绍 javascript 中的错误处理机制

error 对象

error 对象是包含错误信息的对象，是 javascript 的原生对象。当代码解析或运行时发生错误，javascript 引擎就会自动产生并抛出一个 error 对象的实例，然后整个程序就中断在发生错误的地方

console.log(t); //Uncaught ReferenceError: t is not defined

ECMA-262 规定了 error 对象包括两个属性：message 和 name。message 属性保存着错误信息，而 name 属性保存错误类型

1
2
3
4
5
6
7

//一般地，使用try-catch语句来捕获错误
try {
    t;
} catch(ex) {
    console.log(ex.message);    //t is not defined
    console.log(ex.name);   //ReferenceError
}

Webpack 从入门到上手

什么是 WebPack，为什么要使用它？

为什么要使用 WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的 JavaScript 代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;

• 类似于 TypeScript 这种在 JavaScript 基础上拓展的开发语言：使我们能够实现目前版本的 JavaScript 不能直接使用的特性，并且之后还能转换为 JavaScript 文件使浏览器可以识别；

• Scss，less 等 CSS 预处理器

• …

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为 WebPack 类的工具的出现提供了需求。

什么是 Webpack

WebPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用。