hero image

功不唐捐 日拱一卒

Just Do It

Tailwind 快速入门

前言:在接触 Tailwind 的刚开始,并没有感受到它的好处,反而觉得这是一种非常繁琐的事情,非常不适应。为了更好的使用 Tailwindcss,便有了该系列:梳理总结使用规律和用法。

章节系列共分为 7 个小节,每小节开头介绍使用规律,再介绍具体使用方法,各自小节独立可依照需求进行查阅。

提示

Unocss 兼容 Tailwind,因此仅需学习 Tailwind 的用法即可。


Huy大约 2 分钟CSSCSS
OpenLayers 安装

在这一节里,参照 OpenLayers 官网创建一个项目。

快速安装

  1. 环境配置: node >= 14,个人目前用的是最新的稳定版本 node@20。下载地址: 传送门 🚪node

  2. 官方提供了一个脚手架, 可以快速安装项目:

    $: npm create ol-app my-app
    $: cd my-app
    $: npm start
    
  3. 或者可以采用笔者所搭建的项目模板: 传送门 🚪


Huy大约 1 分钟框架gis
WebGis

在这一节里,回顾一遍 WeBGis 的一些相关概念。

什么是 WebGis?

WebGIS(网络地理信息系统)是指基于网络平台,客户端应用软件采用网络协议,运行在网络上的地理信息系统,即将 GIS 所能提供的功能通过网络展现给用户。

顾名思义,WebGIS 就是展现在网络上的 GIS,是 GIS 与 Web 融合的产物。GIS 通过 Web 功能得以扩展,使得 GIS 冲破专业圈子,真正成为大众化的 GIS。

什么是 OpenLayers?

OpenLayers 是一个专门为 WebGIS 客户端提供的 JavaScript 类库。用于访问以标准格式发布的地图数据,实现访问空间数据的方法都符合行业标准,支持各种公开的和私有的数据标准和资源。


Huy大约 4 分钟框架gis
Giser

在这个栏目里,开始记录一些自己的老本行 ——— GIS。

从决定做开发,到现在已经快两年了。从对前端一无所知,到现在部门的主心骨,逐渐感觉到其实自己只要愿意,什么都能学会。也是这个时候,想起了自己的老本行,想再捡起来,重新学一遍。地理信息基础什么都自然不用说,实际上都会,但是确实没有做过什么实际研发的项目。

OpenLayers

暂以 OpenLayers 重新入门。

Cesium

关于 Cesium 实际上是老朋友了, 只是读书期间对这个, 只会照着教程写, 现在前端底子打的较为扎实了, 逐渐体会到那种看山又是山的感觉。等有时间后,再做整理。


Huy小于 1 分钟Guide
实现 Promise.allSettled

在 MDN 上, 对 Promise.allSettled 的解释是: Promise.allSettled() 静态方法将一个 Promise 可迭代对象作为输入,并返回一个单独的 Promise。当所有输入的 Promise 都已敲定时(包括传入空的可迭代对象时),返回的 Promise 将被兑现,并带有描述每个 Promise 结果的对象数组。

const promise1 = Promise.resolve(3)
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, 'foo')
)
const promises = [promise1, promise2]

Promise.allSettled(promises).then((results) =>
  results.forEach((result) => console.log(result.status))
)

// Expected output:
// "fulfilled"
// "rejected"

Huy小于 1 分钟javascriptjavascript
手写 Pinia

在 Vuex 中是基于 Flux 架构进行设计的,它的核心思想是单向数据流,即数据只能从 Store 向外传递到组件,组件不能直接修改 Store 中的数据,只能通过提交 Mutations 来修改。

即: view --> dispatch --> action --> mutation --> state --> view

并且 Vuex 使用一个全局的 Store 来存储应用的状态,所有组件都共享这个 Store。由此会产生较多的 modules。

而 pinia 则是将整个 store 体系进行 "拍平"。Pinia 不是使用一个全局的 Store,而是允许创建多个 Store,每个 Store 都可以独立管理自己的状态。


Huy大约 12 分钟框架Vue
React之手写 Hooks

Hooks 的好处很多,为了加强对 Hooks 的理解,手动实现一遍 React 的一些 Hooks 方法,便是再好不过的了。该文项目的源代码在 react-hooks 中。

本文中,我们统一规定 初始 App.jsx 如下:

import { root, useState, ...otherHooks } from "./React";

function App() {
  // useHook 的使用
  return ( <div>....具体代码</div> );
}

root.render(<App />);

export default App;

Huy大约 6 分钟框架React
任务队列的中断和恢复

实现一个任务队列管理工具:依次顺序执行一系列任务,并在所有任务全部完成后可以获得每个任务的执行结果。

需要返回俩个方法:start 方法用于启动任务,pause 方法用于暂停任务。

每个任务具备原子性,即不可中断,只能在俩个任务之间中断。

/**
 * @description: 任务队列的中断和恢复
 * @params {...Function} tasks 任务列表,每个任务列表无参数、异步函数
 * @return {*}
 */
function processTasks(...tasks) {
  const result = []

  let isRunning = false
  let i = 0

  return {
    start() {
      return new Promise(async (resolve) => {
        if (isRunning) {
          return
        }

        isRunning = true

        while (i < tasks.length) {
          console.log(`开始执行第${i}个任务`)
          const res = await tasks[i]()
          result.push(res)
          console.log(`${i}个任务执行完毕`)
          i++

          if (!isRunning) return // 每次结束任务进行判断, 若被中断了, 则提前退出, 此时并不执行 resolve, 转态依旧挂起, 异步阻塞
        }

        isRunning = false
        resolve(result)
      })
    },
    pause() {
      isRunning = false
    },
  }
}

Huy大约 2 分钟javascriptjavascript
组件封装 2 自定义组件

本文总结一下自定义一个组件的过程。以 React + Sass 封装 Button 按钮为例。

过程基本为定义颜色变量,理清功能需求,样式封装等。

基础配置

首先全局自定义颜色,类似于 antDesign UI 组件库一样,需要有基础色、品牌色和功能色三种。

为了在全局通用,因此选择 sass 的变量形式先将各色系记录下来。

基础色
基础色

Huy大约 5 分钟javascriptjavascript
权限管理设计思路

总结一下在前端中做权限管理的设计思路:

登录鉴权

在用户登录后,获取 token 并在前端保存,作为用户凭证(LocalStore 或 SessionStore),后面每次发送请求都会携带 Token,后端对 Token 进行验证。当页面发生刷新时,可以用 Token 来获取用户权限。

config.headers.authorization = token

Huy大约 1 分钟javascriptjavascript
2
3
4
5
...
13

Yesterday is history, tomorrow is a mystery, today is a gift of God, which is why we call it the present.