Hi.

我是小心。一名前端小学生,这里主要分享前端开发相关的内容。如需跟我讨论可点击下方 Contact 给我发信息。

Latest stories

十年学会编程

01/24/20199 Min Read — In 经验

十年学会编程 这篇文章已经有很多人翻译过了,我之所以再搞一次,首先是我觉得这文章真的很好,值得一搞再搞,其次,几乎所有的版本都漏掉了一些语句,我猜可能是英文版更新过,但是,中文版没有与时俱进,最后是我没有找到那种 一段英文,一段翻译 的版本。 Teach Yourself Programming in Ten Years Peter NorviG Why is everyone in such a…

JJS 正则实战

09/01/20181 Min Read — In JS系列

元字符 拥有特殊含义的元字符 关于 [] + -> 中括号中出现的所有字符都代表的是本身的意思 12-65 -> 这个不是 12-65 而是 1/2-6/5 三者中的一个 关于 () 分组的作用是改变默认的优先级, 例如:/^18|19$/,181、189、119、819、1819... 都符合, 而不是我们认为的 18 或 19, 但是改成 /^(18|19)$/ 就是单纯的 18 或 1…

JJS 模式--迭代器模式

08/11/20181 Min Read — In JS模式

迭代器模式是指提供一种方法来顺序访问一个聚合对象中的各个元素,而又不需要暴露对象内部表示 迭代器模式可以把迭代的过程从业务逻辑中剥离出来,在使用迭代器模式之后,及时不关心对象的内部构造,叶可以按顺序访问其中的每个元素 目前只有些 “古董级” 的语言中才会为了实现迭代器模式二烦恼,现在流行的大部分语言如 Java、Ruby 等都已经有了内置的迭代器实现,JavaScript 也有了 Array…

JJS 模式--策略模式

08/09/20181 Min Read — In JS模式

在程序设计中我们经常遇到要实现某一种功能有多中方案的选择,比如一个压缩文件的程序,即可以使用 gzip 算法,也可以选择 zip…

JJS 模式--单例模式

08/08/20181 Min Read — In JS模式

单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常见的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的 window 对象等。 在 JavaScript…

JJS 进阶--高阶函数

07/11/20181 Min Read — In JS进阶

高阶函数是指至少满足下列条件之一的函数 函数可以作为参数被传递 函数可以作为返回值输出 JavaScript…

JJS 进阶--闭包

07/10/20181 Min Read — In JS进阶

虽然 JavaScript 是一门面向对象的编程语言,但这门语言同事也拥有许多函数式语言的特征。 函数式语言的鼻祖是 LISP,JavaScript 在设计之初参考了 LISP 的方言 Scheme ,引入 Lambda 表达式、闭包、高阶函数等特性,使用这些特性可以用一些灵活而巧妙的方式来编写 JavaScript 代码。 变量作用域 变量作用域是指变量有效范围。当在函数内部使用 var…

JJS 进阶--call 和 apply

07/09/20181 Min Read — In JS进阶

ECMAScript3 给 Function 的原型定义了两个方法 Function.prtotype.call 和 Function.prototype.apply 。在实际开发中,特别是一些函数式风格的编码中,call 和 apply 方法尤为有用。 call 和 apply 的区别 call 和 apply 作用一模一样,区别在于传入参数的形式不同。 apply…

JJS 进阶--this

07/08/20181 Min Read — In JS进阶

在 JavaScript 中 this 总是让初学者感到迷惑,和别的语言大相径庭的是,JavaScript 的 this 总是指向一个对象,而具体是指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。 除去不常使用的 with 、 setTimeout 和 eval 的情况,具体到实际应用中,this…

JJS 进阶--prototype

07/07/20181 Min Read — In JS进阶

原型模式和基于原型的对象系统 在以类为中心的面向对象编程语言中,类和对象的关系可以想象成铸模和铸件的关系,对象总是从类中创建而来。而在原型编程思想中,类并不是必需的,对象未必需要从类中创建而来,一个对象时通过 clone 另外一个对象所得到的。 原型模式不单是一种设计模式,也被称为一种编程泛型。 使用 clone…

HHTTP

06/06/20181 Min Read — In HTTP系列

