weixin_43594183的博客

原创 fetch请求

结合之前的文章事件循环Event Loop_爬行者c的博客-CSDN博客先理解JS异步的实现机制。异步操作结果的处理方式一般会通过回调函数来实现。关于异步编程有以下几种。Promise内置类。异步编程，解决回调地域。参数：一个函数，该函数接收两个函数参数，resolve和reject，且必传三种状态：pending（进行中，默认状态）、fulfilled/resolved（已成功，异步操作成功后）和rejected（已失败，异步操作失败后）注：状态一旦修改就不能再改变，一旦执行.

原创 Axios简易封装

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建XMLHttpRequest 从 node.js 创建 http请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF安装cnpm install axios --save-dev封装建立service文件夹，再建立http.js文件夹用于封装网络请求，和api.js统一存...

原创 Vue项目优化

使用keep-alive缓存路由组件对象常用于详情页返回列表页，保存组件的渲染状态，避免被重复渲染和创建。 <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive">&

原创 Vue项目vant的使用

官方文档 Vant - Mobile UI Components built on Vue安装npm i vant -Snpm i babel-plugin-import -D //这是一个插件 按需引入时必须要引入全局导入main.jsimport Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);自动按需引入// babel.config.js 中配置module.exports = {...

原创 脚手架中的一些问题

安装依赖npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/abbrev'终端更新npm加上时 sudo，sudonpm install npm -gnpm WARN npm npm does not support Node.js v8.11.3原因：node 版本太新，npm版本太旧，查看对应关系 https://no...

原创 Vue项目视频播放

使用视频播放插件 vue-video-playerhttps://github.com/surmon-china/vue-video-player安装npm install vue-video-player --save兼容m3u8，安装videojs-contrib-hlsnpm install --save videojs-contrib-hls全局引入main.jsimport VideoPlayer from 'vue-video-player'requ..

原创 微信小程序接口封装

