熊猫正尽责

写在前面本面试题是本人在工作和找工作中总结出来的面试题，不代表行业通用标准。本文只关注技术相关问题问的问题更偏向于前端深入了解、性能优化、故障定位等。面试题难度大致相当于前端4-5年经验的水平部分与我另一篇博客相同或类似，但毕竟随着成长以及技术的发展重视的东西也在改变。答案仅供参考，不一定正确和完整，有异议或建议可提出修改缓存问：怎么设置静态资源缓存时间答：设置expir...

大数指number无法存储的数字，一般用字符串来表示。以下分别讲述大数的加减乘除运算，运算之间可能有所交叉，例如正数减负数就变成两个正数相加，除法里也用到了减法，所以代码就放在了一起。function checkIsNumber(numStr) { const isNumber = /^-?\d+$/.test(numStr) if (!isNumber) { throw ne...

效果如下：代码如下： 奥运五环 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); var radius = 100; context.lineWidth = 25; function draw(x, y, startAngl

效果图如下：代码如下： 正六边形 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); // 定义边长、颜色、边数、canvas大小 var length = 100, fillColor = '#000', vertices

使用canvas创建渐变文字。直接贴代码： 渐变文字 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradien

用canvas画以下图形：代码如下： 旋转五角星 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //设置边框样式以及填充颜色 context.lineWidth = 1; context.fi

圆周率 π可以通过公式求近似值。公式如下：代码为： 求π var flag = true, result = 0; for (var i = 1; i < 10000000; i = i + 2) { if (flag) { result += 1 / i; } else { result -= 1 / i; } flag = !

参考来源：FEhelper收录了常用的正则表达式：表单项、文本匹配匹配邮件地址：/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/匹配url：/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i匹配

基本概念        一个插件其实是压缩在一起的一组文件（.crx），包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。插件本质上来说就是web页面，它们可以使用所有的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。插件可以与Web页面交互，或者通过content script或cross-origin XMLHttpReq

要求使用canvas的画布变换方法。效果如下：代码如下： 六芒星 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); var width = canvas.width, height = canvas.height;

要求使用画布变换方法。效果如下：代码如下： 旋转椭圆 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); var width = canvas.width, height = canvas.height; // 原

参考：http://web.jobbole.com/89626/题目：实现一个LazyMan，可以按照以下方式调用:LazyMan(“Hank”)输出:Hi! This is Hank!LazyMan(“Hank”).sleep(10).eat(“dinner”)输出Hi! This is Hank!//等待10秒..Wake up afte

参考：http://www.tuicool.com/articles/nYjqeu参考：http://www.jianshu.com/p/0deb70e6f395参考：http://yijiebuyi.com/blog/b12eac891cdc5f0dff127ae18dc386d4.html概述npm是nodejs的官方包管理工具，在上面可以下载各种第三方包，在项目中

xss攻击与防御概念xss，跨站脚本攻击，指在目标网页里插入一段JavaScript脚本，用户访问时执行该脚本。可用于窃取用户cookie信息，或监听用户在网页内的行为（如输入表单密码等）。xss可分为反射型和存储型。存储型指攻击代码存储于数据库（或其他存储介质）中，每次访问都会执行，会影响所有或多数用户。而反射型则是即时的，用户通过某种途径触发，一般只影响单个用户。反射型

参考自：https://jsperf.com/deep-compare/4Object.equals = function( x, y ) { if ( x === y ) return true; // if both x and y are null or undefined and exactly the same if ( ! ( x instanceof...

wepy-store适用于wepy框架的状态管理器。github地址为何要用状态管理器提供了一个状态管理机制，开发者在开发页面的时候，不需要过多的去关注数据是怎么来的，怎么变化的，而是可以相信请求结束的时候，页面就会自动刷新。进入页面再请求接口，将会使页面有一段时间的空白。而本状态管理器利用小程序页面常驻后台的特点，将数据保存在内存中。只要前一个页面请求过相应接口，进入下一个页...

说在前面：本面试题是本人在工作和找工作中总结出来的面试题，主要用于上家的新人招聘。因此： 问的问题与业务关联程度比较高，更偏向于前端基础、性能优化、故障定位等。上家要招的职级并不是很高，因此面试题难度不算高，大致相当于前端1-3年经验的水平部分与我另一篇博客相同或类似，但毕竟随着成长以及技术的发展重视的东西也在改变。答案仅供参考，部分答案待补充基础篇语义化问：HTM...

从官网文档翻译而来，比大多数网上现有资源详细很多，部分官网没有的属性通过stackoverflow，甚至是chromium源码查询而来。还有一些没注释的是查询不到或者本人无法确定的。官方文档地址：https://developer.chrome.com/extensions/manifest360汉化版：http://open.chrome.360.cn/extension_dev/man

参考：http://blog.sina.com.cn/s/blog_87b9bbc70102vg18.html         cookie一般情况下是没法跨域的，甚至POST请求一般情况下都是无法跨域的。但经过特殊处理后就可以了，这个处理需要客户端服务器的配合。        一些请求可以通过jsonp的方式来实现跨域，但如果是非幂等的请求，还是需要POST的。处理如下：服务器端设置

以下各问题来自于本人在各公司应聘时被提问的问题，特地整理出来，有错误或不同意见的欢迎评论指出。因各大公司面试还未结束，本文不透露题目具体出处，且会打乱顺序。另注：问方和答方均默认所问浏览器为主流浏览器（IE，chrome，firefox，Safari，Opera）技术问答题：HTTP常见的状态码有哪些？分别表示什么意思？200：OK，一切正常302：重定向304：未修改

