自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 Vue的几个开发技巧

1、在父组件中绑定子组件的生命周期 我们一般的写法是 子组件: export default { mounted() { this.$emit('listenMounted') } } 父组件 <template> ...

2020-04-06 16:50:23 57 0

原创 vsCode插件安装推荐

1. Auto ReName Tag 2. Beautify 3. Beautify css/asaa/scss/less 4. Bracket Pair Colorizer 5. Chinese Language Pack for Visual Studio Code 6. Code ...

2020-04-05 09:13:12 45 0

原创 一些不常用的CSS伪类选择器的使用技巧

1. 属性值正则匹配选择器 1)介绍在这里插入代码片 (1)[attr^=“val”]:匹配attr属性以字符val开头的元素 (2)[attr$=“val”]:匹配attr属性以字符val结尾的元素 (3)[attr*=“val”]:匹配attr属性包含字符val的元素 2)应用:过滤搜索技术 ...

2019-11-21 10:11:17 54 0

原创 canvas实现飞线流动效果

这篇文章主要介绍如果用canvas实现固定坐标数组的飞线动画(折线),或者可以说是电流效果吧。 之前在网上有看到过流星托尾的效果,那种效果的主要方式是通过不断添加“蒙板”层的方式逐渐淡化前几秒的位置,而绘制的线其实就是一个小球,一直在移动。看起来是线,代码层面上其实只画了一个点。主要的代码为 ...

2019-10-14 21:22:44 738 0

原创 利用Tween实现轮播动画

简介: 之前在两个项目的开发过程中都遇到轮播动画,因此,今天结合自己的开发经验进行一定的分享,下面是自己用vue做的一个简单的demo。这个例子的实现主要用的是TweenMax插件+scrollTop实现的。下面的Gif是实现的效果。 html: css: 为了让轮播效果更加自然,...

2019-08-08 10:08:13 133 0

原创 html、js和css的加载和执行顺序

1)js加载后立即执行; 2)js执行时会阻塞页面后续的内容(包括页面的渲染和其他资源的下载)。 原因:因为浏览器需要一个稳定的dom树结构,而js中很可能有代码直接改变了dom树的结构,比如使用了document.write或者appendChild,甚至使用页面跳转。 3)如何优化js (1)...

2019-04-23 21:10:31 1306 0

原创 JS如何实现拖拽以及如何应用HTML5中新增的api实现拖拽

介绍 我觉得JS拖拽的功能,大家一定都不会陌生。然而,在自己实际的项目开发工程中,却很少用到,以至于当自己开始着手实现这个这个功能当时候,也遇到了一些问题。 实现原理其实很简单,无非是鼠标事件+定位,但是,在实现当过程中,还是有一些注意点。同时,我自己在开发过程中,也是看了一些相关当博文,其中,还...

2019-04-16 21:29:11 160 0

原创 git简单应用入门--从实际项目开发出发

针对第一次git的大白,结合自己实际项目开发,梳理了以下内容,希望对初学者有帮助。 1. 拉取远程指定分支,在指定分支上开发 首先,默认远程有两个分支master和dev 1.1 拉取远程master分支,同时新建本地master分支,本地master分支与远程master分支建立...

2018-11-05 21:43:54 126 0

转载 利用Proxy代理和Reflect对象实现自定义原型链

1. 将代理作为原型链    用Object.create( )方法创建原型链,同时设置自定义的defineProperty上述例子中,在对象上定义属性的操作不需要操作对象原型,所以代理中的defineProperty陷阱永远不会被调用。自定义get和set方法后,得到下面修改后的代码    下面...

2018-04-11 21:39:52 306 0

转载 利用默认参数优化递归函数

        实际上,尾调用的优化发生在引擎背后,除非你尝试优化一个函数,否则无需思考此类问题。递归函数是其主要的应用场景,此时尾调用优化的效果很显著。请看下面这个阶乘函数        由于在递归调用前执行了乘法操作,因此当前版本的阶乘函数无法被引擎优化。如果n是一个非常大的数,则调用栈的尺寸...

2018-03-20 15:05:17 169 0

原创 提高JavaScript效率的编程实践

