- 博客(34)
- 收藏
- 关注
RSS订阅原创 发现一个简单但神奇的魔法 dot-object 插件记录一下
在网上如 lodash ，rc-form 表单等相关插件，出现很多可以提供设置对象路径自动成对应数据如下图：import dot from "dot-object"; let data = { 'test':'测试', 'list[0].value':12, 'name.value':'value',} let result = dot.object(data)console.log(result) /** * result => { *
2022-02-20 16:45:05
455
原创 前端程序员 学习书籍推荐
前端程序员 学习书籍推荐把看过的感觉很棒的前端书籍地址记录一下 以防以后找不到了ES6 入门教程（阮一峰）合格的前端JavaScript中常见的设计模式 优秀的前端函数式编程指北 提高代码开发效率，写出人类可以理解的代码现代 JavaScript 教程 提高js基础docker 容器部署用的nginx 反向代理...
2021-12-21 15:17:08
4607
原创 监听虚拟键盘 或者软键盘是否弹出
简介笔者一年前写的一个 npm 包 virtualkeyboard 可能有点兼容问题可以直接复制下放原码使用新建一个文件放入下放代码 如VirtualKeyboard/** * * @class 监听虚拟键盘 * @classdesc 监听虚拟键盘弹出隐藏 * @public onEnd 结束监听虚拟键盘 * @public onShow 传递一个回调 监听虚拟键盘弹出 * @public onHidden 传递一个回调 监听虚拟键盘隐藏 */class VirtualKeybo
2021-11-29 12:50:16
2596
原创 一个非常优秀的js 面试题
题目 请实现 find 函数，使下列的代码调用正确。在网上看见一个超有水平的题目，做出来记录一下。// 约定：// title数据类型为String// userId为主键，数据类型为Numbervar data = [ {userId: 8, title: 'title1'}, {userId: 11, title: 'other'}, {userId: 15, title: null}, {userId: 19, title: 'title2'}];var find =
2021-11-16 17:02:57
1169
2
原创 现代化 获取url路径的参数 search
百度查出来的 获取路径参数的方法都太古老了就自己写一个上代码一行搞定把路径参数转换成对象,方便前端同学对数据进行操作也可以吧Object.fromEntries去掉 直接获取 searchParams 可以看成是一个Map 对象let url = 'http://localhost:7711/?agentId=123&&channel=tpbb'let search = Object.fromEntries(new URL(url.replace('#', '')).search
2021-09-06 15:06:25
395
原创 ts 装饰器学习总结2
第2次学习装饰器记录内含实际案例使用装饰器tsc --target ES5 --experimentalDecoratorstsconfig.json{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true }}1.类装饰器类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 类装饰器不能用在声明文件中( .d.ts)，也不能用在任
2021-08-09 17:53:27
468
原创 开发cli 命令行工具，命令行开发框架func基于node
node 开发命令行工具的最佳框架：func优点使用node 开发（无2次学习成本）体积非常小 ≈ 7kb优雅的语法极少的依赖，最大优化运行速度和npm下载时间模板支持，立即获得最佳实践缺点：文档不好不好找 百度都查不到。快速开始超轻量级就3步：创建项目：npm init func安装依赖：npm i开始开发：npm start附上相关地址4. githud 项目地址：https://github.com/unix/func5. 文档地址：https://func.un
2021-08-04 11:30:48
194
原创 开发npm 模块实践开发及使用dumi的坑记录一下
标题npm模块开发npm 模块走了很多弯路这边,自行搭建项目模版编辑打包，项目体积大，使用模块多，不易于扩展和维护，开发所需的学习成本太高后期发现 dumi 组件开发场景而生的文档工具（建议先看一下dumi官网的文档有一定的了解在看本教程）贴上官网文档地址点击进入通过官网的 npx @umijs/create-dumi-lib 初始化一个项目之后发现了几个坑记录一下1.标题按照官网示例操作 vscode 提示找不到正在开发的组件类型解决方法1.查看项目中的 package.json 文件
2021-08-04 11:01:16
2440
原创 在ts中扩展继承Array并扩展新的方法
1.声明List 并继承 原生Arrayclass List extends Array { constructor(...list) { super(...list) } } let list = new List(1,2)list.push(3)console.log(list)//[1,2,3]可见新声明的 List 完整的继承了原生Array的方法2.添加自定义分页方法pagingclass List extends Array {
2021-06-23 10:29:14
2859
原创 nest 自定义异常过滤器
安装 nestnpm i -g @nestjs/cli使用nest 创建异常过滤器//可以查看nest cli 的帮助信息 nest -h // 使用 命令行工具 创建 异常过滤器模块 模块名称 errornest g filter error以下是我自己写的 异常过滤可以参考一下我们这边是服务器出错要返回抓取到的错误给前端并返回statusCode = 10000前端提示 抱歉出差弹框给用户statusCode 不等于 500 或 200 的直接弹出messageim
2021-05-28 10:44:12
611
原创 node npm shell 等脚本学习记录
脚本执行必要条件1.脚本执行需要设置执行权限命令行中输入如下命令：chmod u+x <脚本文件路径> //添加脚本执行权限及本用户权限2.告诉系统用什么执行当前脚本文件第一行写 #!/usr/bin/env + 模块名称#!/usr/bin/env ts-node // 用ts-node 执行 #!/usr/bin/env node // 用node 执行 #!/usr/bin/env bash // 执行shell 3.执行方法直接点击文件执行
2021-05-17 20:43:51
393
原创 execl 表格学习记录
1.使用npm 模块 json2csv 把 json 数据转成 csv 数据import { Parser } from "json2csv";import fs from "fs";const writeFile = (url, body) => fs.writeFile(url, body, console.error)const csvParser = fields => data => (new Parser({ fields }).parse(data))//
2021-05-11 15:09:42
98
原创 函数式编程学习记录
函数式编程主要概念1.将函数进行科里化使函数可以进行任意函数组合生成新的函数2.通过不同函数的重复组合提高开发效率，进行少代码重复，使代码更清晰1.函数科里化作用：把函数中的参数暂时保存起来，返回一个新的函数目标：addCurry(1,2) // 3addCurry(1)(2) // 3/*** 用递归函数 创建柯里化函数*/ const curry = (fn: Function, ...args: any[]) => { if (args.length >= f
2021-04-16 17:28:48
211
原创 字符串按照 Base64 进行编码
总结记录1.以前都是用 encodeURI 或者 encodeURIComponent 进行url 的转码和编码2.第一次碰到把 url 用Base64进行转码的记录一下1.使用浏览器自带atob/btoa 方法对字符串进行Base64转码/解码// Base64 解码window.atob('aHR0cDovL2ltZy5saWZlLmNudGFpcGluZy5jb20vdHBiYi9lYmFvL3VhdC9pbmRleC5odG1sIy9iYW9xLWluZGV4')// Base64 编
2021-04-16 16:42:09
409
原创 ts 装饰器学习总结
装饰器语法没参数 @方法名称有参数 @方法名称(参数)ts装饰器以关键字@开头 必须在class 中装饰器就是一个函数 在ts编译成js时执行1.类装饰器//定义装饰器 const testClass = (params?:any)=>(target:any)=>{ //设置目标类Test value 为装饰器传进来的参数 target.prototype.value = params}// 调用普通装饰器@testClass('测试') class Test
2021-04-09 21:18:03
438
原创 图片文件压缩
图片文件压缩成指定尺寸并返回base64 格式1.因业务需求要求前端直接上传base64 图片格式 并大小不能超过2mb2.网上也有很多相关压缩npm包，直接用对自己技术没啥提升。然后就手搓了一个压缩图片，代码如下：/** * 符合封闭开放原则* 封闭FileMethod* 开放FileExecute*//** 文件方法合集 不用看,不要修改 FileMethod 中的方法 */class FileMethod { /** * @param path 路径转Ima
2021-04-08 16:09:54
305
转载 潜伏在前端巅峰 中同出来的前端秘笈
其实标题应该叫，Web 用户体验设计提升指南。一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于：急速的打开速度眼前一亮的 UI 设计酷炫的动画效果丰富的个性化设置便捷的操作贴心的细节关注残障人士，良好的可访问性…所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。良好的用户体验设计，是
2021-03-05 21:34:30
397
原创 前端 模糊 搜索 经验总结
前端交易搜索总结1. 精确搜索优点简单快捷 一行js 代码搞定缺点不支持 拼音搜索 模糊搜索let res = [{name:'123'},{name:'我的名字1'}].filter(array => array.name.match('我'));2. 使用 damerau-levenshtein 模块 距离算法搜索需要先安装 npm 模块 damerau-levenshtein优点支持模拟搜索支持拼音搜索缺点搜索不准确 （致命伤）基本用法import * as l
2021-03-03 15:46:48
546
2
转载 你会用到的 15个前端小知识
你会用到的 15个前端小知识css 一行文本超出…overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2.多行文本超出显示…display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;3.IOS 手机容器滚动条滑动不流畅overflow: auto;-webkit-overflow-scrolli
2021-02-07 09:25:42
99
原创 使用js 内建URL对象 处理链接
// 使用js 内建URL对象 处理链接new URL(url, [base])// url —— 完整的 URL，或者仅路径（如果设置了 base），// base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。`let url1 = new URL(‘https://javascript.info/profile/admin’);let url2 = new URL(’/profile/admin’, ‘https://ja
2021-01-28 17:07:51
592
原创 fetch 配置 记录
完整的fetch 配置 记录let promise = fetch(url, {method: “GET”, // POST，PUT，DELETE，等。headers: {// 内容类型 header 值通常是自动设置的// 取决于 request body“Content-Type”: “text/plain;charset=UTF-8”},body: undefined // string，FormData，Blob，BufferSource，或 URLSearchParamsrefe
2021-01-28 16:43:10
285
原创 如何提升Javascript 基础
如何提升Javascript 基础作为潜伏在前端大佬群里的小白，询问大佬如何提升技术，听大佬说最多的话就是 js 基础很重要。js基础强那学任何前端框架都会很容易上手。那么问题来了js基础很重要,那么如何提升呢？跳转链接这个网站适合，对前端开发有一定经验，需要进阶的开发人员学习里。...
2021-01-04 15:24:48
306
原创 函数链式调用 学习记录
let ladder = { step:0, up(){ this.step++ ; }, down(){ this.step--; }, showStep(){ return this.step }, } //我们一般的调用方法ladder.up();ladder.up();ladder.down();ladder.showStep(); // 1那么如何把他改成链式调用比如
2020-12-18 11:05:43
190
原创 h5学习记录-
html 全屏 某个元素html 5 浏览器 本地储存 （浏览器本地数据库）localStorage //浏览器本地数组存储，可以将数据永久保存在客户端。sessionStorage // 关闭浏览器之后 数据 清除// 设置 因为localStorage只能设置字符串 所以把对象转成JSON字符串用来达到保存多样数据的目的 export const setStorage = (key: string, storage: any = {}) => { localStorage.s
2020-11-30 17:31:03
153
转载 rem布局：手机端页面自适应解决方案 (转载 记录)
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'ori...
2020-05-25 09:53:19
489
转载 干货记录一下 前端代码优化实用篇
索引优化代码先来看一个简单的例子：需求是星期回显，传1回显星期一,传7回显星期日,其他类推，无效回显空字符串；类似的需求还有回显月份第一种实现方法：switch实现function previewWeek(i){ switch(i){ case 1: return '星期一' break; case 2: return '星期二' ...
2020-05-25 09:52:08
177
转载 对树形数据的处理 记录
1.对树形数据模糊搜索 转载 原创作者小丶侯搜索结果let arr = [ { title: '你好吗？', children: [ { title: '很好啊', children: null }, { title: '是吗', children: .
2020-05-20 20:30:38
208
原创 react + ts +高德地图的使用 初次使用记录下
遇到坑 高德官网静态引用地图 不能使用 // 必须写上http 或https协议 而且在ts 中 AMap会标红 感谢胡哥提醒使用高德npm包 新版高德有npm 包万幸 npm i@amap/amap-jsapi-loader 封装了一个getAMap 函数 第一个参数是需要渲染地图的div 第2个是AMap.Map配置 具体配置参考高德官网 import AMapLoader from '@amap/amap-jsapi-loader';export let getAMap ...
2020-05-20 20:01:50
1816
原创 使用React 是否有要去学习使用Vue.js框架开发
1.Facebook在17年修改了开源React的使用许可协议，引起了一些公司的不满，进而放弃了使用React。2. 2020年 vue 3即将发布3. 在市场上公司要求vue 的使用 已经成功超过 React
2020-05-17 15:25:55
211
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人