分类 web前端 下的文章

daisyUI

https://daisyui.com daisyUI — Tailwind CSS Components WebdaisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file. Install daisyUI as a dev dependency and use the class names just like any …

Chakra UI

https://chakra-ui.com Chakra UI - A simple, modular and accessible component … WebCreate accessible React apps. with speed. Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

mantine (UI)

https://mantine.dev/

Global web icon

react-icons.github.io https://react-icons.github.io/react-icons React Icons - GitHub Pages WebReact Icons. Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. …

tabler-icons

https://tabler-icons.io/

Over 4850 pixel-perfect icons for web design Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.

Introduction to Immer

GitHub Pages https://immerjs.github.io › immer Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. ‎React & Immer · ‎Using produce · ‎Supporting immer · ‎Installation

hooks

immer

https://zhuanlan.zhihu.com/p/639089491

  1. use-immer库的高级用法 下面我们将介绍use-immer库的高级用法,包括:

3.1 使用produce函数 produce函数是use-immer库中最重要的函数之一。它可以帮助我们更加方便地管理和更新JavaScript对象和数组。下面是一个简单的例子:

import { produce } from 'immer';
const state = {
  todos: [
    { id: 1, text: 'Learn React', completed: true },
    { id: 2, text: 'Learn use-immer', completed: false },
  ],
};
const nextState = produce(state, draftState => {
  draftState.todos.push({ id: 3, text: 'Learn Redux', completed: false });
});
console.log(nextState.todos);

在上面的例子中,我们使用了produce函数来更新state中的todos数组。我们可以看到,使用produce函数可以帮助我们更加方便地更新JavaScript对象和数组。


react snippets

a quick way to create a code template for a component or etc...

rcc

refs

ref is a reference to a element but ref maybe null

react-hook-form

transform several properties

const obj = {
    className: "none",
    size: 14,
    color: "red"
}

<Comp
    { ... obj }
/>

equals

<Comp
    className={obj.className}
    size={obj.size}
    color={obj.color}
/>

... means    loop the obj and set each key to the value

zod , joi , ... validation libs

import { z } from 'zod';

// create the limites
const schema = z.object({
    name: z.string().min(3, {"message":"at least 3 characters."}),
    age: z.number({invalid_type_error:"required"}).min(18) // the api shoud be mobile and ...
})

// create the  interface for data
type FormData = Formz.infer<typeof schema>;
@hookform/resolvers
const {
    register,
    handleSubmit,
    formState: {errors,isValid}
} = 
useForm<FormData>( { resolver: zodResolver(schema) } );
useEffect()

useEffect is similar to a "OnRendered" Callback when JSX modules is rendered then react call this function

finally()

the finally method will be called both succeed or failed when fetch on axios

?. optional link

seemly to swift syntax

obj?.type means obj && obj.type

Abort Signal

Mozilla Developer https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal AbortSignal - Web APIs | MDN WebAug 4, 2023 · English (US) AbortSignal. The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it …

const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

Array.reduce()

Mozilla Developer https://developer.mozilla.org/.../Array/Reduce Array.prototype.reduce() - JavaScript | MDN - MDN Web … WebSep 14, 2023 · Array.prototype.reduce () Try it. The reducer walks through the array element-by-element, at each step adding the current array value to the... Syntax.

JavaScript Array filter()

WebThe filter () method creates a new array filled with elements that pass a test provided by a function. The filter () method does not execute the function for empty elements.

ZangoDB是一个indexedDB的类MongoDB轻量级接口库,主要是为了更轻松快速的编写indexedDB相关的操作。

关于indexedDB: IndexedDB - MDN

Github: ZangoDB

在MDN的推荐中介绍了几款不同的轻量级类库 来简化indexdb的使用,其中dexie.js也是不错的,但是在多条件筛选上并没有支持,所以介绍一下ZangoDB。

对于熟悉MongoDB这类NoSQL的开发者来说,应该简单看一下文档就能够快速上手。这里我将会对熟悉关系型数据库的来做一下说明。

ZangoDB主要将indexedDB简化为3个对象

Db - 数据库

Collection - 集合(表)

Cursor - 游标 查询( SQL )

不同于关系型数据库的初始化时数据库,表,所有字段名称和类型,索引结构都要确定。

NoSQL数据库通常只需要建立数据库的名称,表名称以及需要索引的字段。 其他的数据可以任意存储。

ZangoDB的主要特性集中在运算符的部分,类似于SQL中的( GROUP BY, ORDER BY 等 ) 包括以下几类

文末会给出更详细的介绍

Filter Operators 筛选查询运算符

Expression Operators 表达式运算符

Update Operators 更新运算符

Group Operators 组运算符


- 阅读剩余部分 -

最近在基于chrome开发一个用于收集和整理 信息(知识)的插件,名称叫Memoreasy。 一贯以来我都是用自己写的AppSiteJS框架在写web前台的功能,很少去涉及到异步编程,一般来说也就只是在XMLRequest( Ajax )的时候会用。

而在开发chrome插件的时候,几乎所有的api都是异步API,在第一时间的时候还是让我有些不适应。

但是很多时候理解一个技术或者说模式,最重要的并不是强迫自己去理解很多别人的说明、解释或者说代码。最关键的是需要以一个好的思路领会到这个概念的精髓。

我们先说同步编程,大家肯定不陌生,最初学习编程的时候我们都是使用同步编程,同步编程就好比工厂的流水线。 同步编程-流水线

