自己对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(一)的更多相关文章

  1. Popmotion – 小巧,灵活的 JavaScript 运动引擎

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...

  2. Sortable – 简单灵活的 JavaScript 拖放排序插件

    当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 ...

  3. javaScript设计模式 -- 灵活的javaScript语言

    因为好长时间的懒惰和懈怠,好久没有更新文章了,从现在开始我会按时更新一些自己总结的一些知识,和研究的东西,希望能让大家从我这里学到一点点的知识. 本文参考了张荣铭的javascript设计模式一书,算 ...

  4. 灵活的javaScript

    通常我们不像下面这样声明函数,因为会创建很多全局变量. function checkName() { // code } function checkEmail() { // code } 所以,我们 ...

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

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

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

    我们知道javascript的Date对象并没有提供日期格式化函数.将日期对象转换成"2015-7-02 20:35:11"等这样的格式又是项目中非经常常使用的需求.近期在我们项目 ...

  7. 设计模式(一) 灵活的javaScript语言

    首先先看几个函数: function checkName () {){}// 验证姓名 function checkEmail() {} // 验证邮箱 function checkPassword( ...

  8. 【总结】浅谈JavaScript中的接口

    一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...

  9. 2016 年 50 个最佳的轻量级 JavaScript 框架和库

    作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...

随机推荐

  1. ORACLE中STATUS为INACTIVE但是SERVER为SHARED状态的会话浅析

    我们知道当ORACLE数据库启用共享服务器模式时,通过共享服务器模式连接到数据库的会话是有一些特征的.在v$session里面,其SERVER的状态一般为SHARED和NONE, 为SHARED时,表 ...

  2. OpenGL ES 3.0: 图元重启(Primitive restart)

    [TOC] 背景概述 在OpenGL绘制图形时,可能需要绘制多个并不相连的图形.这样的情况下这几个图形没法被当做一个图形来处理.也就需要多次调用 DrawArrays 或 DrawElements. ...

  3. python之浅拷贝和深拷贝

    1.浅拷贝 1>赋值:从下面的例子我们可以看到赋值之后新变量的内存地址并没有发生任何变化,实际上python中的赋值操作不会开辟新的内存空间,它只是复制了新对象的引用,也就是说除了b这个名字以外 ...

  4. Spring Security OAuth2 开发指南

    官方原文:http://projects.spring.io/spring-security-oauth/docs/oauth2.html 翻译及修改补充:Alex Liao. 转载请注明来源:htt ...

  5. 用Maven部署war包到远程Tomcat服务器

    过去我们发布一个Java Web程序通常的做法就是把它打成一个war包,然后用SSH这样的工具把它上传到服务器,并放到相应的目录里,让Tomcat自动去解包,完成部署. 很显然,这样做不够方便,且我们 ...

  6. docker创建私有仓库

    由于网速和大中华局域网效果,使得我们在DockerHub下载镜像的速度很慢,甚至一些国内的镜像仓库,也感觉速度不是很好.所以,很有必要在本地或者一个我们访问很快速的地方(自己的云服务器)搭建一套镜像仓 ...

  7. 每日设置Bing首页图片为壁纸

    闲来无事,手痒痒要做一个什么小工具. 于是乎便有了本文. 当有一个想法的时候,首先免不了网上搜索一番以便看一下有木有网友有过类似的想法. 很显然--有! 因此本文大代码是从几个地方搜索,然后组合的. ...

  8. C++11网络编程

    Handy是一个简洁优雅的C++11网络库,适用于linux与Mac平台.十行代码即可完成一个完整的网络服务器. 下面是echo服务器的代码: #include <handy/handy.h&g ...

  9. .NET Core采用的全新配置系统[6]: 深入了解三种针对文件(JSON、XML与INI)的配置源

    物理文件是我们最常用到的原始配置的载体,最佳的配置文件格式主要由三种,它们分别是JSON.XML和INI,对应的配置源类型分别是JsonConfigurationSource.XmlConfigura ...

  10. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...