因为工作需要,我买了个 Micro:bit 来研究,发现这个东西有非常强的功效,非常不错。
月度归档:2019年02月
为什么我们要了解一个产品的生命周期
作为一个开发者,我们经常要使用到各种各样的开发工具,比如你使用 Vue ,那么肯定要了解 Vue 的生命周期;如果你使用 WordPress ,就需要了解他的产品加载顺序。
如果你只关注如何使用,却不曾关注底层的逻辑到底是什么,那么有朝一日你也会提出这样的问题:
实际上,如果你曾先了解过一个应用的生命周期、加载顺序等这些比较基础的东西时,就不会问这些问题了。
从另外一个层面, 面试常问 HTTTP 的三次握手四次挥手也是这个原因,当你了解了整个流程,才能更好的在这个流程上进行研究、开发、Hack。
在 Vue 中使用 Render 函数来进行结果的格式化
在 Vue 中,想要对数据进行格式化有很多种方式,比如,使用 filter 并搭配上 管道符|
来进行格式转化。或者使用 computed
方法进行数据格式的转化。
这篇文章分享一下我是如何使用 Render 函数来进行结果的格式化的。
目前的需求是这样的,我从服务器获取到的数据需要渲染到 Table 组件中,由于数据的渲染形式受到多组参数影响,因此,我决定使用 render 函数来进行处理。
根据 iView 文档的说明,我们可以在 data 中传入一个 render 函数,来进行 render 处理,因此,我们可以这样设定数据
let data = [{
title: "生日",
key: "birthday",
render: (h, params) => {
// here is my render function
}
},]
在 render 函数中,我们需要返回一个 h
函数的实例,这个 h
函数其实是渲染函数,你只需要返回对应的数据即可。
我们在初始化时,传递了两个参数,其中第一个参数是渲染函数,第二个参数则是当前的数据。其中包括如下信息
index 是当前数据的顺序;row 是当前行的数据,column 则是当前列的数据。你可以通过 params.row.xxx
来获取其他字段的数据,来进行组合数据的判断。
比如(params.row.a + params.row.b)=== params.row.c
。
Vue 使用 Axios
在 Vue 1 时,我们使用的主要是 Vue-Resource,到了 Vue 2 时,推荐使用 axios。不过 Axios 并非为 Vue 设计,所以需要自己配置一些东西。
But,我是一个懒人,决定选择使用最简单的方法来实现——使用 vue-axios
首先,安装 axios 和 vue-axios
yarn add axios vue-axios
然后,在你的 main.js
中加入如下代码
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
这样,就可以将 Axios 注册为全局可用了。
然后在你需要的地方调用即可。
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
Vue Router 中的默认路由如何定义?
在使用 Vue 开发后台的时候,有些时候我们需要一个默认路由。
比如说,用户登陆以后,会看到一个界面,此时这个界面就需要一个默认路由。因为这个界面一般会放置一个 route-view,如果没有默认路由,就会导致首页的内容是空白的。因此,放置一个默认路由来显示内容即可。
想要实现也很简单,在对应的路由中添加 children 项目,并设置其 path 为 ""
这样,就会将这个路由设置为默认路由。比如,这个样子:
let router = new Router({
routes: [
{
path: "/dashboard",
component: home,
children: [
{
path:"",
component: analytics,
}
]
]
})
这样就实现了点击 dashboard ,进入对应页面后,默认查看的是 analytics 的内容。
在 Vue 中使用 alias 来简化引用路径
在写 Vue 代码时,我们经常会用到组件化的思想,因此,我们的文件也被拆分的七零八落,如果每次都使用完整的路径来写引用,未免有些太长了,因此,我们可以考虑使用一些工具来帮助我们解决这个问题。
这一步,我们可以通过 Webpack 的 resolve 模块的 alias 功能来实现
比如说,可以将一个较长的路径 src/components/admin-components/login/login.vue
简化为 @admin_com/login/login.vue
,这样你就少写了很多代码,可以让你的代码可读性更高。
如何实现
首先,在你的项目根目录创建一个 vue.config.js
文件。如果有了就不需要再创建了。
然后,在其中加入如下代码
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
这个函数用来让你免于在每一次设置 alias 时都写前面的 path.join
然后,添加如下代码
module.exports = {
chainWebpack: config => {
// 设置项目
}
};
然后,导出一个对象,我们稍后将在这个对象中设置 alias。
接下来,我们需要在 chainWebpack
的函数中添加我们的 alias。将代码修改如下
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set("@admin_com", resolve("src/components/admin_components/"));
}
};
我们添加的这一行代码 config.resolve.alias.set("@admin_com", resolve("src/components/admin_components/"));
就是在 Webpack 中添加解析的 alias,在渲染页面时,会自动将 @admin_com
替换为 src/components/admin_components
。
这样,你就可以根据自己的需要,去设置各种各样的 alias, 来简化你自己的代码了。
需要注意的是,@
默认被 alias 到了 src
目录,所以你最好不要修改 @
,以免出错。
以及,如果你担心后续在其他地方使用你要设置的 alias,可以和我一样,前面加一个符号。
Debug 你的 alias
如何看你的 alias 呢?也很简单,只需要在项目根目录执行 vue inspect resolve.alias
,就可以看到所有你自己定义的 alias 了。
关注你的核心目标
我们常常没有办法很好的完成一件事,是因为我们在前进的路上,迷失了方向,忘记了什么才是我们追求的目标。
比如说:写博客。
作为程序员,写博客是再正常不过的事情了。就写博客这一件事来说,也有很多不同的方案:
- 有的人使用 CSDN、ITEye 这样的博客服务提供商(BSP)来建立自己的博客;
- 有的人购买虚拟主机,使用 WordPress 这样的程序来建立自己的博客;
- 也有的人选择直接使用一些静态博客程序,生成静态页面,托管在免费的 Github Pages 上。
每个人选择都有自己的想法,我想说一说我选择 WordPress 的原因。
首先,我的目标是“写博客”,非常纯粹。落脚点呢,是”写”,所以核心的目标就是要坚持写。
那么,从这个目标出发,所做的一切选择都应该是为”写”而服务的。比如,为什么不用 Hexo、octporess、Jekyll?因为这些工具会拉长写作的路径,写一篇文章需要先安装 Git、下载编辑器、Clone 代码、写内容、编译、commit、push,路径非常长。如果你选择使用诸如 WordPress 这样的程序,就可以直接打开浏览器,登陆后台,并开始写作。
最后,为什么不用 BSP 呢?BSP的原因是编辑器的体验并不好,不少平台都还在用可见即所得的编辑器,但是对于我平时主要写随笔和代码文章来说,这样的编辑器太难用了,而且, BSP 的自由度也太低,作为程序员,还是要自己折腾折腾,广告也不少。不过, BSP 也有自己的优势,比如有流量的加持,平台可以为你提供流量,帮助你更好的出名,But,我的本意是写作,而不是出名,这个流量的加持对我来说并不重要。所以,也不选择 BSP。
在前进的路上,我们很容易就迷失自己的方向。在写博客的过程中,我也曾多次切换过平台,直到最后,我明白了,写作才是真正值得我追求的,最终,回到了 WordPress, 并坚持写下去。
前进时,别光顾着走,也看看自己的目标是什么,时常回顾自己的目标,才不至于走偏。
神奇的海底捞生日之旅
今天是我的生日。昨晚大概12点的时候,我跑去了海底捞,想着蹭一蹭海底捞的生日面。
由于海底捞一直人比较多,所以我提前做了预约,另外一方面,总的来说,我还是一个比较腼腆的人,所以希望海底捞的系统自动识别出我今天是生日,自动为我送上生日面。
点完餐以后,在海底捞的 iPad 上登陆自己的账号,积攒了积分。
除了生日面,过了一会,服务员又送了一个小蛋糕过来。这个蛋糕是我完全没有想象得到的。我估计是因为前面登陆了账号,识别到我 24 号生日,然后给我送上了蛋糕。也可能是为我服务的服务员帮我和总管说了一下,送上了蛋糕。
然后她随机拉了两个服务员,来给我一起唱生日歌。真的很惊喜。
海底捞真的做到了,别人想要60分的东西,给你 80 分的东西。
Rust 学习资料推荐
首推
《The Rust Programming Language》:https://doc.rust-lang.org/stable/book/foreword.html 这本书虽然是纯英文写就,但是浅显易懂。非常不错。中文版
嵌入式相关
《Micro Rust》:https://droogmic.github.io/microrust/index.html 这本书是基于 MicroBit 这个硬件来写的课程,可以去淘宝上买个 Micro::Bit Go,一百多一点,然后自己实践一下。
《The Discovery Book》:https://docs.rust-embedded.org/discovery/index.html
《The Embedded Rust Book》:https://docs.rust-embedded.org/book/index.html
Rust Crates 使用国内镜像
我在使用 Rust 安装 rls 时,出现了下载报错,具体如下
info: caused by: error during download
info: caused by: [56] Failure when receiving data from the peer
一看到 from the peer ,我就明白了,大概率被墙了。所以,就要切换为国内镜像源。
目前只有 USTC 提供了 Rust Crates 的镜像源,接下来,我们就开始配置 Rust Crates 源。
配置 Mirror
使用 VSCode 打开配置文件 $HOME/.cargo/config
在其中加入如下代码
[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"
然后重新在命令行中执行安装代码,可以看到非常高效的完成了安装.
macOS 安装 Rust 开发环境
安装 Rust
Rust 在 macOS 上的安装非常的简单,只需要在终端执行如下代码
curl https://sh.rustup.rs -sSf | sh
会自动进入到安装的状态,脚本会检测你的操作系统,然后提示你是否安装,作为初学者,直接用默认的安装吧。
稍等片刻,就安装完成了。
你可以重启终端来应用 Rust 的环境变量,或者直接执行如下命令来使环境变量生效。
source $HOME/.cargo/env
执行命令 rustc --version
可以看到版本号信息:
这时,就说明你的安装完成了。
创建测试项目
接下来,在终端里执行如下命令,来创建一个测试项目。
cargo new hello-world
并使用 cd 命令进入该目录,编译,并运行代码
cd hello-world
cargo run
你可以看到这样的输出,就说明你的 Rust 环境已经配置好了。
Rust With VSCode
安装 Rust 代码支持
我一般习惯用 VSCode 写代码,所以依然这次继续使用 VSCode 来写 Rust。
在 VSCode 中的拓展管理器中搜索 Rust,可以看到一个名为 Rust(rls) 的拓展,安装这个拓展。
此时使用 VSCode 打开刚刚创建的 Hello World 项目,就可以看到如下的效果。
然后,打开终端,执行如下命令,来安装 Rust 拓展所需的一些 Rust 组件
rustup component add rls rust-analysis rust-src
安装 crates.io 的拓展支持
Crates.io 类似于我们在 Node.js 世界的 NPM,PHP 世界的 Composer。crates.io 的拓展可以帮助我们更好的管理我们的项目拓展。
在 VSCode 的拓展界面搜索 crates ,就可以看到由 Seray Uzgur 提交的 crates 插件,安装这个插件。
安装完成后,打开项目根目录的 cargo.toml
文件,然后你可以看到,在你的依赖项目后会提示你最新的版本。
把你的鼠标放在"0.2.0"
的后面,还会提示你所有的更新的版本,你可以通过一下点击,来升级依赖的版本。
或者执行命令来升级所有的依赖
安装 TOML 的高亮
Toml 是 cargo 用来存储项目信息的文件格式,VSCode 本身不提供高亮,不过我们可以通过安装一些拓展来实现。
在 VSCode 的拓展管理器搜索 TOML,并安装由 bungcip 开发的 Better TOML,即可实现 toml 文件的高亮。
安装完成后,重新打开 cargo.toml 文件,你就会发现其内容被语法高亮了。
这样,我们就完成了 Rust 开发环境的基本配置。后续可以根据你自己的需要,去配置其他拓展和依赖。
网名,真名哪个重要?
今天在看 V2ex 的时候,发现 V2ex 有个帖子“你们的 Github 账号会用自己的真实姓名么?”,里面提到了大家大多不在互联网上使用自己的真实姓名。
刚好,今天早上我的 Boss 在一个读书会的群里也在讨论这个问题,他常年使用笔名“青润”,很多人只知道他的笔名,不知道他的真名。
这两件事情让我思考,我们是否真的有必要让别人知道自己的真名呢?
就如我 Boss 所言,名字本身只是一个代号,笔名也是一个代号,如果你一直使用一个特定的代号,那他其实和你的名字没有什么区别。对于我来说,使用 Bestony 这个 ID 也不短时间了,以后应该也会长期使用下去。不过,我在考虑后续同时扩张我的本 ID 的影响力。这样看来,似乎也没有必要。
不过,可以本名关注非技术领域,网名关注技术领域。
Reference
你们的 Github 帐号会用自己的真实姓名吗?:https://www.v2ex.com/t/538131#reply32
为什么英文互联网世界里实名比例如此之高: https://laike9m.com/blog/wei-shi-yao-ying-wen-hu-lian-wang-shi-jie-li-shi-ming-bi-li-ru-ci-zhi-gao,107/