学习electron对于个人的好处

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

前言

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

设计模式之道

SOLID原则

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

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

electron开发记录

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

• Electron本身是基于Chrominum和Node.js
• 开源
• 跨平台

布局

迫于生计开始写小程序.

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

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

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

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是非常适合做vue的ssr渲染的，他可以让ssr变得非常非常简单。

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

1

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

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

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

PWA 简介

Progressive Web App 渐进式web应用程序

PWA是由一系列特性组成。

Service Worker

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

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

Promise

“承诺”控制流

• 优化回调地狱
• async/await语法同步化
• service worker的很多api都promise化了

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

消息推送

• 支持电脑的消息推送

组件

• props

  组件的参数传递

• slot

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

• 自定义事件

父子组件的通信方式

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

环境搭建

1

npm install -g @vue/cli

使用的版本为:

• vue-cli@3
• vue@2.5

vue create vue-learn

一开始直接进去选一个默认的配置就开始搞起来了。

类

类的一些基本示例:

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

class Greteer{
    greeting: string
    constructor(message:string){
        this.greeting = message;
    }
    greet(){
        return 'Hello,' + this.greeting
    }
}
let greeter = new Greteer('world');
greeter.greet();

类里面允许使用继承来拓展现有的类

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

class Animal{
    move(distance:number = 0){
      console.log(`Animal move ${distance}`);
    }
 
}
class Dog extends Animal{
    bark(){
        console.log('wolf!wolf!');
    }
}
const dog = new Dog();
dog.bark();
dog.move(10);