0%

一些学习资料

一本不错的 TS 书籍,已经买了实体书:

interface && type

两者几乎没有区别,但是 interface 可以合并多个相同的 interface,而 type 只能使用 & 进行连接。

1
2
3
4
5
6
7
8
9
interface A {
a: number;
b: number;
}

type B = {
a: number;
b: number;
}

区别:

1
2
3
4
5
6
7
8
9
10
11
12
interface A {
a: number;
}

interface A {
b: number;
}

const a: A = {
a: 3,
b: 4
}

Read more »

函数式编程已经成为 JavaScript 领域中一个非常热门的话题。就在几年前,甚至很少有 JavaScript 程序员知道什么是函数式编程,但是我在过去 3 年看到的每个大型应用程序代码库中都大量使用了函数式编程思想。

函数式编程(通常缩写为 FP)是通过组合纯函数,避免状态共享可变数据副作用来构建软件的过程。函数式编程是声明式的,而不是命令式的,应用程序状态通过纯函数流动。与面向对象编程不同,在面向对象编程中,应用程序状态通常与对象中的方法共享和协作。

Read more »

学习electron对于个人的好处

  • Electron的基础知识,各个内置模块的熟练应用(能够开发一个小软件)
  • 深入了解浏览器的工作原理
  • 理解进程概念和跨进程通信的原理
Read more »

前言

之前有写过一些typescript的基础知识,但是并没有很好的将这些知识应用到很好的开发场景里面去,而且很多知识在没有使用之后很快会遗忘,因此总结根据慕课网文章来总结一些ts的学习之道。

Read more »

设计模式之道

SOLID原则

  • 单一功能原则(Single Responsibility Principle)
  • 开放封闭原则(Opened Closed Principle)
  • 里式替换原则(Liskov Substitution Principle)
  • 接口隔离原则(Interface Segregation Principle)
  • 依赖反转原则(Dependency Inversion Principle)

JS里面主要还是围绕着“单一功能”和“开放封闭”来展开。

Read more »

electron开发记录

首先根据官方文档的启动脚手架来先跑一波electron,注意这一步在npm i的时候有一个比较大的依赖在注入进来,所以会安装比较长的时间。

  • Electron本身是基于ChrominumNode.js
  • 开源
  • 跨平台
Read more »

布局

迫于生计开始写小程序.

小程序重要的东西有布局:
使用的是flex布局,这点很重要的。

justify-contentalign-items一个表示水平轴一个表示交叉轴,但是这两者的话都没有一个绝对的主轴,这点是要根据flex-direction的设定来确定的,flex-directionrow那么水平方向的就为主轴,另外一个为交叉轴,如果为column,那么垂直方向的就为主轴,另外一个为交叉轴。

当然如果加了reverse之后交叉轴的方向就得换个参照点了。

Read more »

Nuxt.js基础

  • Vue2
  • Vue Router
  • Vuex
  • Vue Server Renderer
  • vue-meta

首先还是官方地址给上。

安装:

1
2
3
4
// 先安装一下vue-cli工具
yarn global add @vue/cli-init
// 初始化模板
vue init nuxt-community/koa-template

还源的工具可以使用nrm,类似于版本控制的npm

1
nrm ls

nuxt.js是非常适合做vuessr渲染的,他可以让ssr变得非常非常简单。

我们直接利用刚才那个命令来生成一个nuxt.js模板。

1
vue init nuxt-community/koa-template nuxt-start

不过这里可能会遇见一个问题。具体可以参考,项目的README.md文档

这东西的设计其实和umi很类似(可能umi是借鉴了这边吧。。)有一点就是pages目录下面的文件即为路由。我们创建一个xxx.vue,然后去localhost:3000/xxx,就可以直接访问到对应的页面了。

Read more »

PWA 简介

Progressive Web App 渐进式web应用程序

PWA是由一系列特性组成。

Service Worker

整个 pwa 系统的大脑。类似于Web Worker但是具备有更多功能,他是pwa里面最重要的功能。
服务工作线程

  • 常驻内存运行
  • 代理网络请求
  • 依赖 https

Promise

“承诺”控制流

  • 优化回调地狱
  • async/await语法同步化
  • service worker的很多apipromise化了
1
2
new Promise((resolve,reject)=>{})
.then().then().catch(...)

fetch

网络请求

1
fetch('/xxx/xxx').then(res=>res.json()).then(info=>...)
  • XMLHttpRequest更简洁
  • Promise风格
  • 存在一些不足

cache API

支持资源的缓存系统

  • 缓存资源(css/scripts/image)
  • 依赖Service Worker代理网络请求
  • 支持离线程序运行(PWA的一个很重要的特性)

Notification API

消息推送

  • 支持电脑的消息推送
Read more »

组件

  • props

    组件的参数传递

  • slot

插槽在组件抽象设计中的应用

  • 自定义事件

父子组件的通信方式

组件的基础示例可以先看一波文档,但是我们一般都不会用这里的这种方式去定义我们的组件。(Vue.Component不会用)

Read more »