- 博客(23)
- 收藏
- 关注
RSS订阅原创 记一次小程序开发的踩坑之旅
问题最近跟着慕课网上的课程在做一个网易云音乐小程序，遇到了一个进度条回跳的 bug，这里记录一下踩坑和解决的过程。具体情况见下图：预期行为：在拖拽进度条之后，直接到达拖拽之后的位置实际行为：在拖拽进度条之后，会首先回跳到拖拽之前的位置，然后再跳到拖拽之后的位置。模拟调试的 bug代码逻辑无论如何，先来看一下代码的逻辑：页面结构如下，左右两个 text 显示时间就不说了，主要是中间的进度条。这个进度条没有使用小程序原生提供的 slider 来做，而是采用 movable-area 和 mov
2020-07-16 12:45:06
215
原创 关于 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
589
原创 操作系统学习笔记-3：初识进程和进程控制
在 操作系统学习笔记-1：基础概念 中，我们介绍了与操作系统相关的一些概念，在 操作系统学习笔记-2：体系结构设计和运行机制 中，我们又介绍了操作系统的结构设计和运行机制，从这篇笔记开始，我们会逐一讲解操作系统的各个基本功能。一切围绕这张图来进行：1. 关于进程1.1 进程：为了方便操作系统管理，对并发执行的各个程序加以控制和描述，引入了进程的概念。1.2 PCB：定义：之前的...
2020-04-12 13:15:54
452
原创 操作系统学习笔记-2：体系结构设计和运行机制
一. 操作系统的体系结构1. 传统的操作系统结构（1）无结构操作系统：早期的操作系统没有真正意义上的“结构”可言，只是大量的过程的集合，过程之间可以互相调用，导致操作系统内部复杂而混乱。（2）模块化结构操作系统：模块化结构的 OS 基于程序模块化开发的思想，按照功能划分了多个具有一定独立性和大小的模块，每个模块有自己的功能，同时互相之间能够通过接口实现交互。模块之下又有子模块，以此类...
2020-04-12 13:15:03
811
原创 操作系统学习笔记-1：基础概念
硬件核心 => CPU软件核心 => 操作系统 （系统软件）1. 主要目标：方便性：在硬件（裸机）上跑程序很麻烦（得用机器语言）有效性：提高系统资源利用率：没有 OS 的时候，诸如 I/O 等设备常处于空闲状态，没有得到有效的利用提高系统吞吐量：合理组织工作流程，缩短程序的运行周期可扩充性：方便地增添新的功能和模块开放性：遵循世界标准规范，达到彼此兼容...
2020-04-12 13:14:09
332
原创 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
3442
原创 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
187
原创 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
278
原创 CSS 基础系列：水平垂直居中方案
比较全面的水平垂直居中方案。水平垂直居中问题大体分为两类，一类目标元素是行内元素，一类目标元素是块级元素(其中，块级元素又包括定宽高和不定宽高）。1.水平居中方案1.1 行内元素水平居中把该行内元素包裹在一个块级父元素中，之后设置父元素:.parent{ text-align:center}1.2 块级元素水平居中设置该元素：div{ width: 100px...
2020-04-12 13:10:48
272
原创 CSS 基础系列：从浮动和margin塌陷谈BFC
1.清除浮动浮动的元素会影响其兄弟元素的位置，并可能导致父元素的高度塌陷（假如父元素没设置高度），因此需要清除浮动（带来的影响）。1.1 方法常用方法有：给浮动元素的父元素一个固定高度（不推荐）给浮动元素新增一个空的 div 兄弟元素，设置 clear:both给浮动元素新增一个 <br> 兄弟元素，设置 clear 属性为 all给浮动元素的父元素新增一个 aft...
2020-04-12 13:10:11
246
原创 CSS 基础系列：常见布局方式
1.单列布局常见的单列布局有两种：header、content、footer等宽header、footer 等宽，content 略窄 对于第一种：给 header、content、footer 设置相同的 width 或者 max-width（显示的宽度都一样，但是前者内容过长会溢出，后者会换行），再设置 margin 达到水平居中。代码示例：<div class=...
2020-04-12 13:09:43
289
原创 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
602
原创 CSS 基础系列：flex 布局
1.布局演变史1）初代：table 布局在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的。虽然它可以很方便地实现水平和垂直对齐，但是缺点也很明显：代码臃肿；不利于SEO；不够语义化；后期难以修改2）第二代：div+css 布局随着 Web 语义化的流行，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定...
2020-04-12 13:08:26
624
原创 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
536
原创 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
542
原创 AJAX与跨域通信（三）
承接上文，继续补充跨域方案：postMessage、location.hash、WebSocket、Nginx 反向代理、Nodejs 中间件代理。6.postMessageHTML5 提供了 postMessage 和 onmessage 两个 api 用于在跨域站点页面之间进行通信。假设A域要向B域发送消息，那么：一方面，我们在A域页面中通过 iframe 引入B域，之后用B域...
2020-04-11 23:34:28
160
原创 AJAX与跨域通信（二）
本篇讲解常见的几种跨域方案：JSONP、CORS、图像Ping、document.domain、window.name。开始之前，要先清楚一件事：跨域不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从 HTTPS 的域跨域访问 HTTP，比如 C...
2020-04-11 23:33:43
228
原创 AJAX与跨域通信（一）
1.AJAX 解决了什么问题？在远古时代，如果浏览器需要从服务器请求资源，其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新，客户端加载新的 HTML文档”，很显然，在这种情况下，即使只是为了更新部分数据，我们也不得不重新加载整个重绘的页面。而 AJAX 的出现解决了这个问题。AJAX 即异步 JavaScript 和 XML，它可以...
2020-04-11 23:32:27
226
原创 编译原理学习笔记-3：词法分析（一）基本过程、正规式和有限自动机
编译有五大步骤，本篇笔记将会讲解编译的第一步：词法分析。词法分析的任务是：从左往右逐个字符地扫描源程序，产生一个个的单词符号。也就是说，它会对输入的字符流进行处理，再输出单词流。执行词法分析的程序即词法分析器，或者说扫描器。1.词法分析的成果词法分析的成果就是由一系列单词符号构成的单词流。单词符号其实就是 token，一般有以下五大类：关键字：例如 while，if，int 等...
2020-04-11 23:29:40
3212
原创 编译原理学习笔记-2：文法和语言
在 上一篇笔记中，我们谈到了为什么需要编译以及编译的大致流程。在继续细讲每一个流程之前，我们先通过本篇笔记对一些概念和术语加以了解。1. 前置知识：字母表和符号串1.1 字母表字母表也即符号集，用 ∑表示，它是一个包含各种符号的有穷非空集合。以汉语为例，汉语字母表就是各种汉字、数字、标点符号的集合；以英语为例，英语字母表就是各种字母、数字、标点符号的集合…那么到了编程，字母表就可能是...
2020-04-11 23:29:14
597
原创 编译原理学习笔记-1：引论
1. 翻译程序机器不能理解我们用高级语言编写的代码，所以要在程序执行前将高级语言“翻译”为机器语言。这是一个将源语言程序转化为目标语言程序的过程，它依靠翻译程序来完成。翻译程序包括：编译器：将编译型语言（C++，Go）翻译为机器语言。解释器：将解释型语言（JavaScript、Python）翻译为机器语言。编译与解释的不同：编译和解释都可以将高级语言翻译为机器语言，不同之处在于...
2020-04-11 23:27:23
279
原创 深入理解计算机系统cp2：定点数的表示和运算
在深入理解计算机系统cp1：存储单位、数制、编码中解释了字符编码，我们知道了计算机是怎么把字符转化为二进制的；本文将解释数字编码，介绍计算机如何把数字转化为二进制，以及相关的运算问题。1.定点数的表示1.1 无符号数定义：无符号数就是没有体现正负号的数（这意味着所有的无符号数实际上都是正数），整个机器字长的全部二进制位均为数值位，没有符号位。以108D为例，它对应的二进制数是 1101...
2020-04-11 23:26:39
4756
原创 深入理解计算机系统cp1：存储单位、数制、编码
1.存储单位位：即 bit，表示二进制位，要么是 0 ，要么是 1。它是计算机内部数据存储的最小单位。比如 11010100 共有8个二进制位，是一个8位二进制数。字节：即 byte，它由8个二进制位构成，即 1byte=8bit，是计算机内部计量的基本单位。一个英文字符占1个字节（8位），一个汉字占2个字节（16位）字：即word，它由若干个字节构成，是计算机内部进行数据处理和运算的...
2020-04-11 23:24:58
1053
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人