建立utils文件夹，在里面的文件夹建立专门管理接口的文件夹。request.js封装请求库，api.js统一将所有页面接口方法集中存放管理。request.jsclass request { constructor () { this.header = {} } // 异常处理 setErrorhandle (handle) { this.errorhandle = handle } // get请求 getRequest (url, data, header = t.

原创 H5问题总结

当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0；设置height:100vh，该元素会被撑开屏幕高度一致。背景图在pc调试清晰，在移动端显示模糊，因为手机分辨率小，用2x背景图并设置background-size:contain.icon-back{ background: url('../images/icon_back@2x.png') center center no-repeat; background-size: contain;}i

原创 原型和继承

对象也叫实例。具有属性（特征）和方法（行为）。类基于一个类（相当于模板）可以创建多个对象（实体）。js没有类，基于对象（构造函数和原型对象）扩展新的对象。封装阐述对象中的内容，隐藏信息（方法和属性的可见性）。封装包括封装数据和实现。js无public/private等关键字限定 方法和属性的可见性，只能通过变量的作用域（函数）来实现。对象和对象之间通过暴露的API通信。聚合多个对象合并。继承类与类之间，代码重用。多态不同对象通...

原创 作用域和闭包

在ES6之前，js的作用域有全局作用域和函数作用域。 创建和销毁 访问变量和函数 特征 深层理解 全局作用域 页面打开创建、页面关闭销毁 全局、任一位置访问 包含全局对象window，由浏览器创建，在全局作用域声明的变量和函数都会挂载在window上 全局代码执行前期创建执行期上下文的全局变量对象GO（预编译时期） 函数作用域 函数调用创建、执行完毕销毁 可以访问全局作用域，反之不行 每调用一次就会创建一个新的函数作用域；在函数.

原创 前端对接第三方登录（QQ、微博、微信）

原理请求获取用户授权code 通过授权code去请求access_token介绍先在第三方平台注册账号（企业账号）、创建应用。正确填写信息提交审核，会花费一定时间，需要提前准备。QQ :QQ互联平台 微信：微信开放平台 新浪:新浪开放平台项目网站第三方登录分别给按钮添加点击事件，跳转去授权。 如果用户同意授权就进入授权成功的页面（页面地址带有code参数或者其他参数），否则就取消授权登录操作。 用户同意授权，根据页面地址携带的参数code去请求获取acc...

原创 移动端适配

视口viewport的概念视口：约束html大小在桌面，视口宽度 = 浏览器窗口宽度在移动端，视口分为视觉视口(layout viewport)、布局视口(visual viewport)和理想视口(ideal viewport)对于桌面浏览器，限制css布局的是浏览器窗口；而手机端是布局视口。视觉视口表示浏览器的可视区域，用户正在看到的网站的区域，决定用户看到什么；当用户缩放时，只有视觉视口的尺寸会发生改变，布局视口不会改变，所以布局是不会改变的。window.inn.

原创 CSS居中总结

关于CSS水平居中、垂直居中、水平垂直居中的总结。

原创 Vue CLI中插槽的使用

作用：在父组件中将自定义内容插入到子组件中。

原创 事件循环Event Loop

JS是单线程。和DOM渲染共用一个线程。异步和多线程实现是通过Event Loop实现。常见异步有：DOM事件、定时器触发事件、AJAX、fetch、XMLHttpRequest、Promise then方法等。微任务：Promise/async/await宏任务：定时器触发事件setTimeout/setIntervalDOM事件AJAX微任务比宏任务早；微任务在DOM渲染之前执行，宏任务在DOM渲染之后执行。Event Loop常见概念：Call Stack 调用栈Message

原创 浅拷贝和深拷贝

基本理念js在定义任何变量、函数时都要进行内存的分配、使用、释放内存过程。存储数据有两种：栈内存、堆内存。栈中数据大小固定自动分配内存、系统自动释放，堆中数据大小不定动态分配内存、不一定自动释放。栈中存储的值类型为基本数据类型和引用（对象在栈中的地址），null、undefined、boolean、string、number、symbol，按值访问；堆中存储的值类型为引用类型，Object、Array、Function等，按引用访问；赋值 var obj .

原创 var、let、const

JS作用域全局作用域函数作用域块级作用域（ES6）letlet声明的变量仅在块级作用域生效for(var i = 0; i<5; i++) { setTimeout(function(){ console.log(i); },1000);} //输出5次5，i是全局变量for(let i = 0; i<5; i++) { setTimeout(function(){ console.log(i); },1000)

原创 微信小程序授权登录

登录流程时序实现思路写一个登录页，用户点击触发。使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。https://developers.weixin.qq.com/miniprogram/dev/component/button.html用户进入小程序，若未授权，就提示用户去授权操作。若已授权，直接跳过这个授权步骤直接进入页面。wxml <button class="btn-login" wx:if..

原创 微信小程序开发记录（二）

基本知识四种文件类型.json 配置文件.wxml 模板文件.wxss 样式文件.js 脚本逻辑文件文件夹结构component 通用组件pages 页面（一个页面就是一个pages下的子文件夹）utils 公用wxParse 富文本解析app.jsapp.json 全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪

原创 微信小程序开发记录（一）

开发准备下载开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html微信公众平台https://mp.weixin.qq.com/注册小程序账号登录后台，在基本设置中获取小程序的 AppID在微信开发者工具中打开仓库进行代码编写发布上传代码提交审核发布版本https://www.cnblogs.com/dashucoding/p/9938295.html...

原创 从输入URL到浏览器显示页面发生了什么

总体分为以下几个过程：DNS域名解析 TCP三次握手连接 发送HTTP请求 服务器处理请求返回报文 浏览器解析渲染TCP/IP模型：应用层--传输层--网络层--数据链路层发送端从应用层往下走，接收端从数据链路层往上走。DNS域名解析DNS服务器将域名解析成对应的服务器IP地址。解析过程: . -> .com -> google.com. -> www.google.com.从右向左，根域、顶级域、二层域、子域、主机名。这步拿...

原创 前端开发常备

代码书写vscode https://code.visualstudio.com/DownloadHbuilder https://www.dcloud.io/Sublime https://www.sublimetext.com/调试工具谷歌开发者工具https://wiki.jikexueyuan.com/project/chrome-devtools/overview.html浏览器插件FeHelper https://www.bai...

原创 弹性布局

基本概念容器：采用flex布局的元素（flex container)项目：需要布局的元素，容器成员子元素(flex item)主轴：默认水平方向，项目按主轴排列（main axis)交叉轴：与主轴交叉（cross axis）注：主轴不一定为水平方向，若项目按照垂直方向排列，主轴为垂直方向。容器属性设置display:flex; 指定使用flex布局flex-dicretion:row | row-reverse | column | co...

