【JS魔法堂：再识Bitwise Operation & Bitwise Shift】的更多相关文章

JS魔法堂:不完全国际化&本地化手册 之 实战篇

前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已.趁着这个机会好好学习整理一下,为后面的技术选型做准备.  本篇将于大家一起挽起袖子撸代码:) 如何获取Language tag?  在实现本地化处理前,我们起码先要获取Language tag吧?那么获取方式分为两类 1.直接获取浏览器的Language tag信息  一般来说浏览器语言的版本标示着用户所属或…

JS魔法堂：jsDeferred源码剖析

一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计>提供该资讯,再次感谢),追本溯源地了解jsDeferred是十分有必要的,并且当你看过官网(http://cho45.stfuawsc.com/jsdeferred/)的新手引导后就会有种不好好学学就太可惜的感觉了,而只看API和使用指南是无法满足我对它的好奇心的,通过解读源码读透它的设计思想才是根本.…

JS魔法堂：属性、特性，傻傻分不清楚

一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; console.log(el.getAttribute('hello')); // IE67下输出test,其他浏览器输出null “搞毛啊?”,苦逼的Jser对着浏览器大呼一声.然后就用下面蹩脚的方式草草处理掉了. function getAttr(el, prop){ return el[prop] || el…

JS魔法堂：那些困扰你的DOM集合类型

一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = document.getElementsByName('dummyName'); var node = nodes.namedItem('id'); 答案是两种都有可能哦!document.getElementsByName在Chrome和FF30.0中返回NodeList(木有namedItem方法的),在IE…

JS魔法堂：doctype我们应该了解的基础知识

一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DTD就是声明在文档首行,位于<html>前,用于告知浏览器该文档遵循那种级别的HTML或XHTML规范. 其声明格式如下: <!DOCTYPE① html② PUBLIC③ "公共标识符"④ "系统标识符"⑤ [<!ELEMENT name (#P…

JS魔法堂：精确判断IE的文档模式by特征嗅探

一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器探测后另一利器处理上述问题. 二.何为特征嗅探 从前我们都是通过对navigator.userAgent或navigator.appVersion两个属性值进行特定字符串匹配和萃取来区分浏览器类型和获取版本号的.但随着IE8提供可选的文档兼容性模式设置和各种加壳浏览器的出现,导致无法通过naviga…

JS魔法堂：追忆那些原始的选择器

一.前言                                                                                                    首先这里说的原始选择器是指除 querySelector . querySelectorAll 外的其他选择器.从前我只使用 getElementById 获取元素并没有觉得有什么问题,但随着参与项目的前端规模逐步扩大,踩的坑就越来越多,于是将踩过的和学习过的经验教训记录在这里,供以后好查阅…

JS魔法堂:不完全国际化&本地化手册 之 理論篇

前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已.趁着这个机会好好学习整理一下,为后面的技术选型做准备.  本篇将阐述国际化和本地化的概念,以及其中一个很重要的概念--Language tag(也叫Language code 或 Culture). 何为国际化?  国际化我认为就是应用支持多语言和文化习俗(数字.货币.日期和字符比较算法等),而本地化则是应用…

JS魔法堂：判断节点位置关系

一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二.祖孙关系 html <div id="ancestor"> <div id="parent"> <div id="son">son</div> </div> </div> &l…

JS魔法堂：LINK元素深入详解

一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css"> 来引入外部层叠式样式文件,但LINK元素各属性的具体含义.资源加载行为等方面却了解不多,本文打算稍微深入一下. 由于内容较多,特设目录一坨: 二.到底有没有结束标签? 三.普通属性介绍 四.属性disabled详解 1. Attribute和Property的disabled 2. disabl…

JS魔法堂：IMG元素加载行为详解

一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属性和事件 资源加载首先当然是确定资源位置的 src属性 .随之就是资源加载成功与否的 onload事件 和 onerror事件 ,对于IE5~10来说还多了一个 onreadystatechage事件 和与该事件相关联的 readyState属性 和 complete属性 . onload事件 ,当资源加载完…

JS魔法堂：浏览器模式和文档模式怎么玩？

一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现极大地方便了苦逼的前端攻城狮们适配各版本的IE,但jser们也不能完全信任它,因为它只是提供尽可能的文档模式模拟而已. 本篇大部分内容来源于官方解说:http://msdn.microsoft.com/library/cc288325(v=vs.85).aspx,并尽量融入个人平常工作中踩过的坑加以…

JS魔法堂：再识Bitwise Operation & Bitwise Shift

Brief linkFly的<JavaScript-如果...没有方法>中提及如何手写Math.round方法,各种奇技淫招看着十分过瘾,最让我惊叹的是 ~~(x + )) ,完全通过加法和位运算搞定整数的四舍五入.在好奇心的驱使下重温了一下位运算,并对上述公式加以封装得到适合小数的四舍五入方法 function round(v/*alue*/, p/*recision*/){ p = Math.pow(, p>>> ? : p|) v *= p )|) / p } 在开波前…

