-
JavaScript设计模式(接口模式)
Interface是强类型面向对象语言中固有的特性，简单来说就是一个规范和契约，可以用来实现对象与对象之间的解耦。但是JavaScript里本身是没有这一特性的，不过可以利用JavaScript的灵活性模拟接口。JavaScript模拟接口的方式一共有三种： 文档注释方式 属性检查方式 鸭式辩型法文档注释方式文档注释方式是最简单的一种方式，只是用注释来说明类应该实现哪些方法。/*** interface Composite {* function add(obj);* funct...…
-
js异步-setTimeout
js引擎是单线程的，可是浏览器却可以是多线程的，js引擎只是浏览器的一个线程而已。定时器计，网络请求，浏览器渲染等等…，都是由不同的线程去完成的。 js引擎单线程执行的，它是基于事件驱动的语言.它的执行顺序是遵循一个叫做事件队列的机制。从图中我们可以看出,浏览器有各种各样的线程,比如事件触发器，网络请求,定时器等等.线程的联系都是基于事件的。js引擎处理到与其他线程相关的代码,就会分发给其他线程，他们处理完之后,需要js引擎计算时就是在事件队列里面添加一个任务。 这个过程中，js...…
-
前端性能优化之-css阻塞渲染
为了防止页面重复渲染页面，降低浏览器性能，浏览器在CSSDOM构建完成之前，不会渲染页面，直观的感受就是，在css下载完成之前，浏览器将出现白屏现象。浏览器渲染流程： 浏览器开始解析目标HTML文件,执行流的顺序为自上而下。 HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。 CSS解析器将CSS解析为CSSOM(层叠样式表对象模型),一棵仅含有样式信息的树。 ...…
-
position自适应布局
position绝对布局时，left,right,top,bottom可以同时起作用，从而撑开元素。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>position</title> <style> .out{ height: 200px; position: relative; } .inner1...…
-
\r\n，\n，\r的历史及在不同系统下的区别
“回车”与”换行”的历史由来 在计算机还没有出现之前，有一种叫做电传打字机（Teletype Model 33）的玩意，每秒钟可以打10个字符。但是它有一个问题，就是打完一行换行的时候，要用去0.2秒，正好可以打两个字符。要是在这0.2秒里面，又有新的字符传过来，那么这个字符将丢失。 于是，研制人员想了个办法解决这个问题，就是在每行后面加两个表示结束的字符。一个叫做“回车”，比喻打印头定位在左边界；另一个叫做“换行”，比喻打字机把纸向下移一行，在打印的时候丢失的这两个标记字符正好可以拟...…
-
git merge原理
快照这是项目的三个版本，版本1中有两个文件A和B，然后修改了A，变成了A1，形成了版本2，接着又修改了B变为B1，形成了版本3。如果我们把项目的每个版本都保存到本地仓库，需要保存至少6个文件，而实际上，只有4个不同的文件，A、A1、B、B1。为了节省存储的空间，我们要想一个方法将同样的文件只需要保存一份。这就引入了Sha-1算法。可以使用git命令计算文件的 sha-1 值:echo 'test content' | git hash-object --stdind670460b4b4ae...…
-
实现微信内置浏览器全屏播放模式下html元素漂浮
<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="width=device-width,user-scalable=no"> <style type="text/css"> html,body { padding: 0; margin: 0;...…
-
bfc与margin折叠问题
在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的 FC 有 BFC、IFC，还有 GFC 和 FFC。BFC 是 block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。BFCBFC...…
-
css3 动画之transition，animation
css3动画 csss3实现动画的方式主要有两种方式：一种是用transition过渡效果来实现动画，另外一种直接使用animation配合keyframe来实现。虽然这两种方式都能实现动画效果，但是区别还是有的。transition官方属性解释：也可以把属性写成一行：div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webk...…
-
css3 3d转换之perspective,perspective-origin
perspective perspective 属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。以下为将图片沿x轴旋转一定角度的两个效果，一个设置了 perspective，一个没有设置 perspective，可以看到明显的区别。上面的描述可能让人难以理解一些，其实对于 perspective 属性，我们可以简单的理解为视距，用...…
stay hungry stay foolish