AboutFrontend
文章平均质量分 52
前端技术。
vue, angular, react, webpack, node...
leemraz
Stay hungry, stay foolish.
展开
-
项目编写规范的README文件
https://www.cnblogs.com/wj-1314/p/8547763.htmlhttps://blog.csdn.net/justlpf/article/details/120438337https://blog.csdn.net/wohu1104/article/details/123163790原创 2022-06-15 15:01:46 · 901 阅读 · 0 评论 -
前端常见问题集
问题集合原创 2022-06-14 21:19:02 · 231 阅读 · 0 评论 -
js空对象判断 isPlainObject
//有缺陷,JSON.stringify(obj)中,如果obj本来是空的,又继承了一个非空的对象那么结果也会是“{}”1. JSON.stringify(obj) == '{}' 2. Object.keys(obj).length == 0 //错误,当对象为空Array,length为1,空arguments时,length为2//具体参考https://github.com/arasatasaygin/is.js/blob/master/is.js3. Object.getOwnPro转载 2022-02-16 15:13:49 · 204 阅读 · 0 评论 -
[基本操作] javascript相关操作集合
1 背景有时候需要一些js中的特殊取数据的方法,这里做一个记录,持续更新2 内容Q1 对象中的key值为数字时的处理方式// 鼠标屏幕操作事件viewer.screenSpaceEventHandler._buttonDown;当取1对应的值时,如何获取?A: 通过对象的数组key值来取,即 a[‘1’]对象的key一般应使用合法的变量名(字母或下划线开头的包括字母、下划线和数字的字符串) ,这种情况下通过a.key 或者a[‘key’]的方式都可以获取到相应的value值。当特殊原创 2021-12-06 09:49:04 · 478 阅读 · 0 评论 -
vue组件间通信六种方式(完整版)
转载自https://segmentfault.com/a/1190000019208626前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、$emit/转载 2021-08-13 12:40:03 · 178 阅读 · 0 评论 -
Promise async await 异步操作
具体看以下几篇文章,我这里只贴代码https://juejin.im/post/6844903527924367367https://zhuanlan.zhihu.com/p/51373575https://blog.csdn.net/qq_40240053/article/details/108765515https://zh.javascript.info/settimeout-setinterval// 典型的异步setTimeout( function () { co原创 2020-11-13 10:36:56 · 92 阅读 · 0 评论 -
vue2和3比较
个人见解不一定正确,如果做升级语法需要修改可以更好的支持typescript比较生命周期的变化:变化不大,setup代替了之前的beforeCreate和created,其他生命周期名字有些变化,功能都是没有变化的。Vue2.xVue3beforeCreate使用 setup()created使用 setup()beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpda原创 2021-06-21 09:55:20 · 156 阅读 · 0 评论 -
webpack 45对比
对比搬自:https://github.com/HolyZheng/holyZheng-blog/issues/46背景写了一个库,打包用的webpack,然后就做了升级。升级问题可能是因为自主优化打包不多,所以只遇到了sourcemap生成的问题,问了别人,没人响应。然后阅读了官网,解决问题,官网才是最好的学习资料。即:sourceMap: false 提到上一层级修改为devtool:"cheap-module-source-map"参考官网TerserWebpackPlugin 和 dev原创 2021-06-21 09:41:40 · 414 阅读 · 0 评论 -
js判断空对象的几种方法
文章目录一、将对象转为字符串比较二、for…in循环三、Object.getOwnPropertyNames()四、Object.keys()一、将对象转为字符串比较这是最容易想到的方法,主要使用JSON.stringify()这个方法对对象进行强转:var a={};var b=new Object();console.log(JSON.stringify(a)=="{}") //trueconsole.log(JSON.stringify(b)=="{}") //true二、for转载 2021-05-13 15:59:08 · 214 阅读 · 0 评论 -
Object.freeze 作用
前端记录,内容测试过1 Object.freeze与const的区别const声明简单类型的值不能修改,对象却是可以修改的如果想禁止一个对象的修改就可以用Object.freeze()2 DetailObject.freeze()方法可以冻结一个对象一个被冻结的对象再也不能被修改不能添加新属性不能删除已有属性不能修改已有属性的可枚举性、可配置性、可写性不能修改已有属性的值不能修改原型...原创 2021-05-11 16:26:37 · 237 阅读 · 0 评论 -
前端之取消http请求
文章目录1 需求场景2 解决方案2.1 XMLHttpRequest2.2 Fetch2.3 axios2.4 jquery3 总结参考文章1 需求场景场景 1 跳转新页面,取消原来页面还没返回的请求场景 2 当前页面,取消耗时较长的请求备注:这里的请求为http请求2 解决方案2.1 XMLHttpRequest原生的XMLHttpRequest,是支持取消http请求(abort)操作的: XMLHttpRequest.abort()2.2 Fetchfetch与XMLHttpRe转载 2021-04-26 14:46:27 · 1560 阅读 · 0 评论 -
vue.config.js 配置
参考1https://www.cnblogs.com/jing-tian/p/11266796.htmlmodule.exports = { // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部, // 比如 https://www.my-app.com/ // 如果你的应用时部署在一个子路径下,那么你需要在这里 // 指定子路径。比如,如果你的应用部署在 // https://www.xxxx.com/my-app/ // 那么将这个值改为 `/my-a转载 2021-04-07 16:09:09 · 227 阅读 · 0 评论 -
Dom
文章目录方法1 通过id 删除div2 鼠标样式3 事件处理程序—addEventListener4 keyCode值列表方法1 通过id 删除div// 通过id 删除divvar thisNode=document.getElementById("#你的ID");thisNode.parentElement.removeChild(thisNode);2 鼠标样式3 事件处理程序—addEventListenerdocument.addEventListener() 方法用于向文档添原创 2021-04-01 11:22:43 · 117 阅读 · 0 评论 -
js动态引入第三方库
文章目录背景解决方案1 目前暂可行的实施方案2 回调函数3 异步加载结束语参考文章背景为了方便用户使用sdk,从用户角度想简化引入各种css、js库的麻烦琐事。问题来了,用document.write可以完美解决这个问题,但问题的问题是虽然浏览器有警告,但它还是执行了,就不知道哪一天会不会直接error出现或者拦截了。最好的方式当然是采用es6使用import模块的方式,这里是考虑了老的加载方式,即直接通过引入script标签引入js库。现实情况是难免会有用到引入第三方库的情况。这里也不考虑使用原创 2021-03-15 12:19:03 · 5667 阅读 · 0 评论 -
el-dialog 弹出层实现拖拽、拉伸、双击全屏效果
// 指令1 仅实现拖拽的效果export default { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dialogHeaderEl.style.cssText += ';cursor:move;' dragDom.style.cssText原创 2021-03-09 10:25:17 · 613 阅读 · 0 评论 -
js文件获取自身路径
方法1 Chrome和FF// 浏览器支持document.currentScript.src 直接用这个获取var getCurrAbsPath = function(){ return document.currentScript.src;};// 获取hostvar hostSrc = new URL(document.currentScript.src).origin;方法2 IE10+、Safari和Opera9var getCurrAbsPath = function(原创 2021-02-25 19:03:19 · 917 阅读 · 0 评论 -
前端开发全面知识库
转自:https://zhuanlan.zhihu.com/p/25604225,阿里云云栖号,2017年文章目录1 前言2 内容核心 CoreHTML5CSS3JSjQueryES6插件包管理工具 Package ManagersNPMBowerYarn编辑器 Text EditorsWebStormVScodeSublimeTextAtomHBuilderJS框架 JS FrameworksBackboneAngularJsReactVueUI框架 UI FrameworksBootstrapIon转载 2021-02-03 15:16:20 · 474 阅读 · 0 评论 -
javascript-obfuscator 代码混淆
转自:https://www.againfly.com/flytag_605.html参考:https://blog.csdn.net/foupwang/article/details/103306332官网:https://www.npmjs.com/package/javascript-obfuscator民间安装方式npm init -fnpm install formidable --savenpm install -g javascript-obfuscator官网安装方式np转载 2021-01-29 11:08:48 · 1685 阅读 · 0 评论 -
css 右键补选中文字、移除a标签下划线
// 右键会选中文字,为了美观将它禁用#el-tree { user-select: none; background-color: transparent; padding: 0;}// a标签移除下划线a { text-decoration: none; color: #121314; position: relative;}a:after { content: ''; position: absolute; z-index: -1原创 2021-01-27 15:21:15 · 111 阅读 · 0 评论 -
编译SuperMap/Vue-iClient3D-WebGL问题
1 说明源码地址:https://github.com/SuperMap/iClient3D-vue发布地址:http://support.supermap.com.cn:8090/webgl/examples/component/dist/示例地址:http://support.supermap.com.cn:8090/webgl/examples/component/examples.html2 源码编译问题Q1 Unexpected end of JSON input while parsi原创 2021-01-27 11:29:29 · 620 阅读 · 1 评论 -
js 字符串加密解密
//对字符串进行加密 function compileStr(code){ var c=String.fromCharCode(code.charCodeAt(0)+code.length); for(var i=1;i<code.length;i++){ c+=String.fromCharCode(code.charCodeAt(i)+code.charCodeAt(i-1)); } return escape原创 2021-01-06 11:30:07 · 460 阅读 · 1 评论 -
Element UI 专题集合
不多说直接上代码1 el select 选择或者输入有些时候会有下拉选项没有需要手动输入的情况<el-form-item label="通行方式"> <div> <el-select v-model="form.trafficrouter" slot="prepend" style="width:150px;" multiple // 此参数可以多选 .原创 2021-01-05 15:32:34 · 147 阅读 · 0 评论 -
el tree 节点折叠展开动态控制
问题因为这里的应用场景是可以用户配置树和共享树,其它用户可以访问树,问题在于如果树的节点太多展开就会显得很长,反过来如果折叠的状态唯一,那么用户就可能无法看到自己想优先操作的节点,故在保存树目录到服务器的同时需要将折叠的状态值也保存到树中思路el-tree有两个属性node-expand 节点被展开时触发的事件default-expanded-keys 默认展开的节点的 key 的数组通过node-expand来监听节点的折叠状态,通过default-expanded-keys来初始化折叠状原创 2021-01-05 09:28:18 · 3960 阅读 · 0 评论 -
TypeError: Converting circular structure to JSON
问题使用JSON.stringify序列化对象时报错。分析原因存在自己引用自己的情况解决办法不太建议用以下方法来解决,除非特殊情况。在做参数化的过程中会发现存在对象的情况,自己构造的对象还好,当引用第三方库的对象做序列化的时候,就不建议这么做。需要做的是将这些对象提取出来,构造一个没有自己引用自己的对象。 var cache = []; var aa = JSON.stringify(rowData, function(key, value) { if (type原创 2020-12-11 11:28:31 · 966 阅读 · 0 评论 -
Vue Silk Road
起因seo搜的内容1 查找某一个组件实例化对象https://stackoverflow.com/questions/35769139/vue-js-children-by-component-name // you can use this property:this.$root.$children[0].$options.namethis.$root.$children.find(child => { return child.$options.name === "name"; })原创 2020-12-09 14:55:03 · 193 阅读 · 0 评论 -
Vue 父子跨级通讯 dispatch与broadcast
https://www.cnblogs.com/raind/p/10241720.htmlhttps://blog.csdn.net/infotw/article/details/91374480技术没有好与坏,只有合适不合适问题为什么被移除没有解决兄弟组件的通信问题事件流动的方式是基于组件树结构的,当业务越来越烦杂时会混乱到难以维护为什么使用解决在父子层嵌套组件通过$dispatch和broadcast定向的向某个父或者子组件远程调用事件,这样就避免了通过传props或者使用r原创 2020-12-08 14:34:17 · 168 阅读 · 0 评论 -
vscode 插件 todo tree
挺好用提醒方便定位配置参考https://zhuanlan.zhihu.com/p/63303926https://www.cnblogs.com/luzhanshi/p/11995602.html{ "vetur.validation.template": false, "workbench.list.openMode": "doubleClick", "liveServer.settings.donotShowInfoMsg": true, "editor.sug原创 2020-11-30 17:00:29 · 507 阅读 · 0 评论 -
Dom 事件相关
//阻止浏览器默认右键点击事件$("div").bind("contextmenu",function(){returnfalse;})//整个文档屏蔽 document.oncontextmenu = function() { return false;}element.onmousedown = function(event){ event.which = 1 //左键点击 2 滚轮点击 3 右键点击}未完待续,这一块有空了好好总结一下...原创 2020-11-23 10:10:58 · 75 阅读 · 0 评论 -
el tree 双击事件
场景Cesium中双击飞到对应图层位置方案方法1参考:https://blog.csdn.net/q469731241/article/details/107356605/ <el-tree ref="tree" node-key="id" :data="treeData" :expand-on-click-node="false" @node-click="handleN原创 2020-11-12 11:38:41 · 3445 阅读 · 1 评论 -
Less 食用指南
文章目录简介几个概念食用1 变量值变量选择器变量属性变量url 变量声明变量变量运算变量作用域用变量去定义变量用变量去定义变量2 嵌套& 的妙用媒体查询实战技巧简介效果就是看了这篇文章能使用less来进行开发。其他的更详细的可以参考官网或者别人的blog参考文章:https://segmentfault.com/a/1190000012360995?utm_source=sf-related几个概念vw说明:相对于视口的宽度,视口被均分为100单位的vw示例代码h1 { fon原创 2020-11-12 11:24:49 · 255 阅读 · 0 评论 -
CSS3自定义滚动条样式
自定义滚动条实现此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式滚动条组成部分::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。::-webkit-scroll转载 2020-11-11 14:42:41 · 266 阅读 · 0 评论 -
一个替代JSON.parse和eval的方法+将一个对象的值赋给另外一个对象
百思不得其姐就是解析不了,有了下面的方法就可以了适应情况:用input录入对象的时候.let code = `function code(){ return 'code' }`let fun = new Function(`return ${code}`)();console.log(fun)...原创 2020-11-09 16:03:39 · 524 阅读 · 0 评论 -
FrontEnd——数组、字符串、JSON之间的转换和操作
文章目录简介方案1 插件或者说第三方库1.1 flatted1.2 circular-json(不推荐)1.3 qs参数序列化2 原生的方法2.1 JSON.stringfy()2.2 JSON.parse3 相关操作3.1 delete和splice区别3.2 对象数组中,删除指定的元素3.3 删除数组中所有指定值简介在开发过程中不可避免的涉及了数组、字符串、JSON之间的转换和操作(增删改查)。这里做一个小结把一些方法做适当的整理。方案1 插件或者说第三方库1.1 flattedhttps:原创 2020-10-27 10:55:15 · 686 阅读 · 1 评论 -
FrontEnd——生成GUID方法
全局唯一标识(GUID)是一种由算法生成的二进制长度为128位的数字标识符,GUID主要用于拥有多个节点,多台计算机的网络或系统中。在理想情况下任何计算几何计算机群都不会生成两个相同的GUID,GUID的总数为2^128个,理论上是很难会两个相同。GUID 的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,其中每个 x 是 0-9 或 a-f 范围内的一个十六进制数。例如:6F9619FF-8B86-D011-B42D-00C04FC964FF 即为有效的 GUID 值.转载 2020-10-26 15:16:42 · 257 阅读 · 0 评论 -
Vue debug方法
文章目录1 需求2 方案2.1 在浏览器中展示源代码2.2 在 VS Code 中调试1 需求在浏览器像es5那样直接调试源代码。可直接参考官网,这里只是针对自己的环境做摘要。2 方案2.1 在浏览器中展示源代码打开 config/index.js 并找到 devtool property。将其更新为:如果你使用的是 Vue CLI 2,请设置并更新 config/index.js 内的 devtool property:devtool: 'source-map',如果你使用的是 Vue原创 2020-09-07 09:47:29 · 1353 阅读 · 0 评论 -
webpack url-loader使用
其实说到性能优化,他的范围太广了,今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧。简单说下工作中遇到的问题吧,我们做的一个项目中首页用了十多张图片,每张图片都是一个静态资源,所以都会有http请求,为了减少请求,我们可以通过base64编码的方法来展示图片。webpack中有一个包叫做url-loader,他可以将html以及css中的图片打包成base64,但是js中如果有图片url并不能编译成功(后面我会说明),现附上两张图看下普通图片以及base64编码后的图片有啥不同吧。转载 2020-08-26 10:33:51 · 533 阅读 · 0 评论 -
Vue 路径问题
文章目录前言场景解决1. @和~参考文章前言文章内容基于我的工程项目而言。场景情况有点复杂,主要涉及一下几方面。首先是production模式和development两种不同的模式。其次有使用别名的情况,比如用@代替src的路径,使得代码整体看起来更具有可读性。还有的是在template/script/style的情况。静态文件static或者assets的不同情况。总之还是比较复杂的,但亲自配置过一次之后就没什么问题了,或者知道问题出现在哪里。解决1. @和~ // vue.confi原创 2020-08-11 12:01:43 · 244 阅读 · 0 评论 -
VSCode 快捷键生成Vue模板
文章目录场景解决办法1 安装Vetur插件,识别vue文件2 修改vue.json模板代码4场景编辑器VSCode.vue 文件一般由<temple>、<script>、<style> 三种标签组成。现在的需求是通过智能提示,生成自定义的模块。解决办法1 安装Vetur插件,识别vue文件2 修改vue.json模板代码File-> Preference-> User Snippets -> (新建代码片段取名vue.json) 新建代码片原创 2020-08-06 15:23:28 · 1232 阅读 · 0 评论 -
(Code-Robust ) 利用 VSCode、JSDoc、d.ts 让你的代码更健壮
javascript 作为弱类型的语言,开发时不需要复杂的类型定义,可以快速实现需求完成业务迭代。但当项目越来越大,周期越来越长,弱类型反而会使得开发成本变高,利用JSDoc + vscode 可以一定程度上解决这个问题。弱类型造成的问题为什么说项目越来越大,周期越来越长,弱类型反而会使得开发成本变高呢?我的一个切身体会就是当一个项目变大,周期变长时,这个项目所要处理的数据也会越来越多越来越复杂。某个函数可能接收一个对象,这个对象里面都需要哪些参数呢?会返回哪些内容呢?事情在我们进行数据整理时越发变得复转载 2020-07-27 20:12:15 · 1128 阅读 · 0 评论 -
webpack 如何找到node_modules目录的对应的模块
简言之通过依赖包的package.json文件中的main属性指定的路径,找到对应的模块在 Node.js 模块系统中,如果 require 的模块不是核心模块,而且没有 ‘./’ 之类的开头,那就需要从当前 package 的 node_modules 里面找,找不到就到当前 package 目录上层 node_modules 里面取… 一直找到全局 node_modules 目录。这样找到的往往是文件夹,所以接下来就是处理一个文件目录作为 Node 模块的情况。如果文件目录下有 package转载 2020-07-27 20:01:32 · 3966 阅读 · 0 评论