- 博客(140)
- 收藏
- 关注
RSS订阅原创 webpack3.x升级到webpack4.x
虽然说webpack5都已经出了，但是，可能有一部分人还在用webpack3，因此这篇文章主要是基于vue-cli中到项目配置，从webpack3升级到4.x。由于webpack3升级到4以后，很多配置项发生了变化，因此在升级过程中会遇到很多坑。1. webpack.base.conf.js首先。从webpack.base.conf.js开始，输入输出和上下文配置基本一样的，这边在plugin的位置引入了VueLoaderPlugin，同时把HtmlWebpackPlugin也提取到这里p
2020-11-15 10:50:01
1123
1
原创 Vue的几个开发技巧
1、在父组件中绑定子组件的生命周期我们一般的写法是子组件：export default { mounted() { this.$emit('listenMounted') }}父组件<template> <div> <List @listenMounted="listenMounted"...
2020-04-06 16:50:23
309
原创 vsCode插件安装推荐
1. Auto ReName Tag2. Beautify3. Beautify css/asaa/scss/less4. Bracket Pair Colorizer5. Chinese Language Pack for Visual Studio Code6. Code Runner7. Color Highlight8. Color Info9. Css P...
2020-04-05 09:13:12
512
原创 一些不常用的CSS伪类选择器的使用技巧
1. 属性值正则匹配选择器1）介绍在这里插入代码片（1）[attr^=“val”]：匹配attr属性以字符val开头的元素（2）[attr$=“val”]：匹配attr属性以字符val结尾的元素（3）[attr*=“val”]：匹配attr属性包含字符val的元素2）应用：过滤搜索技术<input type="search" /><ul> <li da...
2019-11-21 10:11:17
366
原创 canvas实现飞线流动效果
这篇文章主要介绍如果用canvas实现固定坐标数组的飞线动画（折线），或者可以说是电流效果吧。之前在网上有看到过流星托尾的效果，那种效果的主要方式是通过不断添加“蒙板”层的方式逐渐淡化前几秒的位置，而绘制的线其实就是一个小球，一直在移动。看起来是线，代码层面上其实只画了一个点。主要的代码为ctx.fillStyle = 'rgba(0,0,0,0.1)';//这里颜色要与背景图的颜色一样...
2019-10-14 21:22:44
8178
原创 利用Tween实现轮播动画
简介：之前在两个项目的开发过程中都遇到轮播动画，因此，今天结合自己的开发经验进行一定的分享，下面是自己用vue做的一个简单的demo。这个例子的实现主要用的是TweenMax插件+scrollTop实现的。下面的Gif是实现的效果。html：css：为了让轮播效果更加自然，隐藏了滚动条。此外，这里安利一个css属性object-fit，主要用于img标签中图片的定位。本文在...
2019-08-08 10:08:13
774
1
原创 html、js和css的加载和执行顺序
1）js加载后立即执行；2）js执行时会阻塞页面后续的内容（包括页面的渲染和其他资源的下载）。原因：因为浏览器需要一个稳定的dom树结构，而js中很可能有代码直接改变了dom树的结构，比如使用了document.write或者appendChild，甚至使用页面跳转。3）如何优化js（1）将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保这脚本执行前页面已经完成了D...
2019-04-23 21:10:31
5190
原创 JS如何实现拖拽以及如何应用HTML5中新增的api实现拖拽
介绍我觉得JS拖拽的功能，大家一定都不会陌生。然而，在自己实际的项目开发工程中，却很少用到，以至于当自己开始着手实现这个这个功能当时候，也遇到了一些问题。实现原理其实很简单，无非是鼠标事件+定位，但是，在实现当过程中，还是有一些注意点。同时，我自己在开发过程中，也是看了一些相关当博文，其中，还牵扯到了其他一些知识点，也有一些自己当见解同大家分享。PS：第一次用markdown编辑器，排版问题...
2019-04-16 21:29:11
538
原创 git简单应用入门--从实际项目开发出发
针对第一次git的大白，结合自己实际项目开发，梳理了以下内容，希望对初学者有帮助。 1. 拉取远程指定分支，在指定分支上开发 首先，默认远程有两个分支master和dev 1.1 拉取远程master分支，同时新建本地master分支，本地master分支与远程master分支建立对关系 git clone [git 链接] 1.2 新建并切换到本地dev分支...
2018-11-05 21:43:54
216
转载 利用Proxy代理和Reflect对象实现自定义原型链
1. 将代理作为原型链 用Object.create( )方法创建原型链，同时设置自定义的defineProperty上述例子中，在对象上定义属性的操作不需要操作对象原型，所以代理中的defineProperty陷阱永远不会被调用。自定义get和set方法后，得到下面修改后的代码 下面的例子使用Promise对象检验代理原型链，捕获get陷阱2. 将代理作为类的原型这里，如果用ES6中...
2018-04-11 21:39:52
520
转载 利用默认参数优化递归函数
实际上，尾调用的优化发生在引擎背后，除非你尝试优化一个函数，否则无需思考此类问题。递归函数是其主要的应用场景，此时尾调用优化的效果很显著。请看下面这个阶乘函数 由于在递归调用前执行了乘法操作，因此当前版本的阶乘函数无法被引擎优化。如果n是一个非常大的数，则调用栈的尺寸就会不断增长并存在最终导致栈溢出的潜在风险。 优化这个函数，首先要确保乘法不会在函数调用...
2018-03-20 15:05:17
295
原创 提高JavaScript效率的编程实践
1、避免双重求值使用evel()和Function()构造器时，使得在JavaScript代码中执行另一段JavaScript代码，因此会导致双重求值的性能消耗。1) eval()例子比较：var array=['first','second','third'];console.time()var item=eval("array[0]")console.timeEnd()consol...
2018-03-12 20:56:31
323
转载 Node学习（6）CSRF Token介绍与应对策略
原文地址：点击打开链接最近模拟登陆，发现CsrfToken是个很麻烦的问题，所以看了一下CsrfToken的一些介绍。发现这篇文章写得很不错，所以转载过来。CSRF 背景与介绍CSRF（Cross Site Request Forgery, 跨站域请求伪造）是一种网络的攻击方式，它在 2007 年曾被列为互联网 20 大安全隐患之一。其他安全隐患，比如 SQL 脚本注入，跨站域脚本攻击等在近年来已...
2018-03-07 21:24:23
1537
1
原创 Node学习（5）export和module.export的区别
先上例子（1）将函数直接导出成模块模块文件：./my_modules/m.jsfunction fn1(){ console.log('我是fn1')}module.exports=fn1;index.jsvar foo=require('./my_modules/m')foo();//我是fn1（2）如果模块文件中有两个函数，第二个会覆盖第一个模块文件：./my_modules/m....
2018-03-05 20:33:50
2317
1
转载 Node学习（4）vue+node 前后端分离项目ajax跨域session问题解决
最近学习使用vuejs前后端分离，重构一个已有的后台管理系统，遇到了下面这个问题：实现跨域请求时，每次ajax请求都是新的session，导致无法获取登录信息，所有的请求都被判定为未登陆。1、 vuejs ajax跨域请求最开始使用的是vue-resource，结果发现vue2推荐的是axios，于是改成axios；安装axiosnpm install axios -S安装完成后在main.js中...
2018-03-04 20:06:05
1929
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_modulesnpm ERR! code EPERMnpm ERR! errno -4048npm ERR! syscall scandirnpm
2018-02-03 17:26:17
392
转载 JS调试——console.log()以外console的其它用法
最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法，难道Console真的没有别的用法了？查了一下后发现Console还是非常强大的，至于为什么很少看到有人用可能是因为用过都删掉了吧。在此记录一下Console的其他用法。注意：因为Console 对象提供对浏览器控制台的接入 所以在不...
2018-01-30 12:38:39
511
转载 Node学习（3）express中使用static获取静态文件及常见错误
使用express中的static可以设置文件存储路径，比如js存在于public/js/demo.js这个时候可以将js文件夹设置为专门存储js的路径，代码如下：app.use('/javascript',express.static('./public/js'));这段代码是将源文件的路径简略为更名后的虚拟路径javascript下。那么以后就可以在html代码中以如下的方式引
2018-01-28 11:28:28
3489
原创 Node学习（2）利用express设置路由
一、普通方式最直接简单的方法就是对每一个需要访问的路径一一设置var express=require('express');var app=express();//主页面app.get('/',function(req,res){ res.end('Admin page')})//子页面oneapp.get('/one',function(req,res){ res.e
2018-01-27 21:53:41
730
原创 Node学习（1）表单提交，由浅及深
Post表单提交：这里我们首先借助菜鸟网站上的一个post实例说明一下：var http = require('http');var querystring = require('querystring'); var postHTML = '菜鸟教程 Node.js 实例' + '' + '' + '网站名： ' + '网站 URL： ' + '' +
2018-01-26 21:42:38
304
原创 Vue.js学习（五）：vue+axios+php+mysql 实现前端界面数据动态更新
网上参考了很多例子，都没有关于vue+php实现前后端的例子，后来自己总结了一个，希望大家批评指正。vue实现动态数据的方式主要有vue-resource和axios，但是从Vue2.0开始，已经不对vue-resource进行更新，因此，本文主要利用axios进行操作。1、安装axiosnpm install axios --save2、在Vue-cli的componen
2018-01-13 22:24:35
12543
2
原创 Vue.js学习（四）：父子组件中的生命周期与钩子函数的调用顺序
借用下面这张图先简单了解Vue的整个生命周期 increase {{msg}} destroy一、创建与挂载（created and mounted）当一个父组件中加载一个子组件，且父组件和子组件中同时调用mixin函数时，整个生命周期的顺序为：1、创建父组件beforeCreate：父组件中的mixins--父组件
2018-01-11 11:34:47
11170
原创 Vue.js学习（三）：mixins混合对象的使用
我对mixins的理解是，有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。下面主要参考网上的一些资料，对mixins的实际作用做介绍：1、方法的复用<div id="app"> <child><...
2018-01-10 21:59:31
3689
原创 Vue.js学习（二）：computed响应数据变化与其他几种方法的比较
vue重methods、computed、watch以及v-model都能侦听数据，并相应数据的变化1）methods：每次获取都会重新计算求值 First Name: Last Name: methods: {{name}} let vm=new Vue({ el
2018-01-04 21:44:39
5117
原创 Vue.js学习（一）：用render函数渲染组件
这里通过一个完整的例子对render函数的用法和注意事项进行说明：HTML： 我的自定义p标签中的内容asdsa Css：.c{ background: red; }JavaScript：Vue.component('demo',{ render: function (creat
2018-01-04 16:21:11
14725
原创 循环遍历的几种方法
1. for循环1) Array数组for(let i=0,len=arr.length;i<len;i++){ console.log(arr[i])}2) Object对象for循环无法遍历Object对象3) NodeList数组<span>1</span><span>2</span><span>3</span...
2017-12-06 22:43:58
18728
原创 ES6中用数组方法遍历DOM
最新的浏览器提供了一个名为querySelectorAll()的原生DOM方法，可以达到jQuery获取DOM的效果，例如 hrefvar a=document.querySelectorAll("#content a");此处的a即为div中的所有a标签元素。但是这里的a为一个DOM集合，要想准确获取a标签，则应该用a[0]表示，但是这里的a虽然能用数组的方法，却不是一个标准数组。
2017-11-29 21:47:34
5728
原创 setTimeout()的相关知识和应用
1、运行时机setTimeout并不是等其他任务完成时才开始计时，而是在出发setTimeout时开始计时，如果setTimeout后面的程序的运行时间大于setTimeout的等待时间，则setTimeout中的函数会优先于后面的程序执行。例如：setTimeout(function(){ console.log('a')},50)anotherFun();如果ano
2017-11-26 21:38:06
326
原创 JavaScript中如何优化算法和流程控制
1、循环1）循环类型的选择：for、while、do-while、for-in 除了for-in循环之外，其他循环类型差不多。除非要迭代一个属性数量未知的对象，否则应避免使用for-in循环。 2）减少迭代的工作量： （1）减少对象成员及数组项的查找次数。对于item.length，使用局部变量对其缓存，速度可以快25%以上 ； （2）倒序循环：此时，每个控制条件只需简单与0
2017-11-23 22:40:01
232
转载 DOM访问和操作的优化方法
1、最小化DOM访问次数，尽可能在JavaScript端处理；2、如果需要多次访问某个DOM节点，请使用局部变量存储它的引用；3、小心处理HTML集合，因为它实时联系着底层文档。把集合的长度缓存到一个变量中，并在迭代中使用它。如果需要经常操作集合，建议把它拷贝到一个数组中；4、如果可能的话，使用速度更快的API，比如querySeletorToAll()和fir
2017-11-20 11:03:26
227
原创 如何优化批量修改DOM的操作
当需要对DOM元素进行一系列操作时，可以通过以下步骤来减少重绘和重排的次数：1、使元素脱离文档流；2、对其应用多重DOM改变；3、把元素带回到元文档中。该过程会触发两次重排（reflow），如果忽略这两个操作，则第二部操作会造成多次重排。如何使元素脱离文档流：1、隐藏元素，DOM修改，重新显示； 这里主要通过display属性达到2、使用文档片段（
2017-11-20 10:11:14
3639
原创 纯CSS实现SVG路径描边动画效果
SVG中有一个比较重要度属性，stroke。stroke有很多兄弟属性：1）stroke：线的颜色；2）stroke-width：线的宽度；3）stroke-linecap：线的端点，可用值有butt、round、square、inherit；4）stroke-dasharray：虚线描边，可用值为none、（一个逗号或空格分隔的数值列表）、inherit。表示各个虚线端的长度。可
2017-11-15 10:18:23
4356
转载 HTML 5 的data-* 自定义属性
HTML 5 增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。例如： 1、使用attribute方法存取 data-* 自定义属性的值JavaScript代码：// 使用getAttr
2017-11-14 11:14:18
336
转载 何时使用img标签，何时使用background-image背景图像
在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适： 1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人)，使用Img标签加上alt属性。 2、如果你想打印页面并且你想要的图像包括默认情况下使用IMG。 3、使用IMG(alt文本)图像有一个重要的语义时,比如一个
2017-10-14 11:51:36
1202
转载 说说网络分层里七层模型是哪七层
应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）传输层（TCP和UDP）网络层（IP）物理和数据链路层（以太网）每一层的作用如下：1）物理层：通过媒介传输比特，确定机械及电气规范（比特Bit） 2）数据链路层：将比特组装成帧和点到点的传递（帧Frame） 3）网络层：负责数据包从源到宿的传递和网际互连（包Packe
2017-09-19 20:09:07
4788
转载 js中的事件委托或是事件代理详解
1、概述：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口
2017-09-18 15:07:43
448
转载 说说你对MVC和MVVM的理解
1、MVCView 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈所有的通信都是单向的。2、MVVCView：UI界面 ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model
2017-09-17 22:53:21
2675
原创 IE和Chrome可以并行下载多少个资源？
IE6：2个；IE7：4个；IE8+：6个FireFox，Chrome：6个。补充：同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。大多数浏览器的并发数量都控制在6以内。有些资源的请求时间很长，因而会阻塞其他资源的请求。因此，对于一些静态资源，如果放到不同的域名下面就能实现与其他资源的并发请求。
2017-09-17 21:34:16
10797
转载 JS异步加载和延迟加载
1、异步加载的方案： 动态插入script标签 1）通过ajax去获取js代码，然后通过eval执行 2）script标签上添加defer或者async属性 3）创建并插入iframe，让它异步执行js 2、延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。1）使用setTimeout延迟方法加载时间，给网页加载留出等多
2017-09-17 20:58:59
1715
转载 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
详细版1、浏览器会开启一个线程来处理这个请求，对URL 分析判断如果是 http 协议就按照 Web 方式来处理;2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;4、进行HTTP协议会话，客户端发送报头(请求报头);5、进入到web服务器上的 We
2017-09-16 21:12:34
314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人