参考资料Sass: Syntactically Awesome Style Sheets, is the most mature, stable, and powerful professional grade CSS extension language in the world.

less是一种 动态 样式 语言。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

传统的快排都是在数组中，随机选择数组中一个元素（有的会直接选中间），然后从左边寻找第一个比它大的，从右边寻找第一个比它小的，两者互换位置。但是JS的灵活性提供了另一种方法，这种方法更好理解。

JavaScript是一门面向对象的语言。在JavaScript中有一句很经典的话，万物皆对象。既然是面向对象的，那就有面向对象的三大特征：封装、继承、多态。这里讲的是JavaScript的继承。继承是什么？什么是基于原型的继承？怎么实现继承？原型继承的实质是什么？怎么维护原型链？本文将一一道来！

模仿QQ空间、微博等鼠标悬浮在人名上时，显示用户详细信息大体思路是将名片卡隐藏在页面中，当悬浮时将名片卡移动到鼠标边，鼠标移开时隐藏名片卡。本文的JS使用了jquery用户名跟名片卡代码如下（只是为了显示类名，具体内容按需补充）：用户名JS代码如下：var showMsgCardControl = null;// 鼠标悬浮在用户名上时，显

遇到这需求是想模仿网页版QQ，多个会话框时会叠一起，需要有拖拽功能。网上找到了一篇代码（原文地址），但其中有少数地方边界处理没做好，计算也有一点问题，修正了下。原文所说的弊端未解决。界面代码如下： Test html,body { heigh

事件基础JavaScript事件，又称DOM事件，指用户对DOM节点进行各种操作时，能触发相应的处理函数。这些操作包括获取焦点、点击、键盘输入、鼠标悬浮、窗口变化等等。一个JavaScript事件，包括事件绑定、事件触发、事件冒泡、事件捕获、事件处理。下面将详细描述。事件绑定事件有类型，大类可以分为鼠标事件、键盘事件、窗口事件、表单事件等，细分可以分为鼠标悬浮、鼠标移动、鼠标点击、

闲暇没事整理了下前端常用的优化技巧，按目的分类如下： 在文档开头显示一个加载中图案（俗称菊花） ，然后把不重要的JS文件放在文档末尾，  给script标签添加defer属性目的：防止JS文件阻塞页面加载CSS精灵（将多张小图片集合到一张大图片中）合并JS文件（将多个JS文件集合到一个JS文件中）目的：减少HTTP请求，缩短请求时间

做这个功能初始目的是为了在提交编辑前先查看效果，当然仅限于图片。核心代码来源于网上，经测验有效假设HTML如下： JS如下： document.getElementById("upload").onchange = function(){ var objUrl = getObjectURL(this.files[0]) ;

CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. CoffeeScript 尝试用简洁的方式展示 JavaScript 优秀的部分.CoffeeScript 的指导原则是: “她仅仅是 JavaScript”. 代码一一对应地编译到 JS, 不会在编译过

题目模仿黑客帝国的字符雨特效，要求字符串中的字符随机，长度随机，位置随机。效果图：样例答案CSShtml, body { margin: 0; padding: 0;}ul, li { list-style: none;}.flow { display: none; position: fixed; t

运算符使用使用 === 而不是 ==        避免隐式转换，详见JavaScript快速入门（五）——表达式运算。内置函数使用parseInt        parseInt是一个内置函数，可以将非数字（一般是字符串）转换为数字，开始转换时，从第一位开始，直到该位置不是数字为止。如果第一位就不是数字，返回NaN。        一般使用的时候，我们都是这么使用：

这里讲的history包括两个，一个是宿主对象history，一个是HTML5的history API。宿主对象historyhistory包括三个方法和一个属性：属性/方法描述length返回浏览器历史列表中的 URL 数量。back()加载 history 列表中的前一个 URL。f

本文内容主要来自《深入浅出ES6》ES6生成器不是指生成ES代码的机器。示例代码：先看一段示例：function* quips(name) { yield "你好 " + name + "!"; yield "希望你能喜欢这篇介绍 ES6 的译文"; if (name.startsWith("X")) { yield "你的名字 "

上一篇博客讲了ES6的for-of循环。实际上，ES6的对象遍历（数组、Map对象、Set对象等）都有一个内置的迭代器方法。

js里面，数组遍历有很多种方式。经典版：for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}ES5出现了内建的forEach函数：myArray.forEach(function (value) { console.log(value);

原文地址：http://www.infoq.com/cn/news/2011/09/js-promise/异步模式在web编程中变得越来越重要，对于web主流语言Javascript来说，这种模式实现起来不是很利索，为此，许多Javascript库（比如 jQuery和Dojo）添加了一种称为promise的抽象（有时也称之为deferred）。通过这些库，开发人员能够在实际编程中使用 p

jquery中有一个方法：one，用途是事件绑定只执行一次就自动解除绑定。源码看了很久头晕，决定自己搞一个。研究了很久，用原生的模拟了一次。我用的名字是once。最初的方法是这样的：function once(dom, event, callback) { var temp = callback; dom.addEventListener(event, functi

实际项目中，单独使用coffee、grunt和less的很少，我们可以把他们整合其他协同使用来提高我们的效率。grunt的定位是构建工具，我们可以利用它来调用coffee和less来实现我们的目的。参考项目https://github.com/mrcoles/static-less-coffeescript-grunt-project。gruntfile可以这样来写：module.exports =

grunt是什么？Grunt 是一个基于任务的JavaScript工程命令行构建工具。为什么要使用grunt？一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。