《JavaScript面向对象编程指南》

最新推荐文章于 2024-04-15 15:42:58 发布
最新推荐文章于 2024-04-15 15:42:58 发布
阅读量503 收藏 1
点赞数
文章标签： javascript 设计模式 json ViewUI
原文链接：http://www.cnblogs.com/jesse131/p/5375744.html
版权

第一章、引言

1.5 面向对象的程序设计常用概念

对象（名词）：是指“事物”在程序设计语言中的表现形式。
这里的事物可以是任何东西，我们可以看到它们具有某些明确特征，能执行某些动作。
这些对象特征就叫做属性（形容词），动作称之为方法（动词）。

类：实际上就是对象的设计蓝图或制作配方。类更多的是一种模板，而对象就是在这些模版的基础上被创建出来的。

封装：主要阐述对象中包含的内容。通常包括：

  • 相关数据（用于存储属性）
  • 基于这些数据所能做的事（所能调用的方法）

聚合：将几个现有对象合并成一个新对象的过程

继承：实现代码重用

多态：不同对象通过相同的方法调用来实现各自行为的能力

第二章、基本数据类型、数组、循环及条件表达式

2.3.2 指数表示法

2e+3表示在数字2后面加3个0，即2000

typeof Infinity  // number 
typeof NaN       // number
typeof null      // object   null值表示一个空指针对象
2.3.4 惰性求值

Javascript引擎在一个逻辑表达式中遇到一个非布尔类型操作数，
那么该操作数的值就会成为该表达式返回的结果。

true || "something"  //true
true && "something"  //"something"
2.9 练习题
var s = "1s";  //隐式转换Number()用于任何数据类型
s++  //NaN
10 % "0"  //NaN   如果被除数是有限大的数值而除数是零，则结果是NaN
//乘法口诀程序代码
for(var i=1;i<10;i++){
    for(var j=1;j<=i;j++){
        document.write(j+"*"+i+"="+i*j+" ");
    }
    document.write("<br>");
}

第三章、函数

3.1.2 函数参数

函数内部都有一个内建的arguments数组，能返回函数所接收的所有参数

function sumOnSteroids(){
    var i,res = 0;
    for(i = 0; i < arguments.length; i++){
        res += arguments[i];
    }
    return res;
}
sumOnSteroids(1,2,3,4,5,6); //21
3.3 函数的作用域
var a = 123;
function f(){
    alert(a);   //undefined  这是因为函数域优先于全局域
    var a = 1;
    alert(a);  //1
}
f();
3.4.2 回调函数

当我们将函数B传递给函数A，并由A来执行B时，B就成了一个回调函数

function A(a,b,c,callback){
    var i=0,ar = [];
    for(i=0;i<3;i++){
        ar[i] = callback(arguments[i]*2);
    }
    return ar;
}
function B(a){  //回调函数
    return a+1;
}
A(a,b,c,B)
3.4.4 自调函数
(function(name){
    alert('Hello '+name+' !');
})('Jesse')  //Hello Jesse !
//第二对括号起到的是立即调用的作用，同时也是向函数传递参数的地方

使用自调函数的好处是不会产生任何全局变量，缺点是无法重复执行，这使得匿名自调函数最合适于执行一些一次性的或者初始化的任务

3.4.5 私有函数
function a(param){
    function b(theinput){  //私有函数
        return theinput * 2
    };
    return 'The result is '+b(param)
}

使用私有函数的好处：

  • 有助于全局命名空间的纯净性（命名冲突的机会很小）
  • 私有性--不被外部其他用用程序所用
3.4.7 能重写自己的函数

这对于要执行某些一次性初始化工作的函数非常有用

function a(){
    alert('A');      //第一次调用该函数时该语句会被执行
    a = function(){  //第一次调用时a被赋予新函数
        alert('B');  //第二次调用该函数时该语句会被执行
    };
}
var a = function(){
    function someSetup(){
        var setup = 'done'
    }
    function actualWork(){
        alert('work')
    }
    someSetup();
    return actualWork;
}();
3.5 闭包
3.5.1 作用域链

在函数内定义的变量在函数外是不可见的，
但是如果该变量是在某个代码块中定义的（if或for语句中），它在代码块外是可见的。

3.5.2 词法作用域

在javascript中每个函数都有一个属于自己的词法作用域，也就是说每个函数
在被定义时（而非执行时）都会创建一个属于自己的环境（即作用域）

