- 博客(22)
- 资源 (1)
- 收藏
- 关注
原创 HTML5拖拽API 和 jsplumb 实现绘制拓扑图(二)
首先:在vue项目中安装jsplumb执行 npm install jsplumb --save绘制拓扑图1、创建jsplumb实例import {jsPlumb} from 'jsplumb'export default { data() { return { jsplumbInstance: null, // jsplumb实例 } },...
2020-04-23 19:00:47
1042
原创 HTML5拖拽API 和 jsplumb 实现绘制拓扑图(一)
使用jsplumb绘制拓扑图:需要实现的功能包括左侧展示拓扑元素区域,右侧绘制拓扑的画布区域。第一步:实现左侧拓扑元素能够拖动至中间画布区域:拖动使用html5的拖拽API:<div class="drag-ele" draggable="true" @dragstart="dragStart($event, params)" @dragend="dragEnd...
2020-04-23 18:59:20
1118
原创 axios拦截器的应用----数据返回之前loading加载
axios是一个基于Promise的HTTP库,返回值是Promise对象。前端通过axios向后端请求数据,我们可以通过axios拦截器在请求或响应被then或catch之前拦截它们。关于axios拦截器的基本知识:// 请求拦截器let axios_inter = axios.interceptors.request.use((config) => { //请求发送之前对...
2019-09-24 17:53:01
1067
原创 排序算法
第一种:快速排序主要思想:通过遍历一次数组,将数组分成独立的两部分,其中一部分的关键字均小于另一部分的关键字,分别对这两部分记录继续进行排序,使整个数组有序。平均时间复杂度:O(n logn) 空间复杂度:O(logn) 不稳定 function quickSort(arr) { if (arr.length<=1)...
2018-08-17 10:58:45
213
原创 数组去重方法
前端面试中,数组去重也是经常会被问到的,以下是我自己总结的关于数组去重的方法。第一种:利用数组的indexOf()方法来实现。该方法可用于数组的查找,接收两个参数,第一参数是要查找的项,第二个是查找的起点位置。该方法返回要查找的项在数组中的位置,从数组的开头去找,如果没有找到,会返回-1。 function unique1(arr) { var arr1 = []; ...
2018-08-15 19:22:21
150
原创 css实现三栏布局
最近面试,前端经常会被问到css实现三栏布局的问题。即实现左右两栏宽度固定,中间栏宽度自适应。第一种:float+margin <style> .left { float: left; } .right { float: right; } .l...
2018-08-14 19:46:56
601
原创 虚拟DOM
对于虚拟DOM,首先需要了解它的优点,就是速度快,效率高。了解浏览器加载html文件时需要做哪些事情(即浏览器的渲染过程),能够更好的帮助我们理解虚拟DOM。关于浏览器的渲染过程,可以参考我的另一篇博文https://blog.csdn.net/ty987654/article/details/78347390。浏览器的渲染过程大致可以分为5步:创建DOM树-----创建css规则树--...
2018-08-02 13:33:59
458
原创 Vue父组件与子组件通信
Vue2.0只允许数据单向传递。父组件通过props属性向子组件传递数据。子组件通过$emit()触发事件来改变父组件的数据。在vue2.0中,子组件不能改变父组件的数据,否则控制台会出现报错,但是仅限于props数据类型为字符串,数字等类型;当props数据类型为数组或对象时,在子组件中修改父组件的数据,控制台不会报错。但是一般我们不推荐在子组件中直接修改父组件的数据,因为如果在...
2018-07-27 17:07:12
257
原创 css布局,居中的方法
关于css居中是前端面试中比较常问的问题之一,以下是我总结的关于css居中的一些方法。 第1种:margin:auto; 把margin设为auto,该方法只能对水平元素进行居中,对浮动元素或绝对定位元素无效。 第2中:text-align:center; 只对行内元素起作用,对块级元素无用。 只能对图片,按钮,文字等行内元素(display:inline或display:inline-
2017-11-20 18:05:45
278
原创 js原型的理解
谈谈你对js原型的理解: js没有类继承机制,它是靠原型机制来实现继承的。比如Person对象有一个Person.prototype原型,当无法修改Person的构造函数时,可以通过Person.prototype让所有的Person实例都具有某一属性或方法。由于所有实例都共享同一prototype对象,从外界看来,prototype对象是实例对象的原型,实例对象继承了prototype对象。我们
2017-10-26 21:16:51
658
原创 浏览器的渲染过程,回流与重绘
一,浏览器解析过程当浏览器获得一个html文件时,会“自上而下”加载,并在加载过程中进行解析渲染。1. 浏览器会将html解析成一个DOM树。DOM树的构建过程是一个深度遍历过程,当前节点的所有子节点都构建好后,才会去构建当前节点的下一个兄弟节点。2. 浏览器将css解析成css规则树(css Rule Tree)。3. 根据DOM树和css规则树来构造Render树。(Render树并不等同于DO
2017-10-25 22:07:51
443
原创 我对 js的深复制与浅复制 的理解
JavaScript对象存在两种类型。一种是基本类型,另一种是引用类型。 基本类型存放在栈内存,引用类型存放在堆内存。堆内存用于存放由new创建的对象,栈内存存放一些基本类型的变量和对象的引用变量。 基本数据类型(number,string,undefined,null,boolean),这是js中的5种基本数据类型。这些类型的值存放在栈内存中(string类型的实际值是存放在堆内存中的,但是j
2017-10-25 17:58:19
415
1
原创 关于Vue电商平台项目的总结
首先附上该项目地址:vue仿电商平台该项目主要是仿照电商平台,使用vue-router处理路由,主要实现数据的展示,其中在项目中,自己封装了如下拉框,单选框等可复用组件。第一: App.vue: 实现首页的header和footer,content部分采用vue-router方式进行切换。为首页的logo标志添加路由,在任一路由中点击logo都可跳转到首页.同时首页中存在登录,注册,关于,这三个功
2017-09-24 18:56:19
11979
原创 TCP连接的三次握手和四次挥手
三次握手:客户端向服务器端发送带有SYN标志的数据包,发送完毕之后,进入syn-send(同步已发送)状态,等待服务器端的确认。服务器端收到SYN包后,如果同意建立连接,则向客户端发送SYN+ACK确认包,发送完毕之后,服务器端进入syn-recv(同步收到)状态。客户端收到服务器端的确认后,向服务器端发送ACK确认包,此包发送完毕之后,客户端和服务器端进入established(已建立连接)
2017-09-17 09:47:19
320
原创 从页面输入url到页面呈现的过程
第一步:浏览器通过DNS解析得到url的IP地址DNS解析过程概述: 1.客户端提出域名解析请求,并将该请求发送给本地的域名服务器。 2.浏览器首先查询本地的缓存,如果有该项纪录,则直接将查询的结果返回。 备注:本地缓存的查询过程:(1).通过浏览器缓存。浏览器会缓存DNS记录一段时间,不同的浏览器有不同的缓存时间。(2).如果在浏览器缓存中没有找到该记录,浏览器会做一个系统调用,来查找
2017-09-16 22:46:20
1307
原创 常见浏览器兼容问题与解决方案
1. 浏览器兼容问题一:不同浏览器的标签默认的外边距和内边距不同 (1) 问题症状:在浏览器中随便写几个标签,在不加css样式控制的情况下,各自的margin和padding差异较大。 (2) 解决方案:css中添加 *{margin:0;padding:0} (3) 备注:这是最常见也是最容易解决的一个浏览器兼容问题,几乎所有的css文件开头都会添加 *{margin:0;padding:0
2017-09-16 18:12:41
289
原创 2048小游戏总结
利用html,css,jquery编写一个2048小游戏。1. 首先我们来了解一下2048的游戏规则: 2048游戏的规则:一共有16个方格,可以4个方向滑动,相同的数字相遇就会合并,一个数字翻倍,另一个数字清零,清零的数字会腾出一个空格。当没有空白格子出现时,游戏结束。2. 基本说明: 我把16个数字放在一个二维数组中,索引为0–15。0表示该方格中没有数字。var square = [[0,
2017-09-13 12:28:31
3873
原创 Vue.js双向数据绑定原理
vue双向绑定就是指model层与view层的同步,两者之间任意一个发生变化都会同步更新到另一者。View为视图层,Model为数据层,ViewModel为逻辑控制层。 vue.js采用数据劫持结合发布者-订阅者模式的方法,通过Object.defineProperty()劫持各个属性的setter,getter在数据变动时发布消息给订阅者,触发相应的监听回调。 (这里看不懂没关系,接着往下看…
2017-09-06 22:43:56
6305
1
原创 对于浮动以及清除浮动方法的理解及总结
浮动是指元素可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通过float属性实现元素的浮动。 一:浮动的影响: 1. 浮动元素会自动设置为块级元素,相当于给元素设置了display:block,而行内元素则不可以。<style> .div1,.div2{ width:200px; height:200px
2017-09-06 16:39:09
464
原创 overflow:hidden的原理问题
问题说明:<style> .wrap{ width:300px; border:2px solid #f00; } .child{ float:left; width:100px; height:200px;
2017-09-06 10:50:18
700
原创 我对BFC的理解与总结
在css中存在盒式模型概念,所以对一个元素设置css样式时,首先需要知道这个元素是block类型还是inline类型。而BFC就是用来格式化块级盒子。 1. BFC概念的理解 BFC(Block formatting context) “块级格式化上下文”,指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,与区域外部无关。2.生成BFC
2017-09-05 20:45:46
366
原创 JavaScript闭包
关于闭包的知识,首先来看一段代码:function f1(){ var n = 10; function f2(){ alert(n); } return f2;}var result = f1();result();上述代码中的函数可以理解为是一个闭包。f2可以访问f1的所有变量,反过来则不成立。即子对象可以访问父对象的所有变量,反过来不成立。
2017-09-04 20:54:35
307
iview代码demo
2019-01-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人