一、左固定右自适应布局
常见布局技巧
二、清除浮动的方式
清除浮动的几种方式
三、js继承
1、简单原型链——拿父类的实例充当子类的原型对象
具体实现:
function Super(){ this.val = 1; this.arr = [1]; } function Sub(){ // ... } Sub.prototype = new Super(); // 核心 var sub1 = new Sub(); var sub2 = new Sub(); sub1.val = 2; sub1.arr.push(2); alert(sub1.val); // 2 alert(sub2.val); // 1 alert(sub1.arr); // 1, 2 alert(sub2.arr); // 1, 2
优点:简单易于实现
缺点:
(1)修改sub1.arr后sub2.arr也变了,因为来自原型对象的引用属性是所有实例共享的。如以上代码的最后两句。
(2)创建子类实例时,无法向父类构造函数传参
2、借用构造函数——借父类的构造函数来增强子类实例,等于是把父类的实例属性复制了一份给子类实例装上了(完全没有用到原型)
具体实现:
function Super(val){ this.val = val; this.arr = [1]; this.fun = function(){ // ... } } function Sub(val){ Super.call(this, val); // 核心 // ... } var sub1 = new Sub(1); var sub2 = new Sub(2); sub1.arr.push(2); alert(sub1.val); // 1 alert(sub2.val); // 2 alert(sub1.arr); // 1, 2 alert(sub2.arr); // 1 alert(sub1.fun === sub2.fun); // false
优点:
(1)解决了子类实例共享父类引用属性的问题
(2)创建子类实例时,可以向父类构造函数传参
缺点:无法实现函数复用,每个子类实例都持有一个新的fun函数,太多了就会影响性能,内存爆炸。
3、组合继承(最常用)——把实例函数都放在原型对象上,以实现函数复用。同时还要保留借用构造函数方式的优点,通过Super.call(this);继承父类的基本属性和引用属性并保留能传参的优点;通过Sub.prototype = new Super();继承父类函数,实现函数复用
具体实现:
function Super(){ // 只在此处声明基本属性和引用属性 this.val = 1; this.arr = [1]; } // 在此处声明函数 Super.prototype.fun1 = function(){}; Super.prototype.fun2 = function(){}; //Super.prototype.fun3... function Sub(){ Super.call(this); // 核心 // ... } Sub.prototype = new Super(); // 核心 var sub1 = new Sub(1); var sub2 = new Sub(2); alert(sub1.fun === sub2.fun); // true
优点:
(1)不存在引用属性共享问题
(2)可传参
(3)函数可复用
缺点:(一点小瑕疵)子类原型上有一份多余的父类实例属性,因为父类构造函数被调用了两次,生成了两份,而子类实例上的那一份屏蔽了子类原型上的。。。又是内存浪费
4、原型式——用生孩子函数得到得到一个“纯洁”的新对象(“纯洁”是因为没有实例属性),再逐步增强之(填充实例属性)
具体实现:
function beget(obj){ // 生孩子函数 beget:龙beget龙,凤beget凤。 var F = function(){}; F.prototype = obj; return new F(); } function Super(){ this.val = 1; this.arr = [1]; } // 拿到父类对象 var sup = new Super(); // 生孩子 var sub = beget(sup); // 核心 // 增强 sub.attr1 = 1; sub.attr2 = 2; //sub.attr3... alert(sub.val); // 1 alert(sub.arr); // 1 alert(sub.attr1); // 1
优点:从已有对象衍生新对象,不需要创建自定义类型(更像是对象复制,而不是继承。。)
缺点:
(1)原型引用属性会被所有实例共享,因为是用整个父类对象来充当了子类原型对象,所以这个缺陷无可避免
(2)无法实现代码复用(新对象是现取的,属性是现添的,都没用函数封装,怎么复用)
5、寄生式——给原型式继承穿了个马甲而已,看起来更像继承了
具体实现:
function beget(obj){ // 生孩子函数 beget:龙beget龙,凤beget凤。 var F = function(){}; F.prototype = obj; return new F(); } function Super(){ this.val = 1; this.arr = [1]; } function getSubObject(obj){ // 创建新对象 var clone = beget(obj); // 核心 // 增强 clone.attr1 = 1; clone.attr2 = 2; //clone.attr3... return clone; } var sub = getSubObject(new Super()); alert(sub.val); // 1 alert(sub.arr); // 1 alert(sub.attr1); // 1
优点:还是不需要创建自定义类型
缺点:无法实现函数复用(没用到原型,当然不行)
6、寄生组合继承(最佳方式)——用beget(Super.prototype);切掉了原型对象上多余的那份父类实例属性
具体实现:
function beget(obj){ // 生孩子函数 beget:龙beget龙,凤beget凤。 var F = function(){}; F.prototype = obj; return new F(); } function Super(){ // 只在此处声明基本属性和引用属性 this.val = 1; this.arr = [1]; } // 在此处声明函数 Super.prototype.fun1 = function(){}; Super.prototype.fun2 = function(){}; //Super.prototype.fun3... function Sub(){ Super.call(this); // 核心 // ... } var proto = beget(Super.prototype); // 核心 proto.constructor = Sub; // 核心 Sub.prototype = proto; // 核心 var sub = new Sub(); alert(sub.val); alert(sub.arr);
四、javascript 删除 url 中指定参数,并返回 url
javascript 删除 url 中指定参数,并返回 url
五、盒子居中
多种布局技巧
六、判断数组类型
js数据类型判断和数组判断
七、闭包及其在什么地方运用
八、重绘(redraw)和重排(也叫回流reflow)以及优化方法
重绘:是一个元素的外观变化所引发的浏览器行为;例如改变visibility、outline、背景色等属性。
重排:是引起DOM树重新计算的行为;
何时发生重排:
1、添加或者删除可见的DOM元素;
2、元素位置改变;
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
5、页面渲染初始化;
6、浏览器窗口尺寸改变——resize事件发生时;
如何减少回流、重绘:
1、将多次dom修改合并成一次操作
2、多次重排的元素,先脱离文档流,在修改
3、display属性为none,减少重排
4、 在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量
九、为什么静态页面会单独存储
1、避免域名污染
2、以减少请求,提高网页性能
十、HTML5新增和移除元素
canvas新元素
JavaScript 的绘图 API
新多媒体元素
audio 定义音频内容
video 定义视频(video 或者 movie)
source 定义多媒体资源 video 和 audio
embed 定义嵌入的内容,比如插件。
track 为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
新表单元素
datalist 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
keygen 规定用于表单的密钥对生成器字段。
output 定义不同类型的输出,比如脚本的输出。
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
标签 描述
article —定义页面独立的内容区域。
aside —定义页面的侧边栏内容。
bdi —允许您设置一段文本,使其脱离其父元素的文本方向设置。
command— 定义命令按钮,比如单选按钮、复选框或按钮
details —用于描述文档或文档某个部分的细节
dialog —定义对话框,比如提示框
summary— 标签包含 details 元素的标题
figure— 规定独立的流内容(图像、图表、照片、代码等等)。
figcaption —定义 figure 元素的标题
footer —定义 section 或 document 的页脚。
header— 定义了文档的头部区域
mark —定义带有记号的文本。
meter —定义度量衡。仅用于已知最大和最小值的度量。
nav —定义导航链接的部分。
progress —定义任何类型的任务的进度。
ruby —定义 ruby 注释(中文注音或字符)。
rt —定义字符(中文注音或字符)的解释或发音。
rp —在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
section —定义文档中的节(section、区段)。
time —定义日期或时间。
wbr —规定在文本中的何处适合添加换行符。
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>