总结

浏览器兼容问题：

div中的图片间隙 ie6Bug 描述：在div中插入图片是，图片会将div下方撑大1像素

解决：将</div>与<img>写在一行上

将</img>转为块元素 ,给<img>添加声明display:block

双倍浮动(双倍边距) ieBUG 描述：浏览器在解析浮动元素时,会错误的浮向边界加倍显示

解决：给浮动元素添加声明display:inline

百分比bug ie6Bug 解析百分比时，会按照四舍五入方式计算从而导致50% +50% 大于100%的情况。

解决：给右面的浮动元素添加声明：clear:right 清除右浮动

鼠标指针Bug描述：cursor属性值只有IE浏览器识别，其他浏览器不识别该声明

解决：如统一某元素鼠标指针形状为手型

W3c标准

万维网联盟 World Wide Web Consortium

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

Mvc/mvvm

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

MVVM是Model-View-ViewModel的简写

面向对象

面向对象(Object Oriented,OO)是软件开发方法一种编程思想

对象包括属性（Properties）和方法（Methods）构造函数 prototype

什么是面向对象：不需要关注内部细节，只关注对象提供的功能。

面向对象变成的特点：

封装、

继承：从一个已有对象上，继承出新的对象、

多态：父类和子类有同样的方法，但是操作不一样

变量和属性、函数和方法的区别

Var a = 12; //变量

Var arr = [1,2,3,4];

arr.a = 13; //属性

function a(){alert(1)} //函数

arr.fn = function(){alert(2)}; //方法

arr.fn()

形成工厂模式的前奏因为需要每次创建对象很麻烦。

var obj1 = new Object();

obj1.name = ‘Json’;

obj1.showSex = function(){alert(this.name)}

var obj2 = new Object();

obj2.name = ‘leo’;

obj2.showName = function(){alert(this.name);}

缺点：多次创建对象麻烦所以封装起来称为构造函数

工厂方式问题：1.没有new 2.每个对象都有一套自己的函数浪费资源。

Alert( p1.showName == p2.showName) 结果为false

function createPerson(name,sex){

Var obj = new Object();

this.name = name;

this.sex = sex;

obj.showName = function(){

alert(this.name);

}

Obj.showSex = function(){

Alert(this.sex);

}

return obj;

}

Var P1 = createPerson(‘blue’,’男’);

Var p2 =createPerson(‘leo’,’女’);

P1.showName();

P1.showSex();

P2.showName();

P2.showSex();

alert(P1.showName == P2.showName) // false

原理：var a = function(){alert(1)}; 实际上是 var a = new Function(“alert(‘abc’)”);

Var b = function(){alert(1)}; 实际上是 var b = new Function(“alert(‘abc’)”);

解决工厂方式 没有new

Function createPerson(name,sex){

//Var Obj = new Object();

this.name = name;

this.sex = sex;

this.showName = function(){alert(this.name)}

this.showSex = function(alert(this.sex));

//return Obj;

}

Var p1 = new createPerson(‘leo’,”男”);

原理：

function show(){

//Var this = new Object();

Alert(this);

}

Show(); //window

New show(); //Object 相当于在function show方法中加入： var this = new Object();

Var arr1 = new Array(12,3,4,5);

Var arr2 = new Array(42,22,55,3);

Arr1.sum = function(){

Var result = 0;

Var I = 0;

For( i = 0; i< this.length; i++){

Result +=this[i]l;

}

Return result;

}

Alert(arr1.sum());

Alert(arr2.sum())

问题：arr1对象有方法 arr2没有方法，怎么办；引出了prototype(原型)

Var arr1 = new Array(12,3,4,5);

Var arr2 = new Array(42,22,55,3);

Array.prototype.sum = function(){

Var result = 0;

Var I = 0;

For( i = 0; i< this.length; i++){

Result +=this[i]l;

}

Return result;

}

Alert(arr1.sum());

Alert(arr2.sum())

利用原型给系统对象创建自定义方法，实现字符串前后无空格

String.prototype.trim = function(){

Return this.replace(/^\s|\s$/g, ‘ ’)

}

