算法与数据结构笔记1-排序篇

1. 第一节 1.1 时间复杂度 常数时间的操作:一个操作如果和数据量没有关系,每次都是固定时间内完成的操作,叫做常数操作。 时间复杂度为一个算法流程中,常数操作数量的指标。常用O(读作bigO)来表示。具体来说,在常数操作数量的表达式中,只要高阶项,不要低阶项,也不要高阶项的系数,剩下的部分如果记为f(N),那么时间复杂度为O(f(N))。 评价一个算法流程的好坏,先看时间复杂度的指标,然后再分析不同数据样本下的实际运行时间,也就是常数项时间。 1.2 冒泡排序 实现代码: 动画演示:

  • EvanBell
    EvanBell
2 min read
CSS

CSS进阶套路笔记4 - 动态REM

1. 什么是 REM 浏览器默认字体大小为16px REM就是 root em即基于根(html)元素字体大小的em单位 rem和em的区别?没什么关系 1em = 本身元素的font-size(可以这样理解,不过不准确) 1rem = 根元素的font-size的大小 2. 动态 REM 方案 由于手机屏幕众多导致的尺寸不同的问题,我们需要一种自适应方案。 自适应方案可以用百分比布局 缺点:高度不能和宽度配合。 rem方案是以屏幕宽为基准的方案,通过js动态获取屏幕的宽度,从而和rem产生联系。 var pageWidth = window.innnerWidth

  • EvanBell
    EvanBell
2 min read
CSS

CSS进阶套路笔记3 - BFC、IFC

BFC 块级格式化上下文 1. BFC概念描述 1.1 CSS规范中对 BFC 的描述 9.4.1 块格式化上下文 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文 在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并 在一个块格式化上下文中,每个盒的left外边(left outer edge)挨着包含块的left边(对于从右向左的格式化,right边挨着)

  • EvanBell
    EvanBell
4 min read
CSS

CSS进阶套路笔记2 - Flex布局、Float布局、Grid布局

一、Flex布局 1. flex之前的布局方式 Nоrmаl flоw (正常流,也叫文档流) float + clear position relative + absolute display inline-block 负 margin 2. flex布局简单概括 块级布局侧重垂直方向、行内布局侧重水平方向,flex 布局是与方向无关的 flex布局可以实现空间自动分配、自动对齐(flexible:弹性、灵活) flex适用于简单的线性布局,更复杂的布局要交给grid布局(还没发布) 3. flex

  • EvanBell
    EvanBell
3 min read
CSS

CSS进阶套路笔记1 - 宽高、堆叠上下文、ICON

第一节 宽度与高度 1. 文档流(Normal Flow) 内联元素的宽高 块级元素内如果只有内联元素 ,则块级元素的高度就是内联元素的行高 不同字体的内置行高不同,如Pinfang SC的行高为1.4,Tahoma的为1.2 块级元素的宽高 水平居中 垂直居中 文字溢出省略(多行) 2. 盒模型 1.一比一的 div 2.outline 3.border 调试大法 // 1-1 内联元素文字两端对齐 span

  • EvanBell
    EvanBell
6 min read
HTML

JavaScript面试必考系列之DOM篇

前言:尽管现在有很多优秀的框架,大大简化了我们的DOM操作,但是我们仍然要学好DOM知识来写原生JS,从根本上去理解,才更能在解决问题时举重若轻。 1.什么是DOM D(document)O(object)M(model) 文档对象模型。 DOM(文档对象模型)是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义一种方式可以使从程序中对该结构进行访问,从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。 上述说法是MDN的解释,太官方,我们来换种说法来解释。 DOM就是一种想象的树形结构,它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(

  • EvanBell
    EvanBell
15 min read
JavaScript

使用ES6实现一个简单的jQuery API

jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。 使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。 接下来通过下面这些最常见的jQuery操作,利用ES6来实现一个jQuery的API: var $div = $('div') $div.addClass('red') // 可将所有 div 的 class 添加一个 red $div.setText('hi') // 可将所有 div 的 textContent 变为

  • EvanBell
    EvanBell
2 min read
JavaScript

JavaScript面试必考系列之函数篇(待补充)

1. 函数的五种声明方式 以下是声明函数的五种方式,有常见的和不常见的,有ES3/5和ES6多种方式,同时还有几道很坑爹的面试题。 第一种具名函数: function fn (input1,input2) { return undefined; } 第二种匿名函数: var fn = function (input1,input2) { return undefined; } 第三种是面试中常考的,且很少人知道的写法,即具名和匿名函数的结合体: // 虽然有fn2,但是不能直接调用和控制台输出fn2,只能通过fn1来进行访问函数体 var fn1 = function fn2(input1,

  • EvanBell
    EvanBell
2 min read
JavaScript

JavaScript数据类型转换

JavaScript是一门动态类型的语言,也就是说类型可以在任何时候进行转换,而转换方式可以分为强制和自动转换,或者叫做显式和隐式的转换。 1. 强制类型转换 强制转换主要指使用Number()、String()和Boolean()三个函数,手动将各种类型的值,分别转换成数字、字符串或者布尔值。 (1)数值型 使用Number()函数,可以将任意类型的值转化成数值,原始类型值的转换规则: 数值:转换后还是原来的值 字符串:如果可以被解析为数值,则转换为相应的数值 字符串:如果不可以被解析为数值,返回 NaN 空字符串转为0 布尔值:true 转成 1,

  • EvanBell
    EvanBell
4 min read
JavaScript

JavaScript数据类型重点简记

在JavaScript中,可以将数据类型概括为这七种类型: 数值(number):整数和小数(比如1和3.14) 字符串(string):文本(比如Hello World)。 布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假) undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值 null:表示空值,即此处的值为空。 对象(object):各种值组成的集合,Function、Array都属于对象。

  • EvanBell
    EvanBell