function f1(){var a = 1;f2();}
function f2(){return a;} //f2()被定义时a是不可见的，只能访问自身作用域和全局作用域
f1();   //a is not defined
3.5.3 利用闭包突破作用域链
3.5.3.1 闭包#1
function f(){
    var b = "m";
    return function(){  //有着私有作用域，可以访问f()的作用域和全局作用域
        return b;
    }    
}
var n = f();
n();   //m

f()是全局函数，我们可以将它的返回值赋值给另一个全局变量，
从而生成一个可以访问f()私有空间的新全局函数

3.5.3.3 相关定义与闭包#3

如果一个函数在其父函数返回之后想留住对父级作用域的链接，就必须要为此建立一个闭包

3.5.3.4 循环中的闭包
function f(){
    var a = [];
    for(var i = 0; i < 3; i++){
        a[i] = function(){
            return i;
        }
    }
    return a;
}
var s = f();
s[0](); //3
s[1](); //3
s[2](); //3

我们在这里创建了3个闭包，它们都指向一个共同的局部变量i，
但是闭包不会记录它们的值，他们所拥有的只是一个i的引用，
因此只能返回i的当前值(循环结束时i=3).

function f(){
    var a = [];
    for(var i = 0; i < 3; i++){
        a[i] = (function(x){
            return function(){
                return x;
            }
        })(i);
    }
    return a;
}
var s = f();
s[0](); //0
s[1](); //1
s[2](); //2
3.7 练习题

1.十六进制值转为颜色函数getRGB()

function getRGB(hex){
    var rgb=[0,0,0];
    if(/#(..)(..)(..)/g.test(hex)){
        rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)];
    };
    return "rgb("+rgb.join(",")+")";
}
getRGB('#00ff00');  //"rgb(0,255,0)"

第四章、对象

4.1 从数组到对象

用[]定义数组的方法我们称之为数组文本标识法
用{}定义对象的方法我们称之为对象文本标识法

4.1.2 哈希表、关联型数组

在javascript中我们用数组表示索引型数组，用对象表示关联型数组

4.1.3 访问对象属性

一般通过以下两种方式访问对象的属性：

  • 中括号表示法：hero['name']
  • 点号表示法：hero.name
4.1.7 构造器函数
function Hero(name){  //构造器函数首字母大写
    this.name = name;
    this.occupation = 'ninja'
}
var hero = new Hero('jesse'); //使用new操作符创建新对象
hero.name;   //ninja

使用构造器函数的好处是能利用同一个构造器函数通过传参从而创建出不同的对象。

4.1.8 全局对象

事实上程序所在的宿主环境一般都会为其提供一个全局对象，
而所谓的全局变量其实只不过是该对象的属性

4.1.9 构造器属性

构造器属性实际上是一个指向用于创建该对象的构造器函数的引用

hero.contructor //Hero

通过instanceof操作符，我们可以测试一个对象是不是由某个指定的构造器函数所创建的

hero instanceof Hero; //true

4.1.12 传递对象

引用类型，因为其值大小不固定，因此栈内存中存放的只是该对象的访问地址，（即该对象的引用）
堆内存为这个值分配空间。因此我们在引用上所做的任何改动，都会影响到他所引用的源对象。

4.2 内建对象
4.2.1 Object

所有对象都继承自Object对象，因此都具有toLocaleString()、toString()和valueOf()方法。

var o = new Object();
var o = {};
alert(o); //[object,Object]

由于alert()要接收字符串参数，所以它会在后台调用toString()方法

Object构造器的成员:

Object构造器的成员

用Object()构造器所建对象的成员:

用Object()构造器所建对象的成员
用Object()构造器所建对象的成员
用Object()构造器所建对象的成员

4.2.2 Array
var a = new Array();
var a = [];
typeof a; //'object' 数组也是对象

值得关注的数组的属性与方法

  • length属性：定义数组时会自动生成length属性，而一般对象中没有
  • sort()、join()、slice()、splice()

Array对象的成员:

Array对象的成员
Array对象的成员
Array对象的成员
Array对象的成员

4.2.3 Function

函数实际上也是一种对象，函数对象的内建构造器是Function()

定义函数的三种方式：

  • function sum(a,b){return a + b;}; //函数声明
  • var sum = function(a,b){return a + b;}; //函数表达式
  • var sum = new Function('a','b','return a + b;'); //Function构造器 避免使用
4.2.3.1 Function对象的属性:
  • prototype属性详见第五章
  • length:用于记录该函数所拥有的参数数量
  • caller:返回一个调用该函数对象的外层函数引用
function A(){return A.caller;}
function B(){return A();}
B();  //function B(){return A();}
4.2.3.2 Function对象的方法

Function对象继承自Object对象，默认拥有Object对象的所有方法

