Chorer的博客

问题最近跟着慕课网上的课程在做一个网易云音乐小程序，遇到了一个进度条回跳的 bug，这里记录一下踩坑和解决的过程。具体情况见下图：预期行为：在拖拽进度条之后，直接到达拖拽之后的位置实际行为：在拖拽进度条之后，会首先回跳到拖拽之前的位置，然后再跳到拖拽之后的位置。模拟调试的 bug代码逻辑无论如何，先来看一下代码的逻辑：页面结构如下，左右两个 text 显示时间就不说了，主要是中间的进度条。这个进度条没有使用小程序原生提供的 slider 来做，而是采用 movable-area 和 mov

本文主要记录学习 Git 的过程。因为是学习笔记，可能有描述不全面或是不准确的地方，欢迎在评论区指正。本文的思维导图如下：1. Git 安装和升级安装应该不用多说了，主要讲一下升级。Linux 和 Mac 都有包管理器，升级是很方便的，关键是 windows 并没有这类东西，那么怎么升级呢？这里首先要通过 git version 查看你当前的 Git 版本是多少，如果版本：<= 2.14.1 ：不要多想，老老实实卸载旧版本，安装新版本吧。。。2.14.2 ~ 2.16.1 ：直...

在 操作系统学习笔记-1：基础概念 中，我们介绍了与操作系统相关的一些概念，在 操作系统学习笔记-2：体系结构设计和运行机制 中，我们又介绍了操作系统的结构设计和运行机制，从这篇笔记开始，我们会逐一讲解操作系统的各个基本功能。一切围绕这张图来进行：1. 关于进程1.1 进程：为了方便操作系统管理，对并发执行的各个程序加以控制和描述，引入了进程的概念。1.2 PCB：定义：之前的...

一. 操作系统的体系结构1. 传统的操作系统结构（1）无结构操作系统：早期的操作系统没有真正意义上的“结构”可言，只是大量的过程的集合，过程之间可以互相调用，导致操作系统内部复杂而混乱。（2）模块化结构操作系统：模块化结构的 OS 基于程序模块化开发的思想，按照功能划分了多个具有一定独立性和大小的模块，每个模块有自己的功能，同时互相之间能够通过接口实现交互。模块之下又有子模块，以此类...

硬件核心 => CPU软件核心 => 操作系统 （系统软件）1. 主要目标：方便性：在硬件（裸机）上跑程序很麻烦（得用机器语言）有效性：提高系统资源利用率：没有 OS 的时候，诸如 I/O 等设备常处于空闲状态，没有得到有效的利用提高系统吞吐量：合理组织工作流程，缩短程序的运行周期可扩充性：方便地增添新的功能和模块开放性：遵循世界标准规范，达到彼此兼容...

问题复现：学习 ES6 模块化的时候，写了这段代码：<script src="./aaa.js" type="module"></script><script src="./bbb.js" type="module"></script><script src="./aaa2.js" type="module"></scr...

ES6 参数默认值的问题，其实之前在这篇文章中已经有涉及，之所以再谈起这个问题，是在阅读《ES6 标准入门》时产生的一个疑惑。阮老师的代码是：var x = 1;function foo(x, y = function() { x = 2; }) { var x = 3; y(); console.log(x);}foo(); // 3x // 1怎么解释输出？...

1.伪类和伪元素的引入CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪...

比较全面的水平垂直居中方案。水平垂直居中问题大体分为两类，一类目标元素是行内元素，一类目标元素是块级元素(其中，块级元素又包括定宽高和不定宽高）。1.水平居中方案1.1 行内元素水平居中把该行内元素包裹在一个块级父元素中，之后设置父元素:.parent{ text-align:center}1.2 块级元素水平居中设置该元素：div{ width: 100px...

1.清除浮动浮动的元素会影响其兄弟元素的位置，并可能导致父元素的高度塌陷（假如父元素没设置高度），因此需要清除浮动（带来的影响）。1.1 方法常用方法有：给浮动元素的父元素一个固定高度（不推荐）给浮动元素新增一个空的 div 兄弟元素，设置 clear:both给浮动元素新增一个 <br> 兄弟元素，设置 clear 属性为 all给浮动元素的父元素新增一个 aft...

1.单列布局常见的单列布局有两种：header、content、footer等宽header、footer 等宽，content 略窄 对于第一种：给 header、content、footer 设置相同的 width 或者 max-width（显示的宽度都一样，但是前者内容过长会溢出，后者会换行），再设置 margin 达到水平居中。代码示例：<div class=...

1.比对：简单比对一下div+css布局中的inline-block和float的特点，同时附上使用inline-block之后元素之间产生空隙的解决方法。虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的:文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置i...

1.布局演变史1）初代：table 布局在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的。虽然它可以很方便地实现水平和垂直对齐，但是缺点也很明显：代码臃肿；不利于SEO；不够语义化；后期难以修改2）第二代：div+css 布局随着 Web 语义化的流行，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定...

阅读掘金小册《你不知道的 chrome 调试技巧》后做的笔记1. 快捷键：切换面板位置： ctrl + shift + D切换面板类型： ctrl + [ 向左， ctrl + ] 向右切换手机/PC模式： ctrl + shift + M切换审查元素模式/浏览器窗口： ctrl + shift + C打开命令面板：ctrl + shift + P2. 截图：ctrl ...

基本语法：fun.call(thisArg, param1, param2, ...)fun.apply(thisArg, [param1,param2,...])fun.bind(thisArg, param1, param2, ...)返回值call() 和 apply() 返回函数应该返回的值，bind() 返回一个经过硬绑定的新函数。参数介绍：第一个参数为 thisAr...

承接上文，继续补充跨域方案：postMessage、location.hash、WebSocket、Nginx 反向代理、Nodejs 中间件代理。6.postMessageHTML5 提供了 postMessage 和 onmessage 两个 api 用于在跨域站点页面之间进行通信。假设A域要向B域发送消息，那么：一方面，我们在A域页面中通过 iframe 引入B域，之后用B域...

本篇讲解常见的几种跨域方案：JSONP、CORS、图像Ping、document.domain、window.name。开始之前，要先清楚一件事：跨域不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从 HTTPS 的域跨域访问 HTTP，比如 C...

1.AJAX 解决了什么问题？在远古时代，如果浏览器需要从服务器请求资源，其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新，客户端加载新的 HTML文档”，很显然，在这种情况下，即使只是为了更新部分数据，我们也不得不重新加载整个重绘的页面。而 AJAX 的出现解决了这个问题。AJAX 即异步 JavaScript 和 XML，它可以...

编译有五大步骤，本篇笔记将会讲解编译的第一步：词法分析。词法分析的任务是：从左往右逐个字符地扫描源程序，产生一个个的单词符号。也就是说，它会对输入的字符流进行处理，再输出单词流。执行词法分析的程序即词法分析器，或者说扫描器。1.词法分析的成果词法分析的成果就是由一系列单词符号构成的单词流。单词符号其实就是 token，一般有以下五大类：关键字：例如 while，if，int 等...

在 上一篇笔记中，我们谈到了为什么需要编译以及编译的大致流程。在继续细讲每一个流程之前，我们先通过本篇笔记对一些概念和术语加以了解。1. 前置知识：字母表和符号串1.1 字母表字母表也即符号集，用 ∑表示，它是一个包含各种符号的有穷非空集合。以汉语为例，汉语字母表就是各种汉字、数字、标点符号的集合；以英语为例，英语字母表就是各种字母、数字、标点符号的集合…那么到了编程，字母表就可能是...