GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1

 Host: www.w3.org

 Connection: keep-alive

 Cache-Control: max-age=0

 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

 Referer: https://www.google.com.hk/

 Accept-Encoding: gzip,deflate,sdch

 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

 Cookie: authorstyle=yes

 If-None-Match: "2cc8-3e3073913b100"

 If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

 name=qiu&age=25

 HTTP/1.1 200 OK

 Date: Tue, 08 Jul 2014 05:28:43 GMT

 Server: Apache/2

 Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT

 ETag: "40d7-3e3073913b100"

 Accept-Ranges: bytes

 Content-Length: 16599

 Cache-Control: max-age=21600

 Expires: Tue, 08 Jul 2014 11:28:43 GMT

 P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"

 Content-Type: text/html; charset=iso-8859-1

 {"name": "qiu", "age": 25}

 <!--[if IE 6]>

 Special instructions for IE 6 here

 <![endif]-->

 /***** Selector Hacks ******/

 /* IE6 and below */

 * html #uno  { color: red }

 /* IE7 */

 *:first-child+html #dos { color: red }

 /* IE7, FF, Saf, Opera  */

 html>body #tres { color: red }

 /* IE8, FF, Saf, Opera (Everything but IE 6,7) */

 html>/**/body #cuatro { color: red }

 /* Opera 9.27 and below, safari 2 */

 html:first-child #cinco { color: red }

 /* Safari 2-3 */

 html[xmlns*=""] body:last-child #seis { color: red }

 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */

 body:nth-of-type(1) #siete { color: red }

 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */

 body:first-of-type #ocho {  color: red }

 /* saf3+, chrome1+ */

 @media screen and (-webkit-min-device-pixel-ratio:0) {

 #diez  { color: red  }

 }

 /* iPhone / mobile webkit */

 @media screen and (max-device-width: 480px) {

 #veintiseis { color: red  }

 }

 /* Safari 2 - 3.1 */

 html[xmlns*=""]:root #trece  { color: red  }

 /* Safari 2 - 3.1, Opera 9.25 */

 *|html[xmlns*=""] #catorce { color: red  }

 /* Everything but IE6-8 */

 :root *> #quince { color: red  }

 /* IE7 */

 *+html #dieciocho {  color: red }

 /* Firefox only. 1+ */

 #veinticuatro,  x:-moz-any-link  { color: red }

 /* Firefox 3.0+ */

 #veinticinco,  x:-moz-any-link, x:default  { color: red  }
  

 /* IE6 */

 #once { _color: blue }

 /* IE6, IE7 */

 #doce { *color: blue; /* or #color: blue */ }

 /* Everything but IE6 */

 #diecisiete { color/**/: blue }

 /* IE6, IE7, IE8 */

 #diecinueve { color: blue\9; }

 /* IE7, IE8 */

 #veinte { color/*\**/: blue\9; }

 /* IE6, IE7 -- acts as an !important */

 #veintesiete { color: blue !ie; } /* string after ! can be anything */

 .target {

     min-height: 100px;

     height: auto !important;

     height: 100px;   // IE6下内容高度超过会自动扩展高度

 }

 <style type="text/css">

 .outer {

     width: 215px;

     height: 100px;

     border: 1px solid red;

     overflow: auto;

     position: relative;  /* 修复bug */

 }

 .inner {

     width: 100px;

     height: 200px;

     background-color: purple;

     position: relative;

 }

 </style>

 <div class="outer">

     <div class="inner"></div>

 </div>

 <style type="text/css">

     .p:hover,

     .hover {

         background: purple;

     }

 </style>

 <p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

 <script type="text/javascript">

     function addClass(elem, cls) {

         if(elem.className) {

             elem.className += ' ' + cls;

         } else {

             elem.className = cls;

         }

     }

     function removeClass(elem, cls) {

         var className = ' ' + elem.className + ' ';

         var reg = new RegExp(' +' + cls + ' +', 'g');

         elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');

     }

     var target = document.getElementById('target');

     if(target.attachEvent) {

         target.attachEvent('onmouseenter', function() {

             addClass(target, 'hover');

         });

         target.attachEvent('onmouseleave', function() {

             removeClass(target, 'hover');

         })

     }

 </script>

 .opacity {

     opacity: 0.4

     filter: alpha(opacity=60); /* for IE5-7 */

     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

 }

display: inline-block;

