幻想的小飞-优快云博客

原创 DOM树加载过程

深入理解DOM数加载过程1.在浏览器中输入url，交给DNS域名解析，找到IP，向服务器发起请求；(里面还有缓存，http协议，TCP...)2. 服务器返回数据，浏览器接收文件(html,css,js,img...)，二进制文件 html:二进制转换为html 构建DOM树：HTML解析器 Token->Node->DOM Token词法解析，根是"d

2021-08-03 10:33:15 382

原创 react-router 的参数render、component、children

component 最常用，只有匹配 location 才会加载 component 对应的 React组件render 路由匹配函数就会调用children 不管路由是否匹配都会渲染对应组件优先级：children>component>renderReact 核心渲染代码 return ( <RouterContext.Provider value={props}> {match // 是否与地址匹配

2021-07-30 14:40:31 1142

原创节流和防抖

var helpers = { /** * debouncing, executes the function if there was no new event in $wait milliseconds * @param func * @param wait * @param scope * @returns {Function} */ debounce: function (func, wait, scope) {

2021-07-28 16:11:09 128

原创 js常用类型判断

vue源码中常用类型的判断方法： const hasOwnProperty = Object.prototype.hasOwnProperty; const hasOwn = (val, key) => hasOwnProperty.call(val, key); const isArray = Array.isArray; const isMap = (val) => toTypeString(val) === '[object Map]'; const isSet = (

2021-05-12 19:49:04 131

原创小程序购物车加购动效

二阶贝塞尔曲线 bezier(),在原作者的接触上加了从右向左的曲线计算App({ globalData:{ }, onLaunch: function (){ }, bezier: function (points, times) { // 0、以3个控制点为例，点A,B,C,AB上设置点D,BC上设置点E,DE连线上设置点F,则最终的贝塞尔曲线是点F的坐标轨迹。 // 1、计算相邻控制点间距。 // 2、根据完成时间,计算每次执行时D在AB方

2021-04-30 11:31:19 412

原创 grid布局属性

官方文献：https://css-tricks.com/snippets/css/complete-guide-grid/#grid-properties阮一峰文档：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

2021-04-22 11:42:24 69

原创对象深度嵌套判空方法处理

一般取对象某个属性要这么写，以防中间某个属性报错obj && obj.a && obj.a.b && obj.a.b.c 下面写了个方法，对空属性做了判空function getValue(data, keysString) { if(!data){ return undefined } if(!keysString){ return data } // [0],[1]... 属

2020-06-02 14:20:41 1065

原创 javascript实现部分数据结构的方法，栈、队列、链表、二叉树、图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...

2020-03-06 23:36:48 164

原创 ES6学习笔记

ES6学习笔记let 和 const 命令let 和 const 命令1、for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i);}// abc// abc// abc上面代码正确运行，输出了 3 次ab...

2020-01-03 14:47:23 165

原创 git常用命令总结

查看本地和远程分支git branch /查看本地分支信息git branch -vv /查看本地分支详情本地有master和v3914分支*表示当前分支蓝色表示关联到的远程仓库的分支ahead表示你本地有一次提交待push，超前远程仓库一个版本behind表示远程仓库有更新，本地待pull，落后远程仓库一个版本git ls-remote 查...

2019-03-11 14:02:34 535

转载 sourcetree跳过注册的方法

当前只有Win的版本，Mac自行百度（笑）很多人用git命令行不熟练，那么可以尝试使用sourcetree进行操作。然鹅~~sourcetree又一个比较严肃的问题就是，很多人不会跳过注册或者操作注册。废话不多，我们直接开始跳过注册阶段的操作。下载好之后会有这么一个界面要求你注册或登录。（不管它）将下面的一串串放进我的电脑的地址栏，打开sourcetree的文件夹%LocalAppD...

2019-03-08 09:29:26 154

转载点击事件时clientX,pageX,screenX区别

鼠标事件有下面这几种：1. onclick鼠标点击事件box.onclick = function(e){ console.log(e)}2. onmousedown鼠标按下事件box.onmousedown = function(e){ console.log(e)}3. onmouseup鼠标松开事件box.onmouseup = function(e){ ...

2019-03-01 15:04:33 1131

原创小程序页面onload()，onready()加载顺序

小程序onLoad(Object query) 页面加载时触发。一个页面只会调用一次，可以在 onLoad的参数中获取打开当前页面路径中的参数。onShow() 页面显示/切入前台时触发。onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。所以加载顺序是先加载onLoad，再是onShow，最后onReady原生JSdo...

2019-02-26 15:20:02 39683 1

转载 canvas画图小例子2

<!DOCTYPE><html> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--[if lt IE 9]><script language="javascript" type

2019-02-15 14:53:36 179

转载 canvas画图小例子

<!DOCTYPE html><html><head><title>h5构建基本的画图程序</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv=&q

2019-02-15 14:52:58 715

原创 canvas属性常用方法整理

绘制线段将放入web页面时,第一件事是看整个页面是否已经加载,并且开始操作前是否所有html元素都已经展现.为做到这一点,用window的load事件监听,该事件在html页面加载结束时发生ctx.strokeStyle = 'rgb(150,0,0)';ctx.fillStyle = 'rgb(0,150,0)';ctx.lineWidth = 1;ctx.moveTo(x,0);...

2019-02-11 14:28:19 1005

转载 vue-router全局钩子函数+单个路由钩子函数+组件内钩子函数

1. vue-router全局钩子函数 beforeEach和afterEach是vue-router实例对象的属性特别提醒：每次路由跳转，都会执行beforeEach和afterEach beforeEachvar router=new Router({ rout...

2019-01-10 13:31:49 1003

转载 Jquey的Deferred和Promise和ES6的Promise

function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('随便什么数据1'); ...

2019-01-09 14:29:07 235

转载 Vue.use()源码分析

我想有过vue开发经验的，对于vue.use并不陌生。当使用vue-resource或vue-router等全局组件时，必须通过Vue.use方法引入，才起作用。那么vue.use在组件引入之前到底做了那些事情呢？让我们一窥究竟。先上vue.use源码Vue.use = function (plugin) { /* istanbul ignore if */ if (plugi...

2019-01-08 11:25:04 132

原创获取当前日期的前一天日期

/** * 获取当前日期的前一天的日期 * @method * @name getPreDate * @param {string} enddate 结束日期 * @returns {string} 结束日期的前一天的日期 */ getPreDate: fun...

2018-12-06 14:35:20 1642

转载 jsonp跨域

想必听过“跨域”这个词的开发人员都应该知道JSONP，它是一种非正式传输协议，常常用于解决浏览器跨域数据访问的问题。JSONP究竟是啥？网上关于这方面的文章很多，但是很多讲得并不浅显易懂，相信很多人看完还是一头雾水。今天我们就一起来了解一下它的由来。了解之前，我们先来看看下面几个概念：JSON：即JavaScrip对象标记，是一种轻量级的数据交换格式。示例：{name: ‘今日头条’, title...

2018-10-12 10:17:48 173

转载 Docker入门教程--软一峰

一、环境配置的难题软件开发最大的麻烦事之一，就是环境配置。用户计算机的环境都不相同，你怎么知道自家的软件，能在那些机器跑起来？用户必须保证两件事：操作系统的设置，各种库和组件的安装。只有它们都正确，软件才能运行。举例来说，安装一个 Python 应用，计算机必须有 Python 引擎，还必须有各种依赖，可能还要配置环境变量。如果某些老旧的模块与当前环境不兼容，那就麻烦了。开发者常常会说：...

2018-10-10 14:40:59 315

转载 AMD使用总结

//定义M模块，本申明一个全局变量define('M',[],function(){ window.M={}; return M;})//定义模块a 依赖模块 M,b,cdefine('a',['M','b','c'],function(M){ alert(M.ob); alert(M.oc);})//定义b模块define('b',[],functi...

2018-10-10 09:33:22 199

原创 iscrll5使用的事例

iscroll5下拉刷新，包括滑动过程中处理头部样式，判断滑动手势的处理 myScroll: function() { var that = this; var myScroll, pullDown = $("#pulldown"), pullDownHeight = pullDown...

2018-10-07 14:30:52 251

转载 requestAnimationFramee

深入理解定时器系列第二篇——被誉为神器的requestAnimationFramee 转载处https://www.cnblogs.com/xiaohuochai/p/5777186.html 前面的话　　与setTimeout和setInterva...

2018-08-21 11:11:11 132

转载 HTML5-Canvas

一、canvas简介 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出...

2018-08-20 10:20:49 203

转载 JavaScript 的 this 原理--软一峰

一、问题的由来学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。 ...

2018-08-15 13:18:22 205

转载跨域资源共享 CORS 详解

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。 ...

2018-08-15 11:22:57 145

转载浏览器同源政策及其规避方法--软一峰

浏览器安全的基石是”同源政策”（same-origin policy）。很多开发者都知道这一点，但了解得不全面。 ...

2018-08-15 11:19:24 202

转载 Cookie、session和localStorage、以及sessionStroage

一、Cookie、session和localStorage的区别 cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。 会话cookie一般不存储在硬盘而是保存在内存里...

2018-08-13 11:22:18 166

转载浏览器加载、解析、渲染的过程

最近在学习性能优化，学习了雅虎军规，可是觉着有点云里雾里的，因为里面有些东西虽然自己也一直在使用，但是感觉不太明白所以然，比如减少DNS查询，css和js文件的顺序。所以就花了时间去了解浏览器的工作，有一篇经典的文章《how browsers work》，讲的很详细，也有中文译本。不过就是文章有点太长，也讲了一堆东西...

2018-08-10 16:22:14 166

转载 flex布局--软一峰

一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inl...

2018-08-09 17:42:27 1328

转载 js删除操作delete

简介用来删除一个对象的属性。语法delete expresson12 express 应该是一个对象的引用,例如delete object.propertydelete object['property']1234 如果expression不...

2018-08-09 17:20:50 480

转载 FormData对象