call()、apply()方法都能让对象去借用其他对象中的方法为己所用，这也是一种代码重用的方式。

  • call()方法：
var someObj = {
    name: 'Ninja',
    say: function(who){
        return 'Hello '+who+', my name is '+ this.name;
    }
};
var myObj = {
    name:'Jesse'
};
someObj.say.call(myObj, 'Dude');//"Hello Dude, my name is Jesse"
//当say()被调用时其中的this就被自动设置成myObj对象的引用

如果我们调用call方法时需要传递更多的参数，可以在后面依次加入他们

someObj.say.call(myObj,'a','b','c')

如果我们没有将对象传递给call()的首参数，或者传递的是null，则它的调用对象默认为全局对象

  • apply()方法：
    apply()的工作方式与call()基本相同，唯一的不同之处在于第二个参数的传递形式apply()方法的第二个参数是通过一个数组来传递的

someObj.say.apply(myObj,['a','b','c'])

4.2.3.3 重新认识arguments对象
  1. 在函数中通过arguments访问传递给函数的所有参数
  2. arguments对象的callee属性，该属性返回的是当前被调用的函数对象
  3. 通过arguments.callee属性实现匿名函数的递归调用
(function(count){
    if(count < 5){
        console.log(count);
        arguments.callee(++count);
    }
})(1)  //1,2,3,4

Function对象的成员

Function对象的成员
Function对象的成员

4.2.4 Boolean
var b = new Boolean();
typeof b;  //'object'
typeof b.valueOf();// 'boolean'
4.2.5 Number

Number对象的toString()方法有一个可选的radix参数（默认10）

var n =new Number(255);
n.toString(16); // 'ff'

Number()构造器的成员
Number()构造器的成员
Number()构造器的成员

Number对象的成员
Number对象的成员
Number对象的成员

4.2.6 String

当我们将一个基本字符串当做对象来使用时，后台会执行相应的String对象创建操作

String()构造器的成员
String()构造器的成员

String对象的成员
String对象的成员
String对象的成员
String对象的成员
String对象的成员

4.2.7 Math

Math对象既不能当做一般函数来使用，也不能用new操作符创建对象，只是一个包含一系列方法和属性的内建对象

获取某个max和min之间的值，公式((max-min)*Math.random())+min

Math对象的成员
Math对象的成员
Math对象的成员

4.2.8 Date

Date()构造器成员
Date()构造器成员

Date对象的成员
Date对象的成员
Date对象的成员
Date对象的成员
Date对象的成员
Date对象的成员

4.2.9 RegExp
var reg = new RegExp('j.*t');
var reg = /j.*t/; //匹配任何以j开头t结尾的字符串，且这俩字符之间包含1个或多个字符
4.2.9.1 RegExp对象的属性
  • global:如果该值为false（默认），相关搜索在找到第一个匹配位置时就会停止，如果为true则会找出所有匹配位置,简写为‘g’
  • ignoreCase:设置是否忽略大小写，默认为false,简写为'i'
  • multiline:设置是否跨行搜索，默认为false,简写为'm'
  • lastIndex:搜索开始的索引位置，默认为0。在对象创建之后可以修改
  • source:用于存储正则表达式匹配模式

var reg = /j.*t/img;

4.2.9.2 RegExp对象的方法
  • test():返回的是一个布尔值（找到匹配内容为true，否则为false）
  • exec():返回的是一个由匹配字符串组成的数组
/j.*t/i.test('Javascript')   //true  
/j.*t/i.exec('Javascript')[0]  //Javascript
4.2.9.3 以正则表达式为参数的字符串方法
  • match():返回的是一个包含匹配内容的数组
  • search()：返回的是第一个匹配内容所在的位置
  • replace()：将匹配的文本替换成指定的字符串
  • split()：根据指定的正则表达式将目标字符串分割成若干数组元素
var s = new String('HelloJavascriptWorld');
s.match(/j.*a/ig);  //['Java']
s.search(/j.*a/i);  //5
//当某个匹配对象被找到时，如果我们想让相关的替换字符串中包含匹配的文本，可以使用$&修饰符
s.replace(/[A-Z]/g,'_$&');  //"_Hello_Javascript_World"
//如果正则表达式分了组（即带括号），那么可以用$1代表匹配分组中的第一组，$2代表第二组
s.replace(/[A-Z]/g,'_$1'); //"_Hello_Javascript_World"
var csv = 'one, two,three ,four';
csv.split(/\s*,\s*/)  //["one", "two", "three", "four"]
// \s*匹配0个或多个空格
//以上的4个方法可以接受的参数也包括字符串
"test".replace('t','r');  //"rest"

