@119-CSDN博客

原创 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没有类继承机制，它是靠原型机制来实现继承的。比如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

ty987654的博客