前端
Chorer@公众号:漫游前端世界
这个作者很懒,什么都没留下…
展开
-
记一次小程序开发的踩坑之旅
问题最近跟着慕课网上的课程在做一个网易云音乐小程序,遇到了一个进度条回跳的 bug,这里记录一下踩坑和解决的过程。具体情况见下图:预期行为:在拖拽进度条之后,直接到达拖拽之后的位置实际行为:在拖拽进度条之后,会首先回跳到拖拽之前的位置,然后再跳到拖拽之后的位置。模拟调试的 bug代码逻辑无论如何,先来看一下代码的逻辑:页面结构如下,左右两个 text 显示时间就不说了,主要是中间的进度条。这个进度条没有使用小程序原生提供的 slider 来做,而是采用 movable-area 和 mov原创 2020-07-16 12:45:06 · 182 阅读 · 0 评论 -
关于 Git 的那些事
本文主要记录学习 Git 的过程。因为是学习笔记,可能有描述不全面或是不准确的地方,欢迎在评论区指正。本文的思维导图如下:1. Git 安装和升级安装应该不用多说了,主要讲一下升级。Linux 和 Mac 都有包管理器,升级是很方便的,关键是 windows 并没有这类东西,那么怎么升级呢?这里首先要通过 git version 查看你当前的 Git 版本是多少,如果版本:<= 2.14.1 :不要多想,老老实实卸载旧版本,安装新版本吧。。。2.14.2 ~ 2.16.1 :直...原创 2020-05-31 19:22:41 · 532 阅读 · 0 评论 -
file 协议导致的跨域问题以及解决方案
问题复现:学习 ES6 模块化的时候,写了这段代码:<script src="./aaa.js" type="module"></script><script src="./bbb.js" type="module"></script><script src="./aaa2.js" type="module"></scr...原创 2020-04-12 13:13:18 · 3029 阅读 · 0 评论 -
ES6 参数作用域
ES6 参数默认值的问题,其实之前在这篇文章中已经有涉及,之所以再谈起这个问题,是在阅读《ES6 标准入门》时产生的一个疑惑。阮老师的代码是:var x = 1;function foo(x, y = function() { x = 2; }) { var x = 3; y(); console.log(x);}foo(); // 3x // 1怎么解释输出?...原创 2020-04-12 13:12:48 · 155 阅读 · 0 评论 -
CSS 基础系列:伪类和伪元素
1.伪类和伪元素的引入CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪...原创 2020-04-12 13:12:03 · 239 阅读 · 0 评论 -
CSS 基础系列:水平垂直居中方案
比较全面的水平垂直居中方案。水平垂直居中问题大体分为两类,一类目标元素是行内元素,一类目标元素是块级元素(其中,块级元素又包括定宽高和不定宽高)。1.水平居中方案1.1 行内元素水平居中把该行内元素包裹在一个块级父元素中,之后设置父元素:.parent{ text-align:center}1.2 块级元素水平居中设置该元素:div{ width: 100px...原创 2020-04-12 13:10:48 · 234 阅读 · 0 评论 -
CSS 基础系列:从浮动和margin塌陷谈BFC
1.清除浮动浮动的元素会影响其兄弟元素的位置,并可能导致父元素的高度塌陷(假如父元素没设置高度),因此需要清除浮动(带来的影响)。1.1 方法常用方法有:给浮动元素的父元素一个固定高度(不推荐)给浮动元素新增一个空的 div 兄弟元素,设置 clear:both给浮动元素新增一个 <br> 兄弟元素,设置 clear 属性为 all给浮动元素的父元素新增一个 aft...原创 2020-04-12 13:10:11 · 214 阅读 · 0 评论 -
CSS 基础系列:常见布局方式
1.单列布局常见的单列布局有两种:header、content、footer等宽header、footer 等宽,content 略窄 对于第一种:给 header、content、footer 设置相同的 width 或者 max-width(显示的宽度都一样,但是前者内容过长会溢出,后者会换行),再设置 margin 达到水平居中。代码示例:<div class=...原创 2020-04-12 13:09:43 · 215 阅读 · 0 评论 -
CSS 基础系列:inline-block和float
1.比对:简单比对一下div+css布局中的inline-block和float的特点,同时附上使用inline-block之后元素之间产生空隙的解决方法。虽然设置浮动跟设置inline-block有些特征类似,但两者的区别还是非常明显的:文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置i...原创 2020-04-12 13:08:52 · 544 阅读 · 0 评论 -
CSS 基础系列:flex 布局
1.布局演变史1)初代:table 布局在网页布局没有进入 CSS 的时代,排版几乎是通过 table 元素实现的。虽然它可以很方便地实现水平和垂直对齐,但是缺点也很明显:代码臃肿;不利于SEO;不够语义化;后期难以修改2)第二代:div+css 布局随着 Web 语义化的流行,CSS 标准为我们提供了 3 种布局方式:标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定...原创 2020-04-12 13:08:26 · 577 阅读 · 0 评论 -
Chrome 调试技巧简记
阅读掘金小册《你不知道的 chrome 调试技巧》后做的笔记1. 快捷键:切换面板位置: ctrl + shift + D切换面板类型: ctrl + [ 向左, ctrl + ] 向右切换手机/PC模式: ctrl + shift + M切换审查元素模式/浏览器窗口: ctrl + shift + C打开命令面板:ctrl + shift + P2. 截图:ctrl ...原创 2020-04-11 23:36:07 · 435 阅读 · 0 评论 -
call() 和 apply() 的相关介绍和应用场景
基本语法:fun.call(thisArg, param1, param2, ...)fun.apply(thisArg, [param1,param2,...])fun.bind(thisArg, param1, param2, ...)返回值call() 和 apply() 返回函数应该返回的值,bind() 返回一个经过硬绑定的新函数。参数介绍:第一个参数为 thisAr...原创 2020-04-11 23:35:21 · 511 阅读 · 0 评论 -
AJAX与跨域通信(三)
承接上文,继续补充跨域方案:postMessage、location.hash、WebSocket、Nginx 反向代理、Nodejs 中间件代理。6.postMessageHTML5 提供了 postMessage 和 onmessage 两个 api 用于在跨域站点页面之间进行通信。假设A域要向B域发送消息,那么:一方面,我们在A域页面中通过 iframe 引入B域,之后用B域...原创 2020-04-11 23:34:28 · 122 阅读 · 0 评论 -
AJAX与跨域通信(二)
本篇讲解常见的几种跨域方案:JSONP、CORS、图像Ping、document.domain、window.name。开始之前,要先清楚一件事:跨域不一定是浏览器限制了发起跨站请求,而也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理,请求是发送到了后端服务器无论是否跨域!注意:有些浏览器不允许从 HTTPS 的域跨域访问 HTTP,比如 C...原创 2020-04-11 23:33:43 · 207 阅读 · 0 评论 -
AJAX与跨域通信(一)
1.AJAX 解决了什么问题?在远古时代,如果浏览器需要从服务器请求资源,其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新,客户端加载新的 HTML文档”,很显然,在这种情况下,即使只是为了更新部分数据,我们也不得不重新加载整个重绘的页面。而 AJAX 的出现解决了这个问题。AJAX 即异步 JavaScript 和 XML,它可以...原创 2020-04-11 23:32:27 · 196 阅读 · 0 评论