- 博客(95)
- 资源 (28)
- 收藏
- 关注
RSS订阅原创 javascript有哪些方法定义对象
对象字面量： var obj = {};构造函数： var obj = new Object();Object.create(): var obj = Object.create(Object.prototype);
2020-05-31 11:25:52
179
原创 offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸...
2020-05-31 11:24:58
133
原创 为什么要有同源限制？
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。...
2020-05-31 11:24:23
1002
原创 用过哪些设计模式？
1. 工厂模式：工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，因为根本无法主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字2.构造函数模式使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于直接将属性和方法赋值给 this对象;...
2020-05-31 11:23:52
378
原创 常见web安全及防护原理
1. sql注入原理就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令2. 总的来说有以下几点永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息3. XSS
2020-05-31 11:22:53
827
原创 说说你对AMD和Commonjs的理解
CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的...
2020-05-31 10:55:02
365
原创 谈谈你对webpack的看法
WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源...
2020-05-29 14:36:14
260
原创 XML和JSON的区别？
数据体积方面JSON相对于XML来讲，数据的体积小，传递的速度更快些。数据交互方面JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互数据描述方面JSON对数据的描述性比XML较差传输速度方面JSON的速度要远远快于XML...
2020-05-29 14:35:49
276
原创 那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏闭包使用不当
2020-05-29 14:34:34
171
原创 模块化开发怎么做？
立即执行函数,不暴露私有成员var module1 = (function(){ var _count = 0; var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 };})();...
2020-05-28 18:31:04
322
原创 如何解决跨域问题?
首先了解下浏览器的同源策略 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源那么怎样解决跨域问题的呢？通过jsonp跨域var script = document.createElement('script');script.type = 'text/ja
2020-05-28 18:30:39
191
原创 ajax 有那些优缺点?
优点：通过异步模式，提升了用户体验.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。Ajax可以实现动态不刷新（局部刷新）缺点：安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。不容易调试。...
2020-05-27 11:22:00
216
原创 Ajax原理
Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制/** 1. 创建连接 **/var xhr = null;xhr = new XMLHttpReq.
2020-05-27 11:21:01
719
原创 new操作符具体干了什么呢?
创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型属性和方法被加入到 this 引用的对象中新创建的对象由 this 所引用，并且最后隐式的返回 this
2020-05-27 11:20:23
107
原创 事件模型
W3C中定义事件的发生经历三个阶段：捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling）冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件阻止冒泡：在W3c中，使用stopPropagation()方法；在IE下设置cancelBubble = true阻止捕获：阻止事件的默认行为，例如click - <a>后的跳转
2020-05-26 10:51:14
188
原创 谈谈This对象的理解
this总是指向函数的直接调用者（而非间接调用者）如果有new关键字，this指向new出来的那个对象在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window...
2020-05-26 10:50:14
226
原创 Javascript如何实现继承？
构造继承原型继承实例继承拷贝继承原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式function Parent(){ this.name = 'wang';}function Child(){ this.age = 28;} Child.prototype = new Parent();//继承了Parent，通过原型var demo = new Child();alert(demo.age);aler.
2020-05-26 10:49:38
79
原创 请解释什么是事件代理
事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒可以实现当新增子对象时无需再次对其绑定...
2020-05-25 09:30:13
2092
原创 JavaScript原型，原型链 ? 有什么特点？
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念关系：instance.constructor.prototype = instance.__proto__特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副..
2020-05-25 09:29:38
212
原创 说说你对作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期...
2020-05-25 09:28:24
299
原创 使用闭包的注意点
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露解决方法是，在退出函数之前，将不使用的局部变量全部删除...
2020-05-24 09:06:58
224
原创 说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念闭包 的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中闭包的另一个用处，是封装对象的私有属性和私有方法好处：能够实现封装和缓存等；坏处：就是消耗内存、不正当使用会造成内存溢出的问题...
2020-05-24 09:06:22
192
原创 闭包
闭包就是能够读取其他函数内部变量的函数闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域闭包的特性：函数内再嵌套函数内部函数可以引用外层的参数和变量参数和变量不会被垃圾回收机制回收...
2020-05-24 09:05:25
86
原创 如何实现小于12px的字体效果
transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;transform: scale(0.7);css的属性，可以缩放大小
2020-05-24 09:04:11
252
原创 两种以上方式实现已知或者未知宽度的垂直水平居中
/** 1 **/.wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; }}/** 2 **/.wraper { position: relative; .box { position: absolute;
2020-05-24 09:03:28
311
原创 左边宽度固定，右边自适应
左侧固定宽度，右侧自适应宽度的两列布局实现html结构<div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div></div>在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度方法1：左侧div设置成浮动：flo...
2020-05-24 09:03:03
1000
原创 说一说css3的animation
css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，这些相关的动画子属性有：animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay.
2020-05-24 08:58:40
250
原创 重绘和回流（重排）是什么，如何避免？
DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘。引起重排的原因有添加或者删除可见的DOM元素，元素位置、尺寸、内容改变，浏览器页面初始化，浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，减少重绘和重排的方法：不在布局信息改变时做DOM查询使用cssText或者className一次性改变属性使用fragmen..
2020-05-22 10:49:30
688
原创 如何使用CSS实现硬件加速？
硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)...
2020-05-22 10:48:17
245
原创 垂直居中的方法
将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle使用flex布局，设置为align-item：center绝对定位中设置bottom:0,top:0,并设置margin:auto绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值文本垂直居中设置line-height为height值...
2020-05-22 10:47:33
121
原创 水平居中的方法
元素为行内元素，设置父元素text-align:center如果元素宽度固定，可以设置左右margin为auto;如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;使用flex-box布局，指定justify-content属性为centerdisplay设置为tabel-ceil...
2020-05-21 14:55:07
100
原创 知道css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。/**一种常见利用伪类清除浮动的代码**/.clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1;}...
2020-05-21 14:54:19
117
原创 Sass、LESS是什么？大家为什么要使用他们？
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)为什么要使用它们？结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对- 浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承完全兼容 CSS .
2020-05-21 14:53:12
440
原创 px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。...
2020-05-20 23:24:50
505
原创 如何垂直居中一个浮动元素？
/**方法一：已知元素的高宽**/#div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px;}/**方法二:**/#div1{ width: 200px;
2020-05-20 23:24:15
238
原创 rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）...
2020-05-19 23:10:57
133
原创 什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collapse在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。...
2020-05-19 23:10:26
271
原创 请用CSS写一个简单的幻灯片效果页面
知道是要用CSS3。使用animation动画实现一个简单的幻灯片效果/**css**/.ani{ width:480px; height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); background-size: cover; background-position: center; -webkit-animation-name: "loops"; -we
2020-05-19 23:08:46
250
简单的数据可视化页面25.zip
2020-07-16
简单的数据可视化页面20.zip
2020-07-16
简单的数据可视化页面16.zip
2020-07-16
简单的数据可视化页面7.zip
2020-07-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人