前言:在接触 Tailwind 的刚开始,并没有感受到它的好处,反而觉得这是一种非常繁琐的事情,非常不适应。为了更好的使用 Tailwindcss,便有了该系列:梳理总结使用规律和用法。
章节系列共分为 7 个小节,每小节开头介绍使用规律,再介绍具体使用方法,各自小节独立可依照需求进行查阅。
提示
Unocss 兼容 Tailwind,因此仅需学习 Tailwind 的用法即可。
Just Do It
前言:在接触 Tailwind 的刚开始,并没有感受到它的好处,反而觉得这是一种非常繁琐的事情,非常不适应。为了更好的使用 Tailwindcss,便有了该系列:梳理总结使用规律和用法。
章节系列共分为 7 个小节,每小节开头介绍使用规律,再介绍具体使用方法,各自小节独立可依照需求进行查阅。
提示
Unocss 兼容 Tailwind,因此仅需学习 Tailwind 的用法即可。
在这一节里,参照 OpenLayers 官网创建一个项目。
在这一节里,回顾一遍 WeBGis 的一些相关概念。
WebGIS(网络地理信息系统)是指基于网络平台,客户端应用软件采用网络协议,运行在网络上的地理信息系统,即将 GIS 所能提供的功能通过网络展现给用户。
顾名思义,WebGIS 就是展现在网络上的 GIS,是 GIS 与 Web 融合的产物。GIS 通过 Web 功能得以扩展,使得 GIS 冲破专业圈子,真正成为大众化的 GIS。
OpenLayers 是一个专门为 WebGIS 客户端提供的 JavaScript 类库。用于访问以标准格式发布的地图数据,实现访问空间数据的方法都符合行业标准,支持各种公开的和私有的数据标准和资源。
在这个栏目里,开始记录一些自己的老本行 ——— GIS。
从决定做开发,到现在已经快两年了。从对前端一无所知,到现在部门的主心骨,逐渐感觉到其实自己只要愿意,什么都能学会。也是这个时候,想起了自己的老本行,想再捡起来,重新学一遍。地理信息基础什么都自然不用说,实际上都会,但是确实没有做过什么实际研发的项目。
暂以 OpenLayers 重新入门。
关于 Cesium 实际上是老朋友了, 只是读书期间对这个, 只会照着教程写, 现在前端底子打的较为扎实了, 逐渐体会到那种看山又是山的感觉。等有时间后,再做整理。
在 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"
在 Vuex 中是基于 Flux 架构进行设计的,它的核心思想是单向数据流,即数据只能从 Store 向外传递到组件,组件不能直接修改 Store 中的数据,只能通过提交 Mutations 来修改。
即: view --> dispatch --> action --> mutation --> state --> view
并且 Vuex 使用一个全局的 Store 来存储应用的状态,所有组件都共享这个 Store。由此会产生较多的 modules。
而 pinia 则是将整个 store 体系进行 "拍平"。Pinia 不是使用一个全局的 Store,而是允许创建多个 Store,每个 Store 都可以独立管理自己的状态。
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;
实现一个任务队列管理工具:依次顺序执行一系列任务,并在所有任务全部完成后可以获得每个任务的执行结果。
需要返回俩个方法: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
},
}
}
本文总结一下自定义一个组件的过程。以 React + Sass 封装 Button 按钮为例。
过程基本为定义颜色变量,理清功能需求,样式封装等。
首先全局自定义颜色,类似于 antDesign UI 组件库一样,需要有基础色、品牌色和功能色三种。
为了在全局通用,因此选择 sass 的变量形式先将各色系记录下来。
总结一下在前端中做权限管理的设计思路:
在用户登录后,获取 token 并在前端保存,作为用户凭证(LocalStore 或 SessionStore),后面每次发送请求都会携带 Token,后端对 Token 进行验证。当页面发生刷新时,可以用 Token 来获取用户权限。
config.headers.authorization = token
Yesterday is history, tomorrow is a mystery, today is a gift of God, which is why we call it the present.