前端
文章平均质量分 94
看云朵敲代码
这个作者很懒,什么都没留下…
展开
-
【d3.js】canvas下力导向图的缩放平移和拖拽兼容
这个周零散解决了一些的关于d3问题,算是入了门,因而写了博客,顺便也作为周报的内容,所以篇幅会比正常我平时写的周报长很多,详细到代码层面。目前除了这次代码提到的v4,也完成了v6版本对应的代码。1 从简单做起——html单页面文件开发目前能找到的很多学习用的demo都是cdn方式引入,直接一个单页面html文件开发,而且出问题也能很方便定位查找,再者v6版本刚出不久,对于诸多api也是有了比较大的改动,讨论度不如有教程的v4,所以为了入门,同时为了避免要下各种各样的d3 npm包,还有考虑各种变量冲突、原创 2021-03-26 22:54:47 · 1988 阅读 · 1 评论 -
React Hook+ Node.js 引入的Socket 聊天功能
后端:Node + Express1.基本写法:安装:npm install socket.io值得注意的是,安装完这个后估计还有其他依赖的包会提醒需要安装,跟着提示走全都安装完即可。const express = require('express');var app = express();var server = app.listen(3010);var io = require('socket.io').listen(server);io.on('connection',原创 2020-08-09 22:00:45 · 710 阅读 · 1 评论 -
前端杂记6(Ant组件、Vue)
1.ant菜单和路由同步高亮a-menu的设置:<a-menu style="width: 100%" :open-keys.sync="openKeys" v-model="current" :defaultSelectedKeys="[keyVal]" :selectedKeys="[keyVal]" mode="inline" @click="handleClick" >vue原创 2020-08-03 18:13:23 · 517 阅读 · 0 评论 -
【Gojs 前端】响应式布局中用到的 原生抽屉组件 和 requestAnimationFrame()方法刷新动画
这是未设置更新canvas大小的结果这是设置后的效果原创 2020-07-07 13:52:24 · 491 阅读 · 0 评论 -
JavaScript的乱序算法【可视化比较】
1.sort()方法之前被问问题的时候,问到如何讲一个数组打乱,当时也不由思索说出了一个比较常用的方式,也可以说是我目前接触到最精简的方式:function randomsort(a, b) { return Math.random()>0.5 ? -1 : 1;}这里介绍下sort()函数,在JS中Array对象里内置了一个函数:array.sort(sortfunction)此方法将 Array 对象进行适当的排序;在执行过程中并不会创建新的 Array 对象。如果调用原创 2020-06-12 00:31:17 · 435 阅读 · 0 评论 -
前端杂记 5 (box-sizing,background-size :contain/cover)
一、box-sizing最近整理网页布局的时候,用到这个属性,在此做个记录。首先我们知道CSS的盒子模型(W3C标准)指定一个 CSS 元素的宽度和高度属性时,只是设置内容区域的宽度和高度例如我们设置一个元素的宽度是200px border: 5px solid black; padding:20px; width:200px;实际上展示的元素宽度是5+20+200+20+5=250px(不包括margin)这就会容易导致一个问题:得到一个比预期还要大的容器,容易破坏网页布原创 2020-06-08 15:31:15 · 359 阅读 · 0 评论 -
前端杂记 4(传参-对象属性-查找,常用时间操作,双栏等高)
1.传入参数,对象的属性名是一个参数,按照参数查找这次虽然简单,但是之前想着利用变量访问对象属性的时候,还是纠结了些许,干脆为自己的健忘做个记录目标:获取json数组中的指定属性+指定值的对象JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。var arr=[{id原创 2020-05-25 16:08:27 · 240 阅读 · 0 评论 -
从vue-router浅谈前端路由到前后端分离
路由此处的路由指的是页面跳转的规则,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。可以简单理解为url跳转现代前端开发中最流行的页面模型,莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,切换页面的功能直接由前台脚本来完成,而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果,归功于其前端路由机制。前端路由,顾名思原创 2020-05-21 00:50:32 · 1909 阅读 · 0 评论 -
前端杂记 3(解析html字符串,Foo.getName,CSS阻塞问题)
1.js解析html文本字符串有一个html文本,js要怎么利用?var txt="<div><a >你好</a><a >世界</a><p>幸福</p></div>";(1)创建一个虚拟DOM元素并将字符串添加到其中。var el = document.createElement( 'html' );el.innerHTML = txtconsole.log(el.getElementsB原创 2020-05-14 16:15:56 · 286 阅读 · 0 评论 -
前端杂记 2(重复定时器、Promise.allSettled()、硬币问题动态规划)
(一)链式调用setTimeout()与setInterval()有什么区别?关于定时器要记住的最重要的事情是,指定的时间间隔表示何时将定时器的代码添加到队列,而不是何时实际执行代码。对于重复的定时器。我们有两种方式——setInterval()和链式调用setTimeout()1.setInterval()当使用 setInterval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。这种重复定时器的规则有两个问题:原创 2020-05-11 16:41:17 · 358 阅读 · 0 评论 -
一道题引发对 js 作用域和执行上下文的思考1【题目及说法】
做了个笔试,看到这种类型的题,记下来了之前也见过,趁此机会好好梳理总结一下作用域、作用域链、执行上下文、执行栈的知识点function test(){ var a=3; b=1; (function(){print(a,b)})()}function print(a,b){ console.log(a,b)}let a=1let b=3te...原创 2020-05-07 01:19:38 · 200 阅读 · 0 评论 -
一道题引发对 js 作用域和执行上下文的思考2【原理解释+基本例子】
作用域—————————————————作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。function setX() { var x = "我在函数里头";}setX()console.log(x); //报错,x在全局作用域没有声明可以得出结论:作用域的作用很大程度是隔离了变量,减少同名变量冲突作...原创 2020-05-06 23:15:51 · 248 阅读 · 0 评论 -
CSRF下的思考Cookie、Session、Token和JWT
之前基于cookie、session有了大致了解,但是看完csrf之后感觉很乱,有了不少问题,于是做一个小总结,关于各种概念大家可以先去查一查其他的博文,该篇博文主要是针对个人一些疑问做记录CSRF 跨站伪造请求攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。...原创 2020-05-05 17:50:19 · 1225 阅读 · 0 评论 -
【Vue.js】Element-UI中根据后台返还的值决定选用什么标签(<template slot-scope="scope">)
场景:当我成功添加一个收藏网址的时候,根据我预先定义好的类别,根据返回的prop值显示不同的图标,像下边这样从后台返还的数据中的__v判断,若其为0,选择标签【学习】,1则是【工具】。如何根据prop的值来判断 ,在element-UI中怎么判断,将prop去掉在下面加上里面再写vue的判断可是在HTML里哪有函数判断的说法利用Vue操作DOM节点也不是什么很好的办法我们不使用prop...原创 2020-04-17 01:30:16 · 518 阅读 · 0 评论 -
【JavaScript】当我被alert函数阻塞——js事件循环
参考来源:①http://www.ruanyifeng.com/blog/2014/10/event-loop.html②https://www.cnblogs.com/zhenbianshu/p/8686681.html起因原先的那个疫情可视化项目中,程序执行是当我们的时间是12点的时候进行一次数据请求并更新界面,为了提醒用户我再详细解释一下程序:①axios请求网络,之后是aler...原创 2020-04-13 21:40:30 · 3043 阅读 · 0 评论 -
【JavaScript】bind的实现
最好先知道的知识:①call和apply②闭包以及闭包的传参③原型链bind方法干什么的准确来说是Function.prototype.bind()方法,这是函数原型对象的方法。我们都知道,函数里面的this指向向来也是一门学问。当我们想要改变这个this指向的时候,有没有什么好办法呢?bind()方法主要就是将函数绑定到某个对象(当然包括某个函数),bind()会创建一个绑定了一个...原创 2020-03-09 23:30:01 · 188 阅读 · 0 评论 -
【JavaScript】类的继承和判断父子关系和instanceof的实现
类的继承和判断父子关系//父类的构造函数 function Father(name){ this.name=name}//构造函数的原型实例添加了属性:岁数Father.prototype.age=30//实现继承//1.利用原型链function Sun1(name){ this.name=name}Sun1.prototype=new Father()//...原创 2020-03-04 17:09:07 · 3447 阅读 · 0 评论 -
【Vue+Express】头像上传保存功能(前后端代码)
最近想给项目加个头像上传功能,不想要老是保存在本地。为了方便看代码,写了demo演示一下如何上传到取回来图片,最后成果不是项目本身前端解决方法有很多,具体说一下后端的处理因为仅做记录,希望观者有一定的Vue和Express基础前提是解决了跨域问题,如果不懂可以看我之前的博客:Vue+axios 解决跨域问题1.前端代码1.1上传头像前端代码没多少好讲,重点在于跨域解决对文件的一些...原创 2020-02-07 00:32:56 · 1640 阅读 · 0 评论 -
【JavaScript】问题记录2——算法
【1】js二维数组的使用——LeeCode最长回文子串给定一个字符串 s,找到 s 中最长的回文子串。你可以假设 s 的最大长度为 1000。示例 1:输入: “babad” 输出: “bab” 注意: “aba” 也是一个有效答案。示例 2:输入: “cbbd”输出: “bb”这道题如果采用暴力解法未免很久,就是找到所有的子字符串并加以判断。但是采用很容易想到的动态规划方法...原创 2020-02-03 20:36:28 · 162 阅读 · 0 评论 -
【转载/记录】JavaScript的使用记录1
1.JS中 = = 和 = = =的区别参考:链接地址总而言之:== 代表相同, ===代表严格相同当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行 ===比较, 如果不同, 则进行一次类型转换, 转换成相同类型后再进行比较, 而 ===比较时, 如果类型不同,直接就是false.以下是一些其他的特别的例子测试NaN是只能用isNaN()判断...原创 2020-01-29 23:41:34 · 106 阅读 · 1 评论 -
【Vue.js】Vue一些小问题记录_1
【1】elementUi里面的el-input框无法输入考虑原因可能是组件嵌套太深的原因。利用@input事件获取当前输入的值 <el-input v-model="search" style="display: inline-block;width: 600px" placeholder="请输入搜索内容" @input="change($event)"...原创 2020-01-23 21:35:52 · 89 阅读 · 0 评论 -
Node.js Express框架 写后台接口API
Node.js是一个JavaScript的运行环境, 运行在服务端的 JavaScript(简单而言)Express是基于Node.js平台的简单灵活web应用开发的框架首先Chrome中安装好Postman插件(可以拟前端带参数发送请求到后端)【1】初始化项目1.1. 应用生成器Express的安装这是为了快速创建一个Express应用的“骨架”,安装后express命令就可以使用了...原创 2020-01-21 23:38:43 · 3337 阅读 · 0 评论 -
【Vue】Vue+axios 解决跨域问题
好不容易用node把接口写好了,Postwomen测试也通过前端Vue想要提交表单(登录)的时候却报了个错可知是浏览器跨域问题关于浏览器的跨域问题,具体这里不说,仅仅记录个人解决跨域问题的方案也是搜了许多不同的博文,但是都不管用,也不是很理解,自己百般尝试才有了一个解决方案假设我的Vue项目运行在http://localhost:8080后端的接口是:http://localhos...原创 2020-01-21 17:28:11 · 2142 阅读 · 0 评论 -
【Vue.js】渲染原理以及初始化后一些疑问
1.不同于javaScript的语法?在Vue.js 项目中我们使用的是ECMAScript,是javaScript的规范,javaScript是ECMAScript的实现。具体自行百度,可以认为ECMAScript实现了普通js无法实现的许多功能。ES6的语法可以在书中查看,需要注意的①多用let声明变量,解决变量提升或者块级作用域的问题②全局变量在index.html中声明例如:wi...原创 2020-01-13 21:44:00 · 228 阅读 · 0 评论 -
【Vue】快速构建一个Vue.js程序
CLI是构建一个快速而规范的Vue.js项目的重要工具,利用以下命令可以建立一个空项目:先cd到项目的文件夹里输入一行命令:Vue init webpack [你的项目名称]通过CLI初始化一个以Webpack为模板,项目名称为【你的项目名称】的项目之后会要求用户输入对应的配置项接下来遵循命令通过npm安装插件最后来看看项目:使用以下命令运行该项目npm run dev...原创 2020-01-13 19:03:07 · 256 阅读 · 0 评论 -
【Web】基础网页布局一些小问题记录
1.div中直接添加p标签之类的元素会使得上下留白直接使用带文字的div,不会使得上下留白撑开2.div里面的div不能排成一行对子div使用display:inline-block3.使用inline-block后,标签下方出现留白对该标签使用vertical-align: bottom;4.二级菜单栏的使用定位的时候出现在比较远的地方(重点)后来经过排查才知道我对于父元素也...原创 2019-11-20 20:05:20 · 164 阅读 · 0 评论 -
【前端】Vue.js是什么?【转发】
最近在知乎上看到有关于Vue.js的一篇入门文章,采用问答式让读者去理解,感觉很不错,转发作为笔记保存一波来源:https://zhuanlan.zhihu.com/p/256590251.Vue.js是什么?(官方)Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有...转载 2019-11-02 19:41:03 · 437 阅读 · 0 评论