数据类型检测封装后的最终模块代码如下:

/*数据类型检验*/
xframe.extend(xframe, {
// 鸭子类型(duck typing)如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子。
// 只关注对象的行为,不关注对象本身面向接口编型 ,而不是面向实现编程,是设计模式中最重要的思想。
// 【理解】:一个对象有效的语义,不是由集成自特定的类或实现特定的接口, 而是由当前方法和属性的集合决定的!!!
isNumber: function (val) {
// 如果这个数字是有限的话, 而且是数字类型
return (typeof val === 'number' && isFinite(val)) && (Object.prototype.toString.call(val) === '[object Number]');
},
/***
* 判断一个变量是不是Boolean类型
* @param val
* @returns {boolean}
*/
isBoolean: function (val) {
return (typeof val === 'boolean') && (Object.prototype.toString.call(val) === '[object Boolean]');
},
/**
* 判断一个变量是不是字符串类型
* @param val
* @returns {boolean}
*/
isString: function (val) {
return (typeof val === 'string') && (Object.prototype.toString.call(val) === '[object String]');
},
/**
* 判断一个变量是不是undefined
* @param val
* @returns {boolean}
*/
isUndefined: function (val) {
// oid 0 is a correct and standard way to produce undefined.
return (val === void 0) || (typeof val === 'undefined') && (Object.prototype.toString.call(val) === '[object Undefined]');
},
/**
* 判断一个变量是不是为空
* @param val
* @returns {boolean}
*/
isNull: function (val) {
return (val === null) && (Object.prototype.toString.call(val) === '[object Null]');
},
/**
* 检测
* @param obj
* @returns {*}
*/
isNaN: function (val) {
// 只要这个数字通过判断是不是和他自身相同或者使用typef的方式去检测
return val !== val;
},
/**
* 判断一个变量是不是一个对象类型
* @param val
* @returns {boolean}
*/
isObject: function (val) {
if (val !== null && val !== undefined) {
if ((typeof val === 'object') && (Object.prototype.toString.call(val))) {
return true;
}
}
return false;
},
/**
* 判断一个对象是不是数组对象
* @param val
* @returns {boolean|void|string}
*/
isArray: function (val) {
// 判断上不是一个数组的先判断这个数组对象是不是为空, 因为如果val为空的话,就是val.constructor这个属性实际上是没有的,error
if (val !== null || typeof val !== "undefined") {
// 注意在使用constructor判断数据类型的时候比较的实际上是他的原型对象的constructor属性, 这个属性指向的实际上是这个变量的原型对象
return (val.constructor === Array) && (Object.prototype.toString.call(val));
}
return false;
} });

知识要点总结:

1.判断一个对象的数据类型通常可以使用

Object.prototype.toString.call(val)

这种方式判断数据类型一般对于String,Boolean.Object,Array,NUll都是通用的一种检测方法,首先调用Object的原型对象里面的toString()方法,并使用call方法修改toString()函数中this的指向为val

/*
    *  这是因为toString为Object的原型方法,
    *  而Array ,function等类型作为Object的实例,都重写了toString方法。
    *  不同的对象类型调用toString方法时,
    *  根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串.....),
    *  而不会去调用Object上原型toString方法(返回对象的具体类型),
    *  所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object上原型toString方法。
    *

* */

// 每一个原型都有自己的prototype都有自己的constructor和toString()方法
 console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function () {
}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]

2.call,apply,bind的使用方法总结

// call和apply的使用方法总结-----------------------------------------------------------------
window.color = 'red';
document.color = 'yellow'; var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
} // 注意call()里面传递的参数,就会把这个参数传给调用的函数,此时调用函数的内部里面的this实际上指向了传递过来的这个参数对象
changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red
changeColor.call(s1); //blue window.firstName = "Cynthia";
window.lastName = "_xie"; var myObject = {firstName:'my', lastName:'Object'}; function getName(){
// 这个函数内部的this默认指向的是window,通过call和apply可以间接修改这个this的指向
console.log(this.firstName + this.lastName);
} function getMessage(sex,age){
console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
} getName.call(window); // Cynthia_xie
getName.call(myObject); // myObject getName.apply(window); // Cynthia_xie
getName.apply(myObject);// myObject getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21 getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22

总结:

/* 1. apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
        语法:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。

说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个
        TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。

2. call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。
        语法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。

说明: call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。

3. bind()方法通常用于修改一个函数内部this的指向,返回的是一个函数,但是不会立即调用,如果需要调用传递参数的话还需要自己手动调用这个函数

*
    *
    * */