RegExp对象的成员
RegExp对象的成员
RegExp对象的成员

4.2.10 Error对象
try{
    //可能会导致错误的代码
}catch(e){
    //在发生错误时处理代码
}finally{  //可选的
    //无论如何都会执行的代码
}
4.4 练习题
c = [1,2,[1,2]];
c.sort(); //[1, [1,2], 2]

4、在String()构造器不存在时，自定义MyString()构造器函数并通过以下测试

function MyString(string){
    //this.length = 
    this.toString = function(){
        return string.toString();
    }
    this.valueOf = function(){
        return string.valueOf();
    }
    this.reverse = function(){
        return Array.prototype.reverse.apply(string.split('')).join('');
    }
}
var s = new MyString('hello');
s.length;  //5
s[0]; //'h'
s.toString(); //'hello'
s.valueOf(); //'hello'
s.chatAt(1); //'e'
s.concat(' world!'); //'hello world!'
s.slice(0,-1); //'hell'
s.split('l'); //['he','','o']

6、在Array()不存在时，创建MyArray()构造器并通过以下测试

var a = new MyArray(1,2,3,'test');
a.length;//4
a.toString();//'1,2,3,test'
a[a.length - 1];//'test'
a.push('boo');//5
a.pop();//'1,2,3,test'
a.join(',');//'1,2,3,test'
function MyArray(){
    this.length = 
}

第五章、原型

5.1 原型属性
5.1.4 利用自身属性重写原型属性

如果在一个对象自身属性中没有找到指定的属性，就可以去原型链中查找相关属性。但是如果遇上对象自身属性与原型链属性同名时，那么对象自身属性的优先级高于原型链属性。

function Gadget(name,color){
    this.name = name;
    this.color = color;
    this.method =function(){
        return 1;
    }
}
Gadget.prototype.price = 10;
Gadget.prototype.rating = 3;
var newtoy = new Gadget('webcam','back');
for(var prop in newtoy){
    console.log(prop + '=' + newtoy[prop]);
}
//name=webcam
//color=back
//method=function (){return 1;}
//price=10
//rating=3

hasOwnProperty()方法用于区分对象自身属性(返回true)与原型属性(返回false)

newtoy.hasOwnProperty('name');   //true
newtoy.hasOwnProperty('price');  //false

propertyIsEnumerable()方法对所有非内建对象属性返回true,表示可通过for-in枚举;

newtoy.propertyIsEnumerable('name'); //true

isPrototypeOf()方法会告诉我们当前对象是否是另一个对象的原型

var monkey = {
    hair:true,
    feeds:'bananas',
    breathes:'air'
};
function Human(name){
    this.name = name;
}
Human.prototype = monkey;
var jesse = new Human('Jesse');
monkey.isPrototypeOf(jesse);  //true
5.2 扩展内建对象

为Array对象添加inArray()方法，用于查询数组中是否存在某个特定的值

if(!Array.prototype.inArray){  //如果想通过原型为某个对象添加新属性，请务必检查该属性是否已存在
    Array.prototype.inArray = function (needle){
        for(var i = 0;i < this.length; i++){
            if(this[i] == needle){
                return true;
            }
        }
        return false;
    }
}
var a = ['a','b','c'];
a.inArray('d');  //false

为String对象添加reverse()方法，用于反向输出该字符串

if(!String.prototype.reverse){  //如果想通过原型为某个对象添加新属性，请务必检查该属性是否已存在
    String.prototype.reverse = function(){
        return Array.prototype.reverse.apply(this.split('')).join('');
    }
}
"Jesse".reverse();  //"esseJ"
//首先利用this.split('')将目标字符串转为数组，并作为apply()的第二个参数，第一个参数不传值时默认为全局对象
//再调用数组的reverse()方法生成反向数组
//最后通过join()方法将数组转化为字符串
5.2.2 原型陷阱
  • 当我们对原型对象完全替换时，可能会触发异常
  • prototype.constructor属性不可靠

解决方法:当我们重写某对象的prototype时，必须重置相应的constructor属性

5.4 练习题
var shape = {
    type:"triangle",
    getType:function(){
        return this.type;
    }
}
function Triangle(a,b,c){
    this.a = a;
    this.b = b;
    this.c = c;
}
Triangle.prototype = shape;
//当我们重写某对象的prototype时，必须重置相应的constructor属性
Triangle.prototype.constructor = Triangle;
Triangle.prototype.getPerimeter = function(){
    return this.a + this.b + this.c;
}
var t = new Triangle(1,2,3);
for(var prop in t){
    if(t.hasOwnProperty(prop)){
        console.log(prop + '=' + t[prop]);
    }
}
t.constructor; //Trianle(a,b,c)
shape.isPrototypeOf(t); //true
t.getPerimeter(); //6
t.getType(); //"triangle"

