JS22-javascript高级程序设计代码

学习笔记

DOM文档对象模型 DocumentObject Model:是针对XML但经过扩展用于HTML的应用程序编程接口API。

DOM级别:

DOM1映射文档的结构
DOM core核心
DOM HTML模块
DOM2
DOM试图
DOM事件
DOM样式
DOM遍历和范围
DOM3
DOM加载和保存
DOM验证

BOM浏览器对象模型 Browser Object Model
BOM只处理浏览器窗口和框架
弹出新浏览器窗口的功能；
移动、缩放和关闭浏览器窗口的功能；
提供浏览器详细的navigator信息；
提供浏览器所加载页面的详细信息的location对象；
提供用户显示器分辨率详细信息的scree信息；
对cookies的支持；
想XMLHttpRequest和IE的ACtiveXObject这样的自定义对象。

CData片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任何格式的文本内容。
文档模式
文档类型doctype
分类 混杂模式quirks mode 和标准模式 standards mode
准标准模式almost standards mode
IE8 超级标准模式
关闭其默认文档模式

不支持javascript时如何让页面平稳地退化 <noscript>

变量、函数名、操作符都区分大小写
标示符一般采用驼峰式firstSecond
单行注释// 多行注释/**/
变量时松散类型的，意味着可以用来保存任何类型的数据。每个变量仅仅是一个用于保存值的占位符而已。
省略var操作符，创建一个全局变量。
6中类型：Undefined、Null、Boolean、Number、String、Object
不支持创建自定义类型的机制。
typeof检测给定变量的数据类型
typeof是一个操作数而不是函数

var sum = function(num1,num2){
    return num1+mum2;    
};
var sum = new Function("num1","num2","return num1+num2");
function createComparisonFunction(propertyName){
    return function(object1,object2){
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        return value1-value2;
    };
}

函数内部有两个特殊的对象 arguments 和 this
arguments是一个类数组对象，包含传入函数中的所有参数。主要用途：保存函数的参数。
有一个callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。
function factorial(num){
if(num <= -1){
return 1;
}else{
return num* arguments.callee(num-1);
}
}

this引用的是函数据以执行操作的对象，this函数在执行时所处的作用域。
函数的名字仅仅是一个包含函数的变量指针。

函数的属性和方法：
函数属性：
length属：表示函数希望接受的命名参数个数
prototype属性：对于应用类型而言：prototype保存它们所有实例方法的真正所在。

函数方法：非继承方法：
appley()和call()是在特定的作用于中调用函数，实际上等效设置函数体内this对象的值。
window.color=”red”;
var o={color:”blue”};
function sayColor(){
alert(this.color);
}
sayColor(); //red
sayColor(this);//red
sayColor(window);//red
sayColor(o); // blue

toLocaleString(),toString()方法始终都返回函数的代码。
valueOf()返回函数代码

基本包装类型：String、Boolean、Number
引用类型和基本包装类型的主要区别就在对象的生存期。
自动创建的基本包装类型对象，只存在于一行代码的执行瞬间，然后立即被销毁。

Number类型
toFixed()
toExponential()
toPrecsion()

String类型
length
字符方法：charAt() charCodeAt()
字符串操作方法：concat(),slice(),substr(),substring()都不会修改字符串本身
字符串位置方法：indexOf(),lastIndexOf()

var stringValue = "lorem ipsum dolor sit amtt,consectetur adipisicing elit";
var positions = new Array();
var pos = stringValue.indexOf("e");
while(pos > -1){
    positions.push(pos);
    pos = stringValue.indexOf("e",pos+1);
}
alert(position);

字符串大小写转换方法：toLowerCase(),toLocaleLowerCase(),toUpperCase(),toLocaleUpperCase()
字符串的模式匹配方法：match(),search(),replace(),split()
localeCompare()
fromCharCode()

