- 博客(164)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 react使用useContext实现兄弟组件通信
两个兄弟input通信，实现输入同步无useReducer版本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></sc
2020-07-21 18:19:58
3242
转载 取消fetch请求
const controller = new AbortController();const signal = controller.signal;// API responds after 5s// Note the 'signal' in the second argumentfetch('https://slowmo.glitch.me/5000', { signal }) .then(r => r.json()) .then(response => console.lo
2020-07-17 17:23:10
436
原创 尺寸大小不固定图片在一个不固定大小的容器中保持原比例水平垂直居中
请注意，是图片居中，不是img标签居中，<style> *{ padding:0; margin:0; } body{ width:100%; height: 100vh; } img{ background: red; width:100%; he
2020-07-08 12:20:32
433
原创 try catch promise.reject
突发奇想，测试了下面的一段代码，function f() { try{ Promise.reject('我错了'); }catch(e){ console.log('e',e); }}f();结果没有catch，我就不明白了，到底为什么。难道Promise.reject是异步？我问别人，有人告诉我是因为异步，但是我认为不是...
2020-07-08 12:08:12
2883
1
原创 svelte与CustomEvent
在svelte中下级给上级发射事件一般是这种形式： import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); dispatch("myevent", { });而 createEventDispatcher 的源码中使用了一个自定义函数custom_event...
2019-12-05 11:37:50
291
原创 多出文字显示点点点-webkit-line-clamp
以前以为文字多了显示点点点只能用WTO，但是WTO处理多行不方便，今天学到一个新的：-webkit-line-clamp <style> p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; ...
2019-12-03 10:44:29
302
原创 希望nginx不发生301在url后面加斜杠
浏览器访问一个页面，http://abc.com/fanglu-h5，nginx这么配置：server { listen 80; server_name abc.com; location /fanglu-h5 { root /home/ctivity/; index index.html; }}发生301.如下图所示：不想让他这样...
2019-11-12 18:05:33
1246
1
原创 node.js接收前端上传的文件
打算前端传文件给后端node，前端使用formdata，尝试使用koa的multer包来做，但是老是报错， MulterError: Unexpected field在网上找了半天，不知道怎么直接用node（不用框架和第三方包）从request中解析出来文件，所以自己想了个方法变换一下来做，很简单，特此记录。「Talk is cheap. Show me the code」0 前端代码...
2019-09-19 17:48:32
3062
1
原创 angular依赖注入providedIn与懒加载的问题循环依赖
1. providedIn: ‘root’The @Injectable() decorator has the providedIn metadata option, where you can specify the provider of the decorated service class with the root injector, or with the injector for...
2019-08-28 18:37:50
1608
原创 javascript中的同步迭代和异步迭代
所谓的迭代，用过es6的兄弟肯定已经接触过了，比如arr是一个数组，**[…arr]**还有for of 循环都是的。我说一说他背后的东西。同步迭代The interfaces for sync iteration ，借助typescript来写：interface Iterable { [Symbol.iterator]() : Iterator;}interface Iter...
2019-07-09 12:35:04
1382
原创 使用node杀死linux进程及子进程们
用linux 写了打包脚本，想要杀死正在跑着的打包程序，但是直接用linux的命令就是杀不死，无奈只能改成node试一试，#! /home/broly/.nvm/versions/node/v10.15.1/bin/nodelet {exec} = require('child_process');let {promisify} = require('util');let exec2 = ...
2019-07-07 21:24:44
839
原创 javascript深度广度遍历DOM及二叉树以及求深度
console.log('深度'); function d(e) { console.log(e); const ren = e.children; // 如果是二叉树，则 // const ren =[e.left,e.right].filter(ei=>!!ei); if (ren.length) { Array.from(ren...
2019-07-03 11:48:15
191
原创 Generator + Promise实现async+await的效果
很久以前用koajs 1的时候也看过co库的核心源码，后来不用了，前段时间又涉及到了相关的问题，特地重新学习一下, koajs 1 中如何实现的async await的效果。首先，2个基本知识：Promise.resolve flattens nested layers of promise-like objects (e.g. a promise that resolves to a pr...
2019-07-01 22:49:18
430
原创 自己编译个模板
以前自己也写过编译模板的东西，但是时间长就忘记了。。。今天看到了相关的东西，就又动手写了写。const supplies = ['a', 'b'];const wm=123;let template = ` <%= wm %> <!--注释--><ul> <% for(let i=0; i < supplies.length; i...
2019-07-01 16:43:35
113
原创 angular中组件changeDetection为ChangeDetectionStrategy.OnPush时的学习
一个angular应用是由组件树组成的，changeDetection是其中比较深的部分，我也不懂哈。angular中changeDetection中的策略有这样的描述：总而言之，对于一个组件而言，2中changeDetection策略，默认的没啥好说的，主要说一下OnPush的情况。如果子组件的属性的变化由输入属性决定，那么这个时候就可以启用OnPush这种变更检测策略，这样输入属性不变的...
2019-06-23 16:26:40
6087
原创 angular中的RouteReuseStrategy的学习小记
惭愧，看了别人用vue写出了返回不需要刷新的效果才想到在angular中实现，才有了这次的学习。就是想要返回不刷新1. angular中RouteReuseStrategy是这样的：abstract class RouteReuseStrategy { abstract shouldDetach(route: ActivatedRouteSnapshot): boolean abst...
2019-06-22 17:55:34
2264
2
原创 javascript和dart中for循环里面异步任务promise和future
最新看dart，对比学习吧。。。要实现的效果，根据一个数组，生成一个定时器，定时器n秒之后返回，串行执行。javascript版本：function getPromise({ milliseconds = 0 } = {}) { return new Promise((resolve) => { setTimeout(() => { ...
2019-06-11 14:30:31
964
原创 javascript和dart中函数传参数的小对比:位置参数和命名参数
1、 default values for positional parameters1.1、js版本function positional(a,b=9){ console.log('a:',a); console.log('b:',b);}console.log(`一个实参：`);positional(5);console.log(`二个实参：`);positional(...
2019-06-08 21:34:49
412
原创 部署sentry的过程中遇到的一些问题记录:企业微信邮件、soucemap等
0. 系统环境与安装[root@xxxxxxxxx]# uname -aLinux iz2ze7ki6m0w5zsxd5kc4jz 3.10.0-862.6.3.el7.x86_64 #1 SMP Tue Jun 26 16:32:21 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux[root@xxxxxxxxx]# lsb_release -aLSB Ve...
2019-05-24 17:37:15
3252
原创 flex和grid中容器的伪元素::before和::after生成的内容被视为一个子元素项目
一个以前不知道的知识点<style> .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 20px; } .flex { ...
2019-05-22 15:25:17
1949
原创 nodemailer发邮件给腾讯企业邮箱的时候填写密码
这个密码啊，用我自己的腾讯企业邮箱的密码发送不行，可以这么搞定：邮箱设置----微信绑定----安全登录-----客户端专用密码生成一个新的就行了
2019-05-20 16:35:00
1257
转载 Require Function Parameters 和 Get Query String Parameters
Require Function ParametersBeing able to set default values for function arguments was an awesome addition to JavaScript, but check out this trick for requiring values be passed for a given argument:...
2019-05-05 11:35:47
344
原创 Fading out siblings on hover in CSS
原文连接：https://www.trysmudford.com/blog/fade-out-siblings-css-trick/要实现下面这样的效果：通常，会把hover事件加在card1,card2,card3上，但是通过加在父元素上也可以实现。初始代码如下： <style> .parent { display: flex; heigh...
2019-04-25 11:56:02
144
原创 javascript中Rest/Spread与Object.assign的不同
ES6中的Rest/Spread使用的很广泛了，比如简单的(浅)复制一个数组：const arr1 = [10, 20, 30];// 复制一下const copy = [...arr1];console.log(copy); // [10, 20, 30]再比如给一个函数传递参数，参数需要一个个地传递，现在参数都在一个数组里面：const arr = [10, 20,...
2019-03-19 11:02:37
349
原创 简单学习rxjs中map、concatAll、concatMap、mergeAll、mergeMap、switchAll、switchMap
1、mapmap和javascript中的数组的map方法类似，不过这里为了结合下面的demo，我先用map做一个我们不想要的效果： const getData = (param) => { return of(`return: ${param}`).pipe( delay(Math.random() * 1000) ) }; from([1, ...
2019-03-09 17:52:46
7539
原创 rxjs中的throttle、throttleTime、debounce、debounceTime、audit、audtiTime
1、debounceTimeEmits a value from the source Observable only after a particular time span has passed without another source emission.大意是，只有在指定的时间间隔内没有产生另外的数据的时候，之前产生的数据才能被observable发射出来。marble diag...
2019-02-25 18:58:35
8404
原创 学习CSSOM
通过element.style访问或者设置行内样式 div { width: 100px; height: 100px; background-color: rgb(255, 255, 0); } // 下面是div的结构 &amp;amp;amp;lt;div&amp;amp;amp;gt; 我是div里面的内容哦&amp;amp;amp;lt;/div&amp;amp;amp;
2019-01-09 19:51:16
478
原创 angular开发项目文件系统打开后base路径和background图片路径找不到的问题
1、删掉base标签，也不要动态写入2、背景图片改成相对路径，我发现这样会直接编译成base64格式的 background: url(…/…/…/assets/apply_cash_bg.png)
2018-12-29 17:17:17
1131
原创 nginx rewrite导致post问题
问题背景开始的时候前端用的3000端口发的post请求到node，node做了检测要求必须用post，不能用get，这个时候前端请求的接口是xxxx:3000/servers， 但是前端是用nginx部署在81端口的，这导致请求老是发2次，看起来不好看。尝试解决把前端请求的接口改成xxxx:81/api/servers ，用nginx做一次转发，开始是这么写的nginx的配置： locat...
2018-11-20 15:51:58
7607
原创 mongo 4 中事务的简单学习
我也的mongo的版本是4.0.4这是一个新增的功能，以前不支持事务1. run-rs与replica set事务操作如果连接的mongo不是副本集的话，会报错：Transaction numbers are only allowed on a replica set member or mongos所以还要想办法弄个副本集出来，为了方便，使用了run-rs这个npm包，开启副本集...
2018-11-16 17:51:15
7239
原创 mongodb设置用户名和密码并用node连接
我用的mongo的版本是4.0.41、设置用户名和密码1.1 设置admin库的用户名密码> show dbsadmin 0.000GBconfig 0.000GBlocal 0.000GBxxxx 0.000GB> use adminswitched to db admin> db.createUser({ user: "admin", pw...
2018-11-16 11:25:45
2860
转载 魔法CSS（1）——消失的list-style
来源：https://segmentfault.com/a/1190000016969667?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com&share_user=1030000000178452<ul> <li> <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊...
2018-11-13 14:52:17
140
原创 学习CSS Scroll Snapping与scroll-snap-align
假如有个Web页面是一块一块的，如下图所示：我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css scroll snap这个方法，可以比较方便的实现想要的效果了，基本够用。基本页面css代码：ul { max-height: ...
2018-10-29 19:31:22
3486
原创 自定义html5中的details元素
html5中的details的功能很好，但是默认的样式不好看…尝试修改。::-webkit-details-marker伪元素修改 summary前面的三角形summary的::before和::after伪类制作一个 + - 表示的开关使用details的open属性选择器在开关之间进行却换下面是样式文件： ::-webkit-details-marker { ...
2018-10-24 15:48:22
2034
原创 html的dialog标签元素
以前的时候为了在页面上做出dialog效果往往很复杂，还要写遮罩层，用CSS 写 好多代码，不过刚刚知道html中原生也支持dialog。标准用法 <dialog open> <h1>你好</h1> </dialog>可以通过改变open属性，来显示或者隐藏，如上图所示。也可以使用dialog的show方法或者close方法...
2018-10-19 15:32:34
3914
1
原创 win10通过samba实现在主机中开发虚拟机中编译
因为我是进行前端开发的，所谓的编译是指的是编译angular项目公司的平台基于angular搭建了前端开发环境，开发的时候要开启一个类似angular中ng start的命令，所有的一切麻烦都是这个命令引起的。公司开发的不支持windows系统，而我使用的是win10，不想换mac，于是我就开始了折腾。。。尝试1：使用win10的linux子系统wsl那好啊，反正win10里面可以使用...
2018-08-25 10:36:11
764
原创 pngquant failed to build, make sure that libpng-dev is installed
sudo apt-get install libpng-dev npm install -g pngquant-bin 如果还不行，再加上： sudo apt-get install -y build-essential libpng-dev
2018-08-21 17:53:50
17218
4
原创 angular使用class-interface获取父组件和祖先组件
在angular中，并没有现成的方法获取父组件，但是： because every component instance is added to an injector’s container, you can use Angular dependency injection to reach a parent component. 那么，如果父组件能在依赖注入中把自己当作一个服务注入，后代就能...
2018-08-21 17:49:20
2141
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人