4 min read
算法

常见排序算法总结(待补充)

1. 冒泡排序 冒泡排序是指所有数字两两一比较,找最大的交换到右侧,每一轮将交换得到最大的数字放最右侧,N轮后得出从小到大的数字直到最后一个数字。 2. 选择排序 选择排序是指每一轮找最大的和最小的交换位置,小的在前面,大的在后面,直到数字只剩下一个完成选择排序。 3. 插入排序 - 扑克牌算法 逐个将数字按顺序放入数组,第一个数不排序,第二个和第一个比大的放后面,小的放前面,第三个先和第二个比,再和第一个比,后面以此类推,进行插入排序。 4. 桶排序 - 强迫症收扑克牌法 有一堆同类型的数字打乱,首先依次放入,同类型的进行合并,然后不同类型的进行排序,最后排序完成

  • EvanBell
    EvanBell
1 min read
CSS

CSS常见布局套路整理

以下是最近整理的一些常见的布局套路 1. 左右布局 左右布局是除了流体上下布局以外最常见的布局,一般可以使用较为简单和兼容性很好的float布局来实现,但是要注意的是,浮动元素的父级元素一定要清除浮动带来的影响: .clearfix::after { content: ''; display: block; clear: both; } .left { float: left; } .right { float: left; } 2. 左中右布局 比较常见的左中右布局也可以使用float来实现: .clearfix::after { content: ''; display: block; clear: both; } .left

  • EvanBell
    EvanBell
4 min read
HTTP

HTTP请求响应体结构解析

1. HTTP请求 首先说明下HTTP请求的格式,如下图所示: 通常想要服务器知道你请求的内容,至少要具备三部分,最多需要四部分。 第一部分请求方法、请求URI和协议版本 第二部分以键值对的形式存放的主机地址,请求类型,请求长度等首部字段 第三部分以空行(\n)区分内容实体和首部字段 第四部分请求的内容实体,可有可无 常见的请求首部资源有: Host:请求的主机名,允许多个域名同处一个IP地址,即虚拟主机 User-Agent:发送请求的浏览器类型、操作系统等信息 Accept:客户端可识别的内容类型列表,用于指定客户端接收那些类型的信息 Accept-Encoding:客户端可识别的数据编码 Accept-Language:表示浏览器所支持的语言类型 Connection:

  • EvanBell
    EvanBell
7 min read

命令行速查神器Explainshell

最近学命令行发现一个很好的网站explainshell.com,可以输入任何Unix命令和选项的任意组合,会自动帮忙解析每个命令和选项的英文含义。以下以这几个命令为例: 1. ls 列出目录内容 常用选项 ls -a 查看所有文件和文件夹,且包括.开头的文件或文件夹 ls -l 查看文件文件夹的格式化详细信息,例如类型、权限、时间、大小等 ls -h 人性化查看列表详情,需要配合-l选项使用 2. cat 查看文件并命令行上打印 3. mv 移动(重命名)文件

  • EvanBell
    EvanBell
2 min read

Git基础命令小记

1 git init 这个命令用来初始化仓库。 该命令将创建一个名为 .git 的子目录,这个子目录含有你初始化的 Git 仓库中所有的必须文件,这些文件是 Git 仓库的骨干。 2 git add 在项目中文件进行过修改以后需要将文件存放在暂存区时,就需要用到这个命令。 这个命令可以单个文件或文件夹提交,也可以用git add .来提交当前目录下所有变更的文件。 3 git commit -v 这个命令在提交所有暂存区文件到本地仓库时,可以更详细的对修改了哪些内容的提示,用 -v 选项,这会将你所做的改变的 diff

  • EvanBell
    EvanBell
2 min read