javascript:
面对对象
函数创建方式:
1.工厂模式
function createPerson(name, age, job){ var o = new Object(); //创建工厂对象模型 o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson("Nicholas", 29, "Software Engineer"); var person2 = createPerson("Greg", 27, "Doctor"); Fac
工厂模式抽象了创建具体对象的过程,首先抽象一个工厂对象creatPerson,然后定义一个包含着公共属性的对象模型o,最后返回这个对象模型,o作用域在函数内,相当于返回一个实例对象
2.构造函数模式
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor");
在这个例子中, Person() 函数取代了 createPerson() 函数。我们注意到, Person() 中的代码
除了与 createPerson() 中相同的部分外,还存在以下不同之处:
没有显式地创建对象;
直接将属性和方法赋给了 this 对象;
没有 return 语句;
Person 使用的是大写字母 P。按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头
3.原型模式
function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); //"Nicholas" var person2 = new Person(); person2.sayName(); //"Nicholas" alert(person1.sayName == person2.sayName); //true
原型:http://www.108js.com/article/article1/10201.html?id=1092
4.组合使用构造函数模式和原型模式
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"]; } Person.prototype = { constructor : Person, sayName : function(){ alert(this.name); } } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); person1.friends.push("Van"); alert(person1.friends); //"Shelby,Count,Van" alert(person2.friends); //"Shelby,Count" alert(person1.friends === person2.friends); //false alert(person1.sayName === person2.sayName); //true
5.动态原型模式
function Person(name, age, job){ //属性 this.name = name; this.age = age; this.job = job; // 方法 if (typeof this.sayName != "function"){ Person.prototype.sayName = function(){ alert(this.name); }; } } var friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName();
6.寄生构造函数模式
function Person(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName(); //"Nicholas"
7.稳妥构造函数模式
function Person(name, age, job){ //创建要返回的对象 var o = new Object(); //可以在这里定义私有变量和函数 //添加方法 o.sayName = function(){ alert(name); }; //返回对象 return o; }
闭包:
继承:
api:两种分类
https://www.kancloud.cn/dennis/tgjavascript/241852
1.节点、2.css、3、对象
http://blog.csdn.net/strommaybin/article/details/52725950
- 元素查找
- class操作
- 节点操作
- 属性操作
- 内容操作
- css操作
- 位置大小
- 事件
- DOM加载完毕
- 绑定上下文
- 去除空格
- Ajax
- JSON处理
- 节点遍历
http://devdocs.io 所有api
数据交互方式:
web数据交互,简单的讲,是client与server端的数据交互,通过http协议交互的。
首先看一个传统的页面请求的生命周期:
1. 浏览器发送一个HTTP请求到Web服务器。
2. Web服务器解析请求,然后读取数据存储层,制定一个HTML文件,并用一个HTTP响应把它发送到客户端。
3. HTTP响应通过互联网传送到浏览器。
4. 浏览器解析Web服务器的响应,使用HTML文件构建了一个的DOM树,并且下载引用的CSS和JavaScript文件。
5. CSS资源下载后,浏览器解析它们,并将它们应用到DOM树。
6. JavaScript资源下载后,浏览器解析并执行它们。
上述6个步骤是一个web页面展现必不可少的,都要经历的步骤,每个步骤花的时间都会影响页面的展现的快慢的,以后会讲下性能优化,这里主要讲web交互方式,先略过。
web数据交互,从server的角度讲:主要有pull,push两个,一个是拉,另外一个是推。
1)pull 是拉,客户端向服务器端主动的拉取数据,采用的技术是ajax 和Xss(跨站脚本)
2)push 是服务器向客户端主动的推动数据,第一种方式是长连接,客户端与服务器之间一直保持着连接,如果有数据的更新,服务器向客户端推送数据,客户端接受服务器端的数据,可以理解为长轮询,客户端与服务器端必须一直是连接着的状态。另外还有一种是伪长链接的。有2种实现方式,一种是基于ajax的,它与传统的ajax的方式不同在于,服务器端会阻塞客户端的请求直到有数据传递或者超时才返回。客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。