- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 大文件分片上传原理分析
本文意在梳理大文件上传原理大致思路就是—获取文件----把文件切片----把单文件传输给后端-----后端组合切片为完整文件。
2024-04-07 15:22:42
350
原创 babel-core升级为@babel/core ，eslint-loader升级为eslint-webpack-plugin， babel-eslint升级为@babel/eslint-parser
先把之前相关的包都卸载，再重装涉及到的改动文件package.json.babelrc文件.eslintrc.js文件webpack.dev.conf.js
2022-07-08 16:34:50
2036
原创 terser-webpack-plugin 替代uglifyjs-webpack-plugin
terser-webpack-plugin参考文档把webpack升级到4+升级过程参考https://blog.csdn.net/Uookic/article/details/115655538
2022-07-04 16:41:21
681
原创 vue中el-checkbox-group无法选中
el-checkbox-group遇到的问题记录原因：vue中给对象新增属性直接用=赋值方式，虽然可以新增属性，但是不会触发视图更新例如定义了temp对象在操作过程中又新增了b属性data () { return { temp: { a: '' } }}//直接赋值不会触发视图更新 this.temp.b= 24可以新增属性，但是不会触发视图更新vue2.0以上可以用 this.$set()更新视图解决办法 .
2021-11-10 11:45:22
2906
原创 The element or ID supplied is not valid. (videojs) elementui
项目问题记录 elementui ,videojs项目用到elementui ,videojs，为了hls格式的视频流在弹框关闭后停止刷新，使用了dispose()注销player再次打开弹窗报错The element or ID supplied is not valid. (videojs)后发现因el-dialog懒加载，videojs找不到需要初始化的playerID，因为需要防止hls视频流一直刷新必须要删除dom完整解决方案如下（无关代码有省略）:dialog捕捉关闭事件，开启.
2021-07-21 16:42:14
12186
12
原创 vue中循环遍历axios问题，使用promise.all解决，promise.all异常解决
项目需要前端循环遍历一个接口获取信息，promise可以保证每次接口遍历正常后统一保存返回的数据首先: 封装Promisefn(jsonData,config,index){ return new Promise((resolve, reject) => { upload(jsonData,config).then(res => { if (res.code === 0) {//这里是约定的请求正常情况的返回码 re.
2021-07-02 11:43:59
2683
原创 vue中使用videojs，关闭窗口后视频流一直刷新问题，切换视频流问题
项目开发时遇到问题使用videojs关闭窗口后视频流一直刷新，使用pause暂停无效。视频是在弹窗的时候展示，所以完整解决方案自己琢磨了一下，如下 <div v-html="videohtml"> </div> getVideoDialog() { this.videoVisible = true; this.videohtml = `<video id="videoPlayer" class="video-js" .
2021-04-25 16:09:09
5088
7
原创 vue中使用videojs做M3U8，hls视频流格式的直播功能.新增flv格式
最近项目业务需要用到视频流直播。格式M3U8。在此记录一下项目vue版本是2.5.16，先安装必须的插件1.安装yarn add video.jsyarn add videojs-contrib-hls // 这是播放hls流需要的插件yarn add mux.js // 在vue中若不安装它可能报错 "video.js": "^7.11.8", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.11.0",2.配置videojs.
2021-04-25 10:49:57
1914
1
原创 webpack3.10.0升级到webpack4.46.0
目前公司webpack版本太低，3.10.1.去官网查看了一下现在已经有5.x版本了，为了稳健性，决定升级到4.x的最终版本4.46.0https://github.com/webpack/webpack/releases/tag/v4.46.0记录下升级遇到的问题1.yarn add [email protected] devError: Cannot find module ‘webpack/bin/config-yargs’查找原因：webpack-dev-server版本过低（“w.
2021-04-13 16:58:31
4708
1
原创 flex图片被默认拉伸
图片设置属性flex-shrink:0;width:100%;height: 100%;flex-shrink是收缩属性，默认值是1
2021-04-13 10:56:07
229
原创 bootstrap slider重新赋值滚动条长度不变问题
记录bootstrap slider使用时的问题官网例子 bootstrap slider最近项目遇到一个选择下拉框展示不同值的slider。写的过程中发现实例化silder后再去赋值滚动条的长度就没法改变了**改为每次实例化之前加一个$(“xxx”).slider(‘destroy’);**就ok了，非jquery写法具体可参考官网...
2020-07-07 16:19:41
525
1
原创 企业微信小程序体验版必须打开调试模式才能获取相关数据的问题，qy.selectEnterpriseContact接口调用问题
在做微信小程序的时候遇到一个问题，体验版必须打开调试模式才能获取相关数据，且放在正式环境下控件没反应项目里我用的是qy.selectEnterpriseContact 打开企业通讯录会话这个接口前提是先正确获取相关权限，保证sessionkey不过期。然后设置开发和正式环境的合法域名，原因是正式环境和体验版（非调试模式）都会进行域名合法性检测...
2020-05-28 12:59:40
3806
原创 bootstrapSwitch 不触发change事件解决方案
bootstrapSwitch 不触发change事件解决方案官网的写法不管用，记录下可用的写法官网写法不管用// 链接: [link](https://www.bootcss.com/p/bootstrap-switch/).$('#mySwitch').on('switch-change', function (e, data) { var $el = $(data.el) , value = data.value; console.log(e, $el, va
2020-05-27 15:09:10
960
原创 收集的vue各种库，UI库等
DOM库1.elementUI饿了么前端推出的基于 Vue.js 2.0 的后台组件库Github官网2.iviewuiVue.js 的高质量 UI 组件库官网3.vuetify一个为 Vue JS 2.0 打造的 Material 风格的组件库Github官网字体1.vue-svg-icon一个 vue2.0 的可变彩色 svg 图标方案GithubDem...
2019-05-14 14:51:55
353
原创 百度地图突出某区域问题，获取区域边界问题
最近遇到一个需求，深圳罗湖区域要标注出来和其它区域区分出来官网的效果图官网上说v3.0版的jsapi新增了CanvasLayer自定义绘制层，看了下如果是绘制边界的话会很麻烦最后在百度官网上发现了一些比较实用的接口Boundary 和 Polygon使用方法如下： var bdary = new BMap.Boundary(); bdary...
2019-04-15 18:03:34
3004
2
原创 使用svgstore生成SVG Sprite
step1：新建一个文件夹svgsvg里新建src文件用来保存要合并的svg文件step2 新建package.jsonpackage.json :{ "devDependencies": { "grunt": "^1.0.1", "grunt-svgstore": "^1.0.0" } }npm install安装依赖包step3 新建Gruntfile.jsmodule.expo...
2019-03-01 11:27:43
562
原创 echarts label formatter
我们在用echarts做图表时，默认label是一个样式。这里记录下如何修改label样式 label: { normal: { // position: 'inner', fontSize:14, formatter: func...
2018-11-08 16:42:39
16805
1
原创 换行也能垂直居中的方法
.parent{ display:table } .child{ display: table-cell; vertical-align: middle; }效果图
2018-08-10 12:18:04
2073
原创 慎用Object.assign做深拷贝（Object.assign本意是浅拷贝，当数据只为一层时，可用于深拷贝）
最近用ES6的Object.assign踩了个坑,研究记录下；最近有一个项目的功能用到了Object.assign做深拷贝，却发现会出问题。if(xx){//1 this.mon = Object.assign([],obj);}else if(xx){//2 this.tue= Object.assign([],obj);} 第一次只执行1,2条件，this.mon...
2018-07-26 13:20:43
7792
原创 babel转译原理
babel是一个转译器,用于把同种语言的高版本规则翻译成低版本规则。过程babel的转译过程分为三个阶段：parsing、transforming、generating;以ES6转ES5为例，具体过程：编写ES6代码 babylon进行解析解析得到ASTplugin用babel-traverse对AST树进行遍历转译得到新的AST树用babel-generato...
2018-07-23 12:21:39
2686
原创 vue中父组件向子组件echarts传值问题
记录echarts踩坑问题问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常原因：后来经过排查，发现echarts是在渲染的时候就传递数据解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染//父组件...
2018-06-10 10:25:33
6160
7
原创 vue中组件name的作用
这是一篇总结笔记我们在写vue项目的时候会遇到给组件命名 这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的 export default { name:'xxx'}1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 举个例子： 我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加...
2018-05-23 15:46:19
32306
2
原创 git常用命令
记录一些常用命令git下载git clone “xxx”查看项目git status上传git add . //把所有文件添加到本地缓冲区git commit -m ‘first commit’git remote add origin git@xxxx/xxx.gitgit push origin master分支git pull 把线上的...
2018-05-15 15:10:22
166
原创 vue中使用轮播插件vue-awesome-swiper 例子
vue项目中用到了，这里记录下1.先安装插件 npm install vue-awesome-swiper –save2.全局引用(main.js)import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)3...
2018-05-14 16:59:22
1515
1
原创 如何通过码云开发托管私人项目
本文是个学习笔记 前言：之前在公司生成了一个自己的私人项目，现在我想在家里programming这个项目，so, how to to it next? 这里做一个记录主要是需要生成本地的SSH公钥使用SSH公钥可以让你在你的电脑和码云通讯的时候使用安全连接（Git的Remote要使用SSH地址）1.在码云个人中心找到SSH 2.找到码云生成SSH教程 链...
2018-05-13 20:10:26
1912
原创 vue中封装动画组件(渐隐渐现效果)
项目引用了velocity.js，下载地址 http://velocityjs.org 。 本文是个学习笔记&amp;lt;body&amp;gt; &amp;lt;div id=&quot;root&quot;&amp;gt; &amp;lt;comp :dis=&quot;show&quot;&amp;
2018-05-11 14:43:09
3224
原创 vue中动态组件与v-once指令，简单小示例
<body> <div id="root"> <component :is="type"></component> <!-- 等同于下面注释掉的部分 --> <!-- <child1 v-if="type==child1">
2018-05-10 14:28:23
1108
原创 vue中父子组件注意事项，传值，slot应用
这是一篇学习笔记一.父子组件传值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> &
2018-05-09 10:38:51
3083
原创 vue build打包后的index文件打不开
使用vue-cli构建的项目 cnpm run build后的文件打不开 这里记录下解决方案 打不开的原因是build后的文件也是需要在服务器上才能运行，自己起一个http server就可以运行了~...
2018-05-05 10:54:04
3933
原创 自己对闭包的理解
闭包的由来，为什么要用闭包 由于ES5之前没有块级作用域概念导致例子中我们期望的局部变量 i 被环境污染从而产生错误结果。解决问题要用到IIFE 为什么要用IIFE传统方法定义和执行分开写传统的方法直接污染全局命名空间(浏览器里的 global 对象,如 window)于是有人就想出是否可以这样写： function foo(…){}(); 当然不能，为什么呢？ 因...
2018-05-05 10:50:41
207
原创 js数组去重和正则
数组去重ES6 Set 搭配Array.from和…扩展运算符2.利用indexOf正则正则去掉某类字符，比如大写字母，小写字母，数字str.replace(/[0-9]/g,’’) //过滤数字str.replace(/[a-z]/g,’’) //过滤小写字母str.replace(/[A-Z]/g,’’) //过滤大写字母str.replace(...
2018-05-05 10:42:51
711
原创 前端跨域的几种方式
前端开发中免不了遇到跨域问题,总结下跨域的8种方式1.代理 同源策略是针对浏览器端进行的限制，可以通过服务器端来解决该问题2.图片ping或script标签跨域通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候接收到的。 图像Ping最常用于跟踪用户点页面或动态广告曝光次数。图像Ping有两个主要的缺点，一是只能发送GE...
2018-05-05 10:40:05
877
原创 前端浏览器渲染和性能优化详细过程
1.从输入URL到加载html的详细过程 加载资源的过程1.根据输入的域名先查找本地hosts文件是否有对应的域名IP关系,如果有,则向其IP地址发送请求,如果没有,再去DNS服务器查找IP. DNS根据域名查找IP地址的过程： 浏览器客户端向本地DNS服务器发送一个含有域名www.xxx.com的DNS查询报文。本地DNS服务器把查询报文转发到根DNS服务器，根DNS服务器注意到其co...
2018-05-05 10:35:01
1234
原创 实际开发中JS闭包的应用
ES5之前JS是没有局部变量的，所以程序员发明了闭包。闭包作用：避免变量被环境污染1.函数作为返回值function F1(){ var a = 100; return function(){ console.log(a) }}var f1 =F1();var a = 200;f1()//100函数作为参数传递functi...
2018-05-05 10:21:24
1638
原创 总结javascript中的||和&&运算符
简单总结如下:||遇到true返回 &&遇到false返回 &&优先级高于||举些栗子：alert(1||0)//1alert(0||1||2)//1alert(1&&0)//0alert(1&&0&&2)//0alert(1&&2&&0)//0alert(0
2018-05-05 10:17:02
215
原创 hexo+coding搭建私人博客 css加载出错
自己在搭建github blog的时候很顺利,一个简易示例地址:https://qinnechen.github.io/ 而在搭建coding private blog的时候遇到一个问题,就是本地预览ok但是放在服务器上样式表不出来 这里记录下这个问题 由于网上搭建教程很多,这里只谈如何解决css这个问题。 这里的关键点是把blog的名字命名为 [你的用户名].codin...
2018-05-05 10:15:09
1384
原创 grunt学习笔记
Gruntfile.js文件"use strict";module.exports = function(grunt) { require("load-grunt-tasks")(grunt); require("time-grunt")(grunt); var config = { //配置项目路径 app: "app", dist: "dis
2016-12-15 15:34:00
368
原创 前端性能优化笔记
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法**代码块高亮**1**图片链是LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctr
2016-11-28 09:18:41
262
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人