自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(49)
  • 收藏
  • 关注

原创 Vue源码阅读(三)——实例初始化

可以看到在实例初始化的过程当中,在vue的原型链当中挂载了_init方法,该方法当中进行了uid递增,performance标记标记,_isVue赋值,判定实例化是否传入组件化参数,是则进行内部组件初始化,否则进行传入参数覆盖式合并构造器参数的数据。在非生产环境对实例进行代理,在生产环境则将实例自身赋值给_renderProxy将实例赋值给_self属性,并进行一系列初始化操作非生产环境下存在性能属性则进行监测实例的$options对象存在el属性则挂载// src/core/instance

2020-08-29 00:57:19 46

原创 Vue源码阅读(二)——核心文件

上回说到,到底给Vue上挂了啥,那先来看看引入的Vue是个啥和上面本来有啥。import Vue from 'core/index'根据引入语句和别名解析核心文件应当在src/core/index// src/core/indeximport Vue from './instance/index'import { initGlobalAPI } from './global-api/index'import { isServerRendering } from 'core/util/env'

2020-08-28 01:21:42 47

原创 Vue源码阅读(一)——开天辟地

随着Vue框架状态越来越火热,不少feder已经不仅仅满足于vue框架的使用,有很多人都打算阅读vue源码来提升自己。那么提到源码阅读就不免产生了一个问题,到底要从何处开始源码阅读呢?package的入口:// package.json"main": "dist/vue.runtime.common.js"经过全局搜索文件名找到入口源码的打包配置在scripts/config.js// scripts/config.js 'web-runtime-cjs-dev': { entry

2020-08-28 01:20:56 93

原创 Web中的音视频

