日志

来源:互联网 发布:不知道在淘宝上买什么 编辑:程序博客网 时间:2024/06/05 20:00

AngularJS前端-->CRUD应用-->ajax

JavaScript 框架(库)

JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。

为了应对这些调整,许多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架

在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架:

  • jQuery
  • Prototype
  • MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。

在本教程中,您将学习到如何开始使用它们,来使得 JavaScript 编程更容易、更安全且更有乐趣。



jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。

jQuery 同时提供 companion UI(用户界面)和插件。

许多大公司在网站上使用 jQuery:

  • Google
  • Microsoft
  • IBM
  • Netflix

如需更深入地学习 jQuery,请访问我们的 jQuery 教程。

Prototype

Prototype 是一种库,提供用于执行常见 web 任务的简单 API。

API 是应用程序编程接口(Application Programming Interface)的缩写。它是包含属性和方法的库,用于操作 HTML DOM。

Prototype 通过提供类和继承,实现了对 JavaScript 的增强。

MooTools

MooTools 也是一个框架,提供了可使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的效果和动画函数。





JavaScript prototype

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱。

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。

私有变量、函数

在具体说prototype前说几个相关的东东,可以更好的理解prototype的设计意图。之前写的一篇JavaScript 命名空间博客提到过JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。

复制代码
function Obj(){                var a=0; //私有变量                var fn=function(){ //私有函数                                    }            }
复制代码

这样在函数对象Obj外部无法访问变量a和函数fn,它们就变成私有的,只能在Obj内部使用,即使是函数Obj的实例仍然无法访问这些变量和函数

var o=new Obj();            console.log(o.a); //undefined            console.log(o.fn); //undefined

静态变量、函数

当定义一个函数后通过 “.”为其添加的属性和函数,通过对象本身仍然可以访问得到,但是其实例却访问不到,这样的变量和函数分别被称为静态变量和静态函数,用过Java、C#的同学很好理解静态的含义。

复制代码
function Obj(){                            }                        Obj.a=0; //静态变量                        Obj.fn=function(){ //静态函数                                }                        console.log(Obj.a); //0            console.log(typeof Obj.fn); //function                        var o=new Obj();            console.log(o.a); //undefined            console.log(typeof o.fn); //undefined
复制代码

实例变量、函数

在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法,实例化后可以访问,JavaScript也能做到这样

复制代码
function Obj(){                this.a=[]; //实例变量                this.fn=function(){ //实例方法                                    }            }                        console.log(typeof Obj.a); //undefined            console.log(typeof Obj.fn); //undefined                        var o=new Obj();            console.log(typeof o.a); //object            console.log(typeof o.fn); //function
复制代码

这样可以达到上述目的,然而

复制代码
function Obj(){                this.a=[]; //实例变量                this.fn=function(){ //实例方法                                    }            }                        var o1=new Obj();            o1.a.push(1);            o1.fn={};            console.log(o1.a); //[1]            console.log(typeof o1.fn); //object            var o2=new Obj();            console.log(o2.a); //[]            console.log(typeof o2.fn); //function
复制代码

上面的代码运行结果完全符合预期,但同时也说明一个问题,在o1中修改了a和fn,而在o2中没有改变,由于数组和函数都是对象,是引用类型,这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用,而是对Obj对象定义的属性和方法的一个复制。

这个对属性来说没有什么问题,但是对于方法来说问题就很大了,因为方法都是在做完全一样的功能,但是却又两份复制,如果一个函数对象有上千和实例方法,那么它的每个实例都要保持一份上千个方法的复制,这显然是不科学的,这可肿么办呢,prototype应运而生。

prototype

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针,有些绕了啊,写代码、上图!

function Person(){                            }

image

根据上图可以看出Person对象会自动获得prototyp属性,而prototype也是一个对象,会自动获得一个constructor属性,该属性正是指向Person对象。

当调用构造函数创建一个实例的时候,实例内部将包含一个内部指针(很多浏览器这个指针名字为__proto__)指向构造函数的prototype,这个连接存在于实例和构造函数的prototype之间,而不是实例与构造函数之间。

复制代码
function Person(name){                this.name=name;            }                        Person.prototype.printName=function(){                alert(this.name);            }                        var person1=new Person('Byron');            var person2=new Person('Frank');
复制代码

 

image

Person的实例person1中包含了name属性,同时自动生成一个__proto__属性,该属性指向Person的prototype,可以访问到prototype内定义的printName方法,大概就是这个样子的

image

写段程序测试一下看看prototype内属性、方法是能够共享

复制代码
function Person(name){                this.name=name;            }                        Person.prototype.share=[];                        Person.prototype.printName=function(){                alert(this.name);            }                        var person1=new Person('Byron');            var person2=new Person('Frank');                        person1.share.push(1);            person2.share.push(2);            console.log(person2.share); //[1,2]
复制代码

果不其然!实际上当代码读取某个对象的某个属性的时候,都会执行一遍搜索,目标是具有给定名字的属性,搜索首先从对象实例开始,如果在实例中找到该属性则返回,如果没有则查找prototype,如果还是没有找到则继续递归prototype的prototype对象,直到找到为止,如果递归到object仍然没有则返回错误。同样道理如果在实例中定义如prototype同名的属性或函数,则会覆盖prototype的属性或函数。

复制代码
function Person(name){                this.name=name;            }                        Person.prototype.share=[];            var person=new Person('Byron');            person.share=0;                        console.log(person.share); //0而不是prototype中的[]
复制代码

构造简单对象

当然prototype不是专门为解决上面问题而定义的,但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象,如果希望实例对象的属性或函数则定义到prototype中,如果希望每个实例单独拥有的属性或方法则定义到this中,可以通过构造函数传递实例化参数。

复制代码
function Person(name){                this.name=name;            }                        Person.prototype.share=[];                        Person.prototype.printName=function(){                alert(this.name);            }
复制代码
分类: JavaScript Core


0 0
原创粉丝点击