【JavaScript框架封装】数据类型检测模块功能封装的更多相关文章

  1. 设计一个JavaScript框架需要编写哪些模块

    在这个js框架随处乱跑的时代,你是否考虑过写一个自己的框架?下面的内容也许会有点帮助. 一个框架应该包含哪些内容? 1. 语言扩展 大部分现有的框架都提供了这部分内容,语言扩展应当是以ECMAScri ...

  2. 主流JavaScript框架(Dojo、Google Closure、jQuery、Prototype、Mootools和YUI)的分析和对比

    本文主要选取了目前比较流行的JavaScript框架Dojo.Google Closure.jQuery.Prototype.Mootools和YUI进行对比,主要是根据网上的资料整理而成,希望可以供 ...

  3. 7个常见Javascript框架介绍

    设计开发中的“框架”指一套包含工具.函数库.约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发.通俗的讲,框架就是最常用的java ...

  4. 16 款最流行的 JavaScript 框架

    本文列举了16个当前最流行的JavaScript框架.在这个列表中,既包括jQuery和Mootools,也有Zepo移动JavaScript框架. 里面一定有你正在用的或想尝试用的JavaScrip ...

  5. 16 款最流行的JavaScript 框架

    1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍历.事件处理.动画和Ajax交互.jQuery插件非常之多. 2. Do ...

  6. 赶快收藏!16款最流行的 JavaScript 框架

    下面为大家介绍 16款最流行的 JavaScript 框架,赶快收藏! 1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍 ...

  7. 什么是JavaScript框架-------share

    摘要:现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互.特别是通过不刷新页面的异步请求来返回数据或从服务器端的脚本(或数据系统)中得到响应.在这篇文章中,你将会了解 ...

  8. 【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享(多文件版本)

    这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下: 由于代码量和目录比较多,这个封装好的 ...

  9. 3) drf 框架生命周期 请求模块 渲染模块 解析模块 自定义异常模块 响应模块(以及二次封装)

    一.DRF框架 1.安装 pip3 install djangorestframework 2.drf框架规矩的封装风格 按功能封装,drf下按不同功能不同文件,使用不同功能导入不同文件 from r ...

随机推荐

  1. MYSQL 源码解读系列 [线程池。。] ----dennis的博客

    http://blog.sina.com.cn/s/articlelist_1182000643_0_1.html

  2. unity font研究小结

    项目用ngui制作的界面.字体使用了unity默认的Arial,公布后在一些android手机上发现中文不显示,就此作了一些调查. 參考unity的font说明文档:http://docs.unity ...

  3. IOS - 查找未使用的图片

    实现细节都在代码里面, 帮助 -h. # -*- coding: utf-8 -*- """ 检查IOS应用图片是否使用 1. 读取有效文件: 图片(.png, .jpg ...

  4. Java类的多态机制

    Java中将一个方法调用同一个方法主体关联起来被称作绑定. 绑定分为前期绑定和后期绑定.前期绑定是在编译器决定的,而后期绑定是在程序运行时决定的.Java中除了static方法和final方法(pri ...

  5. C语言学习笔记:15_c语言中的进制操作.c

    /* * 15_c语言中的进制操作.c * * Created on: 2015年7月5日 * Author: zhong */ #include <stdio.h> #include & ...

  6. 三期_day06_登录和找回password

    登录思路:   前台发送一个请求,然后通过spring的自己主动注參注入username和password,将password加密后与数据库中查找的做比較.返回是否通过. 这里还使用了EasyUI的校 ...

  7. Linux - 文件查找方法

    文件查找方法 1.which 查找可执行文件的位置 [root@local /]# which passwd /usr/bin/passwd 2.whereis 查找可执行文件的位置与相关的文件 [r ...

  8. [codeforces contest 1119 F] Niyaz and Small Degrees 解题报告 (树形DP+堆)

    interlinkage: http://codeforces.com/contest/1119/problem/F description: 有一颗$n$个节点的树,每条边有一个边权 对于一个$x$ ...

  9. Python的filter与map内置函数

    简单的记录下这两个函数的功能: list(filter(lambda x : x % 2, range(10))) 上例是返回了0-10之间的所有基数组成的列表.filter()有2个参数,第一个参数 ...

  10. 运维自动化-Ansible

    前言 天天说运维,究竟是干什么的?先看看工作流程呗.一般来说,运维工程师在一家企业里属于个位数的岗位,甚至只有一个.面对生产中NNN台服务器,NN个人员,工作量也是非常大的.所以嘛,图中的我好歹也会配 ...