第六章、继承

6.1.1 原型链示例
function Shape(){
    this.name = 'shape';
    this.toString = function(){return this.name;};
}
function TwoDShape(){
    this.name = '2D shape';
}
function Triangle(side,height){
    this.name = 'Triangle';
    this.side = side;
    this.height = height;
    this.getArea = function(){
        return this.side*this.height/2;
    }
}
TwoDShape.prototype = new Shape();
Triangle.prototype = new TwoDShape();
//我们用构造器Shape()另建了一个新的实体，然后用它去覆盖该对象的原型
//这确保了在继承实现之后，我们对Shape()所进行的任何修改、重写、删除都不会对TwoShape()产生影响
TwoDShape.prototype.constructor = TwoDShape;
Triangle.prototype.constructor = Triangle;
var my = new Triangle(5,10);
my.getArea();//25
my.toString(); // Triangle
6.1.2 将共享属性迁移到原型中
function Shape(){};
Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){return this.name;};
function TwoDShape(){};
TwoDShape.prototype = new Shape();
TwoDShape.prototype.constructor = TwoDShape;
//我们需要在对原型对象进行扩展之前，先完成相关继承关系的构建
TwoDShape.prototype.name = '2D shape';
function Triangle(side,height){
    this.side = side;
    this.height = height;
}
Triangle.prototype = new TwoDShape();
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){
    return this.side*this.height/2;
}
6.2 只继承于原型
function Shape(){};
Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){return this.name;};
function TwoDShape(){};
//TwoDShape.prototype = new Shape(); new Shape()会将Shape的属性设定为对象自身属性，这样的代码是不可重用的
TwoDShape.prototype = Shape.prototype;
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = '2D shape';
function Triangle(side,height){
    this.side = side;
    this.height = height;
}
Triangle.prototype = TwoDShape.prototype;
//这样固然可以提高效率，但是子对象和父对象都指向同一对象，一旦对原型属性进行修改，继承的对象相关属性也随之改变
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){
    return this.side*this.height/2;
}
var s = new Shape();
s.name;//"Triangle"
6.3 uber--子对象访问父对象的方式

在构建继承关系的过程中引入一个uber属性，并令其指向其父级原型对象

6.8 深拷贝

当对象类型的属性拷贝时，实际上拷贝的只是该对象在内存中的位置指针，这一过程就是浅拷贝

//浅拷贝
function extendCopy(p){
    var c = {};
    for(var i in p){
        c[i] = p[i];
    }
    c.uber = p;
    return c;
}
//深拷贝
function deepCopy(p,c){
    var c = c || {};
    for(var i in p){
        if(typeof p[i] === 'object'){ 
            c[i] = (p[i].constructor == Array) ? [] : {};
            deepCopy(p[i],c[i]); //在遇到一个对象引用型的属性时，需要再次调用深拷贝
        }else{
            c[i] = p[i];
        }
    }
    return c;
}
var parent = {
    numbers:[1,2,3],
    letters:['a','b','c'],
    obj:{prop:1},
    bool:true
};
var mydeep = deepCopy(parent);
var myshallow = extendCopy(parent);
mydeep.numbers.push(4,5,6); //6
mydeep.numbers; //[1, 2, 3, 4, 5, 6]
parent.numbers; //[1, 2, 3]
myshallow.numbers.push(10); //4
myshallow.numbers; //[1, 2, 3, 10]
parent.numbers; //[1, 2, 3, 10]
mydeep.numbers; //[1, 2, 3, 4, 5, 6]
6.9 object

基于在对象之间直接构建继承关系的理念，可以用object()来接收父对象，并返回一个以该父对象为原型的
新对象。

function object(p){
    function F(){};
    F.prototype = p;
    return new F();
}
6.12 寄生式继承
var twoD = {
    name:'2d shape',
    dimensions:2
}
function triangle(s,h){
    var that = object(twoD);//把twoD对象全属性拷贝进that对象
    that.name = 'Triangle';
    that.getArea = function(){return this.side * this.height / 2};
    that.side = s;
    that.height = h;
    return that;
}
6.14 本章小结

实现继承的方法大致上分为两类：

  • 基于构造器工作模式
  • 基于对象工作模式

实现继承的方法
实现继承的方法
实现继承的方法

6.15 案例学习：图形绘制

未完成

第七章、浏览器环境