JS魔法堂：IE5~9的Drag&Drop API

一.前言     < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解一下吧! 二.IE5~9与HTML5的DnD API的不同点     1. IE5~9DnD API仅对 img元素 . a[href]元素 和 input[type=text]/textarea元素 中被选中的文字有效,且不用设置 draggable="true" ; 而HTML5中凡是设…

JS魔法堂：再识Number type

Brief 本来只打算理解JS中0.1 + 0.2 == 0.30000000000000004的原因,但发现自己对计算机的数字表示和运算十分陌生,于是只好恶补一下.以下是恶补后的成果: 基础野:细说原码.反码和补码(http://www.cnblogs.com/fsjohnhuang/p/5060242.html) 基础野:细说无符号整数(http://www.cnblogs.com/fsjohnhuang/p/5078290.html) 基础野:细说有符号整数(http://www.cnbl…

JS魔法堂：再识IE的内存泄露

一.前言 IE6~8除了不遵守W3C标准和各种诡异外,我想最让人诟病的应该是内存泄露的问题了.这阵子趁项目技术调研的机会好好的再认识一回,以下内容若有纰漏请大家指正,谢谢! 目录一大坨! 二.内存泄漏到底是哪里漏了? 2.1. JS Engine Object.DOM Element 和 BOM Element 2.2. JS Engine Object的内存回收机制 2.3. DOM Element的内存回收机制 2.4. 两种泄漏方式 三.4种泄漏模式  3.1. Circular Refe…

JS魔法堂：再识instanceof

一.Breif    大家都知道instanceof一般就是用来检查A对象是否为B类或子类的实例.那问题是JS中没有类的概念更没有类继承的概念(虽然有构造函数),那么instanceof到底是怎样判断A对象是B构造函数的实例呢?本文将对此作分析记录,以便日后查阅. 二.Reference 2 ECMA-262-3 Spec    http://bclary.com/2004/11/07/#a-11.8.6 The production RelationalExpression: Relation…

JS魔法堂：再识ASCII实体、符号实体和字符实体

一.前言            相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢. 二.初识HTML实体                                                       由于HTML中某些字符是预留的(如>和<等),若要在进行HTML解析出来后能正确显示预留字符,则需要使用字符实体来代替了. 字符实体有三种表示方式: // Named character…

JS魔法堂：深究JS异步编程模型

前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在https://github.com/fsjohnhuang/ppt/tree/master/apm_of_js上,有兴趣就上去看看吧! 重申主题  <异步编程模型>这个名称确实不太直观,其实今天我想和大家分享的就是上面的代码是如何演进成下面的代码而已. a(function(){ b(functi…

JS魔法堂：Data URI Scheme介绍

一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先不管到底有用与否,仅仅记录理论知识.也希望大家一起来分享实战经验啊! 二.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了,href属性值http://…

JS魔法堂：剖析源码理解Promises/A规范

一.前言 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规范及后来经改进的Promises/A+规范提供了实现 如Q, Bluebird, when, rsvp.js, mmDeferred, jQuery.Deffered()等. 虽然上述实现库均以Promises/A+规范作为实现基准,但由于Promises/A+是对Promises/A规范的改进和增强,因此深入学习Promises/A规范也是不可缺少的. 本文内容主要根据以下内容进行学习后整理而成,若…

JS魔法堂：mmDeferred源码剖析

一.前言 avalon.js的影响力愈发强劲,而作为子模块之一的mmDeferred必然成为异步调用模式学习之旅的又一站呢!本文将记录我对mmDeferred的认识,若有纰漏请各位指正,谢谢.项目请见:mmDeferred@github 二.API说明 {Deferred} Deferred({Function|Object} mixin?) ,创建一个Deferred实例,当mixin的类型为Object时,将mixin的属性和函数附加到Deferred实例的Promise实例上. {Stri…

JS魔法堂：jQuery.Deferred(jQuery1.5-2.1)源码剖析

一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var promise = $.getJSON('dummy.js') // 其他逻辑处理 promise.then(function(){ alert('late binding') }) 我还一度以为这就是Promises/A+规范的实现,但其实jQuery.Deferred应该与jsDeferred归为…

JS魔法堂：获取当前脚本文件的绝对路径

一.前言 当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这个问题吧! 二.各大浏览器的实现方式 [a]. Chrome和FF 超简单的一句足矣! var getCurrAbsPath = function(){ return document.currentScript.src; }; 这里利用了对象 document.currentScript ,它返回的是当前执行的script元素:然后调用script元素的src属性即可获取脚本文件的绝对路…

JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

前言  最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限.  即使在页面上增添一个登出按钮也无法保证用户不会直接关掉浏览器,更何况用户已经习惯这样做,增加功能好弄,改变习惯却难啊.这时想起N年用过的window.onbeforeunload和window.onunload事件.  本文记录重拾这两个家伙的经过,以便日后用时少坑. 为网页写个Dispose方法  C#中我…

JS魔法堂：ES6新特性——GeneratorFunction介绍

一.前言       第一次看koajs的示例时,发现该语句 function *(next){...............} ,这是啥啊?于是搜索一下,原来这是就是ES6的新特性Generator Function(生成器函数). 那什么是生成器函数呢?其实就相当于C#2.0中通过yield关键字实现的迭代器的生成器(细节有所不同),那么理解的关键就在迭代器和yield关键字两部分了.下面将尝试从表象出发,逐步对生成器函数及利用它进行异步编程进行浅层的分析理解. 二.表象——语法及基本使用…

JS魔法堂：函数重载 之 获取变量的数据类型

Brief 有时我们需要根据入参的数据类型来决定调用哪个函数实现,就是说所谓的函数重载(function overloading).因为JS没有内置函数重载的特性,正好给机会我们思考和实现一套这样的机制. 使用方式: function foo(){ return dispatch(this, arguments) } foo["object,number"] = function(o, n){console.log(o.toString() + ":" + n)}…

JS魔法堂：彻底理解0.1 + 0.2 === 0.30000000000000004的背后

Brief 一天有个朋友问我“JS中计算0.7 * 180怎么会等于125.99999999998,坑也太多了吧!”那时我猜测是二进制表示数值时发生round-off error所导致,但并不清楚具体是如何导致,并且有什么方法去规避.于是用了3周时间静下心把这个问题搞懂,在学习的过程中还发现不仅0.7 * 180==125.99999999998,还有以下的坑 1. 著名的 0.1 + 0.2 === 0.30000000000000004 2. 1000000000000000128 ===…

JS魔法堂：再次认识Function.prototype.call

一.前言                                大家先预计一下以下四个函数调用的结果吧! var test = function(){ console.log('hello world') return 'fsjohnhuang' }test.call() // ① Function.prototype.call(test) // ② Function.prototype.call.call(test) // ③ Function.prototype.call.call(…

JS魔法堂：ASI(自动分号插入机制)和前置分号

一.前言 今晚在知乎看到百姓网前端技术专家——贺师俊对<JavaScript 语句后应该加分号么?>的回答,让我又一次看到大牛的风采,实在佩服万分.但单纯的敬佩是不足以回报他如此优秀的文字,必须深入理解文字的含义和背后的原理才不愧呢! 在这之前我们需要先理解ASI(自动分号插入机制). 二. Automatic Semicolon Insertion (ASI, 自动分号插入机制)   主要参考:http://justjavac.com/javascript/2013/04/22/automa…