1、避免双重求值使用evel()和Function()构造器时,使得在JavaScript代码中执行另一段JavaScript代码,因此会导致双重求值的性能消耗。1) eval()例子比较:var array=['first','second','...

2018-03-12 20:56:31 200 0

转载 Node学习(6)CSRF Token介绍与应对策略

原文地址:点击打开链接最近模拟登陆,发现CsrfToken是个很麻烦的问题,所以看了一下CsrfToken的一些介绍。发现这篇文章写得很不错,所以转载过来。CSRF 背景与介绍CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年...

2018-03-07 21:24:23 871 1

原创 Node学习(5)export和module.export的区别

先上例子(1)将函数直接导出成模块模块文件:./my_modules/m.jsfunction fn1(){ console.log('我是fn1') } module.exports=fn1;index.jsvar foo=require('./my_modul...

2018-03-05 20:33:50 840 0

转载 Node学习(4)vue+node 前后端分离项目ajax跨域session问题解决

最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题:实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆。1、 vuejs ajax跨域请求最开始使用的是vue-resource,结果发现vue2推荐的是axios,...

2018-03-04 20:06:05 1287 1

转载 npm install 报错(npm ERR! errno -4048,Error: EPERM: operation not permitted,)解决方法

npm ERR! path E:\SouthernPowerGridProject\web_project\AutoOPS\autoops\node_modules\fsevents\node_modules\dashdash\node_modules npm ERR! code EPERM ...

2018-02-03 17:26:17 212 0

转载 JS调试——console.log()以外console的其它用法

最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法,难道Console真的没有别的用法了?查了一下后发现Console还是非常强大的,至于为什么很少看到有人用可能是因为用过都删掉了吧。...

2018-01-30 12:38:39 181 0

转载 Node学习(3)express中使用static获取静态文件及常见错误

使用express中的static可以设置文件存储路径,比如js存在于public/js/demo.js这个时候可以将js文件夹设置为专门存储js的路径,代码如下: app.use('/javascript',express.static('./public/j...

2018-01-28 11:28:28 2087 0

原创 Node学习(2)利用express设置路由

一、普通方式 最直接简单的方法就是对每一个需要访问的路径一一设置 var express=require('express'); var app=express(); //主页面 app.get('/',function(req,res){ res...

2018-01-27 21:53:41 301 0

原创 Node学习(1)表单提交,由浅及深

Post表单提交: 这里我们首先借助菜鸟网站上的一个post实例说明一下: var http = require('http'); var querystring = require('querystring'); var postHTML = ...

2018-01-26 21:42:38 160 0

原创 Vue.js学习(五):vue+axios+php+mysql 实现前端界面数据动态更新

网上参考了很多例子,都没有关于vue+php实现前后端的例子,后来自己总结了一个,希望大家批评指正。 vue实现动态数据的方式主要有vue-resource和axios,但是从Vue2.0开始,已经不对vue-resource进行更新,因此,本文主要利用axios进行操作。 1、安装axios...

2018-01-13 22:24:35 9708 1

原创 Vue.js学习(四):父子组件中的生命周期与钩子函数的调用顺序

借用下面这张图先简单了解Vue的整个生命周期 increase {{msg}} destroy 一、创建与挂载(created  and mounted) 当一个父组件中加载一个子组件,且父组件和子组件中同时调用mixin函数时,...

2018-01-11 11:34:47 8104 0

原创 Vue.js学习(三):mixins混合对象的使用

我对mixins的理解是,有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个Vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。下面主要参考网上的一些资料,对mixins的实际作用做介...

2018-01-10 21:59:31 3103 0

原创 Vue.js学习(二):computed响应数据变化与其他几种方法的比较

vue重methods、computed、watch以及v-model都能侦听数据,并相应数据的变化 1)methods:每次获取都会重新计算求值 First Name: Last Name: ...

2018-01-04 21:44:39 3581 0

原创 Vue.js学习(一):用render函数渲染组件

这里通过一个完整的例子对render函数的用法和注意事项进行说明: HTML: 我的自定义p标签中的内容asdsa Css: .c{ background: red; } JavaScript: Vue.comp...

2018-01-04 16:21:11 8087 0

原创 循环遍历的几种方法

1. for循环1) Array数组for(let i=0,len=arr.length;i&lt;len;i++){    console.log(arr[i])}2) Object对象for循环无法遍历Object对象3) NodeList数组&lt;span&gt;1...

2017-12-06 22:43:58 10525 0

原创 ES6中用数组方法遍历DOM

最新的浏览器提供了一个名为querySelectorAll()的原生DOM方法,可以达到jQuery获取DOM的效果,例如 href var a=document.querySelectorAll("#content a");此处的a即为div中的所有a标签元素。但...

2017-11-29 21:47:34 4004 0