内置对象：Global和Math
Global对象
方法:encodeURI和encodeURIComponent()方法，对URI进行编码，以便发送给浏览器。
encodeURI主要用于整个URI，而encodeURIComponent主要用于对URI中的某一段进行编码。
decodeURI和decodeURIComponent()
eval()方法
eval()方法就像是一个完整的ECMAScript解析器，它只接受一个参数，即要执行的ECMAScript字符串。
属性：
window对象，javascript中的window对象除了扮演ECMAScript规定的Global对象角色外，还承担了很多别的任务。

Math对象
属性
方法：min() max()
舍入方法: ceil()执行向上舍入 floor()执行向下舍入 round()标准舍入
random() 返回介于0和1直接的一个随机数不包括0和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");

preson1.sayName();

构造函数模式：
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=sayName;
}
fucntion sayName(){
alert(this.name);
}

var Person1 = new Person("Nicholas",29,"software Engineer");

原型模式： –对于引用对象出现问题
每个函数都有一个prototype(原型属性),这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。

function Person(){

}
Person.prototype.name="nicolas";
Person.prototype.age=29;
Person.prototype.job="software Engineer";
Person.prototype.sayName=fucntion(){
    alert(this.name);
}

var Person1 = new Person();
Person1.sayName();

var Person2 = new Person();
Person2.sayName();

function Person(){

}
Person.prototype{
    constructor : Person;
    name:"Nicholas";
    age:29;
    job:"software Engineer";
    sayName: function(){
    alert(this.name);
    }
}

组合使用构造函数模式和原型模式：

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);
    }
}

动态原型模式：

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);
        }
    }
}

寄生构造函数模式：

function Person(name,age,job){
    var o = new Object();
    o.name= name;
    o.job=job;
    o.sayName=function(){
        alert(this.name);
    }
    return o;
}
var Person = new Person("nicholas",29,"software Engineer");

稳妥构造模式：

function Person(name,age,job){
    var o = new Object();
    o.sayName = function(){
        alter(name);
    }
    return o;
}

继承：
主要依赖于原型链。利用原型让一个引用类型继承另一个引用类型的属性和方法。

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}
function SubType(){
    this.subproperty = false;
}
SubType.prototype= new SuperType();
SubType.prototype.getSubValue = function(){
    return this.subpropertype;
}
var instance = new SubType();
alert(instance.getSubValue);

alert(instance instanceOf Object);
alert(instance instanceOf SuperType);
alert(instance instanceOf SubType);

借用构造函数

function SuperType(){
    this.colors = ["red","blue","green"];
}
function SubType(){
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);

var instance2 = new SubType();
alert(instance2.colors);

组合继承，伪经典继承，将原型链和借用构造函数的记住组合到一起

function SuperType(name){
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}
function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
    alert(this.age);
};
var instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);
instance1.sayName();
instance1.sayAge();

var instance2 = new SubType("Greg",27);
alert(instance2.colors);
instance2.sayName();
instance2.sayAge();

原型式继承

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: "Nicholas",
    friends: ["shelby","Court","Van"]
};
var anotherPerson = object(person);
anotherPerson.name="Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name="Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);
alert(person.name);

