vue3 typescript

Vue Mastery 现时免费相关课程 Vue 3 + TypeScript course 到20213月9号,然后自己看了一遍,总结了一下发出来.

init with vuecli

用工具初始化,会有提示是否用ts.

create components with ts

对应代码看 Real World Vue 3 TypeScript GitHub Repo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script lant="ts">
import {defineComponent } from 'vue'

import EVentCard from '../components/EventCard.vue'
import EventService from '../services/EventService'

export default defineComponnets({
    name:'EventList',
    components:{EventCard},
    data(){
        return {events:null}
    },
    created(){
      EventService.getEvents().
        then(res =>{
         ...}
    }
....
</script>

VueDX

ide 支持是用的[VueDX][ref3]这个工具

1
2
3
4
5
6

interface TodoItem{
   label:string
   complete:boolean
}

const futureTodoItem ={} as TOdoItem

Props with Types

1
2
3
4
5
6
7
8
9
10
11

import {defineComponent ,PropType } from 'vue'

exprt default defineComponent({

    props :{
        event: {
            type: Object as PropType<EventItem>,
            require:true
            }
            }
....

Computed & Methods with Custom Types

重点在想返回什么

1
2
3
4
5

.....
computed:{
  firstEvent():EventItem{
      ....
  }

others 扩充资料

• The official Vue docs that now has a dedicated TypeScript section that will continue to grow as the ecosystem matures.
  • https://v3.vuejs.org/guide/typescript-support.html#typescript-support
• And of course, the official TypeScript docs site for an in-depth look at TypeScript
  • https://www.typescriptlang.org/docs/

理解 React Native Bridge 的概念

ref origin
这里有一篇由 Tadeu Zagallo 发表的很老但是很棒很深奥的文章来解释这座桥是如何在 iOS 上实现的。
React Native 通常被认为是一个游戏规则改变者，它允许在移动环境中运行 JavaScript 代码。它的主要优势在于它不像其他竞争对手那样依赖于网络视图(Phonegap，Ionic，Cordova…) ，而是依赖于不同平台提供的真实材料。它具有对所有本机视图和组件的内置访问权，以及对大约70个特定设备 api 的默认访问权(您可以对其进行扩展)。

在编写 React Native 应用程序时，我们构建了本地 ui。这就是关键所在，我们创建 UIView 实例，就像我们创建特定于平台的语言一样:

我对这个框架的第一个假设是这样的:

他们可能会创建一个 AST 并将其转换为可在多个设备上运行

这是有道理的，这实际上就是 Google/Flutter 在开发应用程序时所做的。但这不是RN的方式。

这种方法的主要问题是，基于 JavaScript 代码的编译目标平台意味着要创建新的编译器。我不知道有哪个现有的工具接受 JavaScript 作为输入代码，能够为每个目标平台生成代码

但目前存在的是针对自己特定平台的编译器。例如，我们有接受 Java/Kotlin 代码和目标 Android 平台或 Obj-C/Swift 目标 iOS 平台的编译器。它存在许多不同语言和目标的编译器。它们之所以能够很好地完成工作，是因为它们被设计成能够为它们创造出最优化的开发语言。

使用现有的编译器:

它采用真正开放的架构，不仅可以在移动设备上运行，也可以在其他平台上运行:

• 桌面应用程序
• 虚拟现实
• 还有更多
  它也可以用于其他框架:
• Weex(deprecated )
• 用RN 渲染器 运行angluar 应用

那么，团队是如何通过使用现有的工具和编译器来构建这样一个与平台和框架无关的框架的呢？

多个领域相互作用，没有其他

让我们退一步，看看 React Native 的大图。

React Native 处理两个领域，JavaScript 和 Native。他们都能够共享信息。他们使用“JS Bridge”进行通信，这无疑是 React Native 架构的核心，这部分提供了如此多的灵活性。

JS Bridge这个概念为这两个宇宙之间的双向和异步通信提供了一种方式。这里重要的是，它们完全是用不同的技术编写的，但是它们能够通信。

记住你的后端

让我们回想一下，当我们使用多服务通信编写分布式后端应用程序时。
我们如何管理在语言/平台级别上完全不同的两个服务之间的通信？
我们使用可互操作的语言，如 JSON 或 XML，并且我们依赖异步协议，如 AMQP (或任何其他协议)。

如果我们希望这两个服务进行通信，我们依赖于消息队列。第一个服务将一些命令推送到队列中，另一个服务必须在可能的情况下执行这些命令。
React Native 的行为也是如此。JavaScript 域发送异步 JSON 消息，描述 Native 部分应该完成的操作。

例如，JavaScript 端将发送有关必须由 Native 端创建的视图的信息。当 nativeside 准备好后，它将有效地创建视图:

JavaScript 使用 JSON 异步将命令发送到 Native 端进行视图管理
在 React Native 中，桥接器支持消息代理角色，处理两个不同开发语言之间的异步命令。

它提供了多种可能性:

• 因为它是异步的，所以它是非阻塞的，因此允许在屏幕上顺利地进行视图管理(6O fps 是 React Native 的黄金目标)
• 因为它是解耦的，并且基于可互操作的语言，所以它对其他框架和渲染系统开放 只要他们尊重 React Native bridge 命令界面
  JS Bridge的语言越是无处不在，越是通用，可能性就越大… … 的确如此！

桥接的实现

网桥是用 c/c + + 构建的，因此，可以在多个平台、操作系统等上运行。

它嵌入了苹果的 JavaScriptCore 框架，这个框架公开了 api 来访问实际的 javacripcore VM 功能。许多人在 Obj-C 和 Swift 世界中使用这些 api。但是有一个 C api，Obj-C 实际上只是一个包装器。

考虑到这一点，JavaScript 代码可以在 c/c++ 程序中运行。它可以注入变量、函数和声明全局变量来增强 JavaScript 现有代码。React Native 依靠这种魔法来使 JavaScript 与本机世界通信，从而触发 c/c++ 世界中的动作。

在 JavaScript 代码中注入内容也意味着函数可以由 c/c++ 代码执行。

这个图很快总结了 JavaScript 世界是如何处理 c/c++ one 的:

原生的一面

原生方面的通信是“最简单的”部分。

让我们从 iOS 平台开始。由于 Obj-C 是 c 语言的扩展，它可以与 c 语言进行本机通信。这样，JS Bridge 与 Swift/Obj-C 世界之间的通信就变得简单而自然。

在 Android 平台上，我们需要依靠 Java本地接口来与桥接器进行对话。

如果您对 React Native 内部构件有进一步的问题，请告诉我。关于这个话题，我会尽量提供我所知道的一切。

js该学点啥

“没有人因为java而失业” 对于该如何选择开发语言,我个人还是很喜欢javascript.但是也感觉挺痛苦的,对于一个跟着别人学的人来说.学过了vue,react各种框架,感觉其实基本就是一个功能学了不同的实现方式,现在想想感觉还是挺没啥成就感的.
总结一下我现在的感觉的js相关的技能点

函数式编程

这个是在我学习redux时候接触的.然后最近看过了json的作者的在frontendmaster的课程,然后他总结99%的js开发者不知道js其实还可以这么写….感觉老爷子都胡子花白,虽然他的课程是16年的,而且长达10小时,但是感觉还是值得一看的.作为入门.

• 最近想用jupyter把学习的做成js笔记,有运行结果,一目了然.这个就涉及如何做笔记的话题,我现在react是用mdx,反正就是那种可以运行看看效果的那种.

deno

最近在了解的,其实我列出来,主要是想说一下node的作者在推出这个的时候说自己后悔node的几个点,那个视频在youtube上有,而且还是有专门的中文翻译,感觉可能是推广需要,但是感觉node 的作者还很年轻感觉:

• 前端发展好快,他是用rust开发的,rust是火狐的公司M开发的…..最近看资料好多人想学一下这个语言…..
• 他说的一些如何编译node ,如何平台适应,如何通过v8优化性能,感觉自己都没怎么接触过….所以多看看感觉还是很能开阔自己眼界….提醒自己多学多看,周末出去找个咖啡馆学习多么重要……..

  node

  这个主要是我有几个框架想学习……涉及graphql的……感觉自己做过几个demo,但是还是没有串联起来……….

parcel

这个就是感觉学过react,vue 老感觉虽然花了很多时间,但是感觉没啥成就感,就是感觉老是新瓶装旧酒…..技能老是提高不了…….关于如何作出一个东西的方式…….

MIT 课程

最近看的一个 MIT 学生给学生开的课 missing semester ,有中文翻译,感觉开发了好几年,还是能学到很多东西,其中 vim 我花了半天时间去按照他的配置,感觉终于能够可以替代 vscode 真正用用了.. 有对应的课程录屏.
主要讲了: - Shell 工具和脚本 - 编辑器 (Vim) - 数据整理 - 命令行环境 - 版本控制(Git) - 调试及性能分析 - 元编程 - 安全和密码学 - 大杂烩 - 提问&回答

vim

这块我花费了最多时间 ,课程里提供的几份配置里,我选的 joe 的 dotfile 里的配置,他的 dotfile 有好多东西,然后是通 stow 做软连接连接到他的配置里的.反正一开始有点蒙.想全盘拷贝他的时候,出了好些问题…..然后仔细看了看才搞好.不过最终效果还是挺满意的.

nvim

joe 其实是用的 nvim ,感觉这个挺牛逼,效果还不错,然后作者主要是配置了 python 相关的,如 lint, 然后用的 Plug 作为插件管理,其实 vim8 可以完全抛弃插(~/.vim/pack/vendor/start/) ,但是 nvim 其实是重新实现了一遍 vim .有几个地方不兼容. 然后.vimrc 里面有自定义的快捷键.

几个好用的插件:

• coc.vim 自动补全,代码高亮,还有些导航之类的功能
• ale.vim 导航
• fzf.vim 模糊查询

shell

有几个点 感觉以前不知道 ,– -

• .aliases 有些 aliase 还挺好玩的感觉,比如 mac 里的 ls 之类的其实是 BSD 版本,然后 aliase 里有个如何替换,这样换平台就不会不一样了.

mac 工具

• hammperspoon 可以做写自动化的事情,通过写 lua 小脚本
• yabai 平铺式的窗口管理,感觉好几个屏幕,或者大屏的挺好用的

scripts

• ocr 这个 ocr hammperspoon 里配置一下就可以截屏然后拷贝文字,不过大部分时候对着视频里文字出错挺高,不过还是有点用

git

这个先从 git 数据模型讲,感觉还是学到好些.

最近工作上老有种感觉后端压着前端的感觉,老感觉刚毕业的后端也觉得自己挺厉害,感觉没法商量.但是感觉自己其实花费了好多时间去学习...


可能也算是人生误区吧,最近就开始多看一些算法相关的了又.然后说最好的学习是写下来,然后给别人讲明白.然后又开始写写博客了.虽然只是只言片语吧....给自己立的目标的一部分.(用todo软件 写的 每周得写点啥目标.)

今年自己的目标老是想找到一个自己架构一个系统的方式,然后去年是找到了**jhipster**这个springweb,

### 今年因为看了很长时间frontendMaster课程,然后划时间看graphql 这个架构.实际动手是:
- 在一个原有项目(小度鱼社区)上改过
- 看frontendmasters课 关于 gatby 的框架的(快速搭建官网,博客之类的网站)
- 各种中断的续看资料.

### django框架的
这个是自己前年做过一个demo性质的...



然后年底时候听播客,说graphql 不火了.....不过我还是想坚持自己实现一把吧.


看到的其他言论是 用go去搭建基础框架......这个感觉自己比较缺的是信念去学习.

PS:自己的域名又到期了,然后愤与续费太贵,又买了一个域名(www.jingzhengyi.top)......这个网站又要成为历史了........

npm 发布

ps 最近看了个结合Bit.dev复用组件的文章
学习函数式编程,用的是ramda函数库,然后之前做项目都是把自己写的ramda的utils复制一份.近期总结时候发现,每个项目用到的函数都不一样,这么来回拷贝还挺麻烦的..就想到把自己的给发布出去,写项目的时候引用一下,就能保证是最新的了.稍微查了一下资料,还挺简单,步骤如下

• 初始化
  因为可能要用到ES6,npm init后,需要填入babel包.

  1 2	npm init yarn add babel-cli babel-core babel-preset-es2015 ramda

• 项目架构

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  tree -a -I "dist|node_modules|.git" -L 2 12 ramda_util ├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── lib # 打包目录 ├── package.json ├── src #我的代码 │ ├── ArrayUtils.js │ ├── ObjUtils.js │ ├── domOper.js │ └── index.js

• package.json
  需要注意 尽量把依赖写在devdependies 里面,要不容易造成依赖两份,如react,导致错误.比如用户是react15,你用了react16里面的特性,那用户就启动不了了.

  1 2 3 4 5

  "scripts": { "compile": "babel -d lib/ src/", "prepublish": "npm run compile", ## 发布之前执行一下? "test": "echo \"Error: no test specified\" && exit 1" },

• npm 添加用户

  1	npm adduser

• 发布

  1	npm publish

• 验证
  打包组件，只需要运行 npm run build 就可以了。
  接下来可以通过 npm link 把打包之后的组件引入到 global node_modules 中，然后在验证 demo 中再通过 npm link react-tiny-autosuggest 引入这个组件，并验证是否符合预期。

  1 2 3 4 5 6

  // At development directory npm run build npm link cd [test project folder] npm link react-tiny-autosuggest

  接下下 demo 里面就可以直接 import AutoSuggest from ‘react-tiny-autosuggest’ 了。

• 技巧
  修改代码和readme.md后,执行 npm version patch 就不用手工改版本号了.

我的工具

github地址

• 使用

  1 2 3

  import {ArrayUtils } from 'ramda_util/lib' const result = ArrayUtils.mergeWith([1,2,3],[2,3,4]) console.log(` ${JSON.stringify(result,null,4)}`)

  参考

• 我写的vue组件库
• 如何发布自己的NPM包（模块)
• 结合Bit.dev复用vue组件
• 如何创建一个前端 React 组件并发布到 NPM
• 发布react组件到npm总结

最近准备面试一个H5的工作,然后准备了用umi+Django写一个H5前端页面练练手.写了一个几个页面,在UC,chrome浏览器和微信里面都正常,然后发现在华为自带浏览器,后来发现qq浏览器,都是感觉没调用webpack 打包生成的js……查了一下资料,说是华为自带的浏览器内核很老(我的是华为M5 android8),umi的GitHub也有人提,但是回复都没怎么看到希望. 折腾了半天后,用一下配置可行

1
2
3
4
5

targets: {
chrome: 58,
ie: 9,
},
exportStatic:{},

参考:
使用 umi 在华为手机上不渲染页面,加载出空白页 #304

工作中用的是云谦大神封装的dva框架,其中集成了redux-sega .其特点是effect 中写带星号的方法处理异步事件.其中涉及的js的generator等知识点.之前看过原理.好久只是用,有点忘记了..最近感觉这个年纪还是多去想想其中的原理,要不心里还是挺慌张的.

总体思路

dva 里面处理异步的是放在effect 里面,然后里面都是 function * {yield ....}这种generator,然后sega 能够驱动他去执行所有的yield.一口气执行完.感觉整个过程redux-saga，化异步为同步讲得很详细

sega 名称由来

把多个事情分成小份,并串联起来

副作用 名词解释

会对外部产生影响,或结果不定的.与之相对的是纯函数.

ES6 generator

1. 产生原因改进最早的: 最早的地域回调写法
2. 一开始Promise ,然后ES6 是

   1 2 3

   * function() { value = yield step1() }

3. 最新的是 async await

• 参考
  理解 ES6 Generator 函数

sega 详解

参考

• Redux-Saga入门
• redux-saga实现与原理

https://github.com/VSCodeVim/Vim#mac

快速移动写代码，除了输入字符之外最常用的操作就是移动光标。vim除了hjkl ctrl+u ctr+f外还有更快捷的移动方式，这里介绍2个插件都是vscode自带的。

1. vim-easymotion

设置”vim.easymotion”: true 开启这个模式。
<leader><leader> t/T <char> 能够向前/向后快速到达可见范围内的某字符()的位置。
<leader><leader> w/b 向前/向后到达可见范围内任何单词的开头。
<leader><leader> e/ge 向前/向后到达可见范围内任何单词的结尾。
<leader><leader> k/j 向前/向后到达可见范围内任何行的行首。

2. vim-sneak

sneak模式下键入s后，再输入2个字符就可以跳转到目标位置。
s 往前跳转到目标位置。
S 往后跳转到目标位置。

链接：https://www.jianshu.com/p/cbfa86c8d8a5

3.vim-surround

Based on surround.vim, the plugin is used to work with surrounding characters like parenthesis, brackets, quotes, and XML tags.

t or < as <desired char> or <existing char> will do tags and enter tag entry mode. Using <CR> instead of > to finish changing a tag will preserve any existing attributes.

Some examples:

• "test" with cursor inside quotes type cs”‘ to end up with 'test'
• "test" with cursor inside quotes type ds” to end up with test
• test with cursor on word test type ysaw) to end up with (test)

苹果系统问题 To enable key-repeating

1
2
3
4
5
6
7

# For VS Code
$ defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false
# For VS Code Insider
$ defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false

# 还原设置
$ defaults delete -g ApplePressAndHoldEnabled

使用SSH密钥对连接Linux实例

阿里云ESC远程登陆只支持pem特定的ssh免密登陆,之前一直不知道,阿里客服打电话过来回访时候问了一下,才知道官方文档有写.

使用SSH密钥对连接Linux实例

配置完后,对自动下载的pem做配置.修改 ~/.ssh/config文件

1
2
3
4
5

Host ecs    // 输入ECS实例的名称
HostName 192.*.*.*   // 输入ECS实例的公网IP地址
Port 22   // 输入端口号，默认为22
User root   // 输入登录账号
IdentityFile ~/.ssh/ecs.pem // 输入.pem私钥文件在本机的地址

重启:

1
2

sshd restart
ssh ecs

我自己mac电脑配置了,但是还是要输入密码,后来查是权限问题 https://learnku.com/articles/19580

1
2
3

#设置 authorized_keys 的读写权限，只对其所有者开放
chmod -R 700 ~/.ssh
chmod 644 ~/.ssh/authorized_keys