7.3 BOM
7.3.1 Window对象
window.open('新URL','新窗口名','以逗号分割的功能性列表')
window.close();
window.moveTo(x,y);
window.moveBy(x,y);
window.resizeTo(x,y);
window.resizeBy(x,y);
window.alert();
window.prompt(); //点击确认返回相应文本，点击取消返回null
window.confirm();//点击确认返回true，点击取消返回false
window.setTimeout();//指定多长时间后执行代码
window.setInterval();//指定每隔多长时间执行代码

navigation.userAgent是一个用户浏览器识别的长字符串，但不要过分依赖这种用户代理字符串，
浏览器能力检测是更好地选择

  • 这种字符串很难追踪到所有的浏览器以及其各种版本
  • 这种字符串可以被修改
7.3.3 location对象

localtion对象的完整属性：

  • href
  • hash
  • host
  • hostname
  • port
  • protocol
  • search

location对象的方法：

  • reload()重载某页面
  • assign()打开新URL，并在历史记录中生成新纪录
  • replace()与assign()相同，但不会生成新纪录
7.3.4 history对象

history.forward();history.back();

7.3.5 screen对象
screen.width();
screen.availwidth();
7.4 DOM
7.4.2 DOM节点的访问
hasChildNodes()方法用于判断一个节点是否存在子节点
hasAttributes()方法用于检查该元素中书否存在属性
document.documentElement.childNodes.length; //2
//任何节点都可以通过自身的parentNode来访问它的父节点
document.documentElement.parentNode; //<html>
document.getElementsByTagName();
document.getElementsByName();
document.getElementById();
nextSibling/previousSibling;
firstChild/lastChild
7.4.4 新建节点
createElement();
var myp = document.createElement('p');
createTextNode();//新建文本节点
appendChild();
document.body.appendChild(myp);
cloneNode(true)//true深拷贝 false浅拷贝
insertBefore(要插入的节点,参照节点);
replaceChild(要插入的节点,要替换的节点)
removeChild(要移除的节点);
7.5 事件
7.5.3 DOM的事件监听器
addEventListener('事件类型',函数指针[,false]);
removeEventListener('事件类型',函数指针[,false]);
//匿名函数所定义的监听器是不能被移除的

该方法基于某一节点对象来调用，第三个参数决定代码是否采用事件捕捉，可选的，为了适应更多的浏览器，我们一般将其设置为false，即采用事件冒泡。

7.6 XMLHttpRequest对象
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
//设置一个能触发readystatechange事件的事件监听器,及处理响应程序
xhr.onreadystatechange=function(){
    if (xhr.readyState==4 && xhr.status==200){
        console.log(xhr.responseText);
    }
}
//open(请求类型,请求目标URL,是否异步请求)
xhr.open('GET','somefile.txt',true);
//发送请求
xhr.send('')
7.8 练习题
2.3
function include(js){
    var script = document.createElement('script');
    script.src = js;
    document.body.appendChild(script);
}
include('somescript.js');
3.1
var myevent = {
    addListener:function(el,type,fn){
        if(typeof window.addEventListener === 'function'){
            myevent.addListener = function(el,type,fn){
                el.addEventListener(type,fn,false);
            };
        }else if(typeof window.attachEvent === 'function'){ //code for IE
            myevent.addListener = function(el,type,fn){
                el.attachEvent('on'+type,fn);
            };
        }else{  // code for older browsers
            myevent.addListener = function(el,type,fn){
                el['on' + type] = fn;
            };
        }
        myevent.addListener(el,type,fn);
    },
    removeListener : function(el,type,fn){
        if(typeof window.removeEventListener === 'function'){
            myevent.removeListener = function(el,type,fn){
                el.removeEventEventListener(type,fn,false);
            };
        }else if(typeof window.detachEvent === 'function'){ //code for IE
            myevent.removeListener = function(el,type,fn){
                el.detachEvent('on'+type,fn);
            };
        }else{  // code for older browsers
            myevent.removeListener = function(el,type,fn){
                el['on' + type] = null;
            };
        }
        myevent.removeListener(el,type,fn);
    },
    getEvent:function(event){},
    getTarget:function(event){},
    stopPropagation:function(event){},
    preventDefault:function(event){}
}
4.1
var ajax ={
    request:function(url,requestType,queryString){
        var xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP")
        }
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);
            }
        }
        xhr.open(requestType,url,true);
        xhr.send('');
    }
}
ajax.request('some.txt','get');

第八章、编程模式与设计模式

8.1 编程模式
8.1.2 命名空间与初始化分支模式

为了减少命名冲突，最好的办法是将变量和方法定义在不同的命名空间中，这种方法的实质是只定义一个全局变量，
并将其他的方法和属性定义为该变量的属性。