*display: inline;
*zoom: 1;

 /**

 * 在标准浏览器下使用

 * 1 content内容为空格用于修复opera下文档中出现

 *   contenteditable属性时在清理浮动元素上下的空白

 * 2 使用display使用table而不是block：可以防止容器和

 *   子元素top-margin折叠,这样能使清理效果与BFC，IE6/7

 *   zoom: 1;一致

 **/

 .clearfix:before,

 .clearfix:after {

     content: " "; /* 1 */

     display: table; /* 2 */

 }

 .clearfix:after {

     clear: both;

 }

 /**

 * IE 6/7下使用

 * 通过触发hasLayout实现包含浮动

 **/

 .clearfix {

     *zoom:;

 }

 <body>

     <div class="content">

     aaaaaa aaaaaa a a a a a a a a

     </div>

 </body>

 <style>

     body {

         background: #DDD;

         text-align: center; /* 3 */

     }

     .content {

         width: 500px;      /* 1 */

         text-align: left;  /* 3 */

         margin: 0 auto;    /* 2 */

         background: purple;

     }

 </style>

 <body>

     <div class="content">

     aaaaaa aaaaaa a a a a a a a a

     </div>

 </body>

 <style>

     body {

         background: #DDD;

     }

     .content {

         width: 500px;         /* 1 */

         float: left;

         position: relative;   /* 2 */

         left: 50%;            /* 3 */

         margin-left: -250px;  /* 4 */

         background-color: purple;

     }

 </style>

 <body>

     <div class="content">

     aaaaaa aaaaaa a a a a a a a a

     </div>

 </body>

 <style>

     body {

         background: #DDD;

         position: relative;

     }

     .content {

         width: 800px;

         position: absolute;

         left: 50%;

         margin-left: -400px;

         background-color: purple;

     }

 </style>

 <body>

     <div class="content">

     aaaaaa aaaaaa a a a a a a a a

     </div>

 </body>

 <style>

     body {

         background: #DDD;

         position: relative;

     }

     .content {

         width: 800px;

         position: absolute;

         margin: 0 auto;

         left: 0;

         right: 0;

         background-color: purple;

     }

 </style>

 <p class="text">center text</p>

 <style>

 .text {

     line-height: 200px;

 }

 </style>

 <div id="target"><span>test</span></div>

 <script type="text/javascript">

 var target = document.getElementById('target');

 if (target.addEventListener) {

   target.addEventListener('mouseout', mouseoutHandler, false);

 } else if (target.attachEvent) {

   target.attachEvent('onmouseout', mouseoutHandler);

 }

 function mouseoutHandler(e) {

   e = e || window.event;

   var target = e.target || e.srcElement;

   // 判断移出鼠标的元素是否为目标元素

   if (target.id !== 'target') {

     return;

   }

   // 判断鼠标是移出元素还是移到子元素

   var relatedTarget = event.relatedTarget || e.toElement;

   while (relatedTarget !== target

     && relatedTarget.nodeName.toUpperCase() !== 'BODY') {

     relatedTarget = relatedTarget.parentNode;

   }

   // 如果相等，说明鼠标在元素内部移动

   if (relatedTarget === target) {

     return;

   }

   // 执行需要操作

   //alert('鼠标移出');

 }

 </script>

CACHE MANIFEST

CACHE:

myapp.html

myapp.css

myapp.js

FALLBACK:

videos/ offline_help.html

NETWORK:

cgi/

 localStorage.setItem('x', 1); // storge x->1

 localStorage.getItem('x); // return value of x

 // 枚举所有存储的键值对

 for (var i = 0, len = localStorage.length; i < len; ++i ) {

     var name = localStorage.key(i);

     var value = localStorage.getItem(name);

 }

 localStorage.removeItem('x'); // remove x

 localStorage.clear();  // remove all data

 document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';

 document.cookie = 'name=aaa; path=/; domain=domain; secure';

 // 要改变cookie的值，需要使用相同的名字、路径和域，新的值

 // 来设置cookie，同样的方法可以用来改变有效期

 // 设置max-age为0可以删除指定cookie

 //读取cookie，访问document.cookie返回键值对组成的字符串，

 //不同键值对之间用'; '分隔。通过解析获得需要的值

1. 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果

2. 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果

3. 否则，throws a TypeError

 /**

 * 跨浏览器事件处理工具。只支持冒泡。不支持捕获

 * @author  (qiu_deqing@126.com)

 */

 var EventUtil = {

     getEvent: function (event) {

         return event || window.event;

     },

     getTarget: function (event) {

         return event.target || event.srcElement;

     },

     // 返回注册成功的监听器，IE中需要使用返回值来移除监听器

     on: function (elem, type, handler) {

         if (elem.addEventListener) {

             elem.addEventListener(type, handler, false);

             return handler;

         } else if (elem.attachEvent) {

             var wrapper = function () {

               var event = window.event;

               event.target = event.srcElement;

               handler.call(elem, event);

             };

             elem.attachEvent('on' + type, wrapper);

             return wrapper;

         }

     },

     off: function (elem, type, handler) {

         if (elem.removeEventListener) {

             elem.removeEventListener(type, handler, false);

         } else if (elem.detachEvent) {

             elem.detachEvent('on' + type, handler);

         }

     },

     preventDefault: function (event) {

         if (event.preventDefault) {

             event.preventDefault();

         } else if ('returnValue' in event) {

             event.returnValue = false;

         }

     },

     stopPropagation: function (event) {

         if (event.stopPropagation) {

             event.stopPropagation();

         } else if ('cancelBubble' in event) {

             event.cancelBubble = true;

         }

     },

     /**

      * keypress事件跨浏览器获取输入字符

      * 某些浏览器在一些特殊键上也触发keypress，此时返回null

      **/

      getChar: function (event) {

         if (event.which == null) {

             return String.fromCharCode(event.keyCode);  // IE

         }

         else if (event.which != 0 && event.charCode != 0) {

             return String.fromCharCode(event.which);    // the rest

         }

         else {

             return null;    // special key

         }

      }

 };

 function Shape() {}

 function Rect() {}

 // 方法1

 Rect.prototype = new Shape();

 // 方法2

 Rect.prototype = Shape.prototype;

 // 方法3

 Rect.prototype = Object.create(Shape.prototype);

 Rect.prototype.area = function () {

   // do something

 };

 function Rect() {

     Shape.call(this);

 }

 function create(obj) {

     if (Object.create) {

         return Object.create(obj);

     }

     function f() {};

     f.prototype = obj;

     return new f();

 }

 <style>

 #target {

     width: 200px;

     height: 300px;

     margin: 40px;

     background-color: tomato;

 }

 </style>

 <div id="target"></div>

 <script>

 function addMask(elem, opacity) {

     opacity = opacity || 0.2;

     var rect = elem.getBoundingClientRect();

     var style = getComputedStyle(elem, null);        

     var mask = document.createElement('div');

     mask.style.position = 'absolute';

     var marginLeft = parseFloat(style.marginLeft);

     mask.style.left = (elem.offsetLeft - marginLeft) + 'px';

     var marginTop = parseFloat(style.marginTop);

     mask.style.top = (elem.offsetTop - marginTop) + 'px';

     mask.style.zIndex = 9999;

     mask.style.opacity = '' + opacity;

     mask.style.backgroundColor = '#000';

     mask.style.width = (parseFloat(style.marginLeft) +

         parseFloat(style.marginRight) + rect.width) + 'px';

     mask.style.height = (parseFloat(style.marginTop) +

         parseFloat(style.marginBottom) + rect.height) + 'px';

     elem.parentNode.appendChild(mask);

 }

 var target = document.getElementById('target');

 addMask(target);

 target.addEventListener('click', function () {

     console.log('click');

 }, false);

 </script>

 var days = ['日','一','二','三','四','五','六'];

 var date = new Date();

 console.log('今天是星期' + days[date.getDay()]);

 for (var i = 0; i < 5; ++i) {

   setTimeout(function () {

     console.log(i + ' ');

   }, 100);

 }

 for (var i = 0; i < 5; ++i) {

   (function (i) {

     setTimeout(function () {

       console.log(i + ' ');

     }, 100);

   }(i));

 }

 function Page() {}

 Page.prototype = {

   constructor: Page,

   postA: function (a) {

     console.log('a:' + a);

   },

   postB: function (b) {

     console.log('b:' + b);

   },

   postC: function (c) {

     console.log('c:' + c);

   },

   check: function () {

     return Math.random() > 0.5;

   }

 }

 function checkfy(obj) {

   for (var key in obj) {

     if (key.indexOf('post') === 0 && typeof obj[key] === 'function') {

       (function (key) {

         var fn = obj[key];

         obj[key] = function () {

           if (obj.check()) {

             fn.apply(obj, arguments);

           }

         };

       }(key));

     }

   }

 } // end checkfy()

 checkfy(Page.prototype);

 var obj = new Page();

 obj.postA('checkfy');

 obj.postB('checkfy');

 obj.postC('checkfy');
  

 function deepClone(obj) {

     var _toString = Object.prototype.toString;

     // null, undefined, non-object, function

     if (!obj || typeof obj !== 'object') {

         return obj;

     }

     // DOM Node

     if (obj.nodeType && 'cloneNode' in obj) {

         return obj.cloneNode(true);

     }

     // Date

     if (_toString.call(obj) === '[object Date]') {

         return new Date(obj.getTime());

     }

     // RegExp

     if (_toString.call(obj) === '[object RegExp]') {

         var flags = [];

         if (obj.global) { flags.push('g'); }

         if (obj.multiline) { flags.push('m'); }

         if (obj.ignoreCase) { flags.push('i'); }

         return new RegExp(obj.source, flags.join(''));

     }

     var result = Array.isArray(obj) ? [] :

         obj.constructor ? new obj.constructor() : {};

     for (var key in obj ) {

         result[key] = deepClone(obj[key]);

     }

     return result;

 }

 function A() {

     this.a = a;

 }

 var a = {

     name: 'qiu',

     birth: new Date(),

     pattern: /qiu/gim,

     container: document.body,

     hobbys: ['book', new Date(), /aaa/gim, 111]

 };

 var c = new A();

 var b = deepClone(c);

 console.log(c.a === b.a);

 console.log(c, b);

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>TEst</title>

 </head>

 <body>

 <div>

    <input type="button" id ="button1" value="1" />

    <input type="button" id ="button2" value="2" />

 </div>

 <script type="text/javascript">

     var btn1 = document.getElementById('button1');

     var btn2 = document.getElementById('button2');

     addListener(btn1, 'click', function (event) {

         btn1.parentNode.insertBefore(btn2, btn1);

     });

     function addListener(elem, type, handler) {

         if (elem.addEventListener) {

             elem.addEventListener(type, handler, false);

             return handler;

         } else if (elem.attachEvent) {

             function wrapper() {

                 var event = window.event;

                 event.target = event.srcElement;

                 handler.call(elem, event);

             }

             elem.attachEvent('on' + type, wrapper);

             return wrapper;

         }

     }

 </script>

 </body>

 </html>
  

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>TEst</title>

 </head>

 <body>

     <span id="target"></span>

 <script type="text/javascript">

     // 为了简化。每月默认30天

     function getTimeString() {

         var start = new Date();

         var end = new Date(start.getFullYear() + 1, 0, 1);

         var elapse = Math.floor((end - start) / 1000);

         var seconds = elapse % 60 ;

         var minutes = Math.floor(elapse / 60) % 60;

         var hours = Math.floor(elapse / (60 * 60)) % 24;

         var days = Math.floor(elapse / (60 * 60 * 24)) % 30;

         var months = Math.floor(elapse / (60 * 60 * 24 * 30)) % 12;

         var years = Math.floor(elapse / (60 * 60 * 24 * 30 * 12));

         return start.getFullYear() + '年还剩' + years + '年' + months + '月' + days + '日'

             + hours + '小时' + minutes + '分' + seconds + '秒';

     }

     function domText(elem, text) {

         if (text == undefined) {

             if (elem.textContent) {

                 return elem.textContent;

             } else if (elem.innerText) {

                 return elem.innerText;

             }

         } else {

             if (elem.textContent) {

                 elem.textContent = text;

             } else if (elem.innerText) {

                 elem.innerText = text;

             } else {

                 elem.innerHTML = text;

             }

         }

     }

     var target = document.getElementById('target');

     setInterval(function () {

         domText(target, getTimeString());

     }, 1000)

 </script>

 </body>

 </html>

  var data =  [1, [2, [ [3, 4], 5], 6]];

     function flat(data, result) {

         var i, d, len;

         for (i = 0, len = data.length; i < len; ++i) {

             d = data[i];

             if (typeof d === 'number') {

                 result.push(d);

             } else {

                 flat(d, result);

             }

         }

     }

     var result = [];

     flat(data, result);

     console.log(result);

 1 /**

 2 * 判断一个对象是否是数组，参数不是对象或者不是数组，返回false

 3 *

 4 * @param {Object} arg 需要测试是否为数组的对象

 5 * @return {Boolean} 传入参数是数组返回true，否则返回false

 6 */

 7 function isArray(arg) {

 8     if (typeof arg === 'object') {

 9         return Object.prototype.toString.call(arg) === '[object Array]';

10     }

11     return false;

12 }

 if (window.addEventListener) {

   var addListener = function (el, type, listener, useCapture) {

     el.addEventListener(type, listener, useCapture);

   };

 }

 else if (document.all) {

   addListener = function (el, type, listener) {

     el.attachEvent('on' + type, function () {

       listener.apply(el);

     });

   };

 }
  

 var addListener;

 if (window.addEventListener) {

   addListener = function (el, type, listener, useCapture) {

     el.addEventListener(type, listener, useCapture);

     return listener;

   };

 }

 else if (window.attachEvent) {

   addListener = function (el, type, listener) {

     // 标准化this，event，target

     var wrapper = function () {

       var event = window.event;

       event.target = event.srcElement;

       listener.call(el, event);

     };

     el.attachEvent('on' + type, wrapper);

     return wrapper;

     // 返回wrapper。调用者可以保存，以后remove

   };

 }

 /**

 * 判断对象是否为函数，如果当前运行环境对可调用对象（如正则表达式）

 * 的typeof返回'function'，采用通用方法，否则采用优化方法

 *

 * @param {Any} arg 需要检测是否为函数的对象

 * @return {boolean} 如果参数是函数，返回true，否则false

 */

 function isFunction(arg) {

     if (arg) {

         if (typeof (/./) !== 'function') {

             return typeof arg === 'function';

         } else {

             return Object.prototype.toString.call(arg) === '[object Function]';

         }

     } // end if

     return false;

 }

 /**

 * 解析query string转换为对象，一个key有多个值时生成数组

 *

 * @param {String} query 需要解析的query字符串，开头可以是?，

 * 按照application/x-www-form-urlencoded编码

 * @return {Object} 参数解析后的对象

 */

 function parseQuery(query) {

     var result = {};

     // 如果不是字符串返回空对象

     if (typeof query !== 'string') {

         return result;

     }

     // 去掉字符串开头可能带的?

     if (query.charAt(0) === '?') {

         query = query.substring(1);

     }

     var pairs = query.split('&');

     var pair;

     var key, value;

     var i, len;

     for (i = 0, len = pairs.length; i < len; ++i) {

         pair = pairs[i].split('=');

         // application/x-www-form-urlencoded编码会将' '转换为+

         key = decodeURIComponent(pair[0]).replace(/\+/g, ' ');

         value = decodeURIComponent(pair[1]).replace(/\+/g, ' ');

         // 如果是新key，直接添加

         if (!(key in result)) {

             result[key] = value;

         }

         // 如果key已经出现一次以上，直接向数组添加value

         else if (isArray(result[key])) {

             result[key].push(value);

         }

         // key第二次出现，将结果改为数组

         else {

             var arr = [result[key]];

             arr.push(value);

             result[key] = arr;

         } // end if-else

     } // end for

     return result;

 }

 function isArray(arg) {

     if (arg && typeof arg === 'object') {

         return Object.prototype.toString.call(arg) === '[object Array]';

     }

     return false;

 }

 /**

 console.log(parseQuery('sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8'));

 */

 /**

 * 解析一个url并生成window.location对象中包含的域

 * location:

 * {

 *      href: '包含完整的url',

 *      origin: '包含协议到pathname之前的内容',

 *      protocol: 'url使用的协议，包含末尾的:',

 *      username: '用户名', // 暂时不支持

 *      password: '密码',  // 暂时不支持

 *      host: '完整主机名，包含:和端口',

 *      hostname: '主机名，不包含端口'

 *      port: '端口号',

 *      pathname: '服务器*问资源的路径/开头',

 *      search: 'query string，?开头',

 *      hash: '#开头的fragment identifier'

 * }

 *

 * @param {string} url 需要解析的url

 * @return {Object} 包含url信息的对象

 */

 function parseUrl(url) {

     var result = {};

     var keys = ['href', 'origin', 'protocol', 'host',

                 'hostname', 'port', 'pathname', 'search', 'hash'];

     var i, len;

     var regexp = /(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?/;

     var match = regexp.exec(url);

     if (match) {

         for (i = keys.length - 1; i >= 0; --i) {

             result[keys[i]] = match[i] ? match[i] : '';

         }

     }

     return result;

 }
  

 /**

 * 查询指定窗口的视口尺寸，如果不指定窗口，查询当前窗口尺寸

 **/

 function getViewportSize(w) {

     w = w || window;

     // IE9及标准浏览器中可使用此标准方法

     if ('innerHeight' in w) {

         return {

             width: w.innerWidth,

             height: w.innerHeight

         };

     }

     var d = w.document;

     // IE 8及以下浏览器在标准模式下

     if (document.compatMode === 'CSS1Compat') {

         return {

             width: d.documentElement.clientWidth,

             height: d.documentElement.clientHeight

         };

     }

     // IE8及以下浏览器在怪癖模式下

     return {

         width: d.body.clientWidth,

         height: d.body.clientHeight

     };

 }

 /**

 * 获取指定window中滚动条的偏移量，如未指定则获取当前window

 * 滚动条偏移量

 *

 * @param {window} w 需要获取滚动条偏移量的窗口

 * @return {Object} obj.x为水平滚动条偏移量,obj.y为竖直滚动条偏移量

 */

 function getScrollOffset(w) {

     w =  w || window;

     // 如果是标准浏览器

     if (w.pageXOffset != null) {

         return {

             x: w.pageXOffset,

             y: w.pageYOffset

         };

     }

     // 老版本IE，根据兼容性不同访问不同元素

     var d = w.document;

     if (d.compatMode === 'CSS1Compat') {

         return {

             x: d.documentElement.scrollLeft,

             y: d.documentElement.scrollTop

         }

     }

     return {

         x: d.body.scrollLeft,

         y: d.body.scrollTop

     };

 }
  

 function richText(text) {

     var div = document.createElement('div');

     div.innerHTML = text;

     var p = div.getElementsByTagName('p');

     var i, len;

     for (i = 0, len = p.length; i < len; ++i) {

         if (p[i].getElementsByTagName('img').length === 1) {

             p[i].classList.add('pic');

         }

     }

     return div.innerHTML;

 }
  

 function Event() {

     if (!(this instanceof Event)) {

         return new Event();

     }

     this._callbacks = {};

 }

 Event.prototype.on = function (type, handler) {

     this_callbacks = this._callbacks || {};

     this._callbacks[type] = this.callbacks[type] || [];

     this._callbacks[type].push(handler);

     return this;

 };

 Event.prototype.off = function (type, handler) {

     var list = this._callbacks[type];

     if (list) {

         for (var i = list.length; i >= 0; --i) {

             if (list[i] === handler) {

                 list.splice(i, 1);

             }

         }

     }

     return this;

 };

 Event.prototype.trigger = function (type, data) {

     var list = this._callbacks[type];

     if (list) {

         for (var i = 0, len = list.length; i < len; ++i) {

             list[i].call(this, data);

         }

     }

 };

 Event.prototype.once = function (type, handler) {

     var self = this;

     function wrapper() {

         handler.apply(self, arguments);

         self.off(type, wrapper);

     }

     this.on(type, wrapper);

     return this;

 };
  

 <ul id="target">

     <li>1</li>

     <li>2</li>

     <li>3</li>

     <li>4</li>

 </ul>

 <script>

     var target = document.getElementById('target');

     var i;

     var frag = document.createDocumentFragment();

     for (i = target.children.length - 1; i &gt;= 0; --i) {

         frag.appendChild(target.children[i]);

     }

     target.appendChild(frag);

 </script>

 // define

 (function (window) {

     function fn(str) {

         this.str = str;

     }

     fn.prototype.format = function () {

         var arg = __1__;

         return this.str.replace(__2__, function (a, b) {

             return arg[b] || '';

         });

     };

     window.fn = fn;

 })(window);

 // use

 (function () {

     var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');

     console.log(t.format('http://www.alibaba.com', 'Alibaba', 'Welcome'));

 })();
  

 <form id="target">

     <select name="age">

         <option value="aaa">aaa</option>

         <option value="bbb" selected>bbb</option>

     </select>

     <select name="friends" multiple>

         <option value="qiu" selected>qiu</option>

         <option value="de">de</option>

         <option value="qing" selected>qing</option>

     </select>

     <input name="name" value="qiudeqing">

     <input type="password" name="password" value="11111">

     <input type="hidden" name="salery" value="3333">

     <textarea name="description">description</textarea>

     <input type="checkbox" name="hobby" checked value="football">Football

     <input type="checkbox" name="hobby" value="basketball">Basketball

     <input type="radio" name="sex" checked value="Female">Female

     <input type="radio" name="sex" value="Male">Male

 </form>

 <script>

 /**

 * 将一个表单元素序列化为可提交的字符串

 *

 * @param {FormElement} form 需要序列化的表单元素

 * @return {string} 表单序列化后的字符串

 */

 function serializeForm(form) {

   if (!form || form.nodeName.toUpperCase() !== 'FORM') {

     return;

   }

   var result = [];

   var i, len;

   var field, fieldName, fieldType;

   for (i = 0, len = form.length; i < len; ++i) {

     field = form.elements[i];

     fieldName = field.name;

     fieldType = field.type;

     if (field.disabled || !fieldName) {

       continue;

     } // enf if

     switch (fieldType) {

       case 'text':

       case 'password':

       case 'hidden':

       case 'textarea':

         result.push(encodeURIComponent(fieldName) + '=' +

             encodeURIComponent(field.value));

         break;

      &nbnbsp;case 'radio':

       case 'checkbox':

         if (field.checked) {

           result.push(encodeURIComponent(fieldName) + '=' +

             encodeURIComponent(field.value));

         }

         break;

       case 'select-one':

       case 'select-multiple':

         for (var j = 0, jLen = field.options.length; j < jLen; ++j) {

           if (field.options[j].selected) {

             result.push(encodeURIComponent(fieldName) + '=' +

               encodeURIComponent(field.options[j].value || field.options[j].text));

           }

         } // end for

         break;

       case 'file':

       case 'submit':

         break; // 是否处理？

       default:

         break;

     } // end switch

   } // end for

     return result.join('&');

 }

 var form = document.getElementById('target');

 console.log(serializeForm(form));

 </script>

 <ul id="nav">

     <li><a href="http://11111">111</a></li>

     <li><a href="http://2222">222</a></li>

     <li><a href="http://333">333</a></li>

     <li><a href="http://444">444</a></li>

 </ul>

 Object:

 {

     "index": 1,

     "name": "111",

     "link": "http://1111"

 }

 var EventUtil = {

     getEvent: function (event) {

         return event || window.event;

     },

     getTarget: function (event) {

         return event.target || event.srcElement;

     },

     // 返回注册成功的监听器，IE中需要使用返回值来移除监听器

     on: function (elem, type, handler) {

         if (elem.addEventListener) {

             elem.addEventListener(type, handler, false);

             return handler;

         } else if (elem.attachEvent) {

             function wrapper(event) {

                 return handler.call(elem, event);

             };

             elem.attachEvent('on' + type, wrapper);

             return wrapper;

         }

     },

     off: function (elem, type, handler) {

         if (elem.removeEventListener) {

             elem.removeEventListener(type, handler, false);

         } else if (elem.detachEvent) {

             elem.detachEvent('on' + type, handler);

         }

     },

     preventDefault: function (event) {

         if (event.preventDefault) {

             event.preventDefault();

         } else if ('returnValue' in event) {

             event.returnValue = false;

         }

     },

     stopPropagation: function (event) {

         if (event.stopPropagation) {

             event.stopPropagation();

         } else if ('cancelBubble' in event) {

             event.cancelBubble = true;

         }

     }

 };

 var DOMUtil = {

     text: function (elem) {

         if ('textContent' in elem) {

             return elem.textContent;

         } else if ('innerText' in elem) {

             return elem.innerText;

         }

     },

     prop: function (elem, propName) {

         return elem.getAttribute(propName);

     }

 };

 var nav = document.getElementById('nav');

 EventUtil.on(nav, 'click', function (event) {

     var event = EventUtil.getEvent(event);

     var target = EventUtil.getTarget(event);

     var children = this.children;

     var i, len;

     var anchor;

     var obj = {};

     for (i = 0, len = children.length; i < len; ++i) {

         if (children[i] === target) {

             obj.index = i + 1;

             anchor = target.getElementsByTagName('a')[0];

             obj.name = DOMUtil.text(anchor);

             obj.link = DOMUtil.prop(anchor, 'href');

         }

     }

     alert('index: ' + obj.index + ' name: ' + obj.name +

         ' link: ' + obj.link);

 });

  /**

     * 数组去重

     **/

     function normalize(arr) {

         if (arr && Array.isArray(arr)) {

             var i, len, map = {};

             for (i = arr.length; i >= 0; --i) {

                 if (arr[i] in map) {

                     arr.splice(i, 1);

                 } else {

                     map[arr[i]] = true;

                 }

             }

         }

         return arr;

     }

     /**

     * 用100个随机整数对应的字符串填充数组。

     **/

     function fillArray(arr, start, end) {

         start = start == undefined ? 1 : start;

         end = end == undefined ?  100 : end;

         if (end <= start) {

             end = start + 100;

         }

         var width = end - start;

         var i;

         for (i = 100; i >= 1; --i) {

             arr.push('' + (Math.floor(Math.random() * width) + start));

         }

         return arr;

     }

     var input = [];

     fillArray(input, 1, 100);

     input.sort(function (a, b) {

         return a - b;

     });

     console.log(input);

     normalize(input);

     console.log(input);

• FE-interview
• HTML， HTTP，web综合问题
• 常见排序算法的时间复杂度,空间复杂度
• 前端需要注意哪些SEO
• web开发中会话跟踪的方法有哪些
• <img>的title和alt有什么区别
• doctype是什么,举例常见doctype及特点
• HTML全局属性(global attribute)有哪些
• 什么是web语义化,有什么好处
• HTTP method
• 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
• HTTP request报文结构是怎样的
• HTTP response报文结构是怎样的
• 如何进行网站性能优化
• 什么是渐进增强
• HTTP状态码及其含义
• CSS部分
• CSS选择器有哪些
• css sprite是什么,有什么优缺点
• display: none;与visibility: hidden;的区别
• css hack原理及常用hack
• specified value,computed value,used value计算方法
• link与@import的区别
• display: block;和display: inline;的区别
• PNG,GIF,JPG的区别及如何选
• CSS有哪些继承属性
• IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
• 容器包含若干浮动元素时如何清理(包含)浮动
• 什么是FOUC?如何避免
• 如何创建块级格式化上下文(block formatting context),BFC有什么用
• display,float,position的关系
• 外边距折叠(collapsing margins)
• 如何确定一个元素的包含块(containing block)
• stacking context,布局规则
• 如何水平居中一个元素
• 如何竖直居中一个元素
• javascript概念部分
• DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系
• offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
• XMLHttpRequest通用属性和方法
• focus/blur与focusin/focusout的区别与联系
• mouseover/mouseout与mouseenter/mouseleave的区别与联系
• sessionStorage,localStorage,cookie区别
• javascript跨域通信
• javascript有哪几种数据类型
• 什么闭包,闭包有什么用
• javascript有哪几种方法定义函数
• 应用程序存储和离线web应用
• 客户端存储localStorage和sessionStorage
• cookie及其操作
• javascript有哪些方法定义对象
• ===运算符判断相等的流程是怎样的
• ==运算符判断相等的流程是怎样的
• 对象到字符串的转换步骤
• 对象到数字的转换步骤
• <,>,<=,>=的比较规则
• +运算符工作流程
• 函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组
• DOM事件模型是如何的,编写一个EventUtil工具类实现事件管理兼容
• 评价一下三种方法实现继承的优缺点,并改进
• javascript编程部分
• 请用原生js实现一个函数,给页面制定的任意一个元素添加一个透明遮罩(透明度可变,默认0.2),使这个区域点击无效,要求兼容IE8+及各主流浏览器,遮罩层效果如下图所示:
• 请用代码写出(今天是星期x)其中x表示当天是星期几,如果当天是星期一,输出应该是”今天是星期一”
• 下面这段代码想要循环延时输出结果0 1 2 3 4,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果
• 现有一个Page类,其原型对象上有许多以post开头的方法(如postMsg);另有一拦截函数chekc,只返回ture或false.请设计一个函数,该函数应批量改造原Page的postXXX方法,在保留其原有功能的同时,为每个postXXX方法增加拦截验证功能,当chekc返回true时继续执行原postXXX方法,返回false时不再执行原postXXX方法
• 完成下面的tool-tip
• 编写javascript深度克隆函数deepClone
• 补充代码,鼠标单击Button1后将Button1移动到Button2的后面
• 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示”××年还剩××天××时××分××秒”
• 完成一个函数,接受数组作为参数,数组元素为整数或者数组,数组元素包含整数或数组,函数返回扁平化后的数组
• 如何判断一个对象是否为数组
• 请评价以下事件监听器代码并给出改进意见
• 如何判断一个对象是否为函数
• 编写一个函数接受url中query string为参数,返回解析后的Object,query string使用application/x-www-form-urlencoded编码
• 解析一个完整的url,返回Object包含域与window.location相同
• 完成函数getViewportSize返回指定窗口的视口尺寸
• 完成函数getScrollOffset返回窗口滚动条偏移量
• 现有一个字符串richText,是一段富文本,需要显示在页面上.有个要求,需要给其中只包含一个img元素的p标签增加一个叫pic的class.请编写代码实现.可以使用jQuery或KISSY.
• 请实现一个Event类,继承自此类的对象都会拥有两个方法on,off,once和trigger
• 编写一个函数将列表子元素顺序反转
• 以下函数的作用是?空白区域应该填写什么
• 编写一个函数实现form的序列化(即将一个表单中的键值序列化为可提交的字符串)
• 使用原生javascript给下面列表中的li节点绑定点击事件,点击时创建一个Object对象,兼容IE和标准浏览器
• 有一个大数组,var a = [‘1′, ‘2’, ‘3’, …];a的长度是100,内容填充随机整数的字符串.请先构造此数组a,然后设计一个算法将其内容去重

• 本文固定链接: http://www.phpxs.com/post/4464/
• 文章来自：https://github.com/qiu-deqing/FE-interview