寄生式模式
function createAnother(original){
var clone = object(original);
clone.sayHi = function(){
alert(“hi”);
}
return clone;
}
var person = {
name :”Nicholas”,
friends:[“shelby”,”court”,”ban”]
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

寄生组合式模式
通过借用函数来继承属性，通过原型链的混成形成继承方法。
function inheritProtoype(subType,SuperType){
var prototype = object(SuperType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}

function SuperType(name){
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}
function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
inheritProtoype(SubType,SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
}

匿名函数：拉姆达(lambda)函数
函数声明：在代码执行以前就被加载到作用域中 会给函数声明一个名字
function functionName(arg0,arg1,arg2){

}

函数表达式：在代码执行到那一行的时候才会有定义 会创建一个匿名函数，然后将匿名函数赋给了变量，但是没有给匿名函数指定名字。
var functionName = function(arg0,arg1,arg2){

}

匿名函数: 将函数作为参数传入另一个函数，或者从一个函数返回另一个函数时。
function(arg0,arg1,arg2){

}

arguments.callee 是一个指向正在执行函数的指针。
闭包：是指有权访问另一个函数作用域中的变量的函数。

初始化未经声明的变量，总是会创建一个全局变量

静态私有变量

function MyObject(){
    var privateVariable = 10;
    function privateVariable(){
        return false;
    }
    this.publicMethod = function(){
        privateVariable++;
        return privateVariable();
    }
}

(function(){
    var privateVariable = 10;
    function privateVariable(){
        return false;
    }
    MyObject = function(){

    }
    MyObject.prototype.publicMethod = function(){
        privateVariable++;
        return privateVariable();
    }
})();

(function(){
    var name = "";
    Person = function(value){
        name = value;
    }
    Person.prototype.getName = function(){
        return name;
    }
    Person.prototype.setName = function(value){
        name = value;
    }
})();

var person = new Person("Nicholas");
alert(person.getName());
person.setName("Greg");
alert(person.getName());

var person2 = new Person("Michael");
alert(person.getName());
alert(person2.getName());

单例模式(singleton)：只有一个实例对象
var singleton = {
name :value,
method:function(){

    }
}

var pageWidth = window.innerWidth,pageHight = winow.innerHeight;
if(typeof pageWidth != "number"){
    if(document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHight = document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHight = document.body.clientHeight;
    }
}

//BOM对象 浏览器对象模型 以window对象为依托，表示浏览器窗口以及页面可见区域。

//客户端检测
1.能力检测

2.怪癖检测：识别浏览器的特殊行为

3.用户代理检测：
五大主要引擎：IE、Gecko、Webkit、KHTML、Opera
Gecko -> Firefox
Mozilla
WebKit -> Safari
konqueror ->linux

DOM 文档对象模型，是针对HTML和XML文件的一个API。
DOM 描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面的某一部分。

Node类型
nodeType属性
nodeName属性 nodeValue属性
childNodes属性 每个节点都有一个属性，其中保存着一个NodeList对象。
hasChildNodes()方法 在节点包含一或多个子节点的情况下返回true。
nextSibling属性
previousSibling属性
firstChild属性
lastChild属性
ownerDocument属性 指向表示整个文档的文档节点。
操作节点
appendChild()方法 用于向childNodes列表的末尾添加一个节点。返回新增的节点。
insertBefore()方法 把节点放在childNodes列表中某个特定的位置上，而不是放在末尾
replaceChild()方法 要插入的节点 替换的节点
removeChild()方法 移除节点

cloneNode()方法 用于创建调用这个方法的节点的一个完全相同的副本，为true表示执行深复制，为false表示执行浅复制。
normalize()方法 处理文档树中的文本节点

Document类型
表示整个文档
document对象时window对象的一个属性。
Document节点具有以下特征：
nodeType的值为9；
nodeName的值为”#document”
nodeValue的值为null
parentValue的值为null
其它节点可能是一个DocumentType(最多一个)，Element(最多一个)，PricessingInstruction或Comment

document 是 HTMLDocument 的一个类型实例
documentElement属性，始终指向HTML页面中的元素
body属性，直接指向元素
DocumentType，<!DOCTYPE>标签看成是一个与文档其它部分不同的实体，通过doctype属性来访问它的信息。
title属性，包含title元素中的文本。

URL属性：包含页面完整的URL
domain属性：包含页面的域名
referrer属性：保存着链接到当前页面的那个页面的URL。
方法：
getElementById()
getElementsByTagName() 取得元素的标签名，返回一个HTMLCollection对象
HTMLCollection对象的方法 namedItem()通过元素的name特性取得集合中的项 []
HTMLDocument有的方法 getElementsByName() 返回带有给定name特性的所有元素。

HTMLCollection对象属性和方法：

document.anchors 包含文档中所有带name特性的<a>元素
document.applets 包含文档中所有的<applet>元素
document.forms
document.images
document.links

document.implementation属性 提供 hasFeature()

将输出流写入网页中的能力
write() writeln() open() close()

Element节点
nodeType的值为1
取得特征
getAttribute()
setAttribute()
removeAttribute()

attributes属性 NamedNodeMap
getNamedItem()
removeNamedItem()
setNamedItem()
item(pos)

createElement()方法

createTextNode()
normalize();
splitText();

注释在DOM中通过Comment类型来表示。Comment节点具有下列特征：

CData片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任何格式的文本内容。
CDATASection

DocumentType类型
DocumentFragment类型 轻量级的文档 可以包含和控制节点，但是不会像完整的文档那样占用额外的资源。
Atrr类型 元素的特征： name,value,specified

DOM扩展
document对象的一个属性：compatMode属性 标示浏览器处于什么模式
CSS1Compat标准模式
BackCompat混杂模式

滚动
HTMLELementde类型的扩展
scrollIntoView(alignWithTop)
scrollIntoIfNeeded(alignCenter)
scrollByLines(linesCount)
scrollByPages(pageCount)

childern属性

contains()方法确定某个给定的节点是不是另一个节点的后代

innerText属性可以操作元素中包含的所有文本内容，无论文本位于子文档树中的什么位置。
对所有稳重中的HTML语法字符进行编码。
过滤掉所有的HTML标签

innerHTML属性 在读信息时，返回当前元素所有子节点的HTML表现，包括元素、注释及文本节点。
在写入信息时，会按照指定的值创建新的DOM子树，并以该子树替换当前的所有子节点。
innerHTML处理的是HTML字符串，而innerText处理的文本字符串
outerText属性
outerHTML属性

动态脚本

xhtml的命名空间是：http://www.w3.org/1991/xhtml
命名空间的变化

DOM2样式
style对象
cssTest
getPropertyValue()
removeProperty()
计算样式 只读
getComputedStyle()
IE中 currentStyle

浏览器属性：visibility属性 都有一个默认的值：visible inherit

操作样式表
CSSStyleSheet类型
属性：
disabled
href
media
ownerNode
parentStyleSheet
title
type
cssRules
ownerRule
deleteRule
insertRule

CSSRule对象 表示样式表中的每一条规则。
CSSStyleRule对象包含以下属性：
cssText
parentRule
parentStyleSheet
selectorText
style对象typle

事件 观察者模式
事件类型：
UI(User Interface，用户界面)事件，在用户与页面上的元素交互时触发；
DOMActive
DOMFocusIn
DOMFocusOut
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
click
dblclick
mousedown
mouseout
mouseover
mouseup
mousemove
坐标 clientX clientY
键盘事件，当用户通过键盘在页面上执行操作时触发；
HTML事件，当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发
变动(mutation)事件，当底层DOM结果发生变化时触发。
shiftKey
ctrlKey
altKey
metaKey (IE不支持)

button属性
detail属性

键盘事件，当用户通过键盘在页面上执行操作时触发；

keydown
keypress
keyup
textInput
keyCode属性
charCode属性

HTML事件：指那些不一定与用户操作有关的事件
load
unload
abort
error
selector
change
submit
reset
resize
scroll
focus
blur

变动事件mutation DOM中某一部分发生变化时给出提示。
DOMSubtreeModified:
DOMNodeInserted
DOMNodeRemoved
DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument
DOMAtrrModified
DOMCharacterDataModified

专有事件
上下文菜单事件 contextmenu
卸载前事件 beforeunload事件
鼠标mouserwheel滚轮事件DOMMouseScroll
wheelDelta属性
DOMContentLoaded事件
就绪状态变化readystatechange事件

函数柯理化：用于创建已经设置好了一个或多个参数的函数。
函数节流：背后思想：某些代码不可以在没有间断的情况连续重复执行

本文标题:JS22-javascript高级程序设计代码

文章作者:jocelynthink

发布时间:2016-05-06, 21:15:25

最后更新:2016-06-13, 22:01:38

原始链接:http://yoursite.com/2016/05/06/JS22-javascript高级程序设计代码/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
,