ECMAScript 5 中的近类结构

ECMAScript 5 及早期版本中没有类的概念，最相近的思路是创建一个自定义类型：首先创建一个构造函数，然后定义另一个方法并赋值给构造函数的原型。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function PersonType(name) {
    this.name = name;
}
PersonType.prototype.sayName = function () {
    console.log(this.name);
}
var person = new PersonType("Adele");
person.sayName(); // Adele
console.log(person instanceof PersonType); // true
console.log(person instanceof Object); // true

许多模拟类的 JS 库都是基于这个模式进行开发，而且 ECMAScript 6 中的类也借鉴了类似的方法。

这篇文章将带你从头到尾了解H5广告的实现。

本文主要讲一下几个关键点

一、视频内联播放 想要营造一种文字与视频混排的现象，视频不要影响其他模块

二、视频去控件 交互视频，不能点击快/慢进或暂停哦

三、去控件全屏播放 想要模拟 明星给我打电话的体验，不能看到明显的视频播放器

四、视频自动播放 想要释放用户操作，打开链接就自动播放

五、黑屏问题 开始播放时，有一段黑屏时间，不能无缝衔接

六、其他属性和方法 喜欢一个技术，就要了解“她”的全部，这些你也看看呗

说起css布局，那么一定得聊聊盒模型，清除浮动，position，display 什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。

水平居中布局

1.margin + 定宽

1
2
3
4
5
6
7
8
9
10

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    width: 100px;
    margin: 0 auto;
  }
</style>

相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的

SCSS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。本文总结了SASS的主要用法。由此日常的一般使用就不需要去看官方文档了。

一、基本用法

1.1 变量

SCSS允许使用变量，所有变量以 $ 开头。

1
2
3
4

　　$blue : #1875e7;　
　　div {
　　　color : $blue;
　　}

DOMContentLoaded顾名思义，就是dom内容加载完毕。那什么是dom内容加载完毕呢？我们从打开一个网页说起。当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。

这时候问题又来了，什么是HTML文档被加载和解析完成。要解决这个问题，我们就必须了解浏览器渲染原理。

HTTP简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，HTTP/1.1的规范化工作正在进行之中，而且HTTP-NG(Next Generation of HTTP)的建议已经提出。

HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。

1、一部分Android版本系统设置height和line-height的高度无效，可通过”-webkit-appearance: listbox;”属性解决：

1
2
3
4
5
6

element {
    -webkit-appearance: listbox;
    width: 100%;
    height: 80px;
    line-height: 80px;
}

2、设置滚动样式：

设置上下滚动样式： overflow-y: scroll;
设置弹性滚动样式：-webkit-overflow-scrolling: touch;

获取和衡量一个页面的性能，主要可以通过以下几个方面：Performance Timing API、Profile工具、页面埋点计时、资源加载时序图分析。

桌面浏览器前端优化策略

前端优化的策略很多，如YSlow（YSlow是Yahoo发布的一款Firefox插件，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则等，总结起来主要包括网络加载类、页面渲染类、CSS优化类、JavaScript执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。

1、创建 Object 实例

1
2
3
4
5

var person = new Object();
 person.name = "Adele";
 person.age = 29;
 person.job = "FE";
 person.sayName = funtion () { alert(this.name); }

2、对象字面量

1
2
3
4
5
6

var person = {
    name: "Adele",
    age: 29,
    job: "FE"
    sayName: funtion () { alert(this.name); }
}

我们都知道面向对象语言的三大特征：继承、封装、多态，但JavaScript不是真正的面向对象，它只是基于面向对象，所以会有自己独特的地方。这里就说说JavaScript的继承是如何实现的。

学习过Java和c++的都知道，它们的继承通过类实现，但JavaScript没有类这个概念，那它通过什么机制实现继承呢？ 答案是： 原型链！ 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

这篇文章主要是关于《高程3》—— 6.3 继承 的总结，建议先阅读阮一峰大神的js继承三部曲，然后再回头看体会更深：