1、 有权访问私有变量的公共方法叫做特权方法，共有方法可以使用闭包来实现
|
私有变量 |
在构造函数中构造私有方法，能让外部有权访问私有变量，但是必须使用构造函数模式，每次调用都会创建一个新方法 |
|
静态私有变量 |
静态的、所有实例共享属性，使用原型增进代码复用 |
(1) 私有变量例子：
function Person(name) {
//特权方法
this.getName = function() {
return name;
};
this.setName = function(value) {
name = value;
};
}
var person = new Person("Nicholas");
alert(person.getName()); //"Nicholas"
person.setName("Greg");
alert(person.getName()); //"Greg"
(2) 静态私有变量例子：
(function() {
//私有变量和私有函数
var name = "";
//构造函数
Person = function(value) {
name = value;
};
Person.prototype.getName = function() {
return name;
};
Person.prototype.setName = function(value) {
name = value;
};
})();
var person1 = new Person("Nicholas");
alert(person1.getName()); //"Nicholas"
person1.setName("Greg");
console.info(person1.getName()); //"Greg"
var person2 = new Person("Michael");
console.info(person1.getName()); //"Michael"
console.info(person2.getName()); //"Michael"
2、模式模块--------------------------单例
使用情况：如果必须创建一个对象并以某些数据对其进行初始化，同时还要公开一些能够访问这些私有数据的方法。。。。最终要通过一个对象字面量来表示它，创建公共的方法和属性
比如：
var application = function(){
//私有变量和函数
var components = new Array();
//初始化
components.push(new BaseComponent());
//公共
return {
getComponentCount : function(){
return components.length;
},
registerComponent : function(component){
if (typeof component ==
"object"){
components.push(component);
}
}
};
}();
3、增强的模块模式
使用情况：适用于单例必须是某种类型的实例
比如：
|
var application = function(){ }(); |
4、查找框架最好使用top【始终指向最外层的框架】，不要使用window,框架可以通过位置索引也可以通过name属性查找。
5、窗口
|
窗口位置 |
screenTop、screenLeft—IE、Safari、opera、chrome screenX、screenY—Firefox、Safari、chrome |
var leftPos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX; 全屏的情况下，浏览器之间会有差异，位置会不一样 |
|
窗口移动 |
moveTo—移动的位置 moveBy—移动的像素 |
|
|
窗口大小 |
innerHeight innerWidth
|
1、innerHeight、innerWidth容器中页面视图区的大小（减去边框宽度） 2、IE9+、 Safari 和 Firefox中， outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸，Opera示页面视图容器的大小 3、在
Chrome 中， outerWidth、 outerHeight 与 |
|
调整窗口大小 |
resizeTo resizeBy |
(1) 窗口大小
|
var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){//页面视口的信息 pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else {//IE6 pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } |
6、 screen
|
availHeight availWidth |
屏幕的像素高度减系统部件 |
7、history
|
go() |
go(1)前进一页、go(-1)后退一页 go(-2)后退两页 |
|
back()后退一页 forward()前进一页 |
8、JSON
|
JSON对象 |
与对象字面量相比，没有声明变量，末尾没有分号，并且对象的属性必须加“” |
|
JSON数组 |
采用数组字面量，可以把数组和对象结合起来 |
|
方法 |
|
|
JSON.stringify() |
把js对象序列化为JSON字符串 |
|
可以接受三个参数，第一个是对象，第二个是过滤器（数组、函数），第三个是数值（字符串缩进的是空格）/字符串（缩进的是字符串）【最长不超过10个】 |
|
|
JSON.parse() |
把JSON字符串解析为js对象 |
|
可以接受两个参数，第一个是json，第二个是一个function(key,value) |
|
|
toJSON |
放在对象里面，toJSON: function() {return this.title+","+this.authors;}，这样对象序列化为JSON的时候就只有toJSON中返回的字符串 |
9、 DOM
|
Node类型（换行也是一个节点） |
|
|
nodeType |
1、=数值的话，所有浏览器适用 2、=NODE.XXX_NODE的对IE无效 |
|
childeNodes(保存着一个NodeList对象) |
1、 childeNodes[0] 2、 childeNodes.item(0) 3、 childeNodes.length 4、 将NodeList转换成数组 IE9+ Array.prototype.slice.call(someNode.childNodes,0) |
|
nextSibling下一个子节点 previousSibling上一个子节点 firstChild第一个子节=childeNodes[0] lastChild最后一个子节点 |
firstChild = someNode.childeNodes[0] firstChild = someNode.childeNodes[someNode.length-1] |
|
hasChildNodes() |
判断是否包含子节点 |
|
appendChild(newNode) |
向childNodes末尾添加一个新的节点 |
|
insertBefore(newNode,位置) |
向childNodes某个位置上添加一个新的节点 |
|
replaceChild(newNode,要替换的node) |
把childNodes某个位置上的node替换成newNode |
|
removeChild(要移除节点的位置) |
|
|
cloneNode(true/false) |
是否深复制 |
|
normalize() |
处理文档中的文本节点，有相邻的文本节点合并为一个文本节点，有空白文本节点就删除 |
(1) 将NodeList转换成数组
|
function convertToArray(nodes){ } |
10、document
|
Document |
|
|
document.documentElement document.body document.doctype(各浏览器存在不同) |
documentElement始终指向最外层的元素 |
|
document.title document.URL 完整路径 document.domain 域名 |
|
|
查找元素 |
document.geiElementById (IE8+,更早之前的版本会返回null，IE8不区分大小写) document.geiElementByTagName document.geiElementByName |
|
一致性检测 |
document.implementation.hasFeature(“XML”,”1.0”) |
11、element
|
Element |
|
|
someElement.tagName someElement.id someElement.title someElement.lang someElement.dir someElement.className |
标签名 判断的时候最好是： element.tagName.tolowerCase == “div” |
|
someElement.getAttribute someElement.setAttribute someElement.removeAttribute |
取得特性,特性名称不区分大小写 someElement.getAttribute(“id”) 取得的特性长度 div.attributes.length 自定义的特性最好加上data-前缀（自定义的特性在IE以外的不存在） |
|
document.createElement(“div”); .appendChild() . |
createElement在ie中可以直接将完整的元素标签加上属性，但是在IE8以下会出现问题，解决，在（2） |
(1) 获取所有属性
|
function outputAttributes(element) { var pairs = new Array(), attrName, attrValue, i, len; for (i = 0, len = element.attributes.length; i < len; i++) { attrName = element.attributes[i].nodeName; attrValue = element.attributes[i].nodeValue; // if (element.attributes[i].specified) { pairs.push(attrName +
"="" + attrValue + """); } return pairs.join(" "); } |
(2) 解决IE中自动创建元素产生的问题
|
if
(client.browser.ie && client.browser.ie <=7){ |
12、Text
|
Text |
|
|
appendData(“”) deleteData(offset,count) insertData(offset,””) replaceData(offset,count,””) splitText(offset) subStringData(offset,count) |
将文本添加到节点的末尾 |
|
删除 |
|
|
插入 |
|
|
替换 |
|
|
分割 |
|
|
提取 |
|
|
document.createChildNode(“”) |
创建文本节点 |
13、documentFragment
|
documentFragment |
|
|
document.createDocuemntFragment() |
创建文档片段 |
14、Attr
|
Attr |
|
|
setAttrbuteNode() getAttrbuteNode() removeAttrNode() |
|
|
name value special |
|
|
document.createAttribute(“align”) |
传入特性名称，创建新的特性 |
|
getAttributeNode() |
返回特性的节点，使用的时候要获取到值 getAttributeNode(“align”).value |
15、DOM扩展
|
querySelector() IE8+ |
取得匹配的第一个元素 |
|
querySelectorAll() IE8+ |
取得匹配的所有元素 |
|
HTML5新增加的 |
|
|
getElementByClassName IE9+ |
|
|
classList（firefox/chrome支持） |
1、 add(“”),添加类 2、 containes(“”) 判断是否含有这个类 3、 remove(“”) 从类表中删除 4、 toggle(“”) 有就添加，没有就删除 |
|
document.activeElement |
文档加载期间为null |
|
readyState |
|
|
document.head |
|
|
document.charset |
|
|
自定义属性data-myname |
获取值myDiv.dataset.myname |
|
innerHTML |
|
|
|
|
元素遍历 |
|
|
childElementCount |
返回子元素的的个数，不包括文本和注释 |
|
firstElementChild |
|
|
lastElementChild |
|
|
previousElementSibling |
|
|
nextElementSibling |
|