- 博客(31)
- 收藏
- 关注
RSS订阅原创 React hooks 修改数组，但是dom未更新
背景：点击按钮，触发为数组push对象，但是界面却未更新数组是引用类型直接赋值再修改，会导致引用未变let [testArr, setTestArr] = useState([])let _arr = testArr;_arr.push('test')setTestArr(_arr)useState修改后，useEffect其实未监听到所以要重新创建一个数组let [testArr, setTestArr] = useState([])let _arr = JSON.
2021-11-02 17:15:10
3473
2
原创 ES Module和CommonJS的区别
ESM：import, import(), export, export defaultCommonJS: require(), module.exportsES Module：静态加载/编译时加载CommonJS：运行加载ESM效率要比 CommonJS 模块的加载方式高动态绑定关系export：import：静态执行，会提升，不可修改/只读export default：指定模块的输出，输出一个叫做default的方法/变量，系统允许修改import（...
2020-11-16 16:59:14
2668
原创 事件流-事件冒泡/捕获-普通事件与事件绑定的区别
事件流从页面中接受事件的顺序普通事件<div onclick="clicked" id="dom">test</div>dom.onclick = () => {}不支持 DOM 事件流事件捕获阶段目标元素阶段=>事件冒泡阶段重复绑定时，后者会覆盖前者事件绑定<div onclick="clicked" id="dom">test</div>dom.addEventListener('click', funct
2020-06-15 11:50:56
267
原创 vue 实现关键词高亮 函数式组件
vue，搜索关键词，结果中关键词高亮思路：比较暴力1. 记录关键词和结果数组的值2. 将结果的值，全局替换成 `,${关键词},`，方便后续分离为数组3. 遍历以逗号分割的数组，如果关键词存在并且存在于结果中，处理高亮，否则正常显示效果图：<picker-item class="item-name" :key="i...
2020-03-23 17:01:29
437
原创 html2canvas 简介及使用（踩坑）jsPdf使用注意事项（pdf 分页）
需求目标：实现当前页面数据截图并保存为pdf实现需求需要处理： 处理部分dom样式 跨域图片的处理 添加平铺水印 增加图片的清晰度 将canvas转化为pdf 下载图片 上传图片 目前存在的问题：当前页面长度过长，html2canvas转化时间较长 png转化为pdf文件时，文件过大html2canvas：通过...
2020-03-20 15:27:06
2866
5
原创 Blob对象转化为File对象，FormData对象
背景：当前视图保存为pdf，html2canvas转化为canvas后，跳转预览页预览图片，使用png点击下载按钮，上传图片至阿里云获得图片地址Blob 转化为 Fileconst blob = new Blob() // blob 对象let files = new window.File( [blob], name, ...
2020-03-20 15:18:58
5963
原创 尝试vue3.0 composition新特性
了解有哪些新的特性 了解compositionAPI// 新的写法<!DOCTYPE html><html lang="en"><body> <div id='app'></div></body><script src="./dist/vue.global.js"></script>...
2019-10-25 15:51:44
777
原创 css 如何将图片元素设置宽高比
<div class="wrapper"> <img src="....."/></div><style>.wrapper { position: relative; width： 200px; height: 0; padding-bottom: 75%;}.img { position: absolute; ...
2019-09-20 09:40:18
1829
1
原创 解决：The node type SpreadProperty has been renamed to SpreadElement
因为使用到拓展运算符，运行报错，想解决这个问题，安装了babel-preset-stage-2/babel-preset-stage-1，并且配置文件module.exports = { presets: [ ['@vue/app', { modules: false }], ], plugins: ["tra...
2019-09-04 12:44:27
3107
原创 flutter-完成一个列表（图片文字）
演示视频上面是效果图首先你需要安装好flutter（ios/android） 其次，你需要了解在flutter中解析复杂的JSON 创建一个flutter项目 安装httprecommendList.dartclass ListProperty { int code; int subcode; String message; int default...
2019-07-29 15:14:17
3483
3
原创 正则匹配-首字母是$ _ 英文 ，内容包括英文 数字 $ _
网上找了一圈也没找到匹配首字母$，就和小伙伴试了出来首字母是$ _ 英文 ，内容包括英文 数字 $ _：正则：new RegExp('^(\\$|[a-zA-Z_])[a-zA-Z0-9_\\$]*$')首字符是字母$_的正则：正则在这：/^(\$|[a-zA-Z_])/...
2019-07-26 10:44:53
2247
原创 简易版网络请求库
这个请求库目前还有很多问题，参考了axios写在这，主要是帮助没什么经验的兄得姐妹们参考下，大佬们轻喷使用了Fetch和XHR源码在https://github.com/Janenil/http-sc碰到的一些问题血燥前面：不同contentType对应不同数据结构application/x-www-form-urlencoded: key=value&ke...
2019-07-26 10:38:49
198
原创 使用flutter完成的音乐播放app
可以播放的音乐app目前已实现功能有推荐页面、歌手页面、排行榜页面、专辑页面、歌曲播放页面、（个人中心界面、搜索界面）还未实现的功能有登陆注册、播放界面歌词部分、个人中心收藏喜欢歌单、搜索功能代码地址：https://github.com/Janenil/music_app_flutter...
2019-06-11 15:35:18
8359
1
原创 记录这大半年落下的博客
1、vue的双向绑定2、垃圾回收机制的补充3、使div充满屏幕的方法及原理4、react的state的工作原理5、flutter使用学习有感
2019-04-19 15:31:14
161
原创 vue数据双向绑定以及发布订阅的原理（Object.defineProperty/Proxy）
// vue3.0 2019.4.22使用了Proxy来代替Object.defineProperty，主要是为了解决无法监听到引用类型的值，必须手动setlet proxy = new Proxy(target, handler);target：是Proxy的目标对象，可以是任何类型的对象，包括原生数组，函数，甚至另一个代理// vue3.0之前我们都清楚vue数据双向...
2018-08-29 09:59:37
725
原创 js垃圾回收机制和内存泄漏
5.28垃圾回收：标记清除js引擎会定时的扫描遍历js引擎会遍历所有可以访问的和不可访问的变量，为每个变量加上标记。然后，在给不可访问的变量加上标记，（也就是环境中的变量以及被环境中的变量引用的变量除外），那么拥有两个标记的变量会放入准备删除队列。6.7闭包是把函数内部的变量暴露出来供外部函数引用，也就是外部函数可以引用内部函数的变量。那么就会导致内存泄漏。内...
2018-05-23 13:34:37
182
原创 css3 background-clip,background-origin ,background-clip
占个坑background-sizebackground-originbackground-clipbackground-attachment
2018-05-05 22:39:18
174
原创 ES8 async/await的用法
6.7更新new Promise().then((res) => { getDateList().then(() => { //数据处理})})我们需要等到这个getDateList返回resolve了才能 进行数据处理使用了async和await，就不需要thenasync和await：new Promise(...
2018-05-05 20:31:32
1429
原创 vue 数据双向绑定 watch监听的数组, 对象， 点对象赋值无效的解决办法
6.26更新watch监听对象中的属性变化6.5更新vue数据双向绑定首先了解生命周期的大概（稍后补）beforeCreated ：created：beforeMounted：mouted：beforeDestory：destoried：beforeupdate：update：应该是这么几个我们应该知道数据双向绑定会触发update这个钩...
2018-04-29 21:17:34
5193
原创 css Paint Api 的使用
占个坑css Houdini首先，CSS.paintWorklet这些api 需要在localhost和https下才有，不然打印出来是undefinedworklets真的会被浏览器缓存，踩过坑以后印象特别深刻。需要禁用缓存 Properties api...
2018-04-27 14:49:12
417
原创 QQ音乐 最新歌曲源 API(稳定)
//2019.04.19这次我真的找到可用的api了，兄弟们，http://ustbhuangyi.com/music/#/singer，可以先去这个地址研究一哈，大佬用vue写的// 11.29 更新http://isure.stream.qqmusic.qq.com/C400003tAqVn0Fj6BS.m4a?guid=4208080920&vkey=037CB...
2018-04-18 15:09:29
11685
31
原创 vue 子组件和父组件之间的通讯要点
父组件设置data属性， list：[]data() { return { list:[] }}同时,子组件设置props属性，list:[]注意：props要设置type，并且当type为Array和Object时，default需要返回function()props:{ list:{ type: Array, default:function(){ ...
2018-04-08 14:36:21
200
原创 vue中ref的使用（this.$refs获取为空）
//6.14更新但是有个办法，我们可以使用this.$nextTick(() => { // todo})setTimeout(() => { // todo}, 0)来得到数据ref本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的$refs不是响应式的，只在组件渲染完成后才填充用于元素或子组件注册...
2018-04-06 23:10:41
44678
7
原创 inline-block的块下沉，间距问题，问题原理
inline-block内联块元素：可以拥有宽，高的内联元素1、块下沉排列多个元素在一行时，也就是多个内联块元素并列时，会导致块下沉解决方案：与baseline有关 ，设置vertical-align：top/middle/bottom2、间距问题有空隙解决方案：父元素中设置font-size：0...
2018-04-06 22:48:43
1286
原创 2018.3.2 阿里巴巴前端实习生网上测试题目
是一个关于css选择器的js题目更新一下题目是无论点击什么标签都可以遍历下面的所有节点题目给你定义了一个方法//类似这样的结构<div id="page"> <div class="content main"> <div class="refer"> <ul>
2018-03-02 22:05:35
1207
4
原创 Vue-router的使用和出现空白页,路由对象属性
Vue-router的使用和出现空白页2018 5.5 更新空白页还有一种情况，页面中数据使用的错误，会导致空白页发现路由世界很精彩 可以带参数传路由，有兴趣的小伙伴可以试试 这个方法是我经常用的 this.$route.push({ path: '路径'， query: { key: 'value' }}) 跳转至另一个页...
2017-10-28 22:20:57
12418
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人