JS随心录
文章平均质量分 93
一碗周.
这个作者很懒,什么都没留下…
展开
-
前端模块化详解(CommonJS、AMD、CMD、ES Module)
大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~写在前面随着前端项目的不断复杂,代码日益膨胀,项目的维护难度随之越来越大,此时模块化也就相继的出现了,本篇文章将会介绍如下内容:模块化的概念以及演变过程模块化规范CommonJSAMDCMDES module模块化的概念以及演变过程什么是模块化模块化就是将一个复杂的程序依据一定的规则或者说是规范,将其封装成几个单独的块(这里的块指的就是文件),在使用的时候将其组合在一起。块内部的.原创 2021-12-16 14:28:53 · 2433 阅读 · 0 评论 -
【JS随心录】Location.href 属性与 window.open() 方法的用法与区别
【JS随笔】Location.href 属性与 window.open() 方法的用法与区别古之立大事者,不惟有超世之才,亦必有坚韧不拔之志——苏轼写在前面使用 JavaScript 的朋友们肯定对 js 的 location.href 和 window.open() 的作用是什么是了解的,但是这两种方法究竟有几种用法,区别是什么估计就没有怎么了解了。本篇博客就来介绍一下两者的用法与区别。Location.href 的用法目前在开发中常用的几种形式如下所示:self.location.hr原创 2021-02-05 23:36:19 · 408 阅读 · 0 评论 -
一篇博客搞懂 Ajax 是什么(Ajax原来这么简单)
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面在接触 Ajax 之前,我们一直都是同步交互,所谓同步交互,就是指发送一个请求,需要等待返回,然后才能够发送下一个请求。同步相互相当于排队,轮到下一个的情况会因为前一个而有所不同。Ajax 可以帮助我们实现异步交互,所谓的异步交互,就是指发送一个请求,不需要等待返回,随时可以在发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。文章目录写在前面Ajax 概述Ajax 是什么异步交互的优势异步交互.原创 2020-11-14 21:35:54 · 415 阅读 · 0 评论 -
3分钟让你搞懂 JSON 怎么用
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面JSON 主要用于客户端与服务器端的数据交换,其与任何一种编程语言都没有关系,可以支持任何语言,原生支持 JavaScript 语言。文章目录写在前面JSON 概述JSON 是什么JSON 语法规则JSON 中的键值对集合JSON 中的值的有序列表JSON 文件JavaScript 中的 JSONJavaScript 与 JSONJSON 字符串与 JSON 对象JavaScript 的 JSON 对象Ajax 中的 JSON构建 J.原创 2020-11-14 21:21:33 · 1294 阅读 · 0 评论 -
教你一行 JavaScript 代码完成瀑布流布局
古之立大事者,不惟有超世之才,亦必有坚韧不拔之志——苏轼写在前面一行 JavaScript 代码究竟可以完成什么布局?今天我们就来用一行 JavaScript 代码完成经典布局的一种,瀑布流布局。所谓的瀑布流布局就是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。瀑布流的特点:琳琅满目: 整版以图片为主,大小不一的图片按照一定的规律排列。唯美: 图片的风格以唯美的图片为主。操作简单: 在浏览网站的时候,只需要轻.原创 2020-11-09 00:36:20 · 2550 阅读 · 8 评论 -
jQuery 插件 lazyload.js 的插件使用——实现图片的延迟加载
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面lazyload.js 是一个基于 JQuery 的插件,可以用来缓冲加载图片。为什么要缓冲加载图片呢?如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。lazyload 插件的优点:可以提.原创 2020-11-07 09:24:17 · 422 阅读 · 0 评论 -
通过 jQuery 对 CSS 和 HTML页面进行操作
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面jQuery 中提供的样式操作已经非常简单了,可以轻松的通过 JavaScript 来操作 CSS 样式。目录如下:文章目录写在前面样式操作`addClass()` 方法`removeClass()` 方法`toggleClass()` 方法`hasClass()`方法`css()`方法HTML 操作样式操作jQuery 中提供的 attr() 方法就可以对 CSS 样式进行操作,这种操作主要包含两种方式通过此方法添加 s.原创 2020-11-06 00:04:32 · 323 阅读 · 1 评论 -
搞定动画之 JQuery 中的自定义动画
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面所谓的自定义动画就是通过 jQuery 提供的方法来完成我们自己想要的动画效果animate()方法jQuery 提供了 animate() 方法完成自定义动画效果,该方法具有两种用法。用法一,语法结构如下所示:animate(params,[speed],[easing],[fn])参数说明:params:一组包含作为动画属性和终值的样式属性和及其值的集合speed:三种预定速度之一的字符串(“slow”,“norm.原创 2020-11-05 23:55:55 · 2318 阅读 · 0 评论 -
搞定动画之 JQuery 中的预定义动画
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面所谓的 jQuery 中的预定义动画,就是 jQuery 官方提供定义好的动画方法可以供我们直接使用的。显示与隐藏jQuery 中提供的显示与隐藏的方法是 show() 和 hide() 具体的语法结构如下所示show([speed, [easing],[fn]]) // 显示hide([speed, [easing],[fn]]) // 隐藏参数说明:speed: 三种预定速度之一的字符串(“slow”,“normal.原创 2020-11-05 23:48:29 · 161 阅读 · 0 评论 -
快速掌握 jQuery 操作 HTML 节点
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼写在前面jQuery 中提供了许多对方面可以帮助我们对节点进行操作,这些操作比原生 DOM 中对节点的操作要简单的多,方便了我们的使用。 jQuery 中对节点的操作主要包含以下几种:查找节点遍历节点创建节点插入节点删除节点替换节点复制节点正文开始!查找节点查找元素节点使用 jQuery 中的选择器用法即可完成查找元素节点的功能,相对于 DOM 中的查找元素节点 jQuery 选择器的方式更便捷。查找文本节点通过 .原创 2020-11-04 20:40:58 · 415 阅读 · 0 评论 -
万字详解 jQuery 的选择器
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼先说概念选择器是什么jQuery 的选择器是用于定位 HTML 页面中的元素,其用法最初设计时源于 CSS 的选择器用法,但是 jQuery 的选择器进行了扩展,远比 CSS 的选择器更强大。其实在 JavaScript 中的 DOM 也具有类似的用法。例如 querySelector() 方法和 querySelectorAll() 方法,就是利用 CSS 选择器定位页面元素。但 jQuery 中的选择器性能要比 DOM 中的更好。jQ.原创 2020-11-03 23:40:08 · 478 阅读 · 1 评论 -
原生 JS 实现别踩方块儿小游戏 - 超简单
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼案例效果原生 JavaScript 实现的 别踩方块小游戏案例效果如下所示:案例分析静态页面将这个静态页面可以划分为四个部分,如下图所示:JavaScript 行为黑块的行为生成新的黑块在视觉效果的以外生成一个新的黑块,这样显得不是很怪黑块下落在定时器中将黑块的 top 值次增,移动到视觉效果外将其通过 Element.remove() 方法删除掉。游戏的逻辑持续生成黑块 -> 游戏开始.原创 2020-11-03 00:29:41 · 1334 阅读 · 8 评论 -
搞懂JavaScript中的防篡改对象
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼写在前面我们在实际的开发中,可能需要自己封装 API ,如果供人使用的话,可能是禁止修改我们自己定义的对象的,JavaScript 中就给我们提供了这种防篡改机制。防篡改是什么定义的对象默认在任何时候、任何位置,无论有意义的还是无意义的都可以修改对象的属性或方法。而这些篡改可能会影响对象的内置属性或方法,从而导致对象的正常功能可能无法使用。 JavaScript 在 ECMAScript5 版本中新增了放置篡改对象的属性或方法的机制,共提.原创 2020-10-30 23:41:02 · 294 阅读 · 0 评论 -
JavaScript 中5行代码实现自定义异常类型
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼自定义异常类型如果 JavaScript 提供的异常类型不能够满足我们,我们可以自定义属于自己的异常类型,这个自定义的异常类型一般都是继承 Error 的异常类型,而且可以通过 instanceof 关键字来表示属于那种异常类型。先来看一下 Node.js 中提供的用于自定义异常类型所提供的属性和方法,如下所示error.stack 属性:返回一个字符串,字符串的第一行会被格式化为 <error class name>: &.原创 2020-10-29 23:16:31 · 293 阅读 · 0 评论 -
快速而优雅的处理 JavaScript 中的错误与异常(一键 get 新技能)
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼写在前面在我们的实际编程中,抛出异常(代码报错)是最正常不过的,但是怎么处理异常这就要因人而异的,有的人遇到异常,通常会通过某种办法解决这个异常或者将其隐藏;但是在 JavaScript 中提供了一套完整的处理异常的机制,使程序遇到异常还可以正确的执行。所以说异常处理的在实际应用的重要性是毋庸置疑的,一个完整的 Web 应用肯定有一套完整的异常处理机制。这篇博客我们来介绍一下 JavaScript 处理先说概念什么是错误与异常所谓的错.原创 2020-10-29 22:48:57 · 476 阅读 · 2 评论 -
深刻理解 JavaScript 中的原型式继承、借助构造函数继承和组合式继承
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼写在前面之前我们通过 一篇搞懂原型和原型链 这篇博客介绍了原型链和原型链的两种继承方式,今天就通过这一篇博客来介绍一下 JavaScript 中剩下的常用的继承方式文章目录写在前面原型式继承借助构造函数继承组合式继承写在最后原型式继承所谓原型式继承,就是定义一个函数,该函数中创建一个临时性的 构造函数,将作为参数传入的对象作为这个构造函数的原型,最后返回这个构造函数的实例对象。实例代码如下所示:// 定义一个函数function .原创 2020-10-29 00:56:00 · 126 阅读 · 0 评论 -
深入了解 JavaScript 中的原型链和关于原型链的继承方式
写在前面JavaScript 中的原型链属于重难点,也是继承的必要条件,掌握好 JavaScript 中的原型链不管是学习还是工作都会有很大的益处原型中的关系在了解原型链是什么之前我们先了解一下原型中的关系在 JavaScript 中的每个函数都会有一个 prototype 属性,这个属性又会返回一个原型,原型又有一个 constructor 属性,这个属性指向与之关联的构造函数。通过构造函数实例化的对象会有一个 __proto__ 属性,这个 __proto__ 属性指向构造函数的 protot原创 2020-10-27 23:44:10 · 117 阅读 · 0 评论 -
搞懂 JavaScript 中的原型和原型链,一篇足矣
搞懂 JavaScript 中的原型,一篇足矣写在前面在 JavaScript 中,原型属于重点,当然也是一个难点,在 JavaScript 中,基本上任何一个构造构造函数和对象都是有原型的,通过此篇博客来了解一下 JavaScript 中的原型吧。原型概述原型是什么在 JavaScript 中,函数是一个包含属性和方法的 Function 类型的对象。而原型(Prototype)就是 Function 类型对象的一个属性。在函数定义是包含了 prototype 属性,它的初始值是一个空对象原创 2020-10-27 23:30:19 · 239 阅读 · 0 评论 -
浅了解 JavaScript 中的闭包
浅了解 JavaScript 中的闭包写在前面闭包这个概念最初接触起来是有一定难度的,但是闭包是 JavaScript 中的一个特色,很多高级应用都要依靠闭包实现。此篇博客就来了解一下闭包的概念。作用域链什么是作用域?所谓作用域,就是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。在 ECMAScript 5 版本中不存在块级作用域,也就是说在代码块中的定义的变量是存在全局作用域的,示例代码如下:if (true) { var a = 100;}console.log(a);原创 2020-10-26 23:33:05 · 82 阅读 · 0 评论 -
JavaScript 中的属性描述符
JavaScript 中的属性描述符古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼写在前面JavaScript 提供了一个内部数据结构,用于描述对象的值,控制其行为,例如该属性是否可写、可读、可配置、是否可修改以及是否可枚举等。这个内部数据结构被称为属性描述符。每个属性都有自己对应的属性描述符,保存该属性的元信息。对象里目前存在的属性描述符有两种主要形式:数据描述符和存储描述符。数据描述符数据描述符是一个具有属性的值,该值是可写的,也可能是不可写的。数据描述符具有以下可选键值:原创 2020-10-25 23:12:31 · 958 阅读 · 0 评论