- 博客(111)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 vue3-todolist （自带撸个Table和Datepicker组件）
vue3-todolist0. 前言之前已经学了一波vue3，笔记在vue3学习笔记想直接看代码的可以去github1. 实现效果2. 需求分析1. 模块功能分析列表展示(静态展示 + 状态修改)table静态展示table支持自定义列 (自定义slot的插入)事件录入(控制部分)自定义的input输入框日期选择器2. 组件分析通过上面的分析，我们需要撸的组件大概有这么几个：tablebuttoninputdatepicker好了需求明确了，废话不
2020-10-08 11:10:05
1087
原创 日常学习：Typescript 4 学习笔记
Typescript 4 学习笔记可变元组类型元组标记class 从构造函数推断成员变量类型短语赋值法将 catch error 判定为 unknown 而非 any0. 准备工作安装 typescript 4 beta 体验版npm initnpm install typescript@beta配置 workspace 启动package.json 文件中增加 script 配置, 一定要使用 node_modules 下的 tsc 不然用全局的编译时候还是会报错，因为
2020-08-02 12:24:09
463
原创 日常开发：分页组件的思路梳理
分页组件的思路梳理1. 分页组件的几种场景分析首先这里做几个假设假设最多显示9个分页符省略部分用…来进行表示场景1： 总页数小于等于9页该场景没啥好说的 所有的分页符均显示就行了场景2: 总页数大于9页 且只有一边存在省略情况[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0W8lMkSJ-1595141809098)(./image/image-20200718221106689.png)]此场景有两种情况 左边省略和右边省略：这里要注
2020-07-19 14:59:39
658
原创 日常开发: Web Worker实现秒杀倒计时
Web Worker实现秒杀倒计时灵魂拷问 -> 为啥要用web worker因为我们知道 setInterval(() => {}, 1000)代表的意思其实是最快1秒之后能执行, 而如果事件阻塞了的话 就不知道要多久我们才能执行上这个事件了, 因此如果倒计时的话,就会存在这个倒计时的时间被卡住的问题, 如果是秒杀的问题的话~问题有点严重1. 预备知识介绍1. 主进程和子进程之间主要通过消息进行通信postMessage: 发送消息 -> 可以接受任何参数由父到子 或者
2020-07-19 14:56:20
1798
原创 微信小程序学习笔记二：自定义组件和自定义分享功能
5. 自定义Component使用Componet类编写一个Componet配置Component json中的component为true - 表示开启了component模式在需要引入页面的json文件中的usingComponent中注册(路径注意要指到.js文件)在需要引入的页面中进行引入即可6. 使用button实现分享功能实现思路：使用share-btn的外部容器实现一个自己想要的效果使用button:not([size=“mini”])对button的
2020-07-11 22:27:20
518
原创 Svelte学习笔记八：使用Store完成组件间参数共享
StoreStore主要功能是类似vuex、redux和mobx等工具，用于跨组件之间的状态共享。1. Store注册与更新Store写法只需要写在一个js文件中，然后通过svelte/store中提供的writable方法来向公共仓库中注册一个值作为一个仓库元素，之后在组件内可以通过subscribe来监听仓库元素的变化（理解上来说本质上是一个发布订阅的模式），通过set和update来发布仓库内某一个值的变化。Set：直接将仓库内的某个数指定为某个值Update：接收一个仓库当前值的参数的回
2020-06-07 00:12:46
3615
原创 微信小程序学习笔记一：环境搭建与基础语法
0. VSCode typescript 环境搭建本人还是习惯使用vscode进行编辑，因此进行vscode环境的配置，是在学习中笔记的一个记录，为自己以后有迷惑的时候能及时的记忆起以前踩过的坑1. 需要安装的插件minappwechat-snippetwepy snippets2. 支持typescript安装typescript（全局）npm install -g typescript在vscode命令行中打印tsc -v可能会报错tsc : 无法加载文件 D:
2020-05-28 23:32:32
2431
原创 Svelte学习笔记七：组件的生命周期
14. 生命周期函数svelte存在的声明周期包括onMountonDestorybeforeUpdateafterUpdatetick（暂时没有找到相关的例子）1. onMount翻译自官网文档：onMount函数在组件都挂在在DOM上之后会触发，在组件初始化的过程中进行调用。如果onMount返回了一个函数， 则这个函数会在组件卸载的时候触发。类似react中的USeEffect，我是这么理解的。但是在实际测试过程中，当我的onMount返回一个函数，好像在组件卸载的时候并不会被执
2020-05-24 21:17:21
2811
原创 Svelte学习笔记六：谈谈双向绑定的使用
表单元素的双向绑定1. input受控绑定使用bind关键字进行绑定，svelte通过bind关键字来完成类似v-model的双向绑定text<input type="text" bind:value={formData.name} />checkbox<input type="checkbox" bind:checked={formData.checkboxVal} />number<input type="number" bind:check
2020-05-23 11:24:12
806
原创 Svelte学习笔记五----列表渲染+异步渲染
列表循环渲染使用 {#each items as item}{/each} 来实现列表循环渲染，这里的item可以通过解构赋值，拿到item里面的值，例如 {#each items as {name, age}} {/each}一个简单的例子<script> let people = [ {name: "Mike", age: 18, math: 90}, {name: "Jack", age: 20, math: 100}, {
2020-05-16 17:52:19
885
原创 Svelte学习笔记四——组件传参+条件渲染
9. 定义组件参数之前定义了无props的组件，如果想定义一个有props的组件，需要怎么操作呢？接受props的定义：我们需要在组件内部通过export let 的方式来定义组件从外部接受的props默认值的设置：直接对定义的props赋值，就会作为组件的默认值使用扩展运算符：如果有多个props，可以通过声明一个props对象然后利用扩展运算符…来简写来看例子<!-- Input.svelte --><script> export let value;
2020-05-13 00:40:33
3157
原创 Svelte学习笔记三：计算属性+复杂类型更新的坑
7. 声明(计算属性)在官方文档中把定义的变量叫做，声明(declaration)，但是我觉得用来说他是计算属性更好一些，类似vue，或者是class中的get方法，react中useMemo定义的变量，其原因是∗∗我们通过定义的变量叫做，声明(declaration)，但是我觉得用来说他是计算属性更好一些，类似vue，或者是class中的get方法，react中useMemo定义的变量，其原因是**我们通过定义的变量叫做，声明(declaration)，但是我觉得用来说他是计算属性更好一些，类似vue，
2020-05-10 21:55:23
812
原创 Svelte学习笔记二：组件导入+html字符串插入+事件绑定
组件导入和vue和react一样，在script标签中通过import来引入想要引入的.svelte组件这里就简单看一个例子就好// Header.svelte<script> let text = "This is Header";</script><h1>{text}</h1><style> h1 { font-family: 'Courier New', Courier, monospace
2020-05-09 00:57:45
782
1
原创 Svelte学习笔记一: 环境搭建和第一个Svelte程序
最近听到组里的大佬谈论起Svelte，打算用下班的时间好好学一学，每天更新，算是给自己学习的一个动力吧。文档地址：svelte文档地址1. 项目开始通过npx拉取项目模板然后开始svelte之旅吧~npx degit sveltejs/template my-svelte-projectcd my-svelte-projectnpm installnpm run dev2. 什么...
2020-05-08 01:00:55
1233
原创 微信小程序学习笔记(一): 基础环境配置
0. VSCode typescript 环境搭建开发工具微信开发者工具(用于调试，也可以用默认编辑器编写原生小程序代码) 下载地址nodejs和npm (微信小程序现在支持npm包了，而且编译的时候也要用) 国内镜像地址npm换源$ npm install --registry=https://registry.npm.taobao.org需要安装的插件minappwe...
2020-04-11 14:44:27
315
原创 React+Nodejs中间层（一）:环境搭建+实现接口转发
Koa+React+Webpack环境配置1. 初衷最近，因疫情在家写了一些东西．想到之前去实习的时候，公司用的Nodejs做中间层，实现数据格式的处理，请求转发，SSR等功能，想自己也折腾下这么个东西，刚好最近或多或少的学了一些Webpack，就从webpack搭一个Koa作为中间层，页面路由，同时使用React的这么一个脚手架吧，只是一个自己的玩具吧，哈哈哈哈．2. 使用中间层的作用我...
2020-03-18 16:04:42
3916
原创 学习笔记:SKU组件(React版)
SKU组件(React版)源码起因今天看掘金的时候看到前端SKU算法实现,因为公司也有涉及到SKU的业务,记录一下自己写SKU的一个例子吧,刚好他有提供后端的API接口数据,mock一下干起来，但是在做的时候还是有很多问题的，这里做一下记录实现效果mock数据export const simulatedSku = { id: 2, title: "林间有风自营针织衫", ...
2020-03-16 16:12:03
3512
原创 ES2020整理：?和??，动态加载，BigInt，Promise.allSettled
ES2020 学习笔记原文地址1. babel 环境配置babel 版本在7.8以上，babel-cli 8以上均支持es2020中的语法，具体可参照本项目的webpack配置2. es2020 中值得关注的点对象定义中的私有变量当我们创建一个类的时候，该类会在各个场景下被使用，可能我们并不希望每一个内部的参数都被全局共享，因此在方法或者变量前添加#，使得该方法或者类名只在类内部可用...
2020-03-14 10:35:28
1516
原创 Flutter 1.12更新后部分API修改问题
正在学习过程中，发现教程和自己使用过程中的例子中部分api不吻合，这里发出来避免自己踩坑inheritFromWidgetOfExactType原来的写法class InheritedStates extends InheritedWidget { final dynamic inheritedData; final Widget child; InheritedStates(...
2020-03-02 20:58:18
857
原创 开发随笔：React使用IntersectionObserver实现无限下拉
17. 无限下拉的例子参考博文1. 工具介绍IntersectionObserver: 一个元素是否在视窗中可见， 通过该对象实现对于DOM元素的异步监听功能的实现。基本使用方法：创建一个IntersectionObserver的类函数，在类函数创建时，传入需要监听事件的回调处理函数主要用用于当元素和视窗发生交互时候，调用回调函数回调中的entities是所有监听对象组成的数组...
2020-03-02 01:37:16
5157
原创 日常随笔：列表拖拽换行的例子
22. 列表拖拽转换的例子今天看到有些表格中能够通过拖动来换行，手动排序的功能，想来自己实现一下，类似效果如下主要解决问题的办法drag元素clientX和clientY动画元素animition解决思路委托外部元素监听内容元素的(dragStart阶段，定位被拖动的元素)委托外部元素监听元素已经被拉到哪个元素的位置 (使用dragover确定，停留在哪个元素的...
2020-02-29 21:24:44
417
原创 日常开发：Websocket初探
WebSocket使用方法前端使用方法利用WebSocket建立一个WebSocket对象通过监听该对象的 onopen, onmessage方法，实现数据的交互，处理后端传来的信息<!--- Game1 ---><!DOCTYPE html><html lang="en"> <head> <meta charset...
2020-02-27 15:11:53
158
原创 日常随笔: 实现拖拽上传文件并展示
19. 拖拽上传图片并展示上传图片1. 解决思路：通过利用，监听drop方法，从dataTransfer中得到上传的源文件利用FileReader类中的readAsDataURL将二进制文件转换成base64字符串将该字符串放入img的src中即可上传功能使用FormData进行处理，利用append方法添加内容之后利用post上传到服务器，获取文件地址1. 核心处理详细内容...
2020-02-24 15:47:12
426
原创 Flutter学习笔记：布局
3. 布局部分1. Row水平布局所谓的水平布局就是单一横向的行内布局, 类似div标签,每次调用一个Row，他会自动占用一行，其高度由内部元素的高度决定，Row组件是一个支持弹性盒布局的组件代码案例class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { ...
2020-02-21 17:16:25
1583
原创 Flutter学习笔记：常用的表单组件
6. 表单组件代码地址1. Switch开关Switch是一个受控组件，需要传递value(布尔类型)决定显示的状态，通过回调onChange对状态改变时进行操作(类似React受控组件)Switch默认撑满整个外部容器，长度需要通过外部的容器控制class SwitchComponent extends StatefulWidget { SwitchComponent({Key...
2020-02-19 00:58:05
292
原创 Flutter学习笔记：路由和包管理
4. 路由导航和包管理代码地址这次学习笔记主要有一下几个部分路由导航简单路由路由表导航路由传参路由参数回流包管理本地组件引用外部包引用构建本地包并引用1. 路由导航导航实现页面的切换，在Flutter中实现路由切换包括非具名路由和具名路由两种，如果是非具名路由需要指定具体到的路由组件(通常是一个页面),具名路由通常使用路由表构建的，建立了路由和页面组件之间...
2020-02-11 16:20:01
239
原创 Flutter学习笔记：有状态组件和组件间通信
3. Flutter有状态组件和组件通信0. 一个计算器的简单例子再学习过程中在本例子中用到了几个注意点进行笔记：Flutter有状态组件的定义方法Flutter子组件和父组件之间的通信过程动态组件生成的方法关于定义回调函数类型上碰到的写法问题实现效果：1. Flutter有状态组件的定义创建一个类(有状态组件)，该类用于继承StatefullWidget在有状态组件中...
2020-02-08 19:07:14
1527
1
原创 练手的React静态博客项目
React练手博客项目如果被人看到了觉得还行的话进去点个star把有什么问题的话可以直接评论，希望大家多批评指正，作为前端小菜鸟的我还是要多多学习鸭...
2020-02-07 20:00:59
713
2
原创 Flutter学习笔记: Dart语言值之面向对象class
4. Class的使用所有代码均在github上github地址1. 类的构造函数定义类的构造函数本质也是函数，因此其定义方式和函数的定义套路是一样的，有具名参数函数和位置参数函数这两种，另外还包括使用dart语法糖的形式。如果一个函数没有构造函数会怎么样？如果不指定构造器的话，class会调用一个不带任何参数的默认构造器该构造器没有任何传参，并且在继承父类构造器的时候不会传参构造...
2020-02-05 19:31:50
2789
原创 flutter学习笔记之dart:控制流
3. 控制流方法1. if和JS一样具有if -----else if -----else的结构import 'dart:math';void main() { // if循环 int score = Random().nextInt(100); if (score < 60) { print('不及格'); } else if (score < 80...
2020-02-04 13:00:11
498
原创 flutter学习笔记dart: 函数部分
2. 函数函数是dart中的第一公民，也是一种对象，在dart中一切都是对象，因此也可以将函数作为参数传给函数或者对象1. 函数定义方法Dart中的函数主要分为三种：位置参数函数具名函数匿名函数位置参数函数定义调用方式可选和必填参数的定义方法可选参数通过[]的形式进行包裹，这种参数在调用的过程中可以省略不添加如果没有通过[]的形式进行包裹说明该参数必填如果要给可选参数...
2020-02-04 12:58:51
313
原创 Flutter学习笔记: Dart语法——变量
主要参考: dart官方文档1. 变量dart和javascript不同是一种强类型语言，所以其定义变量的时候需要给出具体变量的类型，如果不指定，变量的类型就已第一次定义的类型为准，如果赋值给其不同类型就会报错。其变量定义方法通常为 [声明符号](如果是dynamic可省略) + [类型](可省略) + [变量名],但是注意声明符号和类型不能同时省略声明号包括:var: 定义一...
2020-02-02 23:01:49
584
原创 Flutter学习笔记二：基础组件的使用
1. flutter 在ubuntu下的环境配置具体内容审核不通过，可以看github主要踩坑包括android studio的安装java 版本和sdkmanager不兼容，降java版本sdk的安装(工具的使用)2. 基础组件的使用0. 心得flutter并不像前端一样有分离的js,css,javascript,都是通过组件的形式进行安排的，布局是一个组件对象内的属性等等，...
2020-01-31 21:36:54
184
原创 开发随笔: useRef获取之前状态以及useEffect的坑小记
16. useEffect中的坑以及利用useRef记录之前的状态1. 场景描述用法在使用useEffect这个hooks的时候，我们通过会通过给他增加一个依赖项，来完成当某个或某些依赖发生改变的时候，完成一些副作用的操作，其正常用法如下:import React, { useEffect, useState } from "react";import "./styles.css";c...
2020-01-20 16:39:31
8264
原创 开发随笔：React异步加载组件封装
React异步载入组件封装作者正在开源一个基于React+Typescript+node.js的博客系统，源码在练手开源项目， 有想一起学习的或者有空的大佬可以帮我看看代码，提提意见，顺便给个star最好不过拉。谢谢大家1. 场景叙述今天，碰到这样一个问题，就是当表单重载修改的时候，需要根据接口返回的数据来实现表单的初始化，如果是自己封装的受控组件的话，其实很简单，直接通过value赋值，然...
2020-01-18 22:28:06
544
原创 React Hook: 使用Context和useReducer代替Redux (Typescript)
14. React Hook: useContext + useReducer代替redux0. 背景当组件嵌套很深，通过一直传参的方法来实现会非常麻烦，为了共享一些参数，一般可以通过Context来实现参数的托管，如果要对部分参数进行修改，可以通过redux或者mobx来做状态的集中管理。在有了React hooks之后，通过Context + useReducer完成Redux的功能，这里...
2020-01-13 11:42:40
3128
1
原创 开发随笔：在react中使用带参的防抖节流回调
12. 在react中使用防抖和节流1. 原理为什么要使用防抖节流，以及防抖节流的原理可以细看防抖和节流2. 在React中使用防抖节流错误的例子import React from "react";import { debounce } from "lodash";export function ErrorInput() { const onChange = e => {...
2020-01-11 12:09:29
1052
3
原创 开发随笔：React传递图片文件到后端的文件上传组件封装过程
10 . React 图片或者文件上传问题通过 base64 前端处理图片为 base64 的解决方案利用 FileReader 对数据进行读取，如果是图片会将图片读取为 base64 的形式将得到的 base64 的字符串传给后端后端直接保存该html字符串，之后调用接口查询该数据直接前端通过img标签完成自动解析即可参考博文代码实现function App() {...
2020-01-09 10:40:41
2843
原创 开发随笔:富文本编辑器简单原理
1. 参考博文富文本编辑器的简单原理2. 所用API文档mdn document.execCommand3. 原理简述通过将div标签设置其contentEditable之后会得到一个可编辑的区域，之后该区域就会获得一个类似4. 简单实现代码import React, { useRef, useState } from "react";import "./styles.css"...
2020-01-08 10:29:24
324
原创 开发随笔：利用业务组件zent封装表单组件
zent封装表单组件zent版本7.4.31. 利用zent的几个组件FormControl: 包裹封装组件，用于为封装的表单组件提供label, invalid等参数，与其他封装的表单组件统一格式FieldSet: 包裹封装的外部组件，当FormStrategy.View时，为上级托管的Form组件添加字段nameForm.useField: 初始化一个model，包括初始值，键...
2020-01-04 17:01:04
514
HTML+CSS3+原生JS+JQuery学习笔记(详细)
2018-11-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人