study
study copied to clipboard
24wangchen
blog :
# 第一部分 类型和语法 内置类型 * null * undefined * boolean * number * string * symbol * object 特殊数值 * 不是值的值：null、undefined * 不是数字的数字：NaN * 无穷数：infinity * 零值：-0 简单标量基本类型值（字符串和数字等）通过值复制来赋值/传递，而复合值（对象等）通过引用复制来赋值/传递。JavaScript中的引用和其他语言中的引用/指针不同，他们不能指向别的变量/引用，只能指向值。 JavaScript为基本数据类型值提供了封装对象，称为原生函数（如String、Number、Boolean等）。对于简单标量基本类型值，比如“abc”，如果要访问它的length属性或String.prototype方法，JavaScript引擎会自动对该值进行封装（即用相应类型的封装对象来包装它）来实现对这些属性和方法的访问。 ?...
# 简介 ## 安全三要素 * 机密性——保护数据内容不能泄露，加密是实现机密性要求的常见手段 * 完整性——保护数据内容是完整的，没有被篡改的。常见的保证一致性的技术手段是数字签名 * 可用性——保护资源是“随需而得” ## 安全评估 资产等级分析 -> 威胁分析 -> 风险分析 -> 确认解决方案 # 客户端安全 ## 跨站脚本攻击(XSS) 英文全称是Cross Site Script，本来缩写是CSS，为了和层叠样式表区别，在安全领域叫做“XSS” XSS根据效果的不同，分为以下几类 * 反射型XSS *...
由于各家浏览器有各自的默认样式，所以实际项目中需要一个reset.css文件来重置默认属性，以下列出主流浏览器默认样式 - [Internet Explorer (Trident)](http://www.iecss.com/) - [Chrome/Safari (WebKit)](http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) - [Firefox (Gecko)](http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css) 目前比较流行的有YUI的[reset.css](http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset.css)，作为新手，可以使用reset.css，但学知识不能“知其然而不知其所以然”，所以我们要充分了解各浏览器的默认样式，进而才能写出适合自己项目的全局css而不是一股脑的reset.css，这样也有助于我们对于知识的学习
### 概述 事件系统是一个系统中很重要的部分，用于相应用户的各种交互行为。 浏览器提供了3种API 1. 写在元素标签内 2. elem.onXXX = function 3. 绑定事件。存在两套API - IE与Opera - 绑定事件 elem.attachEvent( 'on' + type, callback ) - 卸载事件 elem.detachEvent( 'on' + type, callback )...
数据缓存系统最早在jQuery1.2版本开始引入，它是用于关联操作对象和与之相关的数据的一种机制。在DOM中，我们通常操作的数据有3种：元素节点、文档对象与window对象。1.2之前的jQuery事件系统照搬Dean Edwards的[addEvent.js](http://dean.edwards.name/weblog/2005/10/add-event/)，然而addEvent在实现有个缺憾，它将事件的回调都放在了EventTarget之上，这会引起循环引用，IE下就会有[内存泄露](https://github.com/24wangchen/study/issues/20)，如果EventTarget是window对象，又会引发全局污染。 数据缓存系统，除了规避以上这两个风险外，我们还可以有效地保存不同方法产生的中间变量，而这些变量会对另一个模块的方法有用，解耦方法间的依赖。对于jQuery来说，它的事件克隆乃至后来的队列实现都离不开缓存系统。 数据缓存产生的需求无外乎就是描述一个DOM节点的相关数据，以下有几种方案： ##### 使用attributes ``` var demo = document.getElementById('demo'); console.log(demo.getAttribute('node-type')); ``` ##### 使用html5的dataset ``` var demo = document.getElementById('demo'); console.log(demo.dataset.type); ``` ##### DOM扩展 ``` var demo = document.getElementById('demo'); demo['node-type']...
### 前言 作为一个前端工程师，jQuery肯定是个十分熟悉的工具，可以说是入门级框架。因此读懂jQuery并且理解其架构思想，对于一个初中级工程师来说，成长很大。jQuery经过这么多年的架构演变，版本也从1.x升级到了2.x，其中不乏很多设计精髓。它的API设计的很巧妙，使得很多新手可以不了解原生的JS条件下，完成一些常见的交互。前端很重要的一部分就是DOM操作，jQuery秉承其 **The Write Less, Do More** 的理念，将复杂的DOM操作封装出简单易用的API。 本文选择的版本是2.1.1 ### 外层沙箱 沙箱是前端中很常见的一种方式。jQuery中，为了避免全局变量的污染，将代码放入一个自执行的函数中，然后暴露出命名空间。 ``` (function( global, factory ){ if( typeof module === "object" && typeof module.exports === "object" ){ module.exports...
当一个系统无法正确管理它的内存分配时，我们称之为内存泄露。内存泄露是个bug，它会导致系统性能下降甚至挂掉。 IE存在很多漏洞，其中最严重当属js脚本执行。当一个DOM对象引用了一个js对象(事件句柄函数)，同时这个js对象又有对该DOM对象的引用，此时就形成了一个循环引用。这本身是没有问题的。如果没有别的对该DOM和js对象的引用，GC将会同时回收它们，释放内存。GC可以识别出循环引用。不幸的是，IE的DOM没有被JS脚本管理。它有自己的一个内存管理，无法识别出循环引用。结果当循环引用存在时，无法进行内存回收。最终这会导致内存耗尽，浏览器崩溃。 下面这段代码将会创建10000个DOM元素，通过队列控制始终保留最近添加的10个元素，旧的被删除掉。打开Windows管理器，该网页所用内存几乎保持稳定。 ``` (function (limit, delay) { var queue = new Array(10); var n = 0; function makeSpan(n) { var s = document.createElement('span'); document.body.appendChild(s); var t = document.createTextNode(' '...
### 简介 js没有真正的数组，因此typeof不能识别数组与对象。用constructor检测在不同帧和窗口创建的数组会给出false，所以应当使用Array.prototype.toString.call(arr) === "[object Array]"。常见的伪数组有arguments，通过调用getElementsByTagName、document.childNodes等方法得到的NodeList对象。 ### 实现一个伪数组 ``` var pseudoArr = {0:'a', 1:'b', length: 2}; var arr = Array.prototype.slice.call( pseudoArr ); console.log( arr );//["a","b"] //下标没有对应的值 var pseudoArr1 = {a:'a',...
### parentNode && parentElement parentNode与parentElement在功能上是一样的，都是返回当前节点的父节点 > parentNode is the parent of the current node. The parent of an element is an Element node, a Document node, or a DocumentFragment node....
$('.test')执行流程 ``` jQuery = function( selector, context ){ return new jQuery.fn.init( selector, context ); } jQuery.fn = { pushStack: function( elems ){ var ret = jQuery.merge( this.constructor(), elems ); ret.prevObject...