JavaScript
文章平均质量分 89
奋飛
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
展开
-
理解 javascript:void(0) 语句
在需要链接但不需要操作时用作占位符 URL,而用作占位符 URL 以跳转到页面顶部或在同一页面内创建内部链接。翻译 2023-01-31 14:28:00 · 2239 阅读 · 0 评论 -
javascript 位操作用途、位移枚举(多选枚举)
计算机系统中,数值一律采用二进制补码来表示和存储(寄存器)。 javascript 中的整型在内存中都是一个 64 位双精度浮点型,但是 js 进行位运算时,会将操作数转成带符号位的 32 位比特序列 01(补码)。运算结束后,再按照 64 位浮点格式存储。这样导致的结果:精度丢失(直接截断)!...原创 2022-07-22 11:05:40 · 998 阅读 · 0 评论 -
Form 表单数据编码、解码--encodeURIComponent、URLSearchParams、FormData
本文主要讲解,通过 web api 来处理各种参数问题,防止产生安全问题,以及更便利的操作。先看一个示例:const response = await fetch(url, { method: 'POST', body: `text=${text}`, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})const json = await response.json()上述代码会出现一些“安原创 2021-08-09 19:34:15 · 2704 阅读 · 0 评论 -
JavaScript是解释型语言--V8、JIT
编程语言可以通过”语言“来控制计算机,让计算机为我们做事情。(类似于中文、英文)编程语言是用来控制计算机的一系列指令(Instruction),它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守,否则就会出错,达不到我们的目的。编程语言的发展大概经历了以下几个阶段: 汇编语言 ==> 面向过程编程 ==> 面向对象编程汇编语言是编程语言的拓荒年代,它非常底层,直接和计算机硬件打交道,开发效率低,学习成本高;C语言是面向过程的编程语言,已经脱离了计算机硬件,可以设计中等规原创 2021-05-25 20:25:43 · 3467 阅读 · 27 评论 -
利用 target=_blank 进行前端钓鱼
为什么大部分国外网站内链接不用 target="_blank"新窗口打开?Google 都是当前窗口打开;Baidu/Bing 都是新窗口打开。用户将无法控制它在本页打开还是新窗口打开。新窗口打开使任务栏更加地拥挤。新窗口打开增加浏览器资源的消耗。新窗口打开是后退按钮变得不可用。用户更加期望新页面在当页载入以上,并不是我们讨论的重点!作为安全公司,我们关注重点在于安全、安全、安全!涉及内容:<a href="https://ligang.blog.csdn.net" ta.原创 2020-06-16 19:53:13 · 915 阅读 · 2 评论 -
setTimeout/setInterval delay数值过大问题
delay 参数将转换为带符号的32位整数,这有效地将延迟限制为 2147483647 ms(约 24.8 天)2147483647 === Math.pow(2, 31) - 1 === parseInt('01111111111111111111111111111111', 2)在nodejs和浏览器中执行的情况有所差异Nodejs 中setInterval(callback, de...原创 2020-03-31 00:44:46 · 1221 阅读 · 0 评论 -
JavaScript面向对象精要(二)
四、构造函数和原型对象1. 构造函数构造函数就是用new创建对象时调用的函数。使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法。function Person(){}var p1 = new Person();console.log(p1.constructor === Person); // trueconsole.log(p1 instanceof Person)原创 2017-01-08 19:02:21 · 3108 阅读 · 3 评论 -
鲜为人知的前端知识
1. 浏览器地址栏运行JavaScript代码javascript:alert(‘hello from address bar’); 需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码2. 浏览器当编辑器data:t原创 2016-02-18 19:07:06 · 1243 阅读 · 0 评论 -
JavaScript补齐指定位数
开发过程中,我们会经常遇到日期或者数值显示指定位数,例如: “2016-8-3”显示为”2016-08-03”一、通常解决方案function dataLeftCompleting(value){ return parseInt(value) < 10 ? "0" + value : value;}// 测试var originValue = "2016-8-3", orig原创 2016-08-05 10:59:35 · 12490 阅读 · 0 评论 -
JavaScript正则表达式
之前好一段时间,自己很抵触“正则表达式”。一是,对其了解甚浅,不能很完整的掌握;再者,觉得好多需要正则的,要不网上可以找到,要不可以使用其他方式去实现。总之,对于正则毫无心得。最近,看完了《JavaScript忍者秘籍》这本书,对正则有了全新的认识,自己也尝试了总结了一些,在开发中,让好多事情变得事半功倍。正则表达式是一个拆分字符串并查询相关信息的过程。 ...原创 2016-05-08 21:54:46 · 9147 阅读 · 7 评论 -
乱码,乱码
当前的计算机系统使用的基本上是二进制系统,数据在计算机中主要是以补码的形式存储的。二进制数据是用0和1两个数码来表示的数。它的基数为2,进位规则是“逢二进一”,借位规则是“借一当二”。计算机处理文本,就必须把文本转换为二进制才能处理。一、字符编码早期计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是255(二进制11111111=十进制255),如果原创 2016-12-01 12:26:19 · 8110 阅读 · 4 评论 -
JavaScript面向对象精要(一)
传统面向对象的语言几大特征:封装、继承、多态,在JavaScript中并不适用。JavaScript的弱类型特征允许你用比其他语言更少的代码完成同样的任务。无需提前设计好类再进行编码。需要一个具有某个字段的对象了?随时随地都可创建。Nicholas C.Zakas著作《JavaScript面向对象精要》告知我们如何创建对象、定义自己的类型,使用继承以及其他各种操作来充分使用对象。总之,更全面理原创 2017-01-08 15:16:50 · 4231 阅读 · 1 评论 -
JavaScript提升(你不知道的JavaScript)
最近,在读《你不知道的JavaScript(上卷)》这本书,书中详细阐述了JavaScript众多重要但经常被大家忽略的点,在此强烈推荐!!!书中,第4章讲述了“提升”,从示例出发讲述了变量和函数提升的过程,纠正了自己以前错误的理解(相信好多人理解都是错误)!我们习惯将var a = 2;看做一个声明,而实际上JavaScript引擎不这么认为!下面几个示例让你彻底搞懂JavaScript中的原创 2015-05-30 10:10:14 · 7297 阅读 · 7 评论 -
JavaScript组件设计思想(二)
2016年3月份曾写过一篇文章《JavaScript组件设计思想》其中描述了一些实现组件化的方式,以及降低各组件耦合度的说明。其中“事件机制”不失为好的选择!经过了更多实践给我带来了更多的思考。事件实现,日常开发中我们经常需要这样的事件去完成某些操作:function Event() { this._events = Object.create(null); // 存储所有事件}Ev原创 2017-01-02 20:08:16 · 3118 阅读 · 2 评论 -
JS数组&两值交换不使用第三变量
数组对象的作用是:使用单独的变量名来存储一系列的值!1. shift:删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined2. unshift:将参数添加到原数组开头,并返回数组的长度,注:其兼容性较差3. pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined4. push:将参数添加到原数组末尾,并返回数组的长度5. ar原创 2014-12-20 23:01:43 · 12294 阅读 · 2 评论 -
详解prototype与__proto__区别
Each constructor is a function that has a property named “prototype” that is used to implement prototype-based inheritance and shared properties. Every object created by a constructor has an implicit r原创 2016-12-08 18:50:27 · 34636 阅读 · 1 评论 -
统计字数oninput?keyup?onchange?
在开发中,经常会遇到实时统计文本框或文本域中输入字符的个数,超过规定位数后禁止再输入。<div> <textarea name="content" id="content" cols="30" rows="10"></textarea> <p>剩余输入字符个数:<span>140</span></p></div>// 字符输入区域var content = document.q原创 2016-12-06 18:35:42 · 4947 阅读 · 2 评论 -
jquery $(document).ready()与window.onload的区别
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 2.原创 2014-12-21 23:46:03 · 3995 阅读 · 1 评论 -
DOM操作
DocumentFragement通常用来创建一个文档片段,然后将创建的DOM元素插入到文档片段中,最后把文档片段插入到DOM树中。在DOM树中,文档片段会被替换为它所有的子元素。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面重绘(reflow)(对元素位置和几何上的计算)。因此,使用文档片段DocumentFragement通常会起到优化性能的作用。原创 2017-05-01 11:20:21 · 2738 阅读 · 0 评论 -
JavaScript日期处理
日期处理,在前端开发过程中会经常遇到。不同的开发者处理日期都有自己的想法。下面提供几种常见的日期问题。 当然,Github上提供了好多优秀的日期处理插件(如Datejs、date-fns、jquery-dateFormat),然而当处理一些简单的日期操作去引用插件,还是挺耗费资源。一、Date类型在讲述常见日期问题之前,先梳理一下Date类型的方法。 ECMAScript中的Date类型使原创 2016-08-07 22:44:28 · 6241 阅读 · 2 评论 -
Event loop及macrotask & microtask
写这篇文章的原因有两个:其一,团队小伙伴之前分享过《macrotask microtask介绍》这个话题,当时留下了一些疑问,至今仍模棱两可;其二,看到了「奇舞周刊」转发了一篇《从 薛定谔的猫 聊到 Event loop》的文章,内容精炼,但是有一些原则性的问题和规范有偏差。特整理一下相关内容,以免误导大家,也对自己的掌握做一个总结(大部分内容均来自官方文档,文档结尾处有相关链接)。Jav...原创 2019-08-01 09:29:53 · 721 阅读 · 0 评论 -
JavaScript的工作原理:内存管理+如何处理4个常见的内存泄漏
本篇译文,删减了原文中一些无关紧要的内容,可以让大家花更少的阅读时间。原文地址:https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec这篇文章将讨论日常编程中另一个复杂且容易被忽视的问题 — 内存管理。其中还提供...翻译 2019-07-21 19:03:30 · 856 阅读 · 0 评论 -
JavaScript的工作原理:引擎,运行时和调用堆栈的概述
原文地址:https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf随着 JavaScript 变得越来越流行,各团队正在多个领域栈中使用它们,其中包括 — 前端,后端,混合应用,嵌入式等等。这篇文章是系列中的第一篇,旨在深入挖掘 JavaScript 及其实际工作原理:通过了解 Ja...翻译 2019-07-11 22:08:47 · 446 阅读 · 0 评论 -
现代前端技术解析:前端三层结构与应用
前端三层结构与应用前端三个基本结构:结构层HTML、表现层CSS、行为层JavaScript。现在的Web前端应用已经不是简单的三层结构就能轻松解决,而是已经形成了编译流程化、生产环境基础优化结构运行的模式。HTML结构层必须要知道的DOCTYPEHTML4.01是基于SGML(Standard Generalized Markup language,标准通用标记语言)规范来制定的;HTML5不是基原创 2017-07-26 20:27:07 · 8468 阅读 · 4 评论 -
现代前端技术解析:前端跨站技术
前端跨站技术随着前端技术栈在服务端和移动端上的尝试和日益成熟,前端工程师的追求绝不只是页面上的技术,如何实现跨服务端,如何扩展到移动端开发将变成主要讨论议题。JavaScript跨后端实现技术前端通过与Node(基于事件驱动和无阻塞)结合的开发模式越来越被开发者认同并在越来越多的项目中得到实现。SPA场景下SEO的问题SPA应用加载的基本流程:浏览器端先加载一个空页面和JavaScript脚本,然后原创 2017-08-03 20:59:01 · 5636 阅读 · 5 评论 -
现代前端技术解析:前端与协议
前端与协议HTTP协议简介完整的HTTP报文由头部、空行、正文三部分组成。目前最广泛使用的是HTTP1.1。长连接 通过请求头中的keep-alive控制。在HTTP1.0中可以通过Connection: keep-alive开启长连接。长连接可以让客户端和服务器端之间的连接在一段时间内持续有效,当一个请求文件的传输连接建立后,服务器保持该连接的时间段内,其他文件请求可以复用这个已经建立好的连接原创 2017-07-25 20:06:00 · 1680 阅读 · 0 评论 -
现代前端技术解析:现代前端交互框架
现代前端交互框架 Web前端页面的开发避免不了与DOM的交互操作。前端框架的一次次变化,从提升效率的阶段,慢慢走向改善性能的阶段。直接DOM操作时代对于开发者来说,所有数据内容都可以通过DOM结构来组织和展示的。数据的处理和操作的核心其实就是DOM的处理和操作。DOM API可以分为:节点查询型、节点创建型、节点修改型、节点关系型、节点属性型和内容加载型。 类型 方法 jQuery原创 2017-08-02 21:17:20 · 2151 阅读 · 0 评论 -
现代前端技术解析:Web前端技术基础
最近几年,越来越多的人投入到前端大军中;时至至今,前端工程师的数量仍然不能满足企业的发展需求;与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作,优秀的前端工程师一将难求。 真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求原创 2017-07-24 21:03:11 · 9672 阅读 · 6 评论 -
现代前端技术解析:前端项目与技术实践
前端项目与技术实践前端开发规范HTML规范head内容 head中必须定义title、keyword、description,保证基本的SEO页面关键字和内容描述。移动端页面head要添加viewport控制页面不缩放,有利于提高页面渲染性能。建议在页面<head>加上基本的社交RICH化消息,保证网页地址分享后能够显示缩放图、图标和描述等。<meta name="viewport" cont原创 2017-08-01 20:07:30 · 4690 阅读 · 0 评论 -
八种方式实现跨域请求
前端开发中我们经常会遇到跨域请求的情况,处理跨域请求方式很多,特整理如下:浏览器的同源策略 提到跨域不能不先说一下”同源策略”。 何为同源?只有当协议、端口、和域名都相同的页面,则两个页面具有相同的源。只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制。 同源策略限制从原创 2017-06-11 22:52:54 · 80263 阅读 · 7 评论 -
debounce与throttle区别
在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应。John Resig发表了一篇文章《 a blog post about the problem》指出直接在scroll事件上面绑定高消耗的事件是一个多么愚蠢的想法。现在项目中大家都会对类似的scroll或者resize事件都进行了节流控制,下述是我们经常用到,也是《JavaScript高级程序设计》- J原创 2017-07-12 08:13:44 · 14217 阅读 · 1 评论 -
编写高质量代码:改善JavaScript程序建议--面向对象编程
JavaScript是基于对象的弱类型语言,它是以对象为基础,以函数为模型,以原型为继承机制的开发模式。建议1:参照Object构造体系分析prototype机制 对象(Object)是没有原型的,只有构造函数拥有原型,而构造类的实例对象能够通过prototype属性访问原型对象。 prototype表示类的原型,就是构造类拥有的原始成员。构造函数的prototype属性存储着一个引用对象指原创 2017-05-22 19:56:25 · 1862 阅读 · 0 评论 -
JavaScript作用域闭包(你不知道的JavaScript)
JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白!现在随着对JavaScript更深入的了解,也刚读完《你不知道的JavaScript(上卷)》这本书,所以乘机整理下,从底层和原理上去刨一下。JavaScript并不具有动态作用域,它只有词法作原创 2015-07-12 15:14:58 · 5558 阅读 · 5 评论 -
编写高质量代码:改善JavaScript程序建议--函数式编程
函数式编程已经在实际应用中经发挥了巨大作用,更有越来越多的语言不断地加入对诸如闭包、匿名函数等的支持,从某种程度上来讲,函数式编程正在逐步同化命令式编程。建议1:禁用Function构造函数使用Function构造函数创建的函数具有顶级作用域。var n = 1;function f(){ var n = 2; var e = new Function("return n;");原创 2016-10-16 21:19:24 · 2686 阅读 · 0 评论 -
JavaScript:查找/匹配
一、string中提供的charAt() 返回在指定位置的字符。示例:'abc'.charAt(1); //"b"charCodeAt() 返回在指定的位置的字符的 Unicode 编码。示例:'abc'.charCodeAt(1); //98indexOf(searchvalue,fromindex) 检索字符串,返回对应下标。示例:'a原创 2015-05-17 23:01:10 · 2073 阅读 · 0 评论 -
JavaScript:string
对于JavaScript中的字符串,记住一句话:“字符串创建后不可修改”!一、字符串创建后不可修改var s = 'abcd';s[1]='e';console.log(s[1]); //'b'console.log(s); //'abcd'二、常用方法JavaScript 的字符串是不可变的(immutable),String 类定义的方法都不能改变字符串原创 2015-05-17 21:56:13 · 1013 阅读 · 0 评论 -
js提取主域及获取当前时区
最近,在做项目时用到了两个比较好的js插件,在这里推荐给大家:提取主域:tldjs.js获取当前时区:jstz-1.0.4.min.js一、提取主域tldjs.js可以轻松判断主域的存在、提取主域、提取子域等判断主域是否存在: tld.tldExists('google.com'); // return 'true' 提取主域: tld.getDomain('fr.原创 2015-03-13 17:25:34 · 6626 阅读 · 0 评论 -
JavaScript语言精粹【数组、正则表达、JSON、JSLint】
四、数组当属性名是小而连续的整数时,应该使用数组;否则使用对象。数组:var numbers = ['zero','one','two','three','four','five','six','seven','eight','nine'];对象字面量:var numbers_object = {'0':'zero','1':'one','2':'two','3':'three',原创 2015-03-28 15:38:36 · 1368 阅读 · 0 评论 -
JavaScript语言精粹【糟粕、毒瘤】
八、糟粕JavaScript中存在一些有问题的特性,有时我们往往大意出错!1. 比较运算符==:会强制转换 -->不建议使用===:两个运算数类型一致且有相同的值 -->建议使用2. with严重影响了JavaScript处理器的速度,阻断了变量名的词法作用域绑定实例:with(obj){ a=b;}本意:obj.a=obj.b,等价于if(obj.原创 2015-03-28 15:45:23 · 1692 阅读 · 0 评论 -
JavaScript语言精粹【语法、对象、函数】
JavaScript是Web浏览器语言,浏览器的API和文档对象模型(DOM)相当糟糕,使得JavaScript遭到不公平的指责。函数就是数值!一、语法1. 注释JavaScript提供了【/*块注释*/】、【//行注释】两种方式,建议大家使用行注释,不要使用块注释。/* var rm_a = /a*/.match(s); */配合正则使用,会发生错误!2. 数原创 2015-03-28 15:22:10 · 1517 阅读 · 0 评论