我们在进行同步编程的时候 每一个后续的步骤都依赖于前一步的计算或结果(返回值),如果其中一个过程出现问题,那后续的工作也无法继续了。 换言之,我进行后续工作的时候肯定已经获得了前一步的结果了。 从我们的思维习惯上来讲,这个过程的可控性是很好的。

// 一个简单同步编程的代码说明
var a = "hello", b = 10;
var u = getUseid();
if( u ){
    var obj = { text: a, number: b, user: u };
    console.log(obj);
}else{
    console.log( 'user not found' );
}
function getUserid(){
    return localStorage.getItem('userid');
}

在这段程序中,无论是否找到userid 控制流程实际上还是在当前这段代码中的。 这相当于开发者是公司的老板,让员工去完成一些任务,且无论完成的如何,都需要向老板汇报,然后老板再向员工发布下一步的任务。 这就是我们常识中的“集权"。 我们喜欢同步编程,也就是喜欢他的掌控度。

但是同步也会遇到问题。譬如说,从网络中请求数据(Ajax)时我们无法掌控对方的后续结果。 这就相当于我们在网上下单购物,快递走哪里,什么时间到什么位置,会不会被堵车,会不会在仓库里被堆积,被哪个快递员投递等等。 这种情况我称之为不可控编程,在这个时候,我们不可能一直在手机前面全程跟踪一直到收到商品,我们一般放下手机该吃吃该喝喝,等待快递员的电话。 其实我们也早已习惯了“放权”,只是在编程中,我们需要对那些习惯做一些适应。 来看一段示例代码:

// 购物异步编程 仅供参考 完全不严谨!

function 购物( 订单 ){
    return Promise( 付款之后, 没给钱 ){
        给钱( 订单.价格 ).then( function(){ 
            付款之后( 订单 ) 
        }).catch(function(){
            没给钱()
        })
    }
}

function 发快递( 订单 ){
    var 包裹 = 商家打包( 订单 ); // 打包好了才能发包裹,所以需要同步
    return Promise( 到货, 丢了 ){
        发货().then( function( 包裹 ){
            到货( 包裹 )
        }).catch(function(  ){
            丢了()
        })
    }
}

function 到货( 包裹 ){
    return Promise( 在家, 不在家 ){
        打电话( 包裹.收件人 ).then( function(){
            在家( 包裹 ); // 送货上门
        }).catch(function(){
            放到快递柜( 包裹 )
        })
    }
}

这里我们定义了多个购物相关的异步方法,而我们在调用的时候就很简单了

购物( 订单 ).then( 发快递 ).catch( 弹窗提示 );

是不是感觉打开了新世界,因为发快递之后的事情我都不用管了,放权也是很爽的。

Flex布局 在CSS中是当前最流行的布局方式,并且在移动端以及较新的pc浏览器有着很高的支持度,基本上已经可以完全替代传统的 float, inline-block 各种混合的布局方式了。

flex布局因为是比较新的标准,所以在设计之初就着重解决了纵向排布的问题。而之前的css布局方式,对于纵向布局做的比较少。诸如纵向居中对齐、纵向铺满都是需要花费不少力气来处理。

当前的现代浏览器中 flex layout支持度已经超过98%

Flexible box - Can I use


CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。

Container Style 容器样式:

flex可以提供block和inline两种对外效果。但是并不影响内部元素。因为内部元素会被设定为flex项目。

设置一个flex容器:

设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。


.flex{
    display:flex;
    display: -webkit-flex; /* Safari */
}
.inline-flex{
    display:inline-flex;
}

- 阅读剩余部分 -

基于最近考虑着手iOS 安卓 双平台的开发,整理了一下现存的一些跨平台开发思路。

为了让自己更直观的感受不同跨平台思路的差异,我简单的做了几个图示。

跨平台开发图示1

跨平台开发图示2

套壳模式

微信公众号H5(相当于) , jQuery Mobile ?

套壳模式是开发APP可以说是最简单快捷的(对于web开发者来说),基本上只要有一个正常能用的手机端可以UI适应的web就可以通过套一个壳完成APP开发。 套壳的问题主要有2个

  1. 体验不好,完全通过套壳的webapp 从性能以及UI交互上来说都会比原生app差,通过对js、css的优化,可以解决一部分,比如说click事件在手机端应当用tap事件(封装tap事件),另一部分解决不了,比如说iOS端的侧滑返回或侧滑删除功能,这个体验如果要靠js来实现,效果当然是可以写出来的,但是流畅度、细节表现大大不如原生,而且会花费比较多的时间,而且没有什么这一块比较好的库可以用。
  2. 没有原生功能支持,在微信公众号h5中,还可以通过微信的JSAPI调用部分微信提供的功能,譬如说存储图片。但是套壳在app里的时候,就完全没有办法支持了。

Web 框架模式

Dcloud H5 plus (SDK)

除了Dcloud h5 目前没有发现明确的web框架模式,这里的web框架模式主要是指以web形式开发,通过特定的SDK或者插件api访问app原生功能,不需要使用该框架特定的打包流程,支持以sdk嵌入等方式构建app的。

Web框架模式相对来说简单,快速。不用深入学习原生的内容即可快速使用原生平台的能力,通过插件的扩展也能提高一定程度上的体验效果。

- 阅读剩余部分 -