阅读《JavaScript设计模式》第一章心得
1、明白自己
明白了自己写的代码为什么难懂且臃肿,不方便阅读且效率低。最主要的是为什么整套流程下来只能我一个人写,因为这样的代码根本没有团队力,协同能力差。对js理解的不过透彻。
2、真正的学会对象与类的区别
类 :对一群具有相同特征的对象的集合的描述;
对象:真实存在的对象个体;
比如人类,指的是一个范围; 对象:比如某个人,指的是这个范围中具体的对象。
Javascript中的function作为构造函数时,就是一个类,搭配上new操作符,可以返回一个对象。
当然,要生成一个对象,也可以用字面量的形式,例如var obj = {x: 1, y: function(){} };
类可以理解为一个模板,而对象就是根据这个模板造出来的具体实例。
3、在函数的原型中添加统一添加方法的功能方法
一般不把功能函数封装在原型里面,因为这样会污染全局,造成不必要的开销。所以我会抽象出一个统一的添加方法的功能方法。
例如:
Function.prototype.addMethod=function(name,fn){
this[name]=fn;
}
如果想添加邮箱验证和姓名验证方法可以这样做
var methods=function(){};
或者
var methods = new Function();
methods.addMethod('checkName',function(){
//验证姓名
});
methods.addMethod('checkEmail',function(){
//验证邮箱
});
methods.checkName();
methods.checkEmail();
4、函数链式添加方法
在原型中添加功能的方法中添加返回this语句,这样每次添加完一个方法后都会返回methods函数。
Function.prototype.addMethod= function(name,fn){
this[name]=fn;
return this;
}
也可以为每个添加的方法返回this。
var methods = function(){};
methods.addMethod('checkName',function(){
//验证姓名
return this;
}).addMethod('checkEmail',function(){
//验证邮箱
return this;
});
methods.checkName().checkEmail();
这是用函数式的调用方式
5、类式的调用方式(链式添加)
Function.prototype.addMethod = function(name,fn){
this.prototype[name]=fn;
return this;
}
var Methods = function(){};
Methods.addMethod('checkName',function(){
//验证姓名
return this
}).addMethod('checkEmail',function(){
//验证邮箱
});
但是这时候我们就不能直接使用了,要通过new关键字来创建新的对象了。
var m = new Methods();
m.checkEmail().checkEmail()
两个疑惑:1、函数添加方法的功能方法语句为什么是this[name],为什么是这样写的?
2、类式添加方法的功能方法语句为什么是this.prototype[name]?这样的话方法不都添加到了原型中去了吗?这样不会污染全局吗?
阅读《JavaScript设计模式》第一章心得的更多相关文章
- javascript设计模式 第一章 灵活的javascript
javascript 设计模式 第1章 灵活的语言--JavaScript 初级程序员接到一个验证表单功能的任务,需要验证用户名.邮箱.密码等 ** 此文章内容大部分来自 <javascript ...
- 你不知道的javaScript上卷(第一章 作用域是什么)
在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...
- [head first 设计模式] 第一章 策略模式
[head first 设计模式] 第一章 策略模式 让我们先从一个简单的鸭子模拟器开始讲起. 假设有个简单的鸭子模拟器,游戏中会出现各种鸭子,此系统的原始设计如下,设计了一个鸭子超类,并让各种鸭子继 ...
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 读《编写可维护的JavaScript》第一章总结
第一章 基本的格式化 1.4 ① 换行 当一行长度到达了单行最大的字符限制时,就需要手动将一行拆成俩行.通常我们会在运算符后换行,下一行会增加俩个层级的缩进. // 好的做法: 在运算符后换行,第二行 ...
- 读高性能JavaScript编程 第一章
草草的看完第一章,虽然看的是译文也是感觉涨姿势了, 我来总结一下: 由于 大多数浏览器都是 single process 处理 ui updatas and js execute 于是产生问题: js ...
- Effective JavaScript :第一章
第一章 一.严格模式与非严格模式 1.在程序中启用严格模式的方式是在程序的最开始增加一个特定的字符串字面量: ‘use strict’ 同样可以在函数体的开始处加入这句指令以启用该函数的严格模式. f ...
- java web开发阅读笔记:第一章
学习该书前所用推荐书籍<名师讲坛—java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW ...
- head first 设计模式第一章笔记
设计模式是告诉我们如何组织类和对象以解决某种问题. 学习设计模式,也就是学习其他开发人员的经验与智慧,解决遇到的相同的问题. 使用模式的最好方式是:把模式装进脑子,然后在设计的时候,寻找何处可以使用它 ...
随机推荐
- 数据结构之中序遍历转兴许遍历(JAVA实现)(二)
算法流程: 主要分为四步: 1.当前字符为数字或者字母,则直接输出 2.当前字符为).则在栈中匹配输出.一直匹配到),则停止输出(就是将)及其顶上的元素所有弹出来输出) 3.当前字符为操作符.则比較当 ...
- Android抽屉菜单DrawerLayout的实现案例
(1)项目布局文件 activity_main.xml <android.support.v4.widget.DrawerLayout xmlns:android="http://sc ...
- android 线程的开启和停止(借鉴java的技术)
在onclick()点击事件中的 // 上传地理位置 case R.id.person_up_locat: System.out.println("====输出了.. .. ====&quo ...
- 对腾讯云服务器linux系统进行分区格式化操作
- K8S之利用Label控制Pod位置
首先介绍下什么是Label? Label是Kubernetes系列中一个核心概念.是一组绑定到K8s资源对象上的key/value对.同一个对象的labels属性的key必须唯一.label可以附加到 ...
- PCB 所建不凡 AWS 技术峰会2018 • 深圳站 2018.9.20
在去[AWS 技术峰会2018 • 深圳站]之提前并没有AWS提前做功课,主要PCB这行业基本自己搭服务器搭应用,不会买云服务器.由于没用过企业级的云服务器,对云这方面还是了解还是非常有限的. 市面上 ...
- [Swift通天遁地]三、手势与图表-(13)制作美观简介的滚动图表:折线图表、面积图表、柱形图表、散点图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Java并发编程系列之Semaphore详解
简单介绍 我们以饭店为例,假设饭店只有三个座位,一开始三个座位都是空的.这时如果同时来了三个客人,服务员人允许他们进去用餐,然后对外说暂无座位.后来的客人必须在门口等待,直到有客人离开.这时,如果有一 ...
- Java注解Annotation的用法 - 自定义Annotation实现
Java注解又称Java标注,是Java语言5.0版本开始支持加入源代码的特殊语法元数据. Java语言中的类.方法.变量.参数和包等都可以被标注.和Javadoc不同,Java标注可以通过反射获取标 ...
- JS 正则查找与替换
JS正则查找与替换 一.前提/背景 今天遇到个问题,需要替换字符串中部分字符,这些字符相对整个字符串而言,与其他子字符串类似,无法单独提出:重要的是,该字符串是动态的生成的,就像我们日常看到的网页Ur ...