web 开发者们一直以来想在 Web 中使用音频和视频,自21世纪初以来,我们的带宽开始能够支持任意类型的视频。传统的 web 技术(如 HTML )不能够在 Web 中嵌入音频和视频,所以一些像 Flash (后来有 Silverlight ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作,但是却有着一系列的问题,包括无法很好的支持 HTML/CSS 特性、安全问题,以及可行性问题。传统的解决方案能够解决许多这样的问题,前提是它能够正确的工作。幸运的是,几年之后 HTML5 标准提出,其

2020-08-28 01:16:27 88

原创 网络类型获取的兼容性问题

网络类型的获取现有方案:Navigator.connectionNavigator.connection 是只读的,提供一个NetworkInformation 对象来获取设备的网络连接信息。例如用户设备的当前带宽或连接是否被计量, 这可以用于基于用户的连接来选择高清晰度内容或低清晰度内容。connecType枚举enum ConnectionType { "bluetooth", "cellular", "ethernet", "mixed", "none"

2020-08-28 01:10:10 67

原创 x5浏览器内核全屏播放

x5内核+video,这两个词放在一起他就会有一些坑。比如全屏问题、同层渲染问题、自动播放问题。陆续更新中。。。(等更完找时间做个video踩坑合集)一、x5-video-player-fullscreen全屏方式如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)全屏监听进入监听:myVideo.addEventListener("x5videoenterfullscre

2020-08-28 01:05:24 152

原创 css动效代码(持续更新中。。。)

主要更新一些按钮动效的实践。静态按钮往往不够吸引人,试试让它动起来吧~悬浮球 .susbension { position: fixed; top: 156px; right: 10px; z-index: 9; display: inline-block; width: 60px; height: 60px; overflow: hidden; background: radial-gradient(circle at 50% 5

2020-08-28 00:59:13 41

原创 UC中video脱离文档流的规避方案(含常见浏览器判定)

首先声明目前没有找到彻底的解决方案找到的是规避方案,可以根据业务场景灵活食用。我的业务场景是要在video上盖东西,video会跑到最上层,体验很差。如果是相同场景可以继续看,不是可以直接退出。1、判断他是个uc浏览器navigator.userAgent.indexOf("UBrowser")2、当video上需要盖东西的时候把video标签隐藏起来。(对,就是这么简单粗暴。因为即使隐藏起来效果也比video跑到文档外面乱跑视觉效果好的多)以下是各种浏览器ua判定var OsObject=na

2020-08-28 00:20:36 500

原创 inject/provide与响应式数据

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。说人话就是如果你把对象都改了那这个改动就追踪不到了,如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。这意味着,出于某种考虑,vue故意将provide/inject设定为不可响应的。也就是说如果你的provide的数据改变,inject是不会接受到这个改变,然而如果你provide的内容是一个可响应的数据,比如一个对象引用,那么这个对象的属性是可以

2020-08-28 00:12:44 23

原创 iphonex适配的n种方案

一、方案(原理见第二部分)1、简单粗暴的方法,不需要知道是不是iphonex,有safe area就空出来。padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */2、多媒体查询/* iPhone X 和 iPhone XS */@media only screen

2020-08-28 00:02:04 68

原创 薛定谔的拼多多会员

事情的起因是这样的,这段时间拼多多与特斯拉大战的讨论如火如荼,于是怀着见识下牛逼的百亿补贴是怎么把并夕夕改观成拼爹爹的下载了拼多多。看着确实低于市场价的百亿补贴,心里暗暗后悔自己的mate30买早了。拼多多上比我买便宜1000了。而且还是品牌方入驻正品保障,不说了,我打算此后抛弃淘宝奔向拼多多。此时看到拼多多在推送会员,说让我免费体验一个月。白嫖我能不要嘛,我欣然接受。然后看到拼多多又拿出了裂变的老套路,说送三个人会员,我就能得到6个月的会员。我觉得白嫖的好事确实应该带上兄弟就发了。然后奇妙的事情发生了

2020-08-24 03:01:53 107

原创 数字图像(上)

前言数字图像是一个比较大的话题,其中有许多我们常听说却并不十分清楚的概念,也有之前并不曾深入了解的细节原理。本文会尽量详细的串起这些知识点。其中的一些术语及容易混淆的概念会专门在基本概念中描述。都属于主题的拓展,如果觉得有些点很难区分不妨先放下读完全文再去看或许就能理解。也可能看到一些概念觉得新奇那可以在参考文档里找到资料去深入了解。总的来说全文的每个模块会尽量都描述详细而不依赖前置条件,所以可以挑选自己需要的部分观看。当然如果能从头读到尾或许会有更多收获。图像存储数字化图像数据有两种存储方式:位图存

2020-07-23 19:13:06 41

原创 滑动穿透终极解决方案

问题描述滑动穿透:浮层上的触控会导致底层元素滑动。问题探究:1、给body加overflow:hidden,pc端可以锁scroll,移动端无效pc端可以直接overflow:hidden解决2、给body加overflow:hidden及绝对定位,背景会定位到顶部,如果是单屏页面可以,长页面不适用如果弹出浮层时背景本来就没有滚动距离,可以overflow:hidden加绝对定位解决...

2019-10-21 11:01:02 1310

原创 从渲染原理谈前端性能优化

前言合格的开发者知道怎么做,而优秀的开发者知道为什么这么做。这句话来自《web性能权威指南》,我一直很喜欢,而本文尝试从浏览器渲染原理探讨如何进行性能提升。全文将从网络通信以及页面渲染两个过程去探讨浏览器的行为及在此过程中我们可以针对那些点进行优化,有些的不足之处还请各位不吝雅正。一、关于浏览器渲染的容易误解点总结关于浏览器渲染机制已经是老生常谈,而且网上现有资料中有非常多的优秀资料对...

2019-06-03 17:56:26 785

翻译 单元测试断言库:chai.js中文文档

原文档地址:https://www.chaijs.com/api/bdd/BDD风格包含expect和should。它们以相同的链式结构进行断言,它们的不同之处在于初始的断言构造。可以查看风格指南来进行比较。API参照:链式语言结构使用以下的链式供给(getter)来提高你断言的可阅读性啊。Chainstobebeenisthatwhichandhashavewi...

2019-02-15 14:31:49 3782

原创 基于Vue-cli的多目录项目配置

直接用vue-cli创建的项目可以创建一个单页面应用,开发环境和生产环境都是以一个单独的项目为目录的。在写一些有共性的模块时需要将所有组件放在同一个大的框架下的同时又需要每个模块可以进行单独的启动和打包。此时就需要进行个性化配置。

2018-09-28 02:56:55 3071 1

原创 移动端手势封装

目录概要手势封装的兼容问题与解决方案TouchEvent事件详解(译自W3C)手势封装的实现一、手势封装的兼容实验在微信浏览器及手机自带浏览器当中的自带手势会影响事件的触发微信的自带手势包括但不仅限于页面顶部下拉刷新长按弹出菜单上下滑动翻动页面双指缩放在有默认手势时可能出现的问题有无法正常触发touchend事件,使用小米、vivo、oppo、苹果进行实验,实验结果...

2018-09-18 17:22:07 463

原创 前端学习笔记Js篇(不定期更新)

注:没有标注书名只有页数的参考来源均指代《Javascript权威指南第六版》,其他参考均有书名或网址标注。 一、易产生误区知识点记录 1、[] == ! [] 所有对象都转化为true(P52),数组是对象,因此空数组[]转化为布尔值为真。而空数组转化为数字时为0.因此左式Number([])=0。 “!”运算符首先将操作数转换为布尔值,然后再对布尔值求反(P81),因此右式为!Bool...

2018-01-15 13:54:36 521

原创 vue路由信息对象属性分析-hash

关于路由信息对象的hash属性定义如下 看了文档以后自己输出路由信息对象 url:localhost:8080/#/2输出路由信息对象和location.hash此时路由信息对象的hash是空串,也就是说没有hash值,按照我的理解觉得r档期路由的hash应该也是#/2 在多方查找资料无果后决定自己去查vue源码。源码如下: vue-router.jsfunction c

2018-01-13 01:38:34 2195 2

原创 Vue的路由动态重定向和导航守卫

根据vue官方文档,对于重定向有详细的示例,但是关于使用方法动态重定向的描述却不多,重定向部分的描述如下:重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})重定向的目标也可以是一个命

2018-01-10 16:03:43 10015 1

原创 从浏览器渲染原理谈性能优化(2017版)

前言  以前学习浏览器的渲染机制时,对浏览器的渲染概念就是html解析成DOM,css形成样式规则。两者共同构建渲染树。浏览器根据渲染树的样式进行布局和渲染。后来再次回过头去看这些概念时发现很多知识点都是非常深的。   比如浏览器如何解析CSS形成样式树,那么浏览器究竟如何解析?了解这些并非没有意义,比如当了解css解析是自右向左后,就知道在写css样式时应该避免嵌套。了解解析顺序就知道如何

2017-12-01 21:22:20 11007

翻译 Vue-cli中的静态资源管理(src/assets和static/的区别)

你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢?资源打包为了回答这个问题,我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和backgrou

2017-11-07 16:09:32 33838 1

原创 如何实现邮箱验证

实现邮箱验证 首先需要借助nodemailer往注册邮箱发送邮件。而通过nodemailer代理发送需要先获取授权码 具体代码实现如下var nodemailer = require('nodemailer');var send = function(user){ var transporter = nodemailer.createTransport({ service: 'qq'

2017-09-08 12:52:35 12508 3

原创 轮播图实现原理

具体代码和思路如下: 效果图: 思路: 常见轮播图的功能就是: ①图片自动轮换 ②点击左右两侧的箭头切换 ③正下方的小点显示正在播放第几张 实现思路: ①设置一个container容器用来显示图片。container大小为图片大小。将该container居中显示,且position设置为relative。这样可以使它的子元素相对于它进行绝对定位 ②设置一个容器box用来装图片。

2017-08-26 22:57:59 1047

原创 八大排序实践篇

排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。常见的内部排序算法有:插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。 其中关于时间复杂度、稳定性等对比如下图: 当n较大,则应采用时间复杂度为O(nlog2n)的排序方法:快速排序、堆排序或归并排序序。

2017-08-09 02:23:10 186

原创 从零开始学Vue(零)开天辟地

一、什么是Vue Vue:是一套构建用户界面的渐进式框架。 那么该如何理解渐进式框架呢?这里的框架是指MVVM框架,关于渐进式是指与其他框架想比更少的主张。也就是足够的optional,但并不主张很多required。当什么时候我们需要用到vue? 当我们更加关注Model的变化时,就可以让vue框架去自动更新DOM的状态,从而把开发者从操作DOM的繁琐步骤中解脱出来! MVVM(Model-

2017-08-06 21:51:36 525

原创 基于前后端分离的身份认证方式——JWT

目录: 一、什么是JWT 二、我们为什么要使用JWT(与传统的session认证有何区别) 三、如何使用JWT 四、JWT的构成及原理 五、JWT加解密实例一、什么是JWT JWT——Json web token 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准,可实现无状态、分布式的Web应用授权。二、我们为什么需要JWT? 首先,当前后端分离时我们会因为同源策略

2017-08-05 22:52:34 32509 1

原创 跨域方案浅析

要说跨域首先了解同源策略: 同源策略,它是由Netscape提出的一个著名的安全策略。 现在所有支持JavaScript 的浏览器都会使用这个策略。 所谓同源是指,域名,协议,端口相同。实现跨域通常用以下三种方法JSONP:网页通过添加一个script元素,向服务器请求JSON数据,这种做法不受同源政策限制WebSocket : ws://(非加密)和wss://(加密)作为协议

2017-08-02 22:14:28 1603

原创 详解浏览器渲染页面的过程

当浏览器拿到一个网页是如何进行渲染的呢? 首先浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此,我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。 下面来看浏览器绘制DOM 树的过程:HTML解析器输出的树是由DOM元素和属性节点组成的,它是HTML文档的对象化描述,也是HTML元素与外界(如Javascript)的接口。DOM与标签有着几乎一一对应的关系。 可以看到DOM

2017-07-30 13:46:30 1678

原创 Node下的数据库操作——Sequelize

Async/Await应该是目前最简单的异步方案了,这里我们将使用它进行数据库操作。先来说一下它的基本规则: async 表示这是一个async函数,await只能用在这个函数里面。 await 表示在这里等待promise返回结果了,再继续执行。 await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)这里我们选择No

2017-07-26 13:42:48 4467

原创 如何优雅的记录编程中遇到的问题

一篇持续更新的干货贴♪(^∀^●)ノシ **1. 解决div中文字和图片水平对齐问题**当div同时出现img和span,会出现图片高于文字的现象,用以下三种方法可以解决这个问题。1、第一种方法是使用vertical-align: middle首先设置图片和文字的vertical-align: middle这个时候要注意,如果图片大小和文字大小不一样,比如20px的图片和16px的字,一定要设置文字的l

2017-07-17 01:00:19 495

原创 从CSS理解LESS

首先要知道LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之! Less中文网站上这样介绍到:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。那么与css相比它到

2017-07-12 00:49:10 371

原创 详解git fetch与git pull的区别

git fetch和git pull都可以将远端仓库更新至本地那么他们之间有什么区别呢?想要弄清楚这个问题有有几个概念不得不提。FETCH_HEAD: 是一个版本链接,记录在本地的一个文件中,指向着目前已经从远程仓库取下来的分支的末端版本。 commit-id:在每次本地工作完成后,都会做一个git commit 操作来保存当前工作到本地的repo, 此时会产生一个commit-id,这是一个能

2017-07-11 00:31:15 177085 15

原创 如何理解v-model的实质为语法糖

vue的v-model为表单的完成提供了极大的便利,可以进行数据绑定,例如将input框的值和span值绑定,只要重新输入显示值会立即更改。下面我们来分析这一命令是如何实现的。在官方文档中解释这一名令实际仅是一个语法糖。那么首先我们来看看语法糖的概念: 语法糖:指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减...

2017-07-09 00:49:55 13253

原创 MiniSNS-代码规范

JS代码规范 1注释 代码注释需要说明“函数功能”、“入口参数”、“返回值”2 类型、字段、属性、方法、事件的命名统一使用英文。如果实在找不到合适描述可以使用中文但必须是全拼。使用中文是不符合要求的。 命名规范统一使用驼峰法(函数名中的每一个逻辑断点都有一个大写字母来标记)。并且所有类型、方法、参数、变量的命名不得使用缩写,包括大家熟知的缩写,例如msg。 3、 使用Tab作为缩进,并设置缩

2017-06-29 12:45:30 222

原创 浅析RESTful风格的API

要说RESTful首先来说说REST – REpresentational State Transfer (表述性状态传递) 表述性状态转移是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是,REST是设计风格而不是标准。以上的概念大概是许多关于RESTful中都会出现的定义概念。那么什么是表述性状态转移呢?首先,之所以晦涩是因为前面主语被去掉了

2017-06-29 01:24:12 1403 1

原创 盒模型再回顾:外边距折叠与怪异盒模型

一、外边距折叠:指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。1、折叠的结果 ①毗邻兄弟元素参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。参与折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。参与折叠的 margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后,

2016-08-05 15:01:23 913

原创 浅析BFC及其作用

一、什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不

2016-08-05 12:24:17 22458

原创 网页布局

一、新式布局案例1、垂直分割布局2、块状分割布局3、单屏布局二、网页布局的结构类型 T型布局 这是一个形象的说法,是指页面的定不是“网站标志+广告条”,左面是主菜单,右面是主要内容。这种布局的优点是页面结构清晰、主次分明,是初学者最容易上手的布局方法;缺点是页面呆板,如果不注意细节上的色彩,很容易让人“看之乏味”。“同”字形布局 所谓“同”字形结构,就是整个页面布局类似“同”字,页面顶部是主

2016-07-30 23:37:05 4259 1

原创 浅谈扁平化设计

扁平化设计风格带给受众的是一种干净、简洁的设计情绪。这种设计风格现在已经得到了大量的应用。那么什么是扁平化设计呢?扁平化设计是指放弃渐变、阴影、高光等拟真视觉效果,从而更加简单直接的将信息展示出来。一、扁平化设计的五大特点 1、拒绝特效 扁平化设计概念最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落,没有任何羽化、渐变

2016-07-29 23:20:11 5824

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

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