灵活的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();

  要实现类式调用,其实就是在函数的原型上添加方法。

时间: 2024-12-29 04:08:31

灵活的JavaScript(一)的相关文章

我所见过的最简短、最灵活的javascript日期转字符串工具函数

我们知道javascript的Date对象并没有提供日期格式化函数.将日期对象转换成"2015-7-02 20:35:11"等这样的格式又是项目中非经常常使用的需求.近期在我们项目中看到了一段代码,非常的简短,这里共享出来. Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, // month "d+": this.getDate(), /

2017最好的JavaScript框架、库和工具 — SitePoint

与开发者数量相比,可能有更多的JavaScript框架.库和工具.截止到2017年5月,在GitHub上快速搜索能搜到超过110万的JavaScript项目. 在npmjs上有50万的可用包,并且这些包每个月的下载量将近100亿次. 2017.05.29: 更新了本文,旨在能正确的描述当前JavaScript生态的状态. 本文着重讲述目前最流行的客户端JavaScript框架.库和工具之间的基本差异和他们的基本介绍.至于是不是你要寻找的最佳实践那是另外一个问题.你可以选择一个,并坚持使用一段时间

javascript基础07

1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有12种 标准下:包含了文本节点和元素节点,也会包含非法嵌套的子节点 非标准下:包含元素节点,ie7以下不会包含非法包含的嵌套的子节点 非标准就是IE7以下 常用文本节点.元素节点 空节点也是文本节点 判断节点的类型:元素.nodeType : 只读 属性 当前元素节点的类型返回值为1.2.3.4.51:元素节点2:属性节点3:文

灵活多变的Javascript

最近看到一篇文章写到灵活的 Javascript ,甚是感叹Javascript的强大. <script language="javascript"> Number.prototype.add=function(x){ return this+x ; }; Number.prototype.subtract=function(x) { return this-x ; } ; Number.prototype.getRangeArray=function() { var ar

完全免费开源!开发者用了都说好的5款JavaScript图表库

用过不少的商用图表工具&图表库,比如Fusioncharts.AmChart,技术服务好,厂家的支持给力,总是物有所值.随着一些产品的开源,除了商用图表,现在也开始关注开源图表工具了.虽然和Fusioncharts.AmChart,这样的大品牌比起来,是小巫见大巫,不过这并不代表他们不行,相反,他们各有各的独特魅力,值得我们去发现他.使用它! Planetary.js 是一个JavaScript图表库,用于构建交互式地球仪.它使用D3 和TopoJSON 解析并显示地理数据. Planetary

TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开发语言时,又该如何抉择呢? 本文将会深入对比这两种语言,讨论两种语言之间的关联和差异,并概述两种语言各自的优势. JavaScript 和 TypeScript 的概要介绍 JavaScript JavaScript 是一种轻量级的解释性脚本语言,可嵌

Typescript 和 Javascript之间的区别

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开发语言时,又该如何抉择呢? 本文将会深入对比这两种语言,讨论两种语言之间的关联和差异,并概述两种语言各自的优势. JavaScript 和 TypeScript 的概要介绍 JavaScript JavaScript 是一种轻量级的解释性脚本语言,可嵌

【转】2017年前端框架、类库、工具大比拼

原文链接:https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/ 源于:葡萄城控件 欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 相比于JavaScript开发人员的数量,目前JavaScript框架.类库和工具的数量似乎更多一些.截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目.npmjs.org有50万个可用的软件包,每月下载量近100

2017年前端框架、类库、工具大比拼

相比于JavaScript开发人员的数量,目前JavaScript框架.类库和工具的数量似乎更多一些.截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目.npmjs.org有50万个可用的软件包,每月下载量近100亿次. 本文将会讨论目前最为流行的客户端JavaScript框架.类库和工具以及它们之间的基本差异.也许本文无法告诉你哪个是最好的,但是最适合自己项目的,就是最好的. 类库 类库是一个有组织的功能集合.典型的类库包括字符串处理.日期.HTML D