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(){

  //验证邮箱

  return this

});

但是这时候我们就不能直接使用了,要通过new关键字来创建新的对象了。

var m = new Methods();

m.checkEmail().checkEmail()

两个疑惑:1、函数添加方法的功能方法语句为什么是this[name],为什么是这样写的?

     2、类式添加方法的功能方法语句为什么是this.prototype[name]?这样的话方法不都添加到了原型中去了吗?这样不会污染全局吗?

阅读《JavaScript设计模式》第一章心得的更多相关文章

  1. javascript设计模式 第一章 灵活的javascript

    javascript 设计模式 第1章 灵活的语言--JavaScript 初级程序员接到一个验证表单功能的任务,需要验证用户名.邮箱.密码等 ** 此文章内容大部分来自 <javascript ...

  2. 你不知道的javaScript上卷(第一章 作用域是什么)

    在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...

  3. [head first 设计模式] 第一章 策略模式

    [head first 设计模式] 第一章 策略模式 让我们先从一个简单的鸭子模拟器开始讲起. 假设有个简单的鸭子模拟器,游戏中会出现各种鸭子,此系统的原始设计如下,设计了一个鸭子超类,并让各种鸭子继 ...

  4. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  5. 读《编写可维护的JavaScript》第一章总结

    第一章 基本的格式化 1.4 ① 换行 当一行长度到达了单行最大的字符限制时,就需要手动将一行拆成俩行.通常我们会在运算符后换行,下一行会增加俩个层级的缩进. // 好的做法: 在运算符后换行,第二行 ...

  6. 读高性能JavaScript编程 第一章

    草草的看完第一章,虽然看的是译文也是感觉涨姿势了, 我来总结一下: 由于 大多数浏览器都是 single process 处理 ui updatas and js execute 于是产生问题: js ...

  7. Effective JavaScript :第一章

    第一章 一.严格模式与非严格模式 1.在程序中启用严格模式的方式是在程序的最开始增加一个特定的字符串字面量: ‘use strict’ 同样可以在函数体的开始处加入这句指令以启用该函数的严格模式. f ...

  8. java web开发阅读笔记:第一章

    学习该书前所用推荐书籍<名师讲坛—java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW ...

  9. head first 设计模式第一章笔记

    设计模式是告诉我们如何组织类和对象以解决某种问题. 学习设计模式,也就是学习其他开发人员的经验与智慧,解决遇到的相同的问题. 使用模式的最好方式是:把模式装进脑子,然后在设计的时候,寻找何处可以使用它 ...

随机推荐

  1. VB Socket编程 框架

    [转载]VB Socket编程 框架 (2014-07-15 20:06:28) 转载▼ 标签: 转载   原文地址:VB Socket编程 框架作者:安静的浪花 VB Socket编程(Winsoc ...

  2. mysql 存储引擎的选择你会吗?

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXExMzU1NTQxNDQ4/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  3. UVa563_Crimewave(网络流/最大流)(小白书图论专题)

    解题报告 思路: 要求抢劫银行的伙伴(想了N多名词来形容,强盗,贼匪,小偷,sad.都认为不合适)不在同一个路口相碰面,能够把点拆成两个点,一个入点.一个出点. 再设计源点s连向银行位置.再矩阵外围套 ...

  4. POJ 1635 Subway tree systems 有根树的同构

    POJ 1635 题目很简单 给个3000节点以内的根确定的树 判断是否同构.用Hash解决,类似图的同构,不过效率更高. #include<iostream> #include<c ...

  5. IDEA 中Spark SQL通过JDBC连接mysql数据库

    一.IDEA装驱动: 1.下载一个MySQL的JDBC驱动:mysql-connector-java-5.1.44.tar.gz2.在idea Open Moudle Settings 在 Moudl ...

  6. IP V4 和 IP V6 初识

    IP V4    是互联网协议的第四版 地址长度为32位,4字节,用十进制表示 格式为:A.B.C.D 最大的问题在于网络地址资源有限,严重制约了互联网的应用和发展 IP V6    是互联网协议的I ...

  7. [Apple开发者帐户帮助]八、管理档案(4)

    您可以编辑,下载或删除在开发人员帐户中创建的配置文件.例如,如果您撤消了证书或禁用了配置文件中包含的设备,请编辑配置文件.或重新置备的个人资料,如果因为你它是无效的功能的应用程式服务. 注意: Xco ...

  8. [Swift通天遁地]四、网络和线程-(12)使用ReachabilitySwift实现对网络状态的检测

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. android:autoLink

    android:autoLink 显示URL链接 TextView识别链接的方式有两种,一种是自动识别链接和HTML解析链接 1)自动识别链接 <!-- android:autoLink=&qu ...

  10. 【洛谷4933】大师(DP)

    题目: 洛谷4933 分析: (自己瞎yy的DP方程竟然1A了,写篇博客庆祝一下) (以及特斯拉电塔是向Red Alert致敬吗233) 这里只讨论公差不小于\(0\)的情况,小于\(0\)的情况进行 ...