Var str = “ sdf sdf ”;

Alert(str.trim());

Prototype原型是为了解决工厂方式的资源浪费

既然可以给系统添加prototype也可以给自己的类条件prototype

Function CreatePerson(name,sex){

this.name = name;

this.sex = sex;

}

CreatePerson.prototype.showName = function(){

alert(this.name)

}

CreatePerson.prototype;showSex = function(){

alert(this.sex)

}

Var p1 = new CreatePerson(‘blue’,’男’)

Var p2 = new CreatePerson(‘leo’,’女’);

P1.showName();

P1.showSex();

P2.showName();

P2.showSex()

Alert(p1.showName == p2.showName ); //true

这样就每个对象就不会都有一套自己的方法了

给对象添加方法大于给prototype添加方法

Array.prototyp.a = 12;

Var arr = [1,2,3];

Alert(arr.a) //12

Arr.a = 5;

Alert(arr.a) //5

Delete arr.a;

Alert(arr.a) //12

点击事件和定时器中的this问题

function Bbb(){

Var _this = thisl;

This.b =12;

Document.getElementByI(‘btn1’).onclick = function(){

_this.show();

}

Bbb.prototype.show = function(){

Alert(this.b);

}

Window.onload = function(){

New Bbb();

}

改造为面向对象的技巧：将变量改成对象的属性，将函数改为对象的方法，不允许有函数嵌套

继承：

function Person(name,sex){

This.name = name;

This.sex = sex;

}

Person.prototype.showName = function(){

Alert(this.name);

}

Person.prototype.showSex = function(){

Alert(this.sex);

}

function Worker(name,sex,job){

//调用父级的构造函数 this指向new出来的Work对象

//构造函数伪装

Person.call(this. Name , sex );

This.job = job;

}

//通过原型继承父级的方法 worker原型指向Perons引用，指向的是地址

//这样就是子类影响到父类所以不适用

//Worker.prototype = Person.prototype;

//(重点)利用原型链来继承父级的方法（将上面改为下边就不影响父类了）

for(var i in Perosn.prototype){

worker.Prototype[i] = Perosn.prototype[i];

}

Worker.prototype.showJob = function(){

Alert(this.job)

}

Var oP= new Person(“Join”,”男”);

Var oW = new Worker(‘blue’, ’男’ ,’打杂的’);

oP.showName();

oP.showSex()

oW.showName()

oW.showSet()l

oW.showJob()

alert(oP.showName == OW.showName) // true

//a1怎么会找到Aaa.prototype下的num呢？

function Aaa(){}

Aaa.prototype.num = 10; //Aaa.prototype也是一个对象

var a1 = new Aaa();

alert(a1.num); //a1怎么会找到Aaa.prototype下的num呢？

原型链：实例对象与原型之间的链接，叫做原型链。

__proto__（隐士链接）。

Object对象类型是原型链的最外层

hasOwnProperty:看是不是对象自身下面的属性

var arr = [];

arr.num = 10;

Array.prototype.num2 = 20;

alert( arr.hasOwnProperty(“num”) ) //true

alert( arr.hasOwnProperty(“num2”) )//false Array.prototype也是一个对象所有数组对象都可以用

constructor:查看对象的构造函数

function Aaa(){}

var a1 = new Aaa();

alert( a1.constructor ); //Aaa函数

var arr = [];

alert( arr.constructor ); //Array函数

alert( arr.constructor == Array ); //true 可以做类型判断

原理：

function Aaa(){}

Aaa.prototype.constructor = Aaa; //系统会自动生成这个

var a1 = new Aaa();

alert( a1.constructor );

instanceof 就是判断某对象是不是某个类的实例 所有的类都是从Object上继承过来的

例子：

Var arr1 = [1,2,3];

Alert(arr1 instanceof Array);

toString():系统对象下面都是自带的，自己写的对象都是通过原型链object下面的

var arr = [];

alert( arr.toString == Object.prototype.toString ); //false

function Aaa(){}

var a1 = new Aaa();

alert( a1.toString == Object.prototype.toString ); //true

//利用toString做类型判断：

var arr = [];

alert( Object.prototype.toString.call(arr) ); //[object Array]

//做16禁止转化

var num = 255;

alert(num.toString(16)); //ff

//转化成字符串

var arr = [“1”,”2”,”3”];

Array.prototype.toString = function(){

return this.join(“+”);

}

alert( arr.toString() ); //1+2+3

三种方法做类型判断

Amd/cmd

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
CMD推崇就近依赖，只有在用到某个模块的时候再去require

数组去重

// Array.prototype.unique1 = function()

// {

// // console.log(this); //这里的this是数组中的值

// var n = []; //一个新的临时数组

// for(var i = 0; i < this.length; i++) //遍历当前数组

// {

// //如果当前数组的第i已经保存进了临时数组，那么跳过，

// //否则把当前项push到临时数组里面

// //n.indexOf(this[i]) 指定某个字符串的值在字符串中首次出现的位置

// if (n.indexOf(this[i]) == -1)

// console.log('这是i的值：'+i); //这里遍历的是n这个数组

// n.push(this[i]);

// }

// return n;

// }

Array.prototype.unique2 = function(){

// console.log(this);//表示arr整个数组是arr对象

var n = {}, r = [];//n为hash表，r为临时数组

for(var i = 0 ; i < this.length; i++){

if(!n[this[i]]){//如果hash表中没有当前项

n[this[i]] = true;//存入hash表

r.push(this[i]);//把当前数组的当前项push到临时数组里面

}

return r;

}

for(var i = 0 ; i < arr.length;i++ ){

for(var j = i+1 ; j<arr.length; j++){

if(arr[i] == arr[j]){

arr.splice(j,1);

}

var arr = ['string',"array","function","string","string"];

arr.unique2();

</script>

JSON去重

Array.prototype.quchong = function(){

var tmp = {},a = this.slice();

for(var i =j= 0 ; i< a.length;i++){

if(!tmp[a[i].id]){

tmp[a[i].id] = 1;

j++;

}else{

this.splice(j,1)

}

var arr8 = [

{“id”:1},{“id”:1},{“id”:2},{“id”:3},{“id”:1}

]

arr8.quchong()

console.log(arr8)

session和Cookie区别？

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

seesion保存在服务器，客户端不知道其中的信息，cookie保存在客户端，服务器能够知道其中的信息
session中保存的是对象，cookie中保存的是字符串
session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下cookie互相是访问不到的。
sessin默认需要借助cookie才能正常工作。如果客户端完全静止cookie，session，这种方法将失效，单可以url重写
session在用户会话结束后就会关闭，但cookie因为保存在客户端，可以长期保存
cookie是服务器向客户端写入的片段信息。cookie信息保存在服务器缓存区，不会再客户端显示。当你第一次登陆一个网站，服务器想你的机器写的片段信息，你可以在internet选项找到存放 cookie文件夹。如果不删除就一直在这个文件夹

移动端尺寸：

http://www.cnblogs.com/mingjixiaohui/p/5430947.html

1像素边框问题：

http://www.cnblogs.com/mingjixiaohui/p/5507482.html

高清图片适配

http://www.cnblogs.com/mingjixiaohui/p/5435349.html

javascript方法

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置

ceil()方法向上取整：

concat()方法向下取整

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

splice方法用于插入、删除或替换数组的元素。

charAt方法可返回指定位置的字符。

substr()方法可在字符串中抽取从 start 下标开始的指定数目的字符。

slice() 方法可从已有的数组中返回选定的元素。

join()方法用于吧数组中的所有元素放入一个字符串

正则：

正则表达式30分钟入门教程 http://deerchao.net/tutorials/regex/regex.htm

预编译

IE内核，火狐，谷歌内核，css为什么这样写区别？原理

Trident Geako webkit

工具Hbuilder深入了解其功能

Canvas 动画 插件 echars

Bootstrap分页 响应式

移动端事件touch事件库 Hummer.js 和百度的touch.js

总结

推荐阅读