纸上得来终觉浅，绝知此事要躬行

前言弹窗，对于大家来说是司空见惯了。对于弹窗，我会分为两类：一种是模态框，另一种是业务定制弹窗。不管哪类，在开发中都应该有一套规范去管理这些弹窗，以便容易扩展和维护。模态框一般可以通过引用组件库或者自己封装来实现重复调用（用到即调）；而定制弹窗会根据产品的需求和节日不同定期进行修改更换，并且弹窗之前存在互斥关系，同时出现的话则根据优先级进行展示等。背景在业务大的场景下，...

“知其然而知其所以然，我们都知道instanceof用来干嘛，那也应该要知道其实现原理”01—instanceof用途相信大多数人都用过instanceof操作符，不扯淡，下面先简单说下基本使用方式和场景。场景当大家用到instanceof的时候，大多数是你的typeof 已经不能满足要求了。typeof 在处理基本数据类型的时候还是...

先来做个复习，ES5中有有几种数据类型呢？5种基本数据类型UndefinedNullBooleanNumberString1种复杂数据类型Object除了基本数据类型，万物皆对象，记住这个很重要，这体现了js设计的哲学思想，和现实生活事物存在的关系一模一样。接触js也一年有余了，刚开始看各种概念感觉在记忆，先能上手干活的感觉也让自己先用了js起来，回

抽空学习了下javascript和jquery的事件设计，收获颇大，总结此贴，和大家分享。 (一)事件绑定的几种方式javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中方法5是最推荐的做法。方式1：HTML的D

基本概念事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他

之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别...var x = 1;y = 4;console.log(x);//1console.log(y);//4console.log(window.x);//1console.log(window.y);//4简单测试下可以知道定义的x

undefined与null的区别作者： 阮一峰日期： 2014年3月28日大多数计算机语言，有且仅有一个表示"无"的值，比如，C语言的NULL，Java语言的null，Python语言的None，Ruby语言的nil。有点奇怪的是，JavaScript语言居然有两个表示"无"的值：undefined和null。这是为什么？

前端入坑依赖前前后后写了好几个项目，在用JavaScript写交互逻辑的时候，或多或少写了一些垃圾代码，如全局变量污染、代码复用性差、简洁性不高等直接给代码后期维护的造成一些困惑。下面是一些JS编码方面有待提高的地方，可直接在开发中加以应用，致力于写出更优雅的代码。说到代码规范，我们或许会想到ESLint规则，下面的规范有涉及到ESLint规则的进行了相关的说明，也许在你使用ESLint的时候出现...

1.立即执行函数立即执行函数，通常也可作闭包，能够构造一个函数级别的变量作用域。一般写法如下：(function () { // code})();但是这中写法容易造成一些问题，如上面的代码如果没有分号结尾的话：var a = 1(function () { // Uncaught TypeError: 1 is not a function})()那么应该这样写：void functi...

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入：、、、等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域

注意：虚拟DOM只是实现MVVM的一种方案，或者说是视图更新的一种策略。没有虚拟DOM比MVVM更好一说。我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自己手动将数据整体传入模板函数,得到一个字符串,使用innerHTML刷新某个容器!注意,这里其实可以优化,但由于是手动,是体力活,都是使用很粗放型的innerhTML了事(使用jQuery的htm

（摘抄自一篇文章，觉得这里写得非常不错，所以单独放出来，希望能对大家有帮助。）React为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起。如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然

页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidt

Math对象一般用于执行数学任务,下面列举一些常用的函数:Math.abs(x)取绝对值Math.floor(x)返回等于或者小于该数(x)的最大整数,即向下取整Math.ceil(x)返回等于或者大于该数(x)的最小整数,即向上取整Math.max(x1,x2,x3)返回参数中的最大值Math.min(x1,x2,x3)返回参数中的最小值Math.random();返回0

1.多个元素绑定同一事件场景呈现：在登录功能中可以会在每个输入框中监听回车事件或者是其他相同事件，这时候就可以通过下面方式进行绑定。$(".login_wrap input[name=username],.login_wrap input[name=userpassword],.login_wrap input[name=code]").keydown(function(e){

1.bootstrap中存在问题bootstrap导航添加自定义高亮切换问题:1.利用js添加样式上去点击之后会出现闪动后消失问题(不能解决,由于导航栏是通过工具拼接到每个页面中,不能在直接绑定高亮class样式)2.通过hash值是匹配否含有对应页面的导航,并且通过addClass().siblings().removeClass()这种方式不能解决3.通过阻止事件冒泡的方式重复

实现跨域的方法有多种,下面介绍常用的两种方法:JSONP我们发现，Web页面上调用js文件时不受是否跨域的影响，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如、、。那就是说如果要跨域访问数据，就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据，而且JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过

jsonp安全性防范，分为以下几点：1、防止callback参数意外截断js代码，特殊字符单引号双引号，换行符均存在风险2、防止callback参数恶意添加标签（如script），造成XSS漏洞3、防止跨域请求滥用，阻止非法站点恶意调用针对第三点，我们可以通过来源refer白名单匹配，以及cookieToken机制来限制而前两点，传统的做法分为以下几种：1、纯手工过滤特殊字

在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,iframe等1.jsonp的原理jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服务器端不在

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$

1.返回顶部按钮你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。$('a.top').click(function(){ $(document.body).animate({scrollTop:0},800);returnfalse});改变 scrollTop 的值可以调整返回距离顶部的距离，而 animate

相信大家在开发中都会遇到元素的居中问题,而且有些是要跟随浏览器窗口大小的变化但元素永远保持居中位置,下面是我总结的几种常用方法:1.相对于浏览器窗口居中css3方法: #box{ width: 200px; height: 200px; background: pink; /*css3居中*/ position: absolute;/*fixed也行*/ lef