- 博客(58)
- 收藏
- 关注
RSS订阅原创 axios反向代理和封装的必要
import axios from 'axios'mounted(){//http://baidu.com/ajax/xxxxx在配置文件内target内容会替代ajax前面部分axios.get(/ajax/xxxxx).then(res=>{console.log(res.data);})}根文件下配置 vue.config.js 添加以下代码module.exp...
2020-04-26 21:32:23
407
原创 axios和ajax的区别
jQuery实现ajax封装，ajax技术实现了网页的局部数据刷新axios是通过promise实现对ajax技术的一种封装axios是ajax ajax不止是axiosaxios({ url: '/getUsers', method: 'get', responseType: 'json', // 默认是json...
2020-04-09 09:56:39
207
原创 网址输入后的经历
DNS域名解析建立socket连接TCP3次握手发起请求 : 向IP对应的服务器发送http请求响应请求并传输数据 : 服务器响应http请求，发回网页内容浏览器解析网页内容 : 浏览器解析并渲染呈现给用户连接结束TCP4次挥手标题域名解析目的是为了将网址转为便于机器识别的IP地址。本地机器上配置网络时都有DNS会把URL发送给这个配置的DNS服务器；如果能够找到相应的...
2020-04-07 11:22:27
152
原创 call和apply重写
经常能使用到call和apply的情况下进行内部实现<script> //ES6版 Function.prototype.newCall = function (obj) { //判断参数传入的值是否为null或者undefined obj = obj ? Object(o...
2020-03-17 08:54:21
170
原创 vue : 无法加载文件 C:\Users\12136\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。
vue : 无法加载文件 C:\Users\12136\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。是因为当前计算机禁止你运行脚本以管理员身份运行PowerShell执行：set-ExecutionPolicy RemoteSigned选择Y或A...
2020-03-16 16:43:48
139
原创 ES6 async 函数
async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。async function name([param[, param[, ... param]]]) { statements }name: 函数名称。param: 要传递给函数的参数的名称。statements: 函数体语句。async 函数返回一个 Promise 对象...
2020-03-16 09:43:58
101
原创 ES6 Generator 函数
ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。Generator 有两个区分于普通函数的部分： 1. 一是在 function 后面，函数名之前有个 * ； 2. 函数内部有 yield 表达式。其中 * 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。f...
2020-03-15 11:56:04
67
原创 vue组件通信
组件间通信基本原则- 不要在子组件中直接修改父组件的状态数据- 数据在哪, 更新数据的行为(函数)就应该定义在哪vue 组件间通信方式propsvue 的自定义事件先子传父，再父传子()slot** props**此方式用于父组件向子组件传递数据可以设置默认类型，必要性，默认值定义声明所有，指定名称，指定名称和类型<Son v-bind:money ='mo...
2020-03-07 21:52:18
97
原创 ES6 Promise 对象
异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 状态Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 re...
2020-03-06 17:54:32
65
原创 ES6 模块
在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化分为导出（export） @与导入（import）两个模块。特点：ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use...
2020-03-03 21:18:32
97
原创 webpack记录
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。Loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解Ja...
2020-02-29 20:51:43
131
原创 ES6 Class 类
ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。定义类表达式可以为匿名或命名。// 匿名类let Example = class { constructor(a) { this.a = a; }}/...
2020-02-28 21:22:02
120
原创 ES6 迭代器
Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。迭代的过程如下：通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置随后通过 next 方法进行向...
2020-02-27 20:50:00
101
原创 git流程
安装完成后，在命令行输入：git config --global user.name "Your Name"git config --global user.email "email@example.com"选中一个不带中文的文件变成Git可以管理的仓库：git init添加到本地仓库git add index.htm,添加到暂存区git commit -m <***>...
2020-02-26 21:27:59
131
原创 ES6 函数
函数参数的扩展默认参数function fn(name,age=17){ console.log(name+","+age);}fn("Amy",18); // Amy,18fn("Amy",""); // Amy,fn("Amy"); // Amy,17使用函数默认参数时，不允许有同名参数。// 不报错function fn(name,name){ cons...
2020-02-25 21:00:42
58
转载 git
最常用到的：git config --global user.name “yaojiacheng” //设置用户名git config --global user.email “yaojiacheng@lidehang.com” //设置用户邮箱每次 Git 提交时都会引用上面这两条信息，说明是谁提交了更新，所以会随更新内容一起被永久纳入历史记录。如果用了 --global 选项，那么更改的...
2020-02-24 15:10:42
103
原创 原生Js实现踩白块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...
2020-02-23 20:50:16
151
原创 ES6 数组
数组创建Array.of()将参数中所有值作为元素形成数组。console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] // 参数值可为不同类型console.log(Array.of(1, '2', true)); // [1, '2', true] // 参数为空时返回空数组console.log(Array.of()); // []...
2020-02-22 21:28:52
101
原创 ES6 对象
对象字面量属性的简洁表示法ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。const age = 12;const name = "Amy";const person = {age, name};person //{age: 12, name: "Amy"}//等同于const person = {age: age, name: name}方法名也可...
2020-02-21 18:59:02
86
原创 ES6 数值
表示二进制表示法新写法: 前缀 0b 或 0B 。console.log(0b11 === 3); // trueconsole.log(0B11 === 3); // true八进制表示法新写法: 前缀 0o 或 0O 。console.log(0o11 === 9); // trueconsole.log(0O11 === 9); // true常量:Number.EPSI...
2020-02-20 20:09:54
128
原创 ES6 字符串
ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。includes()：返回布尔值，判断是否找到参数字符串。startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。let string = "a...
2020-02-19 22:13:00
87
原创 实现通用轮播图插件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
2020-02-19 10:21:40
137
原创 ES6 Reflect 与 Proxy
Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Prox...
2020-02-17 21:02:45
176
原创 ES6 Map 与 Set
Map 对象Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。Maps 和 Objects 的区别一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。Obje...
2020-02-16 19:24:56
71
原创 ES6 Symbol
ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ，还新增了 Symbol 。Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建...
2020-02-14 20:38:40
91
原创 Js实现动态时钟
获取日期字符添加日期对应结构运动数值显示动态透明度<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
2020-02-13 17:39:06
155
原创 canvas实现画板基础功能
固定样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume...
2020-02-12 12:26:27
165
原创 ES6 解构赋值
解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。解构的源，解构赋值表达式的右边部分。解构的目标，解构赋值表达式的左边部分。数组模型的解构（Array）let [a, b, c] = [1, 2, 3];// a = 1// b = 2// c = 3可嵌...
2020-02-11 20:35:53
91
原创 ES6 let 与 const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。let 是在代码块内有效，var 是在全局范围内有效:let 只能声明一次 var 可以声明多次:let a = 1;let a = 2;var b = 3;va...
2020-02-10 21:22:54
77
原创 使用canvas生成随机验证码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
2020-02-07 19:34:58
250
原创 模块化
模块化简介具有相同属性和行为的事物的集合。在前端中，将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块，为了每个js文件只关注与自身有关的事情，让每个js文件各行其职。模块要有几个特点： 独立、完整、依赖关系在最开始的阶段，Js并没有这些模块机制，各种Js到处飞，也就是你们现在的野生代码，得不到有效妥善的管理。后来前端圈开始制定规范，最耳熟能详的是Comm...
2019-10-29 19:37:49
90
原创 拖拽，FileReader，Web Socket
drag&drop常用于各种拖动操作中创建可拖动元素<div id="drag" draggable="true"></div>拖拽相关的事件dragstart 被拖拽元素 开始被拖拽时触发dragend 被拖拽元素 拖拽完成时dragenter 目标元素 拖曳元素进入目标元素dragover 目标元素 拖拽元素在目标元素上移动drop 目...
2019-10-27 17:31:12
116
原创 H5多媒体
多媒体audio音频video视频1.基础用法<audio id="audio" src="#"></audio><video id="video" src="#"></video>属性autoplay 自动播放controls 设置控件preload(none/metadata/auto) 预加载node 不需要加载数据me...
2019-10-21 16:09:32
628
原创 获取位置geolocation 加速度devicemotion 角度deviceorientation
获取位置geolocation在对象navigator下window.navigator.geolocation；1、getCurrentPosition() // 获取当前的位置信息2、watchPosition() // 监视位置变化，和1参数一样3、clearWatch() // 清除位置监视1、getCurrentPosition(s, e, p)success回调 (必...
2019-10-19 09:24:53
400
原创 H5动画帧，存储，历史记录，worker
requestAnimationFrame1、页面刷新前执行一次2、1000ms 60fps -> 16ms3、cancelAnimationFrame4、用法和 setTimeout类似5、兼容性 <script> window.requestAnimFrame = (function () { //兼容写法 ...
2019-10-18 09:16:54
226
原创 SVG实现定点进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-10-17 10:26:28
230
原创 SVG实践
应用场景SVG图表图标 icon动效矢量图直线矩形<rect x=“50” y=“50” width=“100” height=“100” rx="10"ry=“20”>圆形椭圆折线多边形</polygon>⽂本hello,world <svg width= "1000px" height= "500px">...
2019-10-16 15:29:01
231
原创 canvas实现刮刮乐
<canvas id="myCanvas" width="300" height="300"></canvas> <script> var myCanvas = document.getElementById('myCanvas'), ctx = myCanvas.getContext('2d'), ...
2019-10-16 15:27:19
119
原创 3.15
。charAt（0） 第一个字符串。charAt（。length-1） 最后一个。substring（1，4）第2-4个字符都是固定不变的，改变就是返回新的可以象数组一样使用下标访问例题a和b分别等于什么 var a = 1; var b =2[a,b] = [b,a];//1，[undefend,1] (function() { t...
2019-10-15 17:53:10
65
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人