灵活的JavaScript(一)
自己对JavaScript的原型,继承,闭包,多少也还是了解些,但是平时写的东西都挺简单的,也用不上,所以感觉提升不大。于是乎买了一本《JavaScript设计模式》来提高下自己,这本是百度写的,不是国外的那本,看了第一章,哇靠。。。写的真好,带入感真的强,看小说的朋友应该都懂。
平时也都会看一些别人的博客之类的,但是平时不怎么用,所以久而久之也就忘记了。这次便打算一边看,一边将自己的理解和书里的一些东西做个简单的笔记,以后也好看看。
1.用对象收编变量
刚开始接触前端的那会儿,写一些方法都是直接定义一堆函数或者干脆写在onclick事件里,后来才知道可以通过对象或者函数去封装,使我们的代码更加简洁并且可维护性高。
对于一些小项目,我们可能只需要将函数或者属性直接写在一个通过字面量的方式所创建的对象里就够了,比如:
var obj = {
name: 'macbai',
func1: function () {},
func2: function () {}
}
但是随着项目的增大,我们可能会遇到类似于全局变量冲突,或者需要通过继承等,来使代码更加精简等问题,这个时候我们便会需要用到构造函数来创建对象,然后来封装一系列的方法和属性等,比如:
var Check = function (nameType) {
this.nameType = nameType;
};
Check.prototype.checkName = function () {};
Check.prototype.checkAcount = function () {}; // 使用时
var loginCheck = new Check();
loginCheck.checkAcount()
因为每次通过关键字new创建一次对象,就会新创建一个实例,所以我们把可以共用的属性和方法放在原型上,不能共用的放在自身里。
2.像jQuery一样链式调用方法
写jQuery时经常这样$('#id').addClass('xx').siblings().removeClass('xx'),其实实现还是很简单的:
var Check = function (nameType) {
this.nameType = nameType;
};
Check.prototype.checkName = function () {
...;
return this;
};
Check.prototype.checkAcount = function () {
...;
return this;
}; // 使用时
var loginCheck = new Check();
loginCheck.checkName().checkAcount()
我们只需要return this,返回当前对象就行了。当然这只是最简单的一种实现方式,网上还有好些其他的方法,这里不一一介绍,大家可以自己研究。
3.方法的扩展
在写这篇文章的时候刚好要做前端埋点的工作,产品狗也不知道要具体做些什么,需要什么数据,就告诉我两字,全埋!心里一万只草泥马在奔腾啊....只好百度埋点一般都会需要一些什么数据,都有哪些方法。
看了一圈,大致知道了,但是一想到产品狗说的全埋,每个按钮和功能都要埋的时候,内心真的是崩溃的......能通过事件监听的尽量都用事件监听来做了,但剩下的一些不好做的也还是有好多,这该怎么办?踏破铁鞋无觅处,得来全不费功夫,之前听说过prototype.js这个东西,但一直不知道干嘛用的,看到书的第一章的时候才真正接触。就是给JavaScript的祖先对象类(Function、Array等)进行扩展。比如:
// 扩展方法
Function.prototype.stayTime = function () {} // 使用方法
var a = function () {}
f.stayTime()
不过不推荐直接扩展JavaScript原始数据类型,因为这样容易造成全局污染,除非像我这样一个公司就一个前端的....
所以我们可以只扩展一个可以方法,一个可以统一添加方法的功能方法,就像这样:
Function.prototype.addMethod = function (name, fn) {
this[name] = fn;
} // 创建方法
var a = function () {};
// 或者
var a = new Function ();
a.addMethod('stayTime', fnction () {
...
}) // 使用方法
a.stayTime();
但是通过函数来调用,总感觉怪怪的,虽然函数也是对象,这样做也没错,不过为了更符合习惯与类式调用,也就是普通的对象那样去调用,可以改一改:
Function.prototype.addMethod = function (name, fn) {
this.prototype[name] = fn;
return this; // 还可以链式添加方法
} // 创建方法
var Fun = function () {
...
};
Fun.addMethod('stayTime', fnction () {
...
return this; // 当然也可以链式调用方法
}).addMethod('counter', fnction () {
...
return this; // 当然也可以链式调用方法
})
// 使用方法
var b = new Fun();
b.stayTime().counter();
要实现类式调用,其实就是在函数的原型上添加方法。
灵活的JavaScript(一)的更多相关文章
- Popmotion – 小巧,灵活的 JavaScript 运动引擎
Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...
- Sortable – 简单灵活的 JavaScript 拖放排序插件
当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 ...
- javaScript设计模式 -- 灵活的javaScript语言
因为好长时间的懒惰和懈怠,好久没有更新文章了,从现在开始我会按时更新一些自己总结的一些知识,和研究的东西,希望能让大家从我这里学到一点点的知识. 本文参考了张荣铭的javascript设计模式一书,算 ...
- 灵活的javaScript
通常我们不像下面这样声明函数,因为会创建很多全局变量. function checkName() { // code } function checkEmail() { // code } 所以,我们 ...
- javascript设计模式 第一章 灵活的javascript
javascript 设计模式 第1章 灵活的语言--JavaScript 初级程序员接到一个验证表单功能的任务,需要验证用户名.邮箱.密码等 ** 此文章内容大部分来自 <javascript ...
- 我所见过的最简短、最灵活的javascript日期转字符串工具函数
我们知道javascript的Date对象并没有提供日期格式化函数.将日期对象转换成"2015-7-02 20:35:11"等这样的格式又是项目中非经常常使用的需求.近期在我们项目 ...
- 设计模式(一) 灵活的javaScript语言
首先先看几个函数: function checkName () {){}// 验证姓名 function checkEmail() {} // 验证邮箱 function checkPassword( ...
- 【总结】浅谈JavaScript中的接口
一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...
- 2016 年 50 个最佳的轻量级 JavaScript 框架和库
作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...
随机推荐
- 拦截UIViewController的popViewController事件
实现拦截UIViewController的pop操作有两种方式: 自定义实现返回按钮,即设置UIBarButtonItem来实现自定义的返回操作. 创建UINavigatonController的Ca ...
- Hadoop 2.x 生态系统及技术架构图
一.负责收集数据的工具:Sqoop(关系型数据导入Hadoop)Flume(日志数据导入Hadoop,支持数据源广泛)Kafka(支持数据源有限,但吞吐大) 二.负责存储数据的工具:HBaseMong ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- Collections
2017-01-06 22:50:43 数据结构和算法 <如何学习数据结构?>:https://www.zhihu.com/question/21318658 <How do I ...
- hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的用法
javascript中有原型这么一个概念,任何一个构造函数都有它对应的原型(prototype),我们可以给这个原型赋予一些我们想要的属性,像下面这样: function Gadget(name, c ...
- 分布式唯一ID生成服务
SNService是一款基于分布式的唯一ID生成服务,主要用于提供大数量业务数据建立唯一ID的需要;服务提供最低10K/s的唯一ID请求处理.如果你部署服务的CPU资源达到4核的情况下那该服务最低可以 ...
- Fedora 22中的用户和用户组管理
The control of users and groups is a core element of Fedora system administration. This chapter expl ...
- 关于VS2015支持编译Linux程序的问题
现状 目前已经发布的VS2015中包括VS2015 Preview 以及 VS2015 CTP6,这两个版本均不支持直接编译C++代码为Linux程序,具体情况可以参考 Visual Studio 2 ...
- JavaScript的基准测试-不服跑个分?
原文:Bulletproof JavaScript benchmarks 做JavaScript的基准测试并没有想的那么简单.即使不考虑浏览器差异所带来的影响,也有很多难点-或者说陷阱需要面对. 这是 ...
- DAO层,Service层,Controller层、View层 的分工合作
DAO层:DAO层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DAO的接口,然后在Spring的配置文件中定义此接口的实现类,然后就可在模块中调用此接口 ...