灵活的javaScript
通常我们不像下面这样声明函数,因为会创建很多全局变量。
function checkName() {
// code
}
function checkEmail() {
// code
}
所以,我们可以用一个对象将变量收编。
var checkObj = {
checkName: function () {
// code
},
checkEmail: function() {
// code
}
}
// 调用
checkObj.checkName();
checkObj.checkEmail();
当然,我们也可以先声明一个对象,然后给它添加方法,调用方式同上面一样。
var checkObj = function () {};
checkObj.checkName = function () {
// code
};
checkObj.checkEmail = function() {
// code
};
但是,当别人有需要用我们上面那些方法时就有些麻烦了。因为这个对象不能复制一份,或者说这个对象类在使用new关键字创建对象时,新创建的对象是不能继承这些方法的。
如果只是想简单的复制下对象,我们可以将这些方法放在一个函数对象中,这样每次调用调用checkObj这个函数的时候,就会返回一个新的包含这些方法的对象,如下:
var checkObj = function () {
return {
checkName: function () {
// code
},
checkEmail: function() {
// code
}
}
}
// 调用
var obj = checkObj();
obj.checkName();
但是,上述方式并不是一个真正类的创建方式,所以我们将其稍微改造一下:
var CheckObj = function () {
this.checkName = function () {
// code
};
this.checkEmail = function () {
// code
};
};
// 调用
var obj = new CheckObj();
obj.checkName();
然而,这种方式有时候造成的消耗是很奢侈的,因为我们在使用new关键字创建实例的时候,每个实例都会对this上的属性进行复制,因此会造成每个实例都会拥有自己的一套方法,
所以我们有必要改进一下。将这些方法都挂在到原型上,这样每个实例所有的方法就都是同一个了,因为它们都要依赖prototype依次查找,找到的方法都会是同一个,
即CheckObj类的原型对象上,如下:
var CheckObj = function () {};
CheckObj.prototype.checkName = function () {
// code
};
CheckObj.prototype.checkEmail = function () {
// code
};
// 调用
var obj = new CheckObj();
obj.checkName();
这种方式要将protoype写好多遍,可以像下面这样做:
var CheckObj = function () {};
CheckObj.prototype = {
checkName: function () {
// code
},
checkEmail: function () {
// code
};
};
// 调用
var obj = new CheckObj();
obj.checkName();
但使用这种方式要注意,一定不要和前面那种混用,后者为对象原型对用赋值新对象的这种方式如果用在前者为原型对象添加方法这种方式之后,后者将会覆盖前者。
此时,我们每调用一个方法,都要写一遍示例对象(如obj),我们还可以继续改进,在每个方法末尾将当前对象返回,在JavaScript中,当前对象就是this,
所以,我们可以在函数末尾将this返回。
var CheckObj = function () {};
CheckObj.prototype = {
checkName: function () {
// code
return this;
},
checkEmail: function () {
// code
return this;
};
};
// 调用
var obj = new CheckObj();
obj.checkName().checkEmail();
一款JavaScript框架,其实就是里面为我们封装了很多方法,最大的特点就是对源生对象的拓展,比如如果想给每个函数添加一个检测姓名的方法,可以这么做:
Function.prototype.checkName = function () {
// code
};
// 调用
var fn = function () {};
f.checkName();
但这种平时开发中是绝对不允许的,因为这样会污染原生对象Function,那要怎么做呢?
我们可以抽象一个统一添加方法的方法:
Function.prototype.addMethod = function (name, fn) {
this[name] = fn;
};
var methods = function () {};
methods.addMethod('checkName', function () {
console.log('checkName');
});
methods.addMethod('checkEmail', function () {
console.log('checkEmail');
});
methods.checkName();
methods.checkEmail();
同样,我们可以使用链式添加的方式:
Function.prototype.addMethod = function (name, fn) {
this[name] = fn;
return this;
};
var methods = function () {};
methods.addMethod('checkName', function () {
console.log('checkName');
return this;
}).addMethod('checkEmail', function () {
console.log('checkEmail');
return this;
});
methods.checkName().checkEmail();
按照上述方式我们使用的是函数调用方式,对于习惯类式调用的我们可以稍微简单改一下:
Function.prototype.addMethod = function (name, fn) {
this.prototype[name] = fn; // 挂载到原型上
return this;
};
var Methods = function () {};
Methods.addMethod('checkName', function () {
console.log('checkName');
return this;
}).addMethod('checkEmail', function () {
console.log('checkEmail');
return this;
});
var m = new Methods();
m.checkName().checkEmail();
JavaScript是不是很灵活呢? *(^_^)*~~~
灵活的javaScript的更多相关文章
- Popmotion – 小巧,灵活的 JavaScript 运动引擎
Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...
- Sortable – 简单灵活的 JavaScript 拖放排序插件
当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 ...
- javaScript设计模式 -- 灵活的javaScript语言
因为好长时间的懒惰和懈怠,好久没有更新文章了,从现在开始我会按时更新一些自己总结的一些知识,和研究的东西,希望能让大家从我这里学到一点点的知识. 本文参考了张荣铭的javascript设计模式一书,算 ...
- javascript设计模式 第一章 灵活的javascript
javascript 设计模式 第1章 灵活的语言--JavaScript 初级程序员接到一个验证表单功能的任务,需要验证用户名.邮箱.密码等 ** 此文章内容大部分来自 <javascript ...
- 我所见过的最简短、最灵活的javascript日期转字符串工具函数
我们知道javascript的Date对象并没有提供日期格式化函数.将日期对象转换成"2015-7-02 20:35:11"等这样的格式又是项目中非经常常使用的需求.近期在我们项目 ...
- 灵活的JavaScript(一)
自己对JavaScript的原型,继承,闭包,多少也还是了解些,但是平时写的东西都挺简单的,也用不上,所以感觉提升不大.于是乎买了一本<JavaScript设计模式>来提高下自己,这本是百 ...
- 设计模式(一) 灵活的javaScript语言
首先先看几个函数: function checkName () {){}// 验证姓名 function checkEmail() {} // 验证邮箱 function checkPassword( ...
- 【总结】浅谈JavaScript中的接口
一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...
- 2016 年 50 个最佳的轻量级 JavaScript 框架和库
作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...
随机推荐
- HTML 事件属性(如:onsubmit)
学习啥都需要一个基础 基础很重要: HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript. 在现代浏览器中都内置有 ...
- Java注解总结
注解是Spring和Mybatis框架所大量使用的技术,要想掌握框架相关技术,注解是必须要掌握的. 掌握注解的优势: 1.能够读懂别人写的代码,特别是框架相关的代码. 2.本来可能需要很多配置文件,需 ...
- Linux索引节点(Inode)用满导致空间不足
一.问题出现 在创建新目录和文件是提示“no space left on device”!按照以前的情况,很有可能是服务器空间又被塞满了,通过命令查看,发现还有剩余.再用df -i查看了一下/分区的索 ...
- TextWatcher
对于一些需求,如非法字符限制(例如不允许输入#号,如果输入了#给出错误提示),做成动态判断更方便一些,而且容易扩展: 在Android里使用TextWatcher接口可以很方便的对EditText进行 ...
- 温度测量【RTD】
原理 温度是表征物体冷热程度的物理量,它可以通过物体随温度变化的某些特性(如电阻.电压变化等特性)来间接测量,通过研究发现,金属铂(Pt) 的阻值跟温度的变化成正比,并且具有很好的重现性和稳定性,利用 ...
- sql server服务看不到,显示为远程过程调用在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误10061
需要启动sql server服务 启动就可以完成登录了
- Spring注解-@Configuration注解、@Bean注解以及配置自动扫描、bean作用域
1.@Configuration标注在类上,相当于把该类作为spring的xml配置文件中的<beans>,作用为:配置spring容器(应用上下文) package com.test.s ...
- 【Android】13.1 用Android自带的API访问SQLite数据库
分类:C#.Android.VS2015: 创建日期:2016-02-26 一.简介 这一节我们先来看看如何直接用Android自带的API创建和访问SQLite数据库. 1.创建SQLite数据库 ...
- 微软七届MVP桂素伟:移动互联网与职业规划
原文地址:http://student.csdn.net/mcd/topic/163587/955481 2014年10月19日在哈尔滨工业大学举办了CSDN高校俱乐部全国巡讲. 此次邀请到了微软七届 ...
- [c#]分析器错误消息: 发现不明白的匹配。
(1)同样的变量名称 protected System.Web.UI.WebControls.Label lbltitle; protected System.Web.UI.WebControls.L ...