HTTP(HyperText Transfer Protocol) 协议的底层是由 TCP 协议和 IP 协议(简称 TCP/IP)构建的 TCP 传输控制协议(Transmission Control Protocol…

HHTTP--报文

06/05/20181 Min Read — In HTTP系列

浏览器负责发起请求 服务器在 80 端口接收请求 服务器负责返回内容(响应) 浏览器负责下载响应内容 我们把一次完整的 请求+响应 称之为 “HTTP事务” HTTP 的作用就是指导浏览器和服务器如何进行沟通。 HTTP 报文分为两种:请求报文 (request message) 和响应报文 (response message) 每一个报文都有三部分组成: 起始行 (start line…

HHTTP 协议基础

06/04/20182 Min Read — In HTTP系列

网络协议是互联网中各计算机为进行数据交换而建立的规则、标准或约定的集合。简单来说,人与人之间的交流所用的语言有中文、英文、德语等语言规则,那么计算机之间的交流也遵循各类网络协议。 IP 网络协议(Internet Protocol) 只要你在互联网中,那么你就会有一个 IP。通俗上理解,IP 分为「内网 IP」 和「外网 IP…

IICON 各种实现方式

06/01/20181 Min Read — In CSS系列

使用 image 实现 <img src="./img/xxx.png" alt="icon"> 此种方法可以自适应宽高,只需要给 img 一个 width 属性或者 height 属性即可 注意事项 img 的 vertical-align 设置 请求数过多,100 个 img 需要发 100 个请求,HTTP 1.…

CCSS 居中

05/14/20181 Min Read — In CSS系列

水平居中 inline 或者 inline-* 元素水平居中 在块级父容器中让内联元素居中,父级上加 text-align:center; 这种方法可以让 inline/inline-block/inline-table/inline-flex 等类型的元素实现居中。 块级元素水平居中 单个块级元素 固定宽度,设置块级元素 margin-left 和 margin-right…

CCSS 三栏布局

05/10/20181 Min Read — In CSS系列

两边固定,中间自适应 float + 左右 margin 缺点 :中间模块 (主要内容) 后加载,可能会影响用户体验 float + overflow: hidden float + margin + calc position + padding position 实现 position + top: 0 + bottom: 0 也是一种等高布局 flex 实现 float + margin…

CCSS 布局

05/09/20181 Min Read — In CSS系列

兼容 IE9,使用 float 布局;不兼容 IE9,使用 Flex 布局,高效简洁,不要使用 table 布局 布局时尽量不要写死元素的 width 和 height ,尽量选择 flex 和 calc 一列定宽,一列自适应 float + margin 实现 float + overflow: hidden flex 实现 也适用于等高布局 tabel + tabel-cell…

你可能没注意的 CSS 单位

04/08/20181 Min Read — In CSS系列

CSS中的单位我们 经常 用到 px、em、百分比,px 不用多说 em em 是相对单位,参考物是父元素的 font-size,具有继承的特点 如果字体大小是 16px(浏览器的默认值),那么 1em = 16px 这样使用换算很复杂,尤其是和 px 对应,大家总结出了经验 这样之后 1em = 10px…

CCSS 技巧

04/03/20181 Min Read — In CSS系列

写出「姓名」与「联系方式」两端对齐的例子 文字省略溢出 单行文本省略溢出 多行文本省略溢出(css multi line text ellipsis) 实现一个 1:1 的 div 使用 border 绘制小三角 设置整个页面的遮罩层

AAjax 和同源策略

01/21/20181 Min Read — In HTTP系列

跨域请求 跨域请求包括: 资源跳转: A 链接、重定向、表单提交 资源嵌入: <link> 、 <script> 、 <img> 、 <frame> 等 HTML 标签,还有样式中 background:url() 、 @font-face() 等文件外链 脚本请求: js 发起的 ajax 请求、 dom 和 js 对象的跨域操作等 哪些标签能不受同源策略限制发起请求 用 form…

JJSONP基础

01/20/20181 Min Read — In HTTP系列

局部刷新 用图片造 get 请求 用 script 造 get 请求 JSONP JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。 JSONP(JSON with Padding)是数据格式JSON的一种“使用模式”,可以让网页从别的网域请求数据。 确定函数名 请求方:xiaoxin.com 的前端程序员(浏览器) 响应方:jack…

JJS 获取数组的最大值和最小值

12/30/20171 Min Read — In JS系列

首先给我们的数组进行排序(小->大),第一个和最后一个就是我们想要的最小值和最大值 假设法:假设当前数组中的第一项是最大值,然后拿这个值和后面的项逐一进行比较,如果后面某一项值比假设的还要大,让假设的值重新赋值为当前的最大值 利用 obj 存储 用 Math 中的 max/min 方法结合 eval 方法实现 用 Math 中的 max/min 方法结合 reduce 方法实现 用 Math…

JJS 继承浅析

12/27/20171 Min Read — In JS系列

基于 Class 的继承 Class 可以通过 extends 关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。 Class 和 extends 本质上只是语法糖而已,学习 ES5 中的继承方式能够让我们更好的理解 ES6 中的 extends 继承 具体参见 -> ECMAScript 6 入门 模拟 Class…

JJS 函数+原型+new 操作符浅析

12/24/20171 Min Read — In JS系列

函数本身的属性默认值: arguments : null length:0 形参的个数 name:"xxx" 函数名 prototype 作为构造函数的时候,构造函数的原型,在原型上定义的属性和方法都是当前 xxx 这个构造函数实例的公有属性和方法 __proto__ 把函数当做一个普通的对象,指向 Function…

JJS 对象 API 浅析

12/20/20171 Min Read — In JS系列

使用 get + set 实现需求 给定一个对象 obj,返回一个新对象,新对象具有对象 obj 的所有属性,并且给新对象每个属性重新赋值都会触发修改函数,在下方代码处填写代码 解决方案 把一个 js 对象转成符合查询参数的字符串 解决方案 创建可迭代对象 默认情况下,开发者定义的对象都是不可迭代对象,但是如果给 Symbol.iterator…

JJS 数组 API 浅析

12/17/20171 Min Read — In JS系列

学习数组中常用的方法,我们需要按照五个维度去探讨 1. 方法的作用 2. 需要传哪些参数 3. 是否有返回值,返回值是什么 4. 通过此方法是否对原来的数组产生了改变 5. 各浏览器的兼容性 学习任何 API 都可以从这些角度去思考 删除数组最后一项:ary.pop() / ary.length-- / ary.splice(ary.length-1,1) 在数组末尾增加一项:ary.push…

JJS 类型检测浅析

12/13/20171 Min Read — In JS系列

typeof 通过 typeof value 检测数据返回的结果首先是一个字符串,其次在字符串中包含了对应的数据类型 局限性: typeof 数组/正则 返回的结果都是"object",所以不能用其区分是数组还是正则,也就是说不能检测细分对象数据类型的值 typeof null =>"object" 空对象引用 我们最常应用的就是 typeof…

JJS 基础总结

12/10/20172 Min Read — In JS系列

ECMAScript 中有 6 种简单数据类型(也称基本数据类型):Number String Boolean Symbol Undefined Null 和一种引用数据类型 Object,Object 本质上是由一组无序的名值对组成的.ECMAScript 不支持任何创建自定义类型的机制, 而所有值最终都将是上述 7 种数据类型之一 注意:没有 Array、Function、RegExp…

前端调试技巧

12/09/20171 Min Read — In 前端基础

拼写错误 80% 的错误都是拼写错误 HTML 会写错 语法错误 拼写错误 解决方案: 1. 用 W3C Validator 可以验证语法 2. 用 WebStorm 可以避免错误 CSS 会写错 首先打开开发者工具,找到那个样式与你想象中不一样的元素,查看样式、继承样式 给元素加上 border 或者 outline JavaScript 错误更多 内置异常类型 EvalError…

浏览器渲染顺序

12/02/20172 Min Read — In HTTP系列

浏览器解析、渲染顺序 技巧 使用 Chrome 开发者工具模拟低网速 将文件变大,使得下载速度变长,便于观察实验结果 在刷新之前打开开发者工具把元素删掉,开启 Preserve log,Disable cache 解析: 浏览器理解下载到的文件里的字符串 渲染: 将节点展示在屏幕上(DOM树里) CSS,JS 可以预加载,以节约下载时间 一个域名同一时间最多请求4个链接(IE)、2…

CCSS 基础总结

11/25/20173 Min Read — In CSS系列

常规流(Normal Flow) 常规流中内联元素默认从左到右排列,宽度不够则自动换行 常规流中块级元素从上到下排列,每个元素占一行 float:left、position:absolute、position: fixed 可以使元素脱离常规流 选择器权重和优先级 从右往左理解 相同优先级,写在后面的优先级高 !important>行内样式>id选择器>class…

HHTML 基础总结

11/24/20172 Min Read — In HTML

HTML基本结构 DOCTYPE 不同文档类型的语法是不一样的,目前最推荐的 HTML 5 文档类型声明, <!DOCTYPE html> DOCTYPE 之前,只能有注释和空白 。 大小写无所谓, <!dOcTyPe HtMl> 这种写法也是对的(但是不推荐) DOCTYPE 有什么用? 告诉浏览器解析 HTML…

GGit 内部原理

11/04/20171 Min Read — In 前端基础

Git 是一套内容寻址文件系统。Git 从核心上来看不过是简单地存储键值对(key-value)数据库。它允许插入任意类型的内容,并会返回一个键值,通过该键值可以在任何时候再取出该内容 Git使用 40 个 16 进制字符的 SHA-1 Hash 来唯一标识对象 git初始化后的目录结构 objects 目录存储所有的对象 refs 目录存储指向数据 (分支) 的提交对象的指针 config…

GGit 操作手册

10/28/20171 Min Read — In 前端基础

配置 GitHub 进入 https://github.com/settings/keys 如果页面里已经有一些 key,就点「delete」按钮把这些 key 全删掉。如果没有,就往下看 点击 New SSH key,你需要输入 Title 和 Key,但是你现在没有 key,往下看 打开 Git Bash 复制并运行 rm -rf ~/.ssh/* 把现有的 ssh key…

计算机如何存储数据

10/07/20172 Min Read — In 前端基础

什么是编码 但凡学过计算机的同学都知道,计算机只能处理0和1组成的二进制数据,人类借助计算机所看到的、听到的任何信息,包括:文本、视频、音频、图片在计算机中都是以二进制形式进行存储和运算。计算机善于处理二进制数据,但是人类对于二进制数据显得捉襟见肘,为了降低人与计算机的交流成本,人们决定把每个字符进行编号,比如给字母 A 的编号是 65,对应的二进制数是「01000001」,当把 A…