0%

发表于 更新于

🌐 通用方案 URL Scheme

学术派，了解什么是 URL Scheme

URL（Uniform Resource Locator）是指定在互联网上可以找到资源的位置的文本字符串

通常可以分成三个部分：方案（Scheme）、主机（host）、路径（path）

HTTP 权威指南 - URL

当应用程序得到一个 URL 时，通过对它的解析，就知道去哪个地方、什么位置获取资源，同时用哪种方式去处理这个资源

例如当浏览器处理 https://lleohao.github.io/archives/ 这个 URL 时，它就会以 http 协议的方式去lleohao.github.io 这个域名所对应的主机下找寻 /archives/ 位置的文档

阅读全文 »

发表于 更新于

最近团队中开启了许多新的前端项目，也有新的同事加入了团队中

项目多了，如何确保所有成员都有一致的开发环境就是一个麻烦的问题，本文将介绍如何解决这个问题

背景知识

vscode 中的配置信息分为用户配置和项目配置两种

  • 用户配置在所有打开的 vscode 中生效
  • 项目配置存放于项目所在位置的 .vscode 文件夹中，当项目在 vscode 中打开时，针对打开的窗口生效

如果同时存在项目配置和用户配置，将以项目配置优先

我们可以通过项目配置文件来共享 vscode 配置，达到统一开发环境的目的

同步插件

插件文件 extensions.json

1
2
3
4
5
6
7
8
9
10
// 示例代码
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "octref.vetur",
    "formulahendry.auto-close-tag",
    "formulahendry.auto-rename-tag"
  ]
}
阅读全文 »

发表于 更新于

“类 mixin” 指的是 Vue 中的 mixin，Regular 中的 implement

使用 Mixin 的目的

首先我们需要知道为什么会有 mixin 的存在？

  1. 为了扩展对象（组件）的功能

    扩展对象功能的需求是很容易的理解的。比如业务开发时会碰到跨模块传递消息的需求，常用的方法是使用 “发布-订阅模式” 来创建一个全局的EventEmitter。不使用 mixin 时的使用方法如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // global/eventEmitter

    class EventEmitter {
        on(eventName, handle) {
            
        }
        
        emit(eventName) {
            
        }
    }


    // ComponentA
    import EventEmitter from 'global/eventEmitter'; // 全局的 EventEmitter 对象

    class ComponentA {
        constructor() {
            EventEmitter.on('event', () => {});
        }
    }

    // ComponentB
    import EventEmitter from 'global/eventEmitter';

    class ComponentB {
        constructor() {
            EventEmitter.emit('event');
        }
    }

    我们需要在不同的组件中引入 EventEmitter 来使用它

    如果使用 mixin 的话，我们可以这样做

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // eventEmitter mixin
    import EventEmitter from 'global/eventEmitter'; // 全局的 EventEmitter 对象

    const eventEmitterMixin = {
        on: (eventName, handle) => {EventEmitter.on(eventName, handle)},
        fire: () => {EventEmitter.emit(eventName)}
    }

    // Root Component
    Component.mixin(eventEmitterMixin);

    // ComponentA
    class ComponentA {
        constructor() {
            this.on('event', () => {});
        }
    }

    // ComponentB
    class ComponentB {
        constructor() {
            this.emit('event');
        }
    }

    这样通过mixin来扩展了组件的功能，是每个组件都可以方便的使用 EventEmitter 的功能

  2. 为了复用代码

    软件开发中的 DRY 原则还是有必要遵守的。过多的重复代码会导致维护上的麻烦，通过 mixin ，我们可以在不同的对象上使用同一份代码来完成相同的功能，减轻我们维护的压力。

阅读全文 »

发表于 更新于

写作背景

笔者所在项目使用的前端技术比较老旧，在开发的过程中需要先启动一个后端项目 (tomcat + mysql + redis) 来做为静态服务器

然后使用的是一个公司内部的类AMD模块加载工具，每次刷新页面都要加载1000+ 的文件，页面的响应时间接近20s， 导致开发的过程非常痛苦

所以决定使用 HTTP/2 来开发一个开发服务器来加快页面的加载速度. 目前来说效果不错，相对于 HTTP1.1 来说加载速度提升了 50%。

对于开发环境与我们类似的项目，可以尝试一下。

理论基础

1. HTTP/2 的TCP连接复用

虽然我们开发的时候使用的是本地服务器，建立连接的速度和下载速度都很快，但是浏览器针对同一域名的并发请求是有上限的。

阅读全文 »

发表于 更新于

尝试使用了下Heroku, 在上面部署 Node 程序还是很方便的, 主要优势在于它的网络可以访问到外网, 具体应用都懂得

这里记录下如何在 Heroku 上创建、开发、部署 Node

官方的文档在这里

安装 Heroku cli

其余的访问 下载地址

创建一个 Express 应用

使用Yeoman和generator-express来快速创建一个 Express 应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 安装 yeoman
npm install -g yo

// 安装 generator-express
npm install -g generator-express 

// 新建项目文件夹
mkdir heroku-express
cd heroku-express
git init

// 创建项目
yo express 

// 提交代码
git add .
git commit -m "Init project"
阅读全文 »

发表于 更新于

写这篇文章的初衷是为了记录我在修复项目中一个复杂业务组件中的bug而引起其他依赖这个组件的功能无法使用的过程中，对使用、维护复杂业务组件的一些思考

Bug发生原因

我所在的项目组中, 有一个类似树状文件管理的需求

对于这样的需求，当时我设计一个基础的UI组件treeListView用来实现基础的树状UI， 同时在其基础上实现了explorer业务组件来实现具体的业务逻辑。

由于是树状的视图，所以在当时设计数据结构时也采用树作为数据结构。为了能够方便的查找树中的数据，我按照系统的文件管理给所有的数据添加了一个path属性。

但是在实现的时候没有考虑到同级目录下面可能同时存在同名的文件夹和文件这种情况，假设文件夹folder下面同时存在名为file的文件和文件夹，这个时候会造成它们的路径相同，在查找的时候无法区分这两个数据。修复的方法是在文件夹的路径后面增加/。

阅读全文 »

发表于 更新于

这个项目结构是我在编写 基于Electron 和 Angular 的七牛文件上传App 总结出来的

本文主要介绍如何从零开始搭建高效的Electron开发环境, 主要内容如下：

  1. 通过合理的目录划分来组织代码
  2. 使用npm script简化开发
  3. 如何在渲染进程开发时使用热更新
  4. 如何在主进程开发时使用自动重启
  5. 如何在主进程开发时使用Typescript
  6. 如何打包和发布软件

示例项目地址 https://github.com/lleohao/electron-base

目录结构划分

初始化目录

首先按照常规的方法新建一个项目文件夹(这里我的示例文件夹叫做electron-base， 然后使用npm init初始化目录。

阅读全文 »

发表于 更新于

原文地址 Using CORS

部分内容我精简了部分内容, 如果想看全部可以去上面的原文地址查看

同时也附上脑图

前言

Cross-Origin Resource Sharing(CORS) 是W3C为浏览器制定的可以跨域通信的规范. 通过使用 XMLHttpRequest 对象, CORS可以让开发者方便的进行跨域通信, 就像在使用同域通信一样.

CORS的使用十分简单. 想象一下有一个网站 a.com 想要获取另一个网站 b.com 的数据. 但由于浏览器的同源策略, 这样的请求将会被禁止. 这时我们可以使用CORS, 通过添加一些特殊的请求\响应头, 可以让 a.com 访问 b.com 的数据.

阅读全文 »