- 博客(60)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 如何用可选链重构你的代码 | ES2020
目录重构哪里？三元运算符数组检查正则匹配属性检测不要滥用注意事项需要在声明前检查的情况把`?.`放错位置，或者忘记`?.`要小心可能会引起bug的情况null vs. undefined全等检测操作符优先级返回语句同样，可选链也能修复一些bug！首先，什么是可选链(optional-chaining)，这是在ES2020中引入的新特性，在typescript v3.7中也已经支持。要知道，你不能只在代码中写foo.bar.baz()，而不检查foo是否存在，然后检查foo.bar是否存在，再检查foo.
2020-07-20 15:51:00
496
原创 leetcode-js面试题 | 2.两数相加
题目给出两个 非空 的链表用来表示两个非负的整数。其中，它们各自的位数是按照 逆序 的方式存储的，并且它们的每个节点只能存储 一位 数字。如果，我们将这两个数相加起来，则会返回一个新的链表来表示它们的和。您可以假设除了数字 0 之外，这两个数都不会以 0 开头。示例：输入：(2 -> 4 -> 3) + (5 -> 6 -> 4)输出：7 -> 0 -> 8原因：342 + 465 = 807单向链表已定义：function ListNode(val)
2020-07-12 19:04:47
383
原创 数据结构Javascript实现 | 字典树 trie
概念字典树，是一种有序树，用于保存关联数组，其中的键通常是字符串。与二叉查找树不同，键不是直接保存在节点中，而是由节点在树中的位置决定。一个节点的所有子孙都有相同的前缀，也就是这个节点对应的字符串，而根节点对应空字符串。一般情况下，不是所有的节点都有对应的值，只有叶子节点和部分内部节点所对应的键才有相关的值。图示代码字典树节点class TrieNode { constructor(key) { this.key = key; this.children = []; }
2020-07-11 20:17:32
499
原创 rxjs最佳实践
rxjs最佳实践RxJS是JavaScript中最流行的函数响应式编程（FRP）。每天都有很多人在项目中使用RxJS。大多数开发人员都知道常见的代码精简的最佳实践，但RxJS的最佳实践呢？当涉及到FRP时，你是否知道该做什么和不该做什么？如何在代码中应用它们？本教程将重点介绍我在日常编写代码时使用的几种最佳实践，并附上实际的例子。内容涵盖以下几点：避免将所有的逻辑代码写在subscribe中取消订阅避免重复逻辑用链式替代嵌套用share处理相同的流不要暴露subjects使用弹珠图测试
2020-06-30 17:51:49
981
1
原创 leetcode-js面试题 | 1.两数之和
题目给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]解法1. 双重循环时间复杂度：O(n^2)var twoSum = function(nums, target) {
2020-06-27 13:25:04
176
原创 【ng-alain】解决sf设置了visibleIf的字段，默认执行required验证
利用 validator 参数： // @delon/form schema: SFSchema = { properties: { money:{ type:'string', title: '资产', ui:{ validator: val => (!val ? [{ keyword: 'required', message: 'Required' }] : []), } }
2020-06-24 12:06:45
870
1
原创 怎么让原生input输入框只能输入正整数
input输入框只能输入正整数<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
2020-06-21 08:47:09
851
原创 css技巧 | 如何设置粘性页尾
一个 CSS 技巧，如何使用 Flexbox 布局将网页的页尾始终放置在窗口最底部。<body class="Site"> <header>…</header> <main class="Site-content">…</main> <footer>…</footer></body>.Site { display: flex; min-height: 100vh; flex-dir
2020-06-21 08:37:00
330
原创 js事件循环机制和ui渲染 | 前端面试经典
js事件循环机制和ui渲染事件循环任务队列所有的任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列( Event Queue )的机制来进行协调。同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入 Event Queue 。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的
2020-06-21 08:22:19
1736
原创 css变量的常见应用
声明变量html { --brand-color: hsl(230, 80%, 60%);}.logo { fill: pink; /* fallback */ fill: var(--brand-color);}<svg version="1.1" viewBox="0 0 50 50" class="logo"> <!-- the brand color fill color applies to the circle! --> <c
2020-06-05 10:32:14
183
原创 在Angular项目中引入pdf.js，解决电子签名不显示
以下是针对解决电子签名不显示的pdf预览的方案：将pdfjs相关源码下载后，拷贝至项目目录下，如src/asssets，另外需要修改 pdf.worker.js中代码，将以下代码注释：if (data.fieldType === 'Sig') { _this2.setFlags(_util.AnnotationFlag.HIDDEN);}不注释的话页面可能看不到电子签名；然后在angular.json的build配置里添加代码："build": { "assets": [ {
2020-06-01 14:15:17
1150
原创 react项目设置代理(proxy)
安装http-proxy-middlewarenpm install http-proxy-middleware在src下建立setupProxy.js文件const proxy = require("http-proxy-middleware");module.exports = function(app) { app.use( proxy("/api", { target: <代理地址>, changeOrigin: true, // ne.
2020-06-01 13:56:40
2042
1
原创 js防抖和节流的实现及使用
作用防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给 DOM 绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件 onmousemove, 滚动滚动条事件 onscroll，窗口大小改变事件 onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定 onkeyup 事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不
2020-05-27 18:21:36
2320
2
原创 使用mac自带服务器Apache
打开终端，开启Apache://开启apache: sudo apachectl start//重启apache: sudo apachectl restart//关闭apache: sudo apachectl stop回车会提示输入密码，也就是你电脑的密码，http://127.0.0.1/测试一下，成功则如下图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WiGp6il1-1590550809107)(/image/9FD21F43-C6.
2020-05-27 11:46:36
228
原创 Angular | 已知字典表value值，反显对应label
应用场景在一些业务场景中，尤其是表单展示数据时，会包含一些存为字典表的数据，比如地址信息等，后端接口如果只返回了key值，则需要前端通过调用字典表接口去查询value值来反显到表单上。业务html: dictSrv.province$是字段对应的字典表接口，返回值为Observable；dictTrans是字典转换管道(Pipe)；province是后端传回的key取值；value和label的传值具体根据字典表返回的key和value对应的字段<div>省份: {{ dictSrv.pr
2020-05-20 10:30:32
739
原创 处理js大数运算进度丢失
该问题为前端js大数运算精度丢失问题，当超过16位数时会出现低位数不精准，这是由于前端js在高位数计算时转为科学计算法导致。解决方案1： 对前后端限制数字位数一般在项目或业务中是不会涉及到那么大的数位，没必要吹毛求疵。解决方案2： 引入bignumber.js该库用切分逻辑处理了大数运算，用法也比较便捷。????github...
2020-05-16 10:33:41
695
原创 前端性能优化工具 - Lighthouse
Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用（移动端）的质量。目前测试项包括页面性能、PWA、可访问性（无障碍）、最佳实践、SEO。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。Lighthouse常用的最佳实践打开外部链接使用rel="noopener"避免长宽比不正确的图像每个图像都有一个alt属性配置HTML的Viewport meta标签压缩图片（仅针对JPEG）允许用户粘贴到密
2020-05-16 10:13:35
1133
原创 数据结构Javascript实现 | 优先队列 PriorityQueue
概念优先队列中的每个元素都有各自的优先级，优先级最高的元素最先得到服务；优先级相同的元素按照其在优先队列中的顺序得到服务。优先队列的出队顺序与入队顺序无关，和优先级有关。图示代码优先队列节点class Node { constructor(data, priority) { this.data = data; this.priority = priority; }}优先队列类class PriorityQueue { constructor() {
2020-05-16 09:59:33
720
原创 Shell讲习班笔记:分享一些很有用的shell入门级命令
Shell学习地址echo & ls & cdpwdpwd获取当前所在位置的绝对路径(Print Working Directory);ls -lls -l Documents/列出 Documents 目录下的文件信息;ls -l Documents/*.pdfmkdir & mvmkdir Documents/Books在 Documents 目录...
2020-05-05 14:13:31
158
原创 数据结构Javascript实现 | 堆 heap
概念堆可以被看做一棵完全二叉树的数组对象。图示代码最小堆 - 根节点为最小值的堆class MinHeap { constructor() { // index为0时赋值null,便于计算子节点index和父节点index的关系 this.heap = [null] } insert(node) { this.heap.push(node); ...
2020-04-28 16:29:05
513
原创 数据结构Javascript实现 | 哈希表 hashTable
概念栈只允许在有序的线性数据集合的一端 (栈顶) 进行数据插入和移除。因而按照后进先出 (LIFO, Last In First Out) 的原理运作。图示代码不处理冲突的哈希表：class HashTable_WithoutSolveClash { constructor(size) { this.table = new Array(size); } /** 哈...
2020-04-24 14:55:05
146
原创 数据结构Javascript实现 | 栈 stack
概念栈只允许在有序的线性数据集合的一端 (栈顶) 进行数据插入和移除。因而按照后进先出 (LIFO, Last In First Out) 的原理运作。图示代码栈节点class Node { constructor(element) { this.element = element; this.next = null; }}栈 Classclass St...
2020-04-22 11:33:35
238
原创 数据结构Javascript实现 | 队列 queue
图示队列节点class Node { constructor(element) { this.element = element; this.next = null; }}队列class Queue { constructor() { this.head = null; this.tail = null; } /** * ...
2020-04-18 15:02:24
125
翻译 ES2020中实用的新特性一览
目录私有变量 Private Class VariablesPromise.allSettled空值合并运算符 Nullish Coalescing Operator可选链 Optional Chaining OperatorBigInt动态导入 Dynamic Import私有变量 Private Class Variables类的主要作用之一是将我们的代码包含在可重用的模块中。所以会在许多...
2020-04-14 10:40:31
403
原创 解决Nuxt(Vue)中跨页面锚点不定位的问题
方法①在有锚点的页面添加代码：methods: { goAnchor(selector) { // 最好加个定时器给页面缓冲时间 setTimeout(() => { // 获取锚点元素 let anchor = this.$el.querySelector(selector) anchor.scrollIntoView() }, 50...
2020-04-09 09:21:21
1808
2
原创 在Nuxt中按需引入Echarts
在Nuxt静态网页项目里，只用到echarts中的树图，先前以插件形式引入了整个包：nuxt.config.js...plugins: [{ src: '~plugins/echarts.js'}]...echarts.jsimport Vue from 'vue'import echarts from 'echarts/lib/echarts'Vue.prototype.$...
2020-04-08 16:46:15
1911
原创 js数据结构之双向链表doublyLinkedList
双向链表图示：代码实现（包含增、删、遍历方法）及示例：/** * 双向链表节点 * 包含三个值: 当前节点的值和分别指向前后节点的链接 */class Node { constructor(element) { this.element = element; this.next = null; this.prev = null; }}/** 双...
2020-04-06 11:27:58
165
原创 js数据结构之单向链表SinglyLinkedList
单向链表图示：代码实现（包含头尾部插入、搜索、删除、正反向遍历）及示例：/** * 单向链表节点 * 包含两个值: 当前节点的值和一个指向下一个节点的链接 */class Node { constructor(data) { this.data = data; this.next = null; }}/** 单向链表 */class LinkedLis...
2020-04-06 11:10:49
246
原创 【总结】常用正则表达式集合
常用字符匹配中文字符 /[\u4e00-\u9fa5]/g匹配双字节字符 /[^\x00-\xff]/ig匹配行尾行首空白 /(^\s*)|(\s*$)/只能输入数字 /^\d+$/只能输入n个数字 /^\d{n}$/至少输入n个以上数字 /^\d{n,}$/只能输入m到n个数字 /^\d{m,n}$/只能由英文字母组成 /^[a-z]+$/i只能由大写英
2017-08-31 21:38:00
411
原创 [js]圆周运动&类s运动
// 圆周运动function circularMove(obj){ var deg = 0; var timer = setInterval(function(){ deg++; var x = 100 * Math.cos(deg * Math.PI/180); var y = 100 * Math.sin(deg * Math.
2017-08-26 10:08:12
491
原创 [js]实现自定义animate动画库
animate.js –>//获取元素样式function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputedStyle(ele, null)[attr];}function animate(ele, attrs, time, callback) {
2017-08-23 20:39:03
2509
原创 [js]数组去重的几种方法
问题：随机10个不相同的数(数值范围11~25之间的)并且存放到数组中代码：// 函数：随机生成一个从min到max的数function randFn(min, max){ return parseInt(Math.random() * (max-min+1) + min);}// 方法1: 遍历已存入的数和当前随机的数比较，引入开关判断是否存放var arr = [];for(v
2017-08-23 20:04:29
367
原创 纯html/css练手项目-电商网站
纯html/css练手项目-电商网站github：https://github.com/mabel-xue/100du.com-html-css.git文中资源仅供学习交流，禁止商用。
2017-06-24 20:52:30
10496
原创 【html/css】清除浮动的几种方式
【html/css】清除浮动的几种方式1清除谁的浮动，就在谁的里面最下端写一个空的div，然后再对空div设置 clear:both 属性2给浮动元素的父级添加伪元素 ::after ，再设置 clear:both 属性3提前定义清除浮动的css样式：.clearFix ::after {content=''; display:block; clear
2017-06-18 20:47:36
398
原创 jar signature和full apk signature的选择
在生成正式签名的APK时有一个"签名版本号的选项"（Signature Vwesions），如图：其实这是从 Android 7.0引入的一个新的签名机制，它为APK附加了一些特性使其更具安全性，所以这个选项虽然不是强制性的，但最好两个都选，如果选择V2会产生错误可以不选V2，希望对不太清楚怎么选的开发者有帮助~
2017-06-01 10:49:22
9247
1
原创 当json中的key值为数字时，怎么用GSON解析？
一般json中的key值都是固定的，但如果key值为数字序列时应该怎么办呢？如下{ "0": { "count":"5"}, "1": { "title":"...", "desc":"" }, "2": { "title":"...", "desc":"" }, "3": { "title":"...", "desc":"" }, "4": { "title":"..."
2017-05-29 21:18:16
3867
原创 【TED笔记】如何掌控你的自由时间
1.不存在没有时间的说法，没有时间做某事=该事不重要；2.重点是将时间花在重要的事情上；3.什么是重要的事情?想象一下，在明年年末评估时，完成哪些事情会让你这一年变得充实且有意义，写下这3-5件事*2(both for career and family)4.将这6-10件事细分:对于每周计划，分为 career, r
2017-05-24 00:48:30
1479
原创 com.commonsware.cwac.camera的配置
Camera库可以将相机功能以Material Design的方式呈现，可以提升界面观感和使用体验。官方文档：https://github.com/commonsguy/cwac-cameraCamera库的安装很简单。只需在 /app/build.gradle中添加新的maven repository和依赖:repositories { maven {
2017-05-24 00:34:25
1259
原创 解决：menu/ActionBar不显示
这个问题一般和Theme的设置有关搜了overstack，基本是在.xml文件中引入了xmlns:app="http://schemas.android.com/apk/res-auto"解决的尝试了没用，之后发现这种方法可以解决：在主下引入xmlns:tools="http://schemas.android.com/tools"在下引入tools:ignor
2017-05-08 14:30:38
902
原创 SQLiite基础语法示例及说明
• CREATETABLE 语句建表语句语法：CREATETABLE database_name.table_name( column1 datatype PRIMARY KEY(one or more columns), column2 datatype, column3 datatype, ..... columnN datatype,);
2017-04-21 11:42:17
724
图灵系列 HTML5游戏开发 高清 扫描版
2017-09-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人