云之彼端的博客

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。Header和body内容足够多，超过屏幕的显示时，Footer随着文档流布局显示在最下方，这样的布局被称做sticky footer布局。scrollTop 是这个元素的内容顶部到它的视口可见内容（的顶部）的距离的度量。

各个组件库中会有多个组件，多个说明文档。我们需要在config.js中对侧边栏进行配置，每个组件库都需要对应的配置且每个组件库的配置也会有所不同，新增一个组件文档就需要改一下配置，维护麻烦。可不可以自动生成侧边栏？利用node的fs递归去获取文档的目录结构，根据获取到的目录结构生成对应的侧边栏结构（去除掉不该生成目录的文件或文件夹），则新增一个组件文档则会自动在侧边栏生成对应项。

一定要做好技术选型，好的技术方案可以减少很多额外的开发工作。在做公共组件开发或框架设计的时候，要具备灵活性，减少后期的维护工作。一个好的组件不光是组件本身，简单易懂的说明文档也必不可少。众人拾柴火焰高，丰富前端开发文档平台需要大家一起努力。自动发布可视化文档编写。

什么是数据MockMock:模拟的;模仿的;虚假的;不诚实的数据Mock就是数据的模拟，我们通过一些技术手段对真实的数据进行模拟，通过这些假数据来模拟出真实的场景。为什么要数据Mock如上图所示，这是一个需求开发经历的过程。在现在前后端分离的项目里，前后端开发是一个并行的过程，在前端开发页面时页面的数据后端还未给出，此时前端就需要做一些假数据，这个就是Mock数据。有人会问可不可以不用Mock数据？答案是可以，以下情况可以不用数据Mock:如果你和你的后端心意相通，你想即他想。后端接口仿佛

最近入职了新公司，接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化，把经验分享出来，注意本分享只针对打包大小上做的优化。打包分析vue cli已经集成了打包分析可直接使用，在package.json中script中加入"report": "vue-cli-service build --report"，执行npm run report打包会生成report.html文件，直接在浏览器打开可查看各个包的大小，对其进行针对性分析，优化。如下图。打包优化1.减少无用库的引用因为该vue项目是

H5 离线包方案webview加载优化接口预加载 页面数据localstore缓存

HTTP扫盲什么是HTTP协议超文本传输协议（Hyper Text Transfer Protocol），即服务器和客户端之间通过应答请求模式传输超文本内容的一种协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）的应用层协议。HTTP的特点1.无状态无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后，服务器根据请求，会给我们发送数据过来，但是，发送完，不会记录任何信息。.

正所谓纸上得来终觉浅，绝知此事要躬行。我们看了vue的响应式实现源码，大致了解了vue的实现思路，那这一节我们就参考vue的实现写一个简易版的vue，我们命名为Lue。上一节我们说过vue响应式原理的核心实现是三个部分，分别是Observer，Dep和Watcher。那下面我就针对这三个部分分别做一个简单的实现。Observer对传入的数据进行数据劫持。这里只简单考虑是对象的场景，对数组等复杂...

观察者模式观察者模式（又被称为发布-订阅（Publish/Subscribe）模式，属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。vue的响应式原理采用的就是观察者设计模式。下面是观察者模式在vue中的运用解析。图片来源：https://blog.csdn.net/g...

引言对于vue如何实现双向数据绑定的原理，现在大部分同学都能快速说出是利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应，vue3.0利用的是Proxy。好像似是而非懂了，但问到是如何劫持，如何响应的又懵懵懂懂说不出所以然。希望通过我的分享能帮助大家更加深刻的理解vue的实现原理，更好的在工作中运用好vue。本次分享的内...

为什么要使用骨架屏在针对SPA应用进行首屏优化的时候，我们是尽可能地减少白屏时间，使首屏内容尽早的展现出来，可因为SPA应用的特性用JS绘制dom，在js未加载完成时dom不会被绘制出来，所以虽然白屏时间可以通过减少http请求，压缩请求体积，懒加载等各种方法来缩短，但根本上是无法清除的。短暂的白屏会被用户不好的体验，常用的做法可以在内容未加载出来前添加一个loading的动画，今天介绍的骨架屏...

近期同事离职，接手之前他的项目，该项目是用WEEX写的。遇到个紧急需求，来不及去熟悉WEEX文档就匆匆开发，开发过程中遇到了很多坑，在这边进行记录，希望对不熟悉WEEX开发的小伙伴们能有所帮助，少走点弯路。什么是WeexWeex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用...

博客地址这篇博文主要记录日常开发或者收集到的一些常见前端问题和相应解决方案。1. 在多个行内元素排成一行时，元素之前存在间隔原因分析：换行符、tab（制表符）、空格产生间隙解决方案：font-size设为0元素写成一行2. a便签下的img有padding5px的效果解决方案：img的display设置为block3.水平居中跳动的问题原因分析：滑动块导致解决方案：...

博客地址针对网站中的小图标不仅有精灵图的解决方案，现在比较流行的还有字体图标。通过自定义字体字符代替图片实现一样的效果。原理计算机操作系统里面每个字符都有一个unicode编码,根据不同的编码浏览器会自动帮你找到对应的图形去渲染。而字体文件的作用是规定某个字符应该用什么形状来显示。unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字...

一、sprite精灵图是什么在网页开发过程中，在网页中经常会用到一些小图标，虽然是小图标但是每个小图标都会发起一个http请求。如果整个网站使用很多这种小图标，那就会产生很多http请求。这个无疑会增加网站的负担，降低网站的性能。CSS sprite技术的出现解决了这个问题，通过将很多个这种小图标融合到一张大的图片中，再通过css的background-image,background- rep...

[原文地址] (http://www.wellppy.com/2019/08/09/图片懒加载/)背景在当前网站图片资源占比越来越重，特别是电商这类网站引入了大量的图片资源增加了网站加载的负担。大量的图片资源请求，会导致网站的加载变慢，变卡，导致首屏时间变长，甚至崩溃，影用户体验。针对同一网页中有许多图片的场景，有图片懒加载的优化方案。原理在一个网站中，网页的长度会远远大于浏览器的高度。而...

原因首先我们为什么要清除？在一个父元素内如果遇到某个浮动元素，浮动的元素会脱离文档流，所以会造成父元素的高度会发生塌陷。如下图所示。这显然不是我们想要的效果，所以这个时候就需要我们清楚浮动。解决方案添加空块级元素（不推荐）这个方法清除浮动比较简单也比较好理解，在浮动元素的后面添加一个空块元素，给空的块元素添加clear属性的式样，添加的空元素必须是块级元素，不能是行内元素或行内块元素。...

BFC是什么？BFC(Block formatting context)翻译为”块级格式化上下文”。光看这个翻译可能大多数都是一头雾水，在了解BFC，我们先了解“BFC”中的“FC”(formatting context)格式上下文。Formatting Context指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。而BFC就是在FC前面加...

背景当前各种网站图片的大量使用很大程度上丰富了网站内容，方便了人们阅读，但与之而来的大量图片的使用，在网站加载时增加了负担，如果不能很好的及时有效的加载这些图片，会造成图片展示不全或不展示等一系列用户体验不好的问题。从而会降低用户对整体网站的体验度。进而针对图片的优化，有很多的解决方案。这篇主要讨论的是图片预加载方案。“预加载”顾名思义就是事先加载，它预判用户可能的操作，事先加载好可能浏览的图...

概述   Markdown 语法的目标是：成为一种适用于网络的书写语言。Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来， HTML 已经很容易写了。Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，...