NewWent的博客

早些时候从事了很长时间的网页动态绘图工作(作图webApp，使用的技术是SVG)，今天在此做个总结。 主要使用的事件：onClick, onMouseMove, onKeyDown（涉及长按绘图的操作还需要onMouseDown，onMouseUp；涉及右键的加上onContextMenu） 流程:1. initialize: 绑定事件到画板view,准备可能需要的数据2....

HTML/CSS1. 默认margin、padding不一致 * {margin: 0;padding: 0;}2. css3的animation IE9不支持3. display: flex IE9不支持；IE10部分支持，使用display: ms-flexbox flexbugs@github IE10下，justify-content对...

DOM对象只读属性clientWidth、clientHeight：指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高（即不包含border及滚动条宽高） html的clientWidth/clientHeight并不等于可视部分的宽度和高度，而是移除...

执行环境：定义了变量或函数有权访问的其他数据，每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中（如同全局环境下的变量和函数保存在window对象内）执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出，例如关闭网页或浏览器时才会被销毁）只有函数有自己的执行环境，当执行流进入一个函数时，函...

除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode)，ES6的模块会自动使用严格模式严格模式主要有以下限制： 1.变量必须声明后再使用 2.函数的参数不能有同名属性，否则报错 3.不能使用with语句 4.不能对只读属性赋值，否则报错 5.不能使用前缀 0 表示八进制数，否则报错 6.不能删除不可删除的属性，否则报错 7.不能删除变...

问题由来：版本更新后，项目打包上线，打包后的js、css等静态资源的名称已变化（打包工具），不必担心它们的缓存，而html文件未改变（如index.html），浏览器仍会使用缓存的html文件，导致各种错误 1. 后端设置get请求的response请求头response.setDateHeader("Expries", -1);response.setHeader("Cache-...

浅拷贝1. Object.create(Object.getPrototypeOf(prev), Object.getOwnPropertyDescriptors(prev)) （最完美）2. Object.assign({}, prev) （无法拷贝enumerable=false的属性；无法拷贝原型链）3. 使用for in遍历prev，对新对象进行赋值（无法拷贝enumerabl...

1. 设置iframe宽高自适应const iframe = document.getElementById('file');iframe.onload = () => { iframe.width= iframe.contentWindow.document.documentElement.scrollWidth; iframe.height = iframe.co...

浏览器加载了html和css是怎样呈现在浏览器上面的呢？这个底层的原理需要我们了解这样我们才能够进一步做出一些性能优化浏览器渲染大体上分为以下五步处理html生成 DOM（Document Object Model） Tree 处理css生成 CSSOM（CSS Object Model） Tree DOM树与CSS-DOM树合并为Render树 对Render树进行布局计算 ...

当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。重绘(repaint):当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少回流(reflow):当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因...

直接上代码// 经典案例for(var i=0;i<3;i++) { setTimeout(function () {console.log(i)}, 0)}// 拆解后var i = 0;{ var t = i; setTimeout(function () {console.log(t)}, 0)}i++;{ var t = i; setTim...

1. 创建一个新对象2. 将这个新对象的隐式原型指向Class的显式原型3. 将这个新对象作为this指针的指向，用call/apply调用Constructor4. 如果上述Constructor调用返回对象或function就将其指向 赋值号(=) 左侧变量，否则将这个新对象指向左侧变量// Democonst man = new Person();等同于:cons...

实现步骤：每次Ajax请求之后都使用history.pushState(replaceState)将携带参数的记录压入历史记录栈（Ajax请求不刷新页面，也不会自动加入到history） 通过监听window的onPopstate事件，在下次用户进行前进、后退操作时根据state中我们放置的参数做相应的处理以达到跳转的目的// DemoService.getData().then(...

1. target: 只位于其事件流的目标阶段；指向事件发生时的元素2. currentTarget: 可位于捕获、冒泡和目标阶段；始终指向绑定事件的元素（如div>ul>li结构，事件委托在div上，target可能为三者之一， 而currentTarget始终为div）3. 事件委托：将事件绑定在父级元素上，利用事件的冒泡，以达到只绑定一个事件而能监听所有子...

事件绑定与解绑：DOM0级事件(这类事件可以使用 return false来阻止事件往下执行，包含默认事件)绑定：html内<inputonclick=''> js中el.onclick=''解绑： el.onclick = nullDOM2级事件（三个参数：事件名称，要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true)，默认为冒泡...

出现跨域问题原因： 同源策略什么是同源策略？1. 协议相同 （http &amp; https）2. 域名相同 （http://www.a.com &amp; http://www.b.com）3. 端口相同 （http://www.a.com &amp; http://www.a.com:8080）同源策略的限制范围：1. cooki...

call/apply的作用：在特定的作用域中调用函数，设置函数体内this对象的值，以扩充函数的作用域（调用函数的同时设置内部this指针的指向）一般用法如下：Func.call(context, arg1, arg2, arg3...)Func.apply(context, [arg1,arg2,arg3])Func.apply(context, arguments)cont...

1. 函数声明提升func()function func () {}上例不会报错，正是因为 ‘函数声明提升’，即将函数声明提升（整体）到作用域顶部（注意是函数声明，不包括函数表达式），实际提升后结果同下：// 函数声明提升function func () {}func()2. 变量声明提升（只有var声明的变量才有变量提升，let、const无；变量赋值无提升）...

毒瘤不使用全局变量 使用块级作用域，不var return与返回值要位于同一行，否则当自动插入分号后会返回undefined 当对象的属性名与js保留字相同时，无法使用点语法，使用括号表示法 js字符是16位的，Unicode将一对字符视为一个单一的字符，而js将其认为是两个不同的字符 注意typeof对于null和正则返回'object' parseInt在遇到非数字时会停止，注...

下面的表将所有运算符按照优先级的不同从高到低排列（来源：MDN）优先级 运算类型 关联性 运算符 20 圆括号 n/a ( … ) 19 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new (带参数列表) n/a new … ( … ) 函数调用 从左到右 ...

css/sass...中可以使用 '~@' 访问 'assets'中的文件（都可使用 alias 'src', js中使用 '@'，css中使用 '~@'，效果与 require('@/assets/')类似） 欢迎关注、点赞

1. Array.prototype.fill当参数为对象（数组）时，该数组中每一项都将指向同一个对象，而并非每次都创建一个新对象，如下new Array(5).fill({x: 1})       如果需要初始化一个每项都为对象的数组，可使用如下方式：Array.apply(null, {length: 5}).map(() =&gt; {return {x: 5}})2....

名词： Cookie 存储在client Session 会话，存储在server，server需要对session进行定期清理 Token 服务端验证成功后根据一定规则签发的一个‘令牌’，server端每次收到请求都用相同的规则再次生成'令牌'与其对比，而无需存储验证流程：login=>发送http请求，账号密码验证成功=> server端通过r...

问题由来默认情况下，Safari会允许来自您访问的网站的Cookie，但会阻止可能嵌入在这些网站中的第三方内容在您的计算机上存储Cookie。解决方案由于问题是跨域导致，故可将子页面代理到父页面相同域名下父页面生成token，通过query传递到子页面，子页面请求携带token进行认证进入父页面先redirect到子页面生成cookie，再redirect回到父页面...