js框架设计1.4类型判断

这篇司徒大神介绍了很多js的不靠谱类型判断.篇幅也是第一篇中最常的 ,经阅读后,以后一定要用框架的自带的类型判断,万万不可随便乱用js原生判断.…

Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型.基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型,object是复杂数据类型,其中Object,Array,Function属于引用类型(对象数据类型). 基于这么多数据类型,所以JS就自带有类型判定的方法,typeof 用来检测基本数据类型,instanceof 用来检测对象数据类型,但是JS自带的这两套识别机制并不靠谱,所以产生了isXXX…

js框架设计1.1命名空间笔记

借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩展.数组化,类型判定,简单事件的绑定和写在,无冲突处理,模块加载与domReady.应具有扩展性.常用.稳定等特点. 1.1 命名空间一观各大框架,基本是定义一个全局变量作为命名空间,如Ext的Ext等,大体抽象取例为: if(typeof(Ten)==='undefined'){ Ten={};…

JS框架设计读书笔记之-小知识

这一篇写一点小知识 JS中0.1+0.2为什么不等于0.3? 关于这个问题之前也很疑虑,老师也只是笼统的讲这是JS的语言问题,但是内部具体的情况却没有讲,看了书才发现原理如此简单. 简单来讲,计算机识别的数字长度是有限制的,过大的数字计算会出现infinity或者NAN,这个好理解,但是为什么小数也会出现呢?如果从二进制的角度思考就很简单了,对于一定范围内的正数,总是可以表示成对应的二进制,但是小数就有问题了,十进制的0.5相当于热二进制的0.1,0.25 => 0.01,0.125 => 0…

JS框架设计读书笔记之-核心模块

随笔记录一下读书心得 1. 框架模块-核心模块该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载.domReady 之前阅读过jQuey的部分源码,对这些功能还是有感触的,比如说: 对象扩展: jQuery.extend({ merge: function(first, second) { var len = +second.length, j = 0, i = first.length; f…

JS框架设计之对象数组化一种子模块

类数组对象是一个很好的存储结构,但是功能太弱了,为了享受纯数组的哪些便捷的方法,使用前可以做下转换,通常可以使用$.slice.call()方法做转换,但是旧版本的IE下的HTMLCollection.NodeList不是Object的子类,如果采用[].slice.call()方法可能会导致异常,下面是各大库是怎么处理的: 1.jQuery的makeArray <!DOCTYPE html> <html lang="en"> <head> <…

JS框架设计之命名空间设计一种子模块

命名空间 1.种子模块作为一个框架的最开始,除了负责初始化框架的最基础部分. 2.种子模块作为框架的最开始,那么什么是种子框架的最开始呢?答案是IIFE(立即调用函数表达式); IIFE(立即调用函数表达式)是现代Javascript框架最主要的基础设施,它像细胞膜一样包裹着整个框架,放置外部框架的变量污染. 3.众所周知,大多数框架在windows中立足是通过命名空间,基本上我们可以把命名空间看成是框架的名字,当然也有一些框架没有命名空间向Prototype.js,mootools等都有污染的…

JS框架设计读书笔记之-节点模块

节点的创建浏览器提供了多种手段创建API,从流行程度依次是document.createElement.innerHTML.insertAdjacentHTML.createContextualFragment. document.createElement:传入一个标签名,返回此类型的元素节点.对于浏览器不支持的节点类型,也可以支持,后来被用于IE6-IE8支持H5新标签. console.log(document.createElement('abc')); //<abc></a…

JS框架设计读书笔记之-选择器引擎01

选择符选择符是指CSS样式规则最左边的部分,例如 p{},#id{},.class{},p.class{} 等等总共可以分为四大类: 并联选择器 => 逗号 => $('div,span') 简单选择器 => ID,CLASS,TAG,ATTR,* => $('#id'),$('.class'),$('div'),$('[attr]'),$('*') 关系选择器 => ' '.'>'.'+'.'~' => $('div span').$('div>spa…

多态（upcast）减少分支判断以及多态继承设计、具体类型判断。

Influenced by <java 八荣八耻>,翻了下<java编程思想> 印象中多态产生的条件:1.子类继承父类 2.父类[指针]指向子类 3.父类引用调用重写(@Override)方法 * 大家注意指针的这个字眼,如果方法是静态的话没有指针,多态是没法运作的,本质上多态产生条件就是一个[upcast]. [回顾重载和重写] 1.@Override 子类对父类允许访问的方法重写 .(异常:不能抛出比父类更多异常.访问修饰:不能更封闭) * 加了注解IDE会帮忙检查方法名…

JS框架设计之对象扩展一种子模块

对象扩展说完了,对象的创建(框架的命名空间的创建)以及如何解决多库之间的命名空间冲突问题之后,接下来,就是要扩展我们的对象,来对框架进行扩展,我们需要一种新功能,将新添加的功能整合到我们定义的对象中去.这种类型的方法在Javascript中常被称为extend和mixin.在Javascript对象属性特性没有诞生之前,我们可以随意的添加.修改.删除其属性的,因此扩展一个对象十分的简单.一个简单的代码扩展方法如下: <!DOCTYPE html> <html lang="en…

Js框架设计之DomReady

一.在介绍DomReady之前,先了解下相关的知识 1.HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2.HTML是要通过浏览器解析之后才会转换成为DOM节点一般地,但我们向浏览器中输入一个地址,开始加载页面到我们看到页面的内容为止,这期间就有一个DOM节点构建的过程(浏览器将HTML标签转换为DOM节点). 当前页面上的所有的HTML标签都转换成DOM节点,这就叫DOM树建完,简称为DOMReady…

JS框架设计读书笔记之-动画

基础概念 CSS样式可分为两种,一种值接近无限的集合(color,width),一种值只有几种(display),可以进行计算的样式,产生了动画效果.\ 1. 动画的第一步是获得元素的精确样式值. 2. 若要做平移,传入结束位置.距离.时长.fps. tips:fps设置多少合适? 除了人的眼睛,还要考虑到显示器的显示速度与浏览器的渲染速度.据国外统计,根据人所能感知到的变化间隔,25毫秒为最佳数值. 缓动公式缓动公式来源于数学上的三角函数.二次项方程.高阶方程式,有了公式就可以控制移动速度.…

JS框架设计之主流框架的引入机制DomeReady一种子模块

DomReady其实是一种名为"DomContentLoaded"事件的名称,不过由于框架的需要,它与真正的DomContentLoaded有区别,在旧的JS书籍中m都会让我们把Js函数写到window.onload函数中,防止Dom树还没有建好,就对其操作,产生错误.…

js框架设计1.2对象扩展笔记

需要一个新的功能添加到我们的命名空间上.这方法在JS中被叫做extend或者mixin,若是遍历属性用一下1.1代码,则会遍历不出原型方法,所以1.2介绍的是mass Framework里的mix方法. 类似juqery的$.extend(). 1.1代码 function extend(destination,source){ for(var property in source) destination[[property] = source[property]; return destin…

JS框架设计读书笔记之-选择器引擎02

选择器引擎涉及相关概念概念以Sizzle的主函数声明为例,来说明引擎的相关概念. function Sizzle(selector, context, results, seed) { //... } 种子集seed:如果CSS选择器非常复杂,需要分几步来得到结果,那么第一次得到的元素集合就叫种子集.Sizzle引擎的解析基本上是由右到左,种子集中的一部分就是我们最后得到的元素.如果引擎是由左到右,那么就只是依次查询兄弟与子节点. 结果集results:选择器引擎最终返回的元素集合,约定要与…

JS框架设计读书笔记之-函数

这次写一些函数 1.模拟Object.keys方法 Object.keys = Object.keys || function(obj){ var a = []; // a[0],a[1]...分别赋值为obj的键 for(a[a.length] in obj); return a; } 2.repeat/字符串复制 function repeat(target,n){ var s = target,total = ''; while(n > 0){ if(n % 2 == 1){ total…

JS框架设计之加载器所在路径的探知一模块加载系统

1.要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很简单,强加个约定,URL的合成规则是为: basepath+模块ID+".js" 2.当浏览器自上而下分析DOM,在浏览器解析我们的Javascript文件时(指的是加载器文件)时,他就肯定是DOM树最后一个加入的script标签,因此有下面的方法: zcLoadJs.js function getBasePath() { va…

JS框架设计之模块加载系统

任何语言一到大规模应用阶段,必然要拆封模块,有利于维护和团队协作,与Java走得最近的dojo率先引进了加载器,使用document.write与同步Ajax请求实现,后台dojo以JSONP的方法来设计他每个模块的结构,以script为节点加载它的每个模块,这个就是目前主流的加载器方式.dojo的加载器与AMD的发明者都是James Bucker,dojo加载器独立出来就是著名的require加载器.…

js框架设计1.3数组化

这一节从作者哪里学来了[].slice.call([],0,1);这个方法第一个参数可是是字符串可以是数组或其他,第2个是数组截取位置的开始位置,第3个是终止位置. 作者说这个方法不兼容旧版本ie的,HTMLCollection.NodeList不是Object的子类所以在最后写了一个mass framework里面的方法,具体的代码如下. 当然在我们日常用的jq当中,我可以调用makeArray()的方法,就算没有数组也要返回空数组. 插入jq的 makeArray()方法先 var mak…

JS框架设计读书笔记之-异步

setTimeout/setInterval 1. 如果回调执行时间大于间隔时间,真正的间隔时间会大一些. 2. 存在一个最小的时间间隔,即使seTimeout(fn,0),在IE6-IE8中大概为15.6ms,后来精确到10ms,IE10为4ms,其他浏览器大概也是4ms. 3. 回调时间取0时,该函数会在能立即执行的时段触发. 4. 不写第二个参数,浏览器会自动配时间. 5. IE10与标准浏览器都支持额外参数,从第三个参数起,作为回调函数的参数传入. setTimeout(function…

类型和原生函数及类型转换（二：终结js类型判断）

typeof instanceof isArray() Object.prototype.toString.call() DOM对象与DOM集合对象的类型判断一.typeof typeof是一个一元运算符,放在任意类型的运算数前,这个运算返回的是字符串,该字符串说明的是运算数的类型. 在原始值类型中除了null都能正确的返回对应的类型字符串名称,即:number.string.boolean.undefined可以正确判断类型.typeof null ==> object. 但是需要注意的ty…

C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25.可不可以刚好保留到最后一位不是0的位置?默认保留2位,如果真的有3位小数,就保留3位,有4位就保留4位. 先说一下ToString("0.00##")中0和#的区别: 0 代表占位的.如果ToString("0.00") 这样就是保留两位小数,无论小数有多少位或者无…

基于 Egg.js 框架的 Node.js 服务构建之用户管理设计

前言近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核心,客户端本身初期倒不需要那么复杂,作为移动端的负责人(其实也就是一个打杂的小组长),这个平台架构我自然是免不了去参与的,作为一个前端 jser 来公司这边总是接到这种不太像前端的工作,要是以前我可能会有些抵触这种业务层面需要考虑的很多,技术实现本身又不太容易积累技术成长的活.这一年我成长了太多,总…

JS读书心得：《JavaScript框架设计》——第12章异步处理

一.何为异步执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上执行下一个任务,当任务执行完成时则会收到通知. 面对IO操作频繁的场景,异步执行模式可在同等的硬件资源条件下提供更大的并发处理能力,也就是更大的吞吐量. 但由于异步执行模式打破人们固有的思维方式,并且任务的发起和任务的执行是分离的,从而提高编程的复杂度. 多线程.多进程均可实现异步模式. 二.从回调…

js动画框架设计

当你不再依赖JQuery时,当你已经厌倦了引入js类库实现一些动画效果的方式,当你想实现一个简单而实用的动画框架......下面介绍下愚人设计的动画框架:支持动画缓动算法函数,如Linear.Cubic.Back.Bounce,支持改变高度,宽度,透明度,边框,外边距的基本动画,支持动画的回调函数,如开始.暂停.完成的callback等. Section One 游戏动画,Flash动画里一个比较重要的概念是帧频,即每秒播放多少帧动画,一般动画是30帧/秒,单位为fps(frames p…

判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以都转换成小写,以防出错 1.typeof(param) 返回param的类型(string) 这种方法是JS中的定义的全局方法,也是编译者们最常用的方法,优点就是使用简单.好记,缺点是不能很好的判断object.null.array.regexp和自定义对象. 示例代码: 复制代码代码如下: var…