原创 setTimeout()的相关知识和应用

1、运行时机 setTimeout并不是等其他任务完成时才开始计时,而是在出发setTimeout时开始计时,如果setTimeout后面的程序的运行时间大于setTimeout的等待时间,则setTimeout中的函数会优先于后面的程序执行。 例如: setTimeout(function()...

2017-11-26 21:38:06 145 0

原创 JavaScript中如何优化算法和流程控制

1、循环 1)循环类型的选择:for、while、do-while、for-in   除了for-in循环之外,其他循环类型差不多。除非要迭代一个属性数量未知的对象,否则应避免使用for-in循环。  2)减少迭代的工作量:  (1)减少对象成员及数组项的查找次数。对于item.lengt...

2017-11-23 22:40:01 136 0

转载 DOM访问和操作的优化方法

1、最小化DOM访问次数,尽可能在JavaScript端处理; 2、如果需要多次访问某个DOM节点,请使用局部变量存储它的引用; 3、小心处理HTML集合,因为它实时联系着底层文档。把集合的长度缓存到一个变量中,并在迭代中使用它。如果需要经常操作集合,建议把它拷贝到一个数组中;...

2017-11-20 11:03:26 128 0

原创 如何优化批量修改DOM的操作

当需要对DOM元素进行一系列操作时,可以通过以下步骤来减少重绘和重排的次数: 1、使元素脱离文档流; 2、对其应用多重DOM改变; 3、把元素带回到元文档中。 该过程会触发两次重排(reflow),如果忽略这两个操作,则第二部操作会造成多次重排。 如何使元素脱离文档流: 1、隐...

2017-11-20 10:11:14 1708 0

原创 纯CSS实现SVG路径描边动画效果

SVG中有一个比较重要度属性,stroke。stroke有很多兄弟属性: 1)stroke:线的颜色; 2)stroke-width:线的宽度; 3)stroke-linecap:线的端点,可用值有butt、round、square、inherit; 4)stroke-dasharray:虚线描边...

2017-11-15 10:18:23 2379 0

转载 HTML 5 的data-* 自定义属性

HTML 5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。 例如: 1、使用attribut...

2017-11-14 11:14:18 176 0

转载 何时使用img标签,何时使用background-image背景图像

在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然?     如下场景使用img标签比较合适:      1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人),使用Img标签加上alt属性。      2、如果你想打印页面并且你想要的图...

2017-10-14 11:51:36 637 0

转载 说说网络分层里七层模型是哪七层

应用层:应用层、表示层、会话层(从上往下)(HTTP、FTP、SMTP、DNS) 传输层(TCP和UDP) 网络层(IP) 物理和数据链路层(以太网) 每一层的作用如下: 1)物理层:通过媒介传输比特,确定机械及电气规范(比特Bit)  2)数据链路层:将比特组...

2017-09-19 20:09:07 3468 0

转载 js中的事件委托或是事件代理详解

1、概述: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托...

2017-09-18 15:07:43 370 0

转载 说说你对MVC和MVVM的理解

1、MVC View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈 所有的通信都是单向的。 2、MVVC View:UI界面   ViewModel:它是View的抽象,负责V...

2017-09-17 22:53:21 1489 0

原创 IE和Chrome可以并行下载多少个资源?

IE6:2个; IE7:4个; IE8+:6个 FireFox,Chrome:6个。 补充:同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。大多数浏览器的并发数量都控制在6以内。有些资源的请求时间很长,因而会阻塞其他资源的请求。因此,对于一些静态资源,如果放...

2017-09-17 21:34:16 6309 0

转载 JS异步加载和延迟加载

1、异步加载的方案: 动态插入script标签   1)通过ajax去获取js代码,然后通过eval执行   2)script标签上添加defer或者async属性   3)创建并插入iframe,让它异步执行js   2、延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后...

2017-09-17 20:58:59 1165 0

转载 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

详细版 1、浏览器会开启一个线程来处理这个请求,对URL 分析判断如果是 http 协议就按照 Web 方式来处理; 2、调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法; 3、通过DNS解析获取网址的IP地址,设置 UA 等信息发出第二个GET请求;...

2017-09-16 21:12:34 216 0

转载 列举IE与其他浏览器不一样的特性?

1)IE支持currentStyle,Firefox使用getComputStyle; 2)IE使用innerText,FireFox使用textContent; 3)滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num; ...

2017-09-16 20:52:58 3363 0

提示
确定要删除当前文章?
取消 删除