随笔分类 - JavaScript
【译】自制前端玩具框架
摘要:内容来源于“Let’s learn how modern JavaScript frameworks work by building one”,我在本文中不会逐字翻译,只会将关键部分列出。 React 是一个很棒的框架,但本文要实现的“现代 JavaScript 框架”是指“后 React 时代的
阅读全文
30个重构技巧
摘要:所有技巧来源于《重构:改善既有代码的设计(第2版)》 第一组重构 1)提炼函数 “将意图与实现分开”:如果你需要花时间浏览一段代码才能弄清它到底在干什么,那么就应该将其提炼到一个函数中,并根据它所做的事为其命名。 function printOwing(invoice) { printBanner(
阅读全文
【译】15 个有用的 JavaScript 技巧
摘要:原文地址:https://javascript.plainenglish.io/15-useful-javascript-tips-814eeba1f4fd 1)数字分隔符 为了提高数字的可读性,可以使用下划线作为分隔符。 const largeNumber = 1_000_000_000; con
阅读全文
用JavaScript完成页面自动操作
摘要:在之前的一篇《JavaScript实现按键精灵》中曾记录了几个事件对象,本文将会对它们进行一次实战,要完成的动作包括滚动、点击和翻页。 一、滚动 滚动是通过修改容器元素的scrollTop属性实现的,期间会进行一系列的计算,而每次滚动都会包含一个个小的偏移动作,为了让这些动作能有序进行,自定义了一个
阅读全文
JavaScript性能优化 DOM编程
摘要:最近在研读《高性能JavaScript》,在此做些简单记录。示例代码可在此处查看到。 一、DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API)。 浏览器通常会把DOM和JavaScript独立实现。例如Chrome中使用
阅读全文
JavaScript定时器分析
摘要:一、事件循环 JavaScript是单线程,同一个时间只能做一件事情,所以执行任务需要排队。如果前一个耗时很长,那么下一个只能等待。 1)两种任务 为了更好的处理任务,JavaScript语言的设计者将任务分为两种:同步任务(synchronous)与异步任务(asynchronous)。 同步任务
阅读全文
《你不知道的JavaScript》整理(六)——强制类型转换
摘要:JavaScript中通常分为两种类型转换,“隐式强制类型转换”(implicit coercion)和“显式强制类型转换”(explicit coercion)。 下面所有代码的源码可以在此处查看。 一、强制转换为字符串(ToString) 1)ToString 基本类型值的字符串化规则为:nul
阅读全文
《你不知道的JavaScript》整理(五)——值与原生函数
摘要:一、值 1)数字 JavaScript只有一种数值类型:number(数字),包括“整数”和带小数的十进制数。 由于数字值可以使用Number对象进行封装,因此数字值可以调用Number.prototype中的方法。例如,tofixed(..)方法可指定小数部分的显示位数: 2)整数检测 3)nul
阅读全文
表格花式效果
摘要:对于table的一些基础信息不了解的,可以参考我以前写过的一篇《关于table的一些记录》。下面演示的代码,具体的源码可以参考此处。 一、表格固定左边与顶部 公司最近要做个排期系统,当滚动表格的时候,需要将顶部和左边的分别固定起来。 1)固定顶部 原理就是用标签模拟出顶部的样式,通过脚本计算出高度,
阅读全文
JavaScript实现按键精灵
摘要:最近有个需求,需要在页面上面自动点击、输入、提交。 用以模拟真实用户的操作行为,可以通过直接执行某个元素绑定的事件,来执行操作。 也可以创建事件,再派发事件,执行操作。关于事件的更多细节,可以参考《JavaScript中事件处理》 1、模拟MouseEvent中的click事件,x与y位置随机点击
阅读全文
JavaScript中几个相似方法对比
摘要:一、substring与substr substring substr 概述 语法 参数 indexStart:一个 0 到字符串长度之间的整数 indexEnd:可选,一个 0 到字符串长度之间的整数 start:开始提取字符的位置,可为负值 length:可选。提取的字符数 1. indexSt
阅读全文
日月如梭,玩转JavaScript日期
摘要:一、Date对象 下面出现的源码都可以codepen在线查看。 1)时间戳毫秒计算 Date对象是基于“1970-01-01 08:00:00”到指定日期的毫秒数,不是“00:00:00”。 一天由86,400,000毫秒组成。 通过上面的代码打印结果,可以看到是相对于8点的毫秒数。 PHP中的时间
阅读全文
JavaScript字符集编码与解码
摘要:一、字符集 1)字符与字节(Character) 字符是各种文字和符号的总称,包括乱码;一个字符对应1~n个字节,一字节对应8位,每位用0或1表示。 2)字符集(Character Set) 字符集是多个字符的集合,每个字符集包含的字符个数不同,常见字符集名称:ASCII字符集、GB2312字符集、
阅读全文
梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
摘要:CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能。 一、两者的主要区别 先开门见山的说说两者之间的区别。 1)CSS动画: 基于CSS的动画一般由浏览器“主线程”之外的独立线程处理,在其中执行样式、布局、绘制和 JavaScript。 使
阅读全文
前端网络、JavaScript优化以及开发小技巧
摘要:一、网络优化 YSlow有23条规则,中文可以参考这里。这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少。 1)合并压缩CSS、JavaScript、图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉。 之所以要做合并压缩是因为:
阅读全文
H5项目开发分享——用Canvas合成文字
摘要:以前曾用Canvas合成、裁剪、图片等《用H5中的Canvas等技术制作海报》。这次用Canvas来画文字。 下图中“老王考到驾照后”这几个字是画在Canvas上的,与在PS中打入的字非常接近,毫无违和感。 前面一段时间也在研读JavaScript设计模式相关的知识,这次正好小小的实践一下,但对设计
阅读全文
《JavaScript设计模式 张》整理
摘要:最近在研读另外一本关于设计模式的书《JavaScript设计模式》,这本书中描述了更多的设计模式。 一、创建型设计模式 包括简单工厂、工厂方法、抽象工厂、建造者、原型和单例模式。 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例。 两种实现方式,第一种是通过类实例化对象创
阅读全文
飞起来的正则表达式
摘要:最近在研读一本巨著《JavaScript忍者秘籍》,里面有一篇涉及到了正则表达式。 我在以前也曾经写过一篇正则表达式相关的文章《JavaScript与PHP中正则》,这次再做些补充。 书中的源码可以在此下载。我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相应示例代码。
阅读全文
JavaScript特性(attribute)、属性(property)和样式(style)
摘要:最近在研读一本巨著《JavaScript忍者秘籍》,里面有一篇文章提到了这3个概念。 书中的源码可以在此下载。我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相应示例代码。 一、DOM特性和DOM属性 attribute(特性),是我们赋予某个事物的特质或对象,attri
阅读全文
《JavaScript设计模式与开发实践》整理
摘要:最近在研读一本书《JavaScript设计模式与开发实践》,进阶用的。 一、高阶函数 高阶函数是指至少满足下列条件之一的函数。 1. 函数可以作为参数被传递。 2. 函数可以作为返回值输出。 1)高阶函数实现AOP AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟
阅读全文