var mySpace = {};
mySpace.event = {
    addListener:null,
    removeListener:null
    ……
}
if(typeof window.addEventListener === 'function'){
    mySpace.event.addListener = function(el,type,fn){
        el.addEventListener(type,fn,false);
    };
    mySpace.event.removeListener = function(el,type,fn){
        el.removeEventListener(type,fn,false);
    };
}else if(typeof window.attachEvent === 'function'){ //code for IE
    mySpace.event.addListener = function(el,type,fn){
        el.attachEvent('on'+type,fn);
    };
    mySpace.event.removeListener = function(el,type,fn){
        el.detachEvent('on'+type,fn);
    };
}else{  // code for older browsers
    mySpace.event.addListener = function(el,type,fn){
        el['on' + type] = fn;
    };
    mySpace.event.removeListener = function(el,type,fn){
        el['on' + type] = null;
    };
}
8.1.4 延迟定义模式
var mySpace = {};
mySpace.event = {
    addListener:function(el,type,fn){
        if(typeof window.addEventListener === 'function'){
            mySpace.event.addListener = function(el,type,fn){
                el.addEventListener(type,fn,false);
            };
        }else if(typeof window.attachEvent === 'function'){ //code for IE
            mySpace.event.addListener = function(el,type,fn){
                el.attachEvent('on'+type,fn);
            };
        }else{  // code for older browsers
            mySpace.event.addListener = function(el,type,fn){
                el['on' + type] = fn;
            };
        }
        mySpace.event.addListener(el,type,fn);
    }
};
8.1.5 配置对象

该模式适用于有很多参数的函数或方法

用单个对象来替代多个参数有以下几点优势：

  • 不用考虑参数的顺序
  • 可以跳过某些参数的设置
  • 函数的扩展性强
  • 代码可读性好
var myapp = {};
myapp.dom = {};
myapp.dom.Button = function(text,conf){
    var type = conf.type || 'submit';
    var font = conf.font || 'microsoftyahei';
    //……
}
//使用方法如下：
var config = {
    font:'Arial,Verdana,microsoftyahei',
    color:'#fff'
};
new myapp.dom.Button('lalala',config);
8.1.6 私有属性和方法
8.1.7 特权函数
8.1.8 私有函数的公有化
8.1.9 自执行函数
(function(){
    // code in here
})()
//该模式特写适用于某些脚本加载时所执行的一次性初始化工作
8.1.10 链式调用

构造器返回的是新建对象的this指针，我们可以使用这些方法所返回的实例来调用其他方法

document.body.appendChild(
    new mySpace.dom.Element('span')
               .setText('hello')
               .setStyle('color','red')
);
8.1.11 JSON

var obj = JSON.parse(xhr.responseText);

8.2 设计模式
8.2.2 单件模式
8.2.3 工厂模式
8.2.4 装饰器模式
8.2.5 观察者模式

转载于:https://www.cnblogs.com/jesse131/p/5375744.html