原创 带进度显示的视频上传

太久太久没有更新博客了。。。。。。。今天做了一个带进度条的视频上传，做个小结。实现效果如下：实现原理：

原创 百度地图api的使用--小结2

<div class="loupan-page lppt-box" id="peitao"> <div class="lp-title">百度信息</div> <div class="lppt-baidumap"> <div clas...

原创 百度地图api的使用--小结1

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。浏览器：IE 6.0+、Firefox 3.6+、Opera...

原创 事件

JavaScript事件流模型：事件捕获：事件有最不具体的元素接收，逐级向下传播，一直到最具体的节点元素（ie的兼容性不好，建议冒泡）。 事件冒泡：事件由最具体的节点元素接收，逐级向上传播，直到document文档对象。DOM事件流的三个阶段：事件捕获--》目标阶段--》事件冒泡 IE9,Opera,Firebox,chrome,Safari;IE8以及更早版本不支持注意：如果...

原创 百度富文本编辑器  ueditor 的基本使用

下载 html部分引入百度编辑器 配置文件、编辑器源码文件 放置编辑器的位置 <div><script id="container" name="content" type="text/plain" style="width:1106px;" data-bind="value:item_cont"></script></div> 可...

原创 添加标签--小结

部分界面逻辑梳理：点击元素添加：绑定事件--》获取对应id值对应的元素--》判断元素是否存在，存在的话终止操作，不存在的话添加标签元素到存放数组中，循环数组，构造dom元素，设置到标签存放位置。 输入框添加：绑定按钮事件--》获取输入内容--》判断元素是否存在......部分代码e_addtags:function(tid,flag){ var _...

原创 常用的数组方法

reverse（） 反转数组 var arr=[3,6,2,4,1,5]; console.log(arr.reverse())//[5, 1, 4, 2, 6, 3]join(） 数组转字符串。var fruits = ["Banana", "Orange", "Apple", "Mango"];var energy = fruits.join();console.log(...

原创 一次严重的错误记录Uncaught RangeError: Maximum call stack size exceeded

最近做了一个登录界面，怎么请求都没反应，导致页面卡死。重复试了很多办法，最终还是卡死卡死卡死......上网查询了，发现可能是两点导致的：1.递归次数过多 2.重复引入js库。但是这都不是问题所在，这里就是一个简单的ajax请求。最终排除发现可能是ajax参数错误，代码如下： // 注册 $("#regist").on('tap',function () {...

原创 js图片资料集锦

转载 ES6这些就够了

刚开始用vue或者react，很多时候我们都会把ES6这位大兄dei加入我们的技术栈中。但是ES6那么多那么多特性，我们真的需要全部都掌握吗？秉着二八原则，掌握好常用的、有用的这个可以让我们的开发快速起飞。接下来我们就聊聊ES6那些可爱的新特性吧。1.变量声明const和let在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局...

转载 深入理解闭包

一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。Js代码　　var n=999;　　function f1(){　　　　alert(n);　　}　　f1();// 999另一方面，在函数外部自然无法读取函数内的局...

原创 关于this

关于函数中的this，可以理解为函数所在的执行环境。(箭头函数除外）在不同的执行环境中，this有着不同的指向。1.全局作用域/普通函数计时器，this指向全局对象windowconsole.log(this);//windowfunction a(){console.log(this);}a();//windowvar b=function(){console.log(th...

原创 call、apply和bind使用

JavaScript中的bind()、call()和apply()这几个方法使得函数在特定的作用域中执行，三者都能改变函数内this的指向。它们的第一个参数都是this要指向的对象，也都可以进行后续的传参。那么，它们的作用和区别在哪里？看下面的代码。var obj={ name:"zhangsan", age:"25" }var person={ name:"lisi"...

原创 立即执行函数

js中的立即执行函数，简称IIFE。IIFE的出现是为了隔离作用域，防止变量污染全局的命名空间。有时，前端需要引入多个第三方库，多个框架的引入可能会引起冲突。立即执行函数常用于第三方库，好处在于隔离作用域。我们熟知的jquery本质上就是一个立即执行函数。立即执行函数的常见形式有以下两种： (function(){})();//常见写法，将（）放在外面(function(){}()...