浏览器
邵天宇Soy
这个作者很懒,什么都没留下…
展开
-
javascript断点调试
一、方法11.断点文件位置打开chrome,找到Sources,在一堆的文件夹里面找到你要调试的js文件,打开它:下面是html前端展示: 2.打断点 当你运行代码的时候,例如:操作搜索按钮点击事件,出现未知问题。首先,给Sources里面的js文件打断点。点击你要调试的代码的行数,发现行数会被标记为蓝色(chrome),这说明已经成功打断点了,恭喜你成功了第一步。3.断点调试对断点进行调试,首原创 2017-09-22 18:02:10 · 25704 阅读 · 7 评论 -
JS中的FormData基本使用
FormData为序列化表单以及创建与表单格式相同的数据提供了方法。1,、常用的append键值对:其中,append方法接受一个键值对。var data = new FormData();data.append("key","value")然后可以把data作为传给服务器的数据。2、序列化表单数据(非GET提交)GET提原创 2018-08-07 21:01:11 · 7577 阅读 · 0 评论 -
Try.Catch.Finally简单总结
示例一、 try执行正确的时候结果输出:try执行错误的时候,(把toLocaleString的e去除)结果输出:try内放一条可能产生错误的语句。当try语句开始执行并抛出错误时,catch才执行内部的语句和对应的try内的错误信息message。何时执行finally语句,只有当try语句和catch语句执行之后,才执行finally语句,不论try抛出异常或者catch捕获都会执行final原创 2017-08-31 17:18:23 · 1430 阅读 · 0 评论 -
JSON.stringify()、JSON.parse()、toJSON()中过滤器的用法(一)
JSON.stringify()语法:JSON.stringify(value[, replacer [, space]])除了要序列化的javascript对象外,还可以接收另外的2个可选参数。其中,replacer是个过滤器,可以是一个数组或者对象; space控制结果中的缩进和空白符,可以是一个数值或者字符串。我们先定义一个的JSON格式数据,下面会用到:var obj...原创 2018-08-06 21:26:25 · 5598 阅读 · 0 评论 -
原生JS实现表单序列化serialize()
<html> <head> <title></title> </head> <body> &am原创 2018-07-27 21:24:46 · 15753 阅读 · 2 评论 -
一句话区分currentTarget和target
currentTarget:事件处理程序注册的元素, target:事件的实际目标元素下面是2个不同的场景例子:场景1:事件处理程序注册的元素 === 事件的实际目标元素<div id="div"> <button id='ele'>按钮</button></div>var ele = document.getElemen...原创 2018-07-12 21:48:32 · 3719 阅读 · 1 评论 -
Javascript鼠标滚轮事件兼容写法
1.mousewheel事件(兼容opera,chrome,safari,IE)mousewheel事件对应的event对象包含一个wheelDelta属性。用户滚动鼠标滚轮时,wheelDelta的值是正负120的倍数。 值得注意的是,在opera9.5之前的版本,wheelDelta的正负号是颠倒的,这里不做考虑一般情况下,监听wheelDelta的正负值,就可以确定鼠标滚轮...原创 2018-07-17 21:08:51 · 2042 阅读 · 2 评论 -
DOM结构深度优先遍历(二):TreeWalker
这里是接着上一篇写的DOM结构深度优先遍历(一):NodeIteratorTreeWalker是NodeIterator的一个更高级的版本。TreeWalker的创建document.createTreeWalker(root, whatToShow, filter, EntityReferenceExpansion)其中接收的参数与 document.createNodeIter...原创 2018-07-05 00:05:31 · 2127 阅读 · 0 评论 -
DOM结构深度优先遍历(一):NodeIterator
NodeIterator和TreeWalker能够基于给定的起点对DOM结构进行深度优先(depth-first)的遍历操作。IE不支持DOM遍历。可以使用下面代码检测浏览器DOM2级遍历能力的支持:var supportTraversala = document.implementation.hasFeature("Traversal","2.0");var supportNode...原创 2018-07-04 23:20:54 · 1711 阅读 · 0 评论 -
Web Sockets要点小结
下面是最基本的用法示例:var socket = new WebSocket("ws://www.xxx.com/1.php");//WebSocket对象不支持DOM2级事件侦听,所以只能使用DOM0级定义事件处理//在成功建立连接时触发socket.onopen = function(){ console.log('open')}//在发生错误时触发socket....原创 2018-08-08 21:07:26 · 235 阅读 · 0 评论 -
JS函数的按值传递
写在前面:ECMAScript访问变量有按值和按引用2中方式,那函数的传参呢?是按值传递还是按引用传递?之前有专门介绍:javascript中的引用类型 和 普通类型 在向参数传递 基本类型 的值时,被传递的值会被赋给一个局部变量(即命名参数/arguments对象中的一个元素)://demo1:function add(n) { return n += 100;...原创 2018-03-30 20:10:30 · 752 阅读 · 0 评论 -
js判断2个值是否相等的规则
假设需要判断的是 x==y?1. 如果 x 不是正常值(比如抛出一个错误),中断执行。2. 如果 y 不是正常值,中断执行。3. 如果 Type(x) 与 Type(y) 相同,执行严格相等运算 x === y 。4. 如果 x 是 null , y 是 undefined ,返回 true 。5. 如果 x 是 undefined , y 是 null ,返回 true 。6. 如果...原创 2018-11-27 14:10:22 · 3015 阅读 · 0 评论 -
require和import区别
区别1:模块加载的时间require:运行时加载import:编译时加载(效率更高)区别2:模块的本质require:模块就是对象,输入时必须查找对象属性import:ES6 模块不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入(这也导致了没法引用 ES6 模块本身,因为它不是对象)// CommonJS模块let { exists, read...原创 2018-11-16 19:28:13 · 31513 阅读 · 2 评论 -
ES6中Class的一些个人记录
1.Class的内部所有定义的方法,都是不可枚举的。const funName = 'fun';//类Demo class Demo{ constructor(arg) { } say(){ } speak(){ } [funName](){ }}console.log( Object.keys(Demo.prototype) ) //[...原创 2018-10-25 22:17:24 · 247 阅读 · 1 评论 -
Promise的事件循环
1.Promise 新建后立即执行let promise = new Promise(function(resolve, reject) { console.log('Promise'); resolve();});promise.then(function() { console.log('resolved');});console.log('我是同步任务');打印结果依...原创 2018-09-26 19:52:43 · 1921 阅读 · 0 评论 -
Proxy 实现观察者模式
以下参考阮老师的《ECMAScript 6 入门》需求:给定一个对象,当对象的属性发生赋值时,打印最新的值。思路: observable 函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。//初始化观察者队列const uniqueObserveList = new Set();//将监听回调加入队列const observe = fn =&gt;...原创 2018-09-20 21:29:31 · 820 阅读 · 0 评论 -
一元操作符“++”,“- -” 之强制转换数值
递增和递减分别有前置型和后置型,这里不作区分。下面的代码全部是后置型递增:var str = "z";console.log(str++) //NaNconsole.log(typeof str) //numbervar str = "123abc";console.log(str++) //NaNconsole.log(typeof str) ...原创 2018-09-03 23:08:20 · 416 阅读 · 0 评论 -
undefined == null的正确解释
console.log( undefined == null ) //true有文章对此进行了解释,大致是下面的意思:undefined的布尔值是false,null的布尔值也是false,所以它们在比较时都转化为了false,所以 undefined == null 。好吧,上面的解释是错误的。可以从Javascript规范中找到答案:规范中提到, 要比较相等性之前,不能将...原创 2018-08-31 09:38:37 · 35263 阅读 · 3 评论 -
ES6参数默认值的单独作用域
1.单独的作用域var val = 1const fun = (val, y=()=&gt;val=2 ) =&gt; { var val = 3 y() console.log(val) //预期是2,结果是3}fun();console.log(val) //1上面代码中,首先看内部val的打印结果:3。原因是一旦设置了参...原创 2018-08-30 21:59:20 · 427 阅读 · 0 评论 -
isSameNode( )和isEqualNode( )比较节点的区别
DOM3级引入了两个辅助比较节点的方法:isSameNode( )和isEqualNode( )。分别判断传入的节点与引用的节点是否相同和相等所谓相同,指的是两个节点引用的是同一个对象;所谓相等,指的是两个节点是否是同一类型,具有相等的属性(nodeName,nodeValue。。。等等),还有相等的attributes,childNodes(相同的位置包含相同的值)语法:no...原创 2018-06-28 21:30:20 · 1618 阅读 · 0 评论 -
利用innerText和textContent去除HTML标签
支持innerText的浏览器包括IE4+,Safari3+,Opera8+,ChromeFirefox不支持innerText,不过支持作用类似的textContent方法简单提一下,innerText、textContent的基本运用:1.获取文本内容<div id="o"> <ul> <li>1</li>...原创 2018-06-26 22:47:50 · 1283 阅读 · 0 评论 -
setTimeout()中容易忽视的要点
setTimeout语法:var timeoutId = scope.setTimeout(function[, delay, param1, param2....]); var timeoutId = scope.setTimeout(function[, delay]); var timeoutId = scope.setTimeout(code[, delay]);setTi...原创 2018-05-28 22:39:57 · 9020 阅读 · 2 评论 -
浅析encodeURI,encodeURIComponent,decodeURI,decodeURIComponent
Global(所有在全局作用域中定义的属性和函数,都是Global的属性)对象的encodeURI(),encodeURIComponent()方法可以对URI(通用资源标识符)进行编码,以便发送给浏览器。有效的URI不能包含某些字符:例如空格。这2个URI编码方法就可以对URI进行编码,用特殊的UTF8编码替换所有无效的字符,从而让浏览器能够接受。1.encodeURI(),encode...原创 2018-05-05 11:16:50 · 1865 阅读 · 0 评论 -
javascript 正则方法 exec()
exec()是RegExp对象的主要方法。exec()接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组,或者在没有匹配项的情况下返回null。let reg = /apple (or mac (or ipad)?)?/g;let str = 'apple or mac or ipad';let match = reg.exec(str);console.log...原创 2018-04-16 21:25:36 · 5740 阅读 · 1 评论 -
js实现scroll to top
$.fn.scrollTo =function(options){ var defaults = { toT : 0, //滚动目标位置 durTime : 500, //过渡动画时间 delay : 30, //定时器时间 callback:null //回调函数...原创 2018-03-14 12:03:09 · 2369 阅读 · 0 评论 -
ES6让代码简洁化
一、ES6 从 2015 年之后已经成为新的语言标准function secret (message) { return function () { return message; }};可以简写为:const secret = msg =&gt; () =&gt; msg;小结:很简单的例子,只是利用了ES6中箭头函数的语法二、poi...原创 2018-03-14 12:00:48 · 506 阅读 · 0 评论 -
HTMl中的disabled和readonly
disabled 和 readonly 的用法:<input type="text" name="name" value="xxx" disabled="true"/><input type="text" name="name" value="xxx" readonly="true"/>原创 2018-03-14 11:57:12 · 387 阅读 · 0 评论 -
从setTimeout到浏览器线程机制
看高性能javascipt 这本书时,看到这么一句话:Putting scripts at the top of the page in this way typically leads to a noticeable delay, often in the form of a blank white page, before the user can even begin reading or o转载 2017-09-08 20:08:10 · 627 阅读 · 1 评论 -
firefox中a链接跳转失效问题
最近同事遇到了一个问题,商城网站翻页的跳转时,在firefox下点击翻页 标签跳转失效。测试在chrome,360 , QQ浏览器跳转正常。 解决途径:1、在firefox中,ctrl+shift+a,打开浏览器组件界面第一个组件,标签页优化,禁用。重启浏览器。再次浏览网站分页,ok。2、升级你的firefox,升级最新版本后发现跳转正常.后续解决方案,持续发现中。原创 2017-09-08 15:39:25 · 4865 阅读 · 0 评论 -
使用attributes遍历元素属性
假设HTML如下,一个div<div id="a" name='123' align="bottom" bgColor='green'></div>function getAttrList(element){ var arr = [], attrName, attrValue, i, len,...原创 2018-06-11 22:39:50 · 2103 阅读 · 0 评论 -
window中location对象改变浏览器URL和位置
window.location可以简写为location1.打开一个新的url,并在浏览器的历史中生成一条记录:location.assign('http://www.baidu.com/')window.location = 'http://www.baidu.com/'location.href = 'http://www.baidu.com/'2.设置location对象的属...原创 2018-05-29 22:52:54 · 7657 阅读 · 0 评论 -
insertAdjacentHTML( ),insertAdjacentElement( ) , insertAdjacentText( ) 方法
insertAdjacentHTML()是一个插入标记的方法,这个方法最早在IE中出现,现在绝大多数浏览器都支持这个方法。insertAdjacentHTML()接受2个参数:要插入的位置和要插入的HTML文本,第一个参数必须是下面4个值之一,第二个参数是一个HTML字符串:beforebegin,在当前元素之前插入一个紧邻的同辈元素;afterbegin,在当前元素之下插入一个新的子...原创 2018-06-19 23:12:58 · 1159 阅读 · 0 评论 -
js判断true和false
截图一张,请欣赏~原创 2018-05-24 22:58:42 · 7462 阅读 · 1 评论 -
使用dispatchEvent派发自定义事件
这里暂不介绍对低版本IE的兼容。。。标准浏览器中使用dispatchEvent派发自定义事件:element.dispatchEvent(),除此之外,还有创建和初始化事件:一般的流程是:创建 &gt;&gt; 初始化 &gt;&gt; 派发。对应的事件流程:document.createEvent() &gt;&gt; event.initEvent() &gt;&g原创 2018-06-25 22:06:14 · 8778 阅读 · 1 评论 -
DOM元素遍历的几种方式(javascript)
对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致。DOM中为元素新增了下面几个属性:childElementCount:返回子元素(不包括文本节点和注释)的数量;firstElementChild:firstChild的元素版;lastElementChild:lastC...原创 2018-06-14 21:11:44 · 11264 阅读 · 4 评论 -
Element类型的tagName和nodeName
要访问元素的标签名,可以使用tagName或nodeName属性;这两个属性返回的值相同假设HTML如下:&amp;lt;div id=&quot;a&quot;&amp;gt;&amp;lt;/div&amp;gt;获取标签名:var ele = document.getElementById('a');console.log(a.tagName) //DIVconsole.原创 2018-06-07 22:14:59 · 2348 阅读 · 0 评论 -
使用getElementsByTagName()和namedItem()获取特定元素
getElementsByTagName接受一个参数,即要取得元素的标签名,返回值是包含零个或多个元素的NodeLIst。 注意:getElementsByTagName接受的标签名不区分大小写,除XML,XHTML之外1.基本使用假设HTML如下:&amp;lt;img src=&quot;a.png&quot; name=&quot;img&quot;/&amp;gt;&原创 2018-06-06 22:43:47 · 5577 阅读 · 0 评论 -
使用DocumentFragment动态创建一个List
DocumentFragment是一种轻量级的文档,在文档中没有任何标记,可以包含和控制文本,但不会占用额外的资源。一般操作一个ul,并且给ul动态添加li节点,会使用下面的方式:<ul id="list"></ul>var ul = document.getElementById('list');var li = null;for(var i = 0; ...原创 2018-06-12 22:50:47 · 373 阅读 · 0 评论 -
appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结
1.appendChild()appendChild()用于向childNodes列表的末尾添加一个节点。更新节点后,appendChild()返回新增的节点。下面的parentNode代表父节点,newNode代表新节点,returnedNode代表appendChild返回的节点var returnedNode = parentNode.appendChild(newNode);...原创 2018-06-05 22:28:12 · 1975 阅读 · 0 评论 -
next.js中的window is not defined
1.问题描述使用了next+express做SSR,引入了富文本编辑器braft-editor(我也不知道自己为什么要用SSR渲染后台界面),代码如下import React from 'react'import BraftEditor from 'braft-editor'import 'braft-editor/dist/index.css'export default class...原创 2018-12-11 23:40:25 · 25213 阅读 · 4 评论