没有合适的资源?快使用搜索试试~ 我知道了~
对常用的JS开发模式的简单描述,适合初入学者
资源推荐
资源详情
资源评论
JavaScript 设计模式
一直都在考虑这个月分享大家什么东西最好,原计划是打算写一些 HTML5 中 JS 方面的内容或者是
AJAX 方面的,可是自己由于表达能力,时间,还有个人工作方面的问题,这个还是等下个月再做分享吧
^.^。
老规矩,开始正文以前先交代自己写这篇文章的目的和一些注意事项:
1.首先本人一直从事前端开发,所以除了 JavaScript 其他的语言了解不深,所以文章只会以
JavaScript 语言的角度去论证;
2.其实我个人在项目用过的模式也不多,对模式的概念的理解也没有那么抽象,所以最近在面试中
如果面试官问到与模式相关的问题,自己感觉在对答过程中很郁闷,很多东西表达不清楚,于是就找了
些相关资料,才会有这篇文章分享;
3.JavaScript 模式与前端的工作和成长密不可分,因为这确实不是一个简单的话题,所以我只能尽
力用简单表达和例子阐明,而且园子里有很多的高手,所以希望大家踊跃发言(由于水平有限,请大家多
多指教,希望嘴下留情);
4.由于这篇文章更多的只是想起到一个介绍和讲解的作用,并不打算对每种模式进行细致的分析,
所以每种模式只用到一个至二个例子,可能会造成这个例子的表达并不是最优的或者不够全面,如果各
位看官觉得不过瘾,可以再去查找相关资料;
5.做任何事都需要坚持,写博客也是一样,嘿嘿,每月至少一篇(文章确实较长,希望能对朋友们有
所帮助,重点部分在前言中有介绍,大家可以选择感兴趣的模式进行深入)。
6.欢迎转载,不过请注明出处,谢谢。
了解 JavaScript 设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳
过)
闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理
解。
1.闭包最常用的方式就是返回一个内联函数(何为内联函数?就是在函数内部声明的函数);
2.在 JavaScript 中有作用域和执行环境的问题,在函数内部的变量在函数外部是无法访问的,
在函数内部却可以得到全局变量。由于种种原因,我们有时候需要得到函数内部的变量,可是用常规方
法是得不到的,这时我们就可以创建一个闭包,用来在外部访问这个变量。
3.闭包的用途 主要就是上一点提到的读取函数内部变量,还有一个作用就是可以使这些变量一
直保存在内存中。
4.使用闭包要注意,由于变量被保存在内存中,所以会对内存造成消耗,所以不能滥用闭包。
解决方法是 在退出函数之前,将不使用的局部变量全部删除。
最后还是上一套闭包的代码吧,这样更直观。
1 function f(){
2 var n = 999;
3 function f1(){
4 alert(n+=1);
5 }
6 return f1;
7 }
8 var result = f();
9 result(); // 1000
10 result(); // 1001
11 result(); // 1002
封装:通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象
之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以是代码更可靠,更易于调
试。封装是面向对象的设计的基石。
尽管 JavaScript 是一门面向对象的语言,可它并不具备将成员声明为公用或私用的任何内部机制,
所以我们只能自己想办法实现这种特性。下面还是通过一套完整的代码去分析,介绍什么是私有属性和
方法,什么是特权属性和方法,什么是公有属性和方法,什么是公有静态属性和方法。
私有属性和方法:函数有作用域,在函数内用 var 关键字声明的变量在外部无法访问,私有属性和
方法本质就是你希望在对象外部无法访问的变量。
特权属性和方法:创建属性和方法时使用的 this 关键字,因为这些方法定义在构造器的作用域中,
所以它们可以访问到私有属性和方法;只有那些需要直接访问私有成员的方法才应该被设计为特权方法。
共有属性和方法:直接链在 prototype 上的属性和方法,不可以访问构造器内的私有成员,可以访
问特权成员,子类会继承所有的共有方法。
共有静态属性和方法:最好的理解方式就是把它想象成一个命名空间,实际上相当于把构造器作为
命名空间来使用。
1 /* -- 封装 -- */
2 var _packaging = function(){
3 //私有属性和方法
4 var name = 'Darren';
5 var method1 = function(){
6 //...
7 }
8 //特权属性和方法
9 this.title = 'JavaScript Design Patterns' ;
10 this.getName = function(){
11 return name;
12 }
13 }
14 //共有静态属性和方法
15 _packaging._name = 'Darren code';
16 _packaging.alertName = function(){
17 alert(_packaging._name);
18 }
19 //共有属性和方法
20 _packaging.prototype = {
21 init:function(){
22 //...
23 }
24 }
继承:继承本身就是一个抽象的话题,在 JavaScript 中继承更是一个复杂的话题,因为
JavaScript 想要实现继承有两种实现方式,分别是类式继承和原型式继承,每种实现的方式都需要采取
不少措施,下面本人通过分析例子的方式讲解 JavaScript 中这个很重要的话题。
1 /* -- 类式继承 -- */
2 //先声明一个超类
3 function Person(name){
4 this.name = name;
5 }
6 //给这个超类的原型对象上添加方法 getName
7 Person.prototype.getName = function(){
8 return this.name;
9 }
10 //实例化这个超类
11 var a = new Person('Darren1')
12 alert(a.getName());
13 //再声明类
14 function Programmer(name,sex){
15 //这个类中要调用超类 Person 的构造函数,并将参数 name 传给它
16 Person.call(this,name);
17 this.sex = sex;
18 }
19 //这个子类的原型对象等于超类的实例
20 Programmer.prototype = new Person();
21 //因为子类的原型对象等于超类的实例,所以 prototype.constructor 这个方
法也等于超类构造函数,你可以自己测试一下,如果没这一步,
alert(Programmer.prototype.constructor),这个是 Person 超类的引用,所以
要从新赋值为自己本身
22 Programmer.prototype.constructor = Programmer;
23 //子类本身添加了 getSex 方法
24 Programmer.prototype.getSex = function(){
25 return this.sex;
26 }
27 //实例化这个子类
28 var _m = new Programmer('Darren2','male');
29 //自身的方法
30 alert(_m.getSex());
剩余33页未读,继续阅读
资源评论
CINSOFT-孙晓龙
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功