- 博客(65)
- 资源 (2)
- 收藏
- 关注
原创 微前端框架学习记录 ——qiankun 新建demo(一)
简单:任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单,但实际不是 iframe。 完备:几乎包含所有构建微前端系统时所需要的基本能力,如 样式隔离、js 沙箱、预加载等。 生产可用:已在蚂蚁内外经受过足够大量的线上系统的考验及打磨,健壮性值得信赖。
2020-12-19 15:11:27 752 4
原创 js-echarts 转 图片
项目遇到的问题,需要将echarts转换成图片传给后台。let echarts = this.$echarts.init(document.getElementById("echarts"));let pic=echarts.getDataURL({ type: 'png', pixelRatio:1, backgroundColor: '#fff'});后续更新echarts转换其他类型文件(我也不确定有没有,感觉上好像有,又懒得查有没有了)。如果有更漂亮的写法欢迎来
2020-12-14 15:29:33 2401 6
原创 node-sass 导入 失败的解决办法
yarn 或 npm 下载依赖时可能会在 node-sass 这里失败,在这时用cnpm install 再补一下就可以了。亲测有效。如果有更方便的写法欢迎来讨论,让我们一起有条不紊的持续进步。喜欢的话不妨点个小小的赞与关注,您的赞与关注将是我源源不断的前进动力...
2020-12-10 09:47:37 237 1
原创 js-队列实现
很多小伙伴出门面试,上来就是:给我用js手写一个队列来。当时听得就懵逼,什么队列啊?什么先进先出什么的那东西?我记得数组里的push啥的好像就是啊,还让我咋整啊?难道数组的push啥的不是?这要是不笃定,很容易会错。这里我就跟大家分享一下我简单写的一些js队列,供大家参悟。...
2020-11-28 12:45:32 1547
原创 js-截图某一个div,使它飞向某个区域并消失
前两天遇到个需求:交互显示XXXX(一个div)动画逐渐缩小,飞入右上角个人中心当时遇到这个需求的时候我是懵逼的。跟她说实现不了吧?太复杂了。但我刚跟她说完就又很气,就这点东西我都做不出来?主要还是懒呀。开发周期不是很长,以下就跟大家分享一下我的一个实现思路以及实现代码:实现思路 ___找轮子,可能是没有能发现闪光的眼睛,只找到了扳手 —— html2canvas。获取到需要添加飞入动画的div,以及个人中心(就一个div)的四维:距离顶部、距离左边、宽度、高度。解决css动画问题(这里采用依
2020-11-28 11:40:14 440
原创 js-防抖&节流的个人理解与封装
相信大家一定被这俩兄弟整的恶心得很。防抖是啥啊?节流又是啥?啥意思啊。当然啦,肯定也有大佬比较认真的在学之前就花功夫知道了什么是防抖,什么是节流。就我个人理解:防抖:防止短时间内多次访问节流:...
2020-11-17 18:42:16 314 2
原创 vue-router的模块化开发
在开发过程中,我们所有的router肯定不能放在index.js里,传统方案哪怕用各个js细分了各模块,还是需要在index.js里注册一下,这样很容易与他人代码冲突。这里我将提供我的思路,有什么不成熟的地方还望及时沟通。以下便是项目结构:丨- router 丨- modules - item.js
2020-11-12 09:36:55 504 2
原创 vue-mock的模块化开发
如果我们需要真正的使用mock去做对应后台的数据模拟开发,那么我们所有的mock肯定不能放在index.js里,这样很容易与他人代码冲突。这里我将提供我的思路,有什么不成熟的地方还望及时沟通。以下便是项目结构:丨- store 丨- modules - item.js - ind
2020-11-12 09:06:03 522 2
原创 vue-vuex的模块化开发
身为小白的我就不具体介绍vuex模块化的因为所以了,单纯是自己看会舒服很多。接下来就给大家奉上小弟修改过很多次的vuex模块化思路。以下便是项目结构丨- store 丨- modules 丨- item.js丨- index.js丨- type.jsindex.js 为 vuex 的入口,负责暴露vueximport Vue from 'vue'
2020-11-11 19:19:25 465
原创 js-url转换blob以及blob与base64的相互转换
下面的代码是我在网上cv的,不记得是找的哪个的了,放在这帮助更多有缘人function xhrequest(url, callback) { //创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //前两个参数固定,第三个参数true时是异步,false时是同步 xhr.open("get", url, true); //选定输出格式为blob格式 xhr.responseType = "blob"; //onload后回调t
2020-10-27 19:40:58 5844 3
原创 js-压缩图片
压缩图片代码量有点大,先奉上封装代码再慢慢解释。这里通过等比缩小图片的长宽以达到减小图片大小的目的。//控制是否继续压缩,考虑到压缩后的图片避免再压缩var flag = false;let suofang = function(base64, bili, callback) {//传入图片的base64、压缩比例、回调 //处理缩放,转格式 let _img = new Image();//新建一个image对象 _img.src = base64;//image对象里塞入传入的图片b
2020-10-27 19:28:28 363
原创 js-判断登录设备及是否为微信登录
我们可以通过js去判断当前登陆设备类型以及是否为微信登录。这将为我们拓展很多开发思路,以及打破很多开发瓶颈。功能实现主要依靠navigator.userAgent返回浏览器信息:// 判断是否是PCexport function isPC() { var userAgentInfo = navigator.userAgent var Agents = [ 'Android', 'iPhone', 'SymbianOS', 'Windows Phone',
2020-10-27 14:41:46 772
原创 js-返回文件大小
返回文件大小这里采用根据已知文件size换算的方式实现:export function getFileSize(size) { function bytesToSize(bytes) { if (bytes === 0) return '0 B' let k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) /
2020-10-27 14:14:36 401 2
原创 js-根据文件名称判断文件类型
判断文件类型这里采用根据提取文件名称后缀的方式实现:export function getFileType(fileName) { // 后缀获取 let suffix = '' // 获取类型结果 let result = '' try { const flieArr = fileName.split('.')//根据.分割数组 suffix = flieArr[flieArr.length - 1]//取最后一个 } catch (err) {//如果fileN
2020-10-27 11:19:26 1548
原创 js-延迟执行函数的个人理解
首先说一下,这里的 延迟执行函数 不是 延时执行函数,别搞混了延迟执行函数是基于目标函数被执行一定次数后触发的函数。延迟执行函数的思想有点类似于以下场景:密码连续输错三次后将冻结账号 【注:别问我为什么想到的第一个例子是这……一般方法let 错误次数 = 0function 登陆 ( 密码正确 = false ) { if(错误次数 >= 3) { console.log("连续错误三次,账号已冻结") } else { if(密码正确){ console.log
2020-10-25 23:25:52 633
原创 js-AOP编程的个人理解
AOP面向切片编程,第一次看到这个的时候我看到最多的就是java里怎么怎么用、python里怎么怎么用,很少有前端js里怎么怎么用。感情这东西我们前端用不起?我就各方面查询了下这个AOP到底是想完成什么效果。给我的感觉就是执行某个方法前执行个啥啥啥,执行某个方法后执行个啥啥啥。那我们就开始干。我的初步预想的场景是:let username = "置酒天晴"提交事件(){ if(username==""){ console.log("请输入用户名") return false } axi
2020-10-25 20:11:08 193
原创 js-柯里化函数的个人理解
柯里化函数的思想有点类似于以下场景:设想 刘关张 桃园三结义一般函数:function say(name,time,address){ console.log(`我${name}于${time},与各位哥哥${address}`)}say("刘备","今日","桃园三结义") //我刘备于今日,与各位哥哥桃园三结义say("关羽","今日","桃园三结义") //我关羽于今日,与各位哥哥桃园三结义say("张飞","今日","桃园三结义") //我张飞于今日,与各位哥哥桃园三结义
2020-10-24 21:10:08 222
原创 js-链式调用的个人理解
以前在使用js方法比如axios({ method:"get", url:"url", params}).then(res=>{ console.log("努力减肥")}).catch(err=>{ console.log("吃饭要紧")})使用时就很疑惑,为什么后面 . 一下就能用?还可以选择性的只调用.catch() 或者 .then()方法后来花了些时间自己写了个可以不停.下去的调用方式,回头百度才知道,这是链式调用。链式调用的核心就是搞清楚后面的 . 的
2020-10-22 20:37:26 697
原创 js-惰性函数的个人理解
惰性函数的思想有点类似于以下场景:设想张三打字场景 输入 abc一般函数:function 打字(内容){ console.log("看文稿") 输入()}打字(a)打字(b)打字(c)惰性函数:function 打字(t){ console.log("看文稿") 打字 = function(t){ console.log("輸入",t) } return 打字(t)}打字("a") //看文稿 输入a 打字("b") // 输入a 打字(
2020-10-22 19:21:51 501 7
原创 javascript中onclick失效
在帮新人解决问题时无意间发现了这个问题,记录下来给大家分享一下。请问,下面代码存不存在错误? <div id="a" style="width: 200px;height: 300px;background: #00FF00;">单击变红色</div> <div id="b" style="width: 200px;height: 300px;background: blue;">双击变黄色</div> <script>
2020-10-20 20:50:00 4391 3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人