weixin_30764771
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript面向对象编程指南.pdf
06-19
JavaScript作为一门浏览器语言的核心思想；面向对象编程的基础知识及其在JavaScript中的运用；数据类型、操作符以及流程控制语句；函数、闭包、对象和原型等概念，以代码重用为目的的继承模式；BOM、DOM、浏览器事件、AJAX和JSON；如何实现JavaScript中缺失的面向对象特性，如对象的私有成员与私有方法；如何应用适当的编程模式，发挥JavaScript语言特有的优势；如何应用设计模式解决常见问题等。 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性，展示如何构建强健的、可维护的、功能强大的应用程序及程序库
JavaScript面向对象编程详解
m0_75198698的博客
04-24 1246
面向对象编程（Object-oriented programming，简称 OOP）是一种基于对象和类的编程范式，它将数据和操作数据的函数封装在一起，形成一个独立的对象，并允许对象之间通过继承、接口等方式相互联系和交互。在 JavaScript 中，每个对象都有一个原型对象，它定义了该对象的基本属性和方法，而对象之间的继承关系通过原型链来实现。在子类 Child 中，我们定义了自己的属性 age 和方法 sayAge()，并且可以调用父类 Parent 的方法 sayHello()。
【JavaScript高级】面向对象编程
前端知识分享喵
08-24 313
要理解面向对象，就要理解什么是 面向过程。原生JavaScipt案例合集JavaScript +DOM基础JavaScript 基础到高级Canvas游戏开发面向过程注重的是解决问题的步骤，利用函数去实现每一步过程，没有类和对象的概念，常见的面向过程的语言 C 语言。面向对象注重使用对象去解决某一个问题，具有类和对象的概念。类是抽象的，注重的是一类的东西，比如说人类、鸟类、猫科等等，从这些类中拿到具体的对象，对象就是一个比较明确的个体，利用这个对象去解决针对性的问题。
javascript面向对象编程
前端之路
06-12 752
javascript面向对象编程的四种方式1. 字面量方式定义对象主要应用于属性多的对象。直接创建一个对象。<script> //1. 按照字面量方式 定义对象 var student = {"sname":"tom","sex":"", "getsname":function(){return this.sname},
读书笔记《javascript面向对象编程指南》
qq_38246482的博客
02-13 410
第一章 ◆对象 事物在程序设计语言中的表现形式． ◆类 一切基于对象，依靠一套原型系统（prototype)，我将现有的 Person 对象扩展成了一个叫做Bob的新对象 ◆封装 阐述对象中所包含的内容 1.信息隐藏 2.方法与属性的可见性. ◆聚合 现有对象合并成一个新对象的过程(分解问题便于解决) ◆继承 ◆多态 不同对象通过相同的方法调用来实现各自行为的能力. 第二章 ◆变量 1.声明变量 2.初始化变量 tips 区分大小写 ◆操作符 ±*/% ++ – 后置时先返回再递增减 ◆基本数据类型 ◇基本
JavaScript面向对象编程指南
07-22
资源名称：JavaScript面向对象编程指南内容简介： Javaｓｃｒｉｐｔ是一种具有高度表达能力的、基于原型特性的、非常灵活的面向对象编程语言。《Javaｓｃｒｉｐｔ面向对象编程指南》着重介绍Javaｓｃｒｉｐｔ在面向...
JavaScript 面向对象编程指南
10-29
适合有一定javascript开发基础的读者，从javascript语言的内部运行特性去阐述javascript的开始。
JavaScript 面向对象详解
qq_36081714的博客
08-09 3502
JavaScript面向对象
JavaScript------面向对象
weixin_43526403的博客
02-14 718
JavaScript面向对象
JavaScript高级教程（面向对象编程）
一只努力搬砖的打工妹纸
01-25 5154
面向对象编程 有两大编程思想：面向过程和面向对象； 面向过程编程POP(Process-oriented programming) 面向过程即分析出解决问题所需要的步骤，然后用函数将这些步骤一步步实现，使用的时候再一个个的一次调用就可以了； 即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门 面向对象编程OOP(Object Oriented Programming) 面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对
JavaScript面向对象编程指南（第2版）.rar
04-09
完整版完整版完整版完整版完整版完整版完整版完整版完整版
JavaScript面向对象编程指南（第2版）.pdf
10-31
JavaScript面向对象编程指南（第2版）.pdf 高清带目录
JavaScript面向对象编程指南（第2版）
07-22
资源名称：JavaScript面向对象编程指南（第2版）内容简介：1.本书是唯一一本介绍Javaｓｃｒｉｐｔ面向对象编程的图书。2.本书作者是知名的Web开发人员和作者。受到国内众多前端开发人员，如淘宝UED团队的推崇和推荐。 Stoyan Stefanov：Facebook公司工程师、作家、演说家。他经常会在其博客（www.phpied.com）与一些相关会议中就Web开发话题发表独到见解。 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Javascript面向对象编程.
03-26
NULL 博文链接：https://goyourauntie.iteye.com/blog/1179204
javascript面向对象编程指南 2nd
02-17
javascript面向对象编程指南 2nd英文版，英文名：Object-Oriented JavaScript。 What you will learn from this book The basics of object-oriented programming, and how to apply it in the JavaScript environment How to set up and use your training environment (Firebug) In depth discussion of data types, operators, and flow control statements in JavaScript In depth discussion of functions, function usage patterns, and variable scope Understand how prototypes work Reuse code with common patterns for inheritance Make your programs cleaner, faster and compatible with other programs and libraries Use object-oriented JavaScript for improving script performance Achieve missing object-oriented features in JavaScript
JavaScript面向对象编程指南完整版
11-27
JavaScript面向对象编程指南是完整的扫描版...
使用 Fetch API 执行 GraphQL 查询和变体
最新发布
ikxin的博客
04-15 1082
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
javascript面向对象编程指南pdf
12-19
JavaScript面向对象编程指南是一本以JavaScript作为编程语言的基础，讲解面向对象编程（OOP）的指南。该指南主要介绍了JavaScript中如何使用面向对象的编程思想和技术来构建可重用、可扩展的代码。 该指南首先介绍...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值