- 博客(578)
- 资源 (82)
- 收藏
- 关注
RSS订阅原创 mapty项目架构
良好的项目代码规划可以显著提高代码的可读性和可维护性。在整个项目生命周期中，保持一致性、遵循最佳实践以及及时重构都是关键。根据项目需求和团队规模，可以灵活调整这些建议。下篇文章我们就来为我们之前撰写的代码进行重构，使得代码更加的可读可维护。
2024-09-23 19:58:41
92
原创 JS渲染锻炼输入表单
上篇文章为大家展现了好看的信息窗口，接下来我们跟着流程图看下一步之前我们的带点击事件已经添加完毕，下一步就是当用户点击的时候，渲染锻炼形式，当然这是一个标签，可以提供给用户输入锻炼形式。
2024-09-22 20:15:38
252
原创 JavaScript使用leaflet库显示信息窗口
我们可千万不能忘记我们之前花的流程图哦，我们所有的计划都按照我们的流程图来去构建；我们已经完成了，页面的加载，也已经完成获取用户当前的位置坐标，并且我们通过地图的API将当前的位置在地图中渲染出来，接着我们就要去做，当用户点击地图的时候，去形成一个标记.addTo(map) //将标记事件绑定到map上.bindPopup( //绑定弹出信息窗口L.popup({maxWidth: 250, //设置窗口最大宽度minWidth: 100,//设置窗口最小宽度。
2024-09-21 18:51:09
251
原创 JavaScript使用高德API显示地图
在JavaScript中，使用Leaflet库显示地图是一种常见的做法。Leaflet是一个开源的JavaScript库，用于在Web应用程序中创建互动地图。它非常轻量级，易于使用，并且提供了多种功能，使开发者能够轻松地将地图集成到他们的项目中。本次我们使用高德地图API来显示我们的地图，其实所有的大概都大差不差。
2024-09-08 23:03:07
428
原创 JavaScript使用地理位置 API
在JavaScript中，Geolocation API 是一种用于访问用户地理位置的接口。这个API允许网页应用程序获取用户的位置并提供基于位置的服务。这个函数中需要传入两个参数，第一个参数就是成功获取位置后返回的结果，第二个参数是获取失败之后返回的结果。},alert('无法获取你的位置！');● 这样当浏览器询问我们是否给与位置权限时候，如果是的话会获取当前位置的坐标，如果否的会话弹窗报错；● 所以我们可以将经度和维度解构出来定义到变量中存储},alert('无法获取你的位置！
2024-09-07 21:10:16
347
原创 如何规划Web项目
从用户的角度描述应用程序的功能。所有用户故事放在一起描述了整个应用程序2. 功能3. 流程图（我们将去构建什么）4. 架构（我们如何去构建他）下一步就是开发步骤（使用代码来实现我们的计划）了。
2024-09-06 16:56:00
440
原创 JavaScript接下来的小项目
● 接下来，我们将学习如下所示的一个小项目，这个项目是一个地图的项目，我们可以在地图上标记一些我们运动的位置进行记录，并且浏览器在本地会帮我们记录他们，其他一些功能后面慢慢阐述并实现。
2024-09-05 22:32:19
639
原创 ES6 类-总结
我们现在用一段代码， 在注释中总结所有关于JavaScript类的所有用法注意事项● 类只是构造函数的 “语法糖”；● 类不会被提升；● 类是一等公民；● 类主体始终在严格模式下执行
2024-09-03 22:06:45
586
原创 JavaScript方法链
在JavaScript中，方法链（Chaining Methods）是一种编程技术，允许你在一个表达式中连续调用多个方法。这通常通过让每个方法返回对象自身（this）来实现，从而可以在同一行上依次调用多个方法。● 例如，如果我们想进行一系列操作，例如存款500，取款35，贷款1000，取款500；我们发现这样做是完全行不通的，我们需要再方法中返回自身来实现支持链式调用//公有字段（例子，实际与之前写法作用一样）//私有字段#pin;//参数中不可以直接为私有字段。
2024-09-02 20:04:58
450
原创 封装_私有类字段和方法
在 JavaScript 中，封装、私有类字段和方法是面向对象编程的一种重要特性。它们允许你将数据（属性）和对数据的操作（方法）组合在一起，并控制访问权限，从而提高代码的安全性和可维护性。私有字段和私有方法是指仅能在类的内部访问的属性和函数。外部代码无法直接访问或修改这些私有成员，这样就可以防止外部依赖于内部实现细节，提高了模块化和安全性。本篇文章我们就来学习一下JavaScript中的公有字段，私有字段，公有方法，私有方法，还是以上一节的代码举例console.log(`欢迎来到你的账户，${
2024-09-01 22:28:35
580
原创 封装_受保护的属性和方法
● 当然在JavaScript中，使用下划线（_）作为变量名前缀是一种约定俗成的命名规范，旨在表明某个属性或方法是“受保护”或“私有”的。虽然JavaScript并没有严格的访问控制机制来限制对对象属性的访问，但这种命名习惯可以帮助开发者更清晰地理解代码的结构和意图；在JavaScript中，封装是面向对象编程的一个基本特性，它允许我们将数据和方法组织在一起，并控制对这些数据和方法的访问。**当然，这样并不会真正的防止私有字段不会公共访问的问题，这个只是一种约定俗成的方式。下篇文章再看看私有字段的方法。
2024-08-31 21:54:14
293
原创 另一种关于类的小例
我们还是以一段关于构造函数的代码作为开端，我们以之前银行家的小项目为背景● 我们可以设置一个欢迎语console.log(`欢迎来到你的账户，${console . log(` 欢迎来到你的账户， ${ owner } `);`);● 但是如果现在我们需要一个存钱和取钱的数组，用于记录，该怎么去做呢？当然我们可以用传统的方法console.log(`欢迎来到你的账户，${console . log(` 欢迎来到你的账户， ${ owner } `);
2024-08-30 22:40:27
417
原创 类与Object.create之间的继承
● 下面是一段之前学习Object.create的一段代码},● 和之前一样，我们创建学生的继承},● 和之前一样，学生的类可以添加新的方法},ITshare.init('ITshare', 2005, '计算机科学与技术');● 像之前一样，写一段介绍的方法,可以调用原型链中的方法//对象继承},console.log(`我的名字叫${this//对象继承 const PersonProto = {} };
2024-08-29 20:56:15
476
原创 类与ES6类之间的继承
● 下面是之前学习ES6 classes的代码greet() {console.log(`你好${thisconsole . log(` 你好 ${ this . fullName } `);`);} //静态方法 static hey() {console . log('哈喽！');} }`);${console . log(` 你好 ${ this . fullName } `);`);} //静态方法 static hey() {
2024-08-28 22:17:56
795
原创 类和构造函数之间的继承
类之间构造函数的继承是面向对象编程中的一个重要概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。通过这种方式，子类可以复用父类的代码，从而避免重复，提高代码的可维护性和可读性。● 现在有个学生函数需要继承Person的属性并且自己也有自己独特的方法。● 例如下面的代码，已经存在了一个生成姓名和一个计算年龄的构造函数。● 但是我们发现我们我们无法调用构造函数的内部方法。● 现在我们在学生的函数中添加相关的方法。
2024-08-26 21:44:31
264
原创 ES6 class小挑战
a. 添加一个名为 “speedUS ”的setter，用于设置当前速度（单位为 mi/h）（但在存储值之前要将其转换为 km/h，即输入值乘以 1.6）；a. 添加一个名为 “speedUS ”的获取器，返回当前速度（单位：mi/h）（除以 1.6）；a. 创建一辆新汽车，尝试使用加速和制动方法以及 getter 和 setter。● 首先先将之前的函数改造成class类的方式。数据 汽车 1：“福特”，时速 120 公里。● 剩下的就很简单了，参考答案如下。
2024-08-25 18:43:02
408
原创 Object.create的原型继承
● 使用 Object.create 创建对象时，新对象会直接链接到指定的原型对象。这意味着新对象可以访问原型对象上的属性和方法。● 但是构造函数是 JavaScript 中另一种实现对象创建和继承的方法。通常，我们会定义一个函数，并使用 new 操作符来创建实例。● Object.create 是一种更为简洁和直接的原型继承方式，适合创建新对象并链接已有对象的情况。而造函数则是传统的面向对象编程方式，适合需要初始化多个实例和实现复杂继承关系的场景。
2024-08-24 21:36:00
217
原创 JavaScript静态方法
在 JavaScript 中，static 方法是与类本身关联的方法，而不是与类的实例关联。也就是说，static 方法可以通过类直接调用，而不需要创建类的实例。!请输入你的全名 `);console . log(` 嗨，你好 `);} }`);!!请输入你的全名`);console.log(`嗨，你好`);● 使用 static 关键字定义的静态方法是属于类而不是实例的方法。● 可以通过类名称直接调用，无需实例化。
2024-08-23 22:37:17
333
原创 JavaScript中设置器和获取器
在JavaScript中，setters 和 getters 是对象属性的特殊方法，用于定义如何访问和设置对象的属性。这些方法使得可以在对对象属性执行读取或写入操作时添加自定义逻辑。
2024-08-22 21:07:38
287
原创 JavaScript构造函数小挑战
/ 编码挑战 #1/*a. 执行一个 “accelerate ”方法，将汽车的速度提高 10，并将新速度记录到控制台；3.a. 执行一个 “刹车 ”方法，将汽车速度降低 5，并将新速度记录到控制台；4. 创建 2 个汽车对象，并尝试在每个对象上多次调用 “加速 ”和 “制动”。数据 CAR 1：“宝马”，时速 120 公里数据车 2：“奔驰”，时速 95 公里祝您好运*/
2024-07-23 23:52:53
280
原创 原型继承和原型链
如果在一个对象上访问属性或方法时，对象本身没有定义，JavaScript 引擎会沿着这个对象的。（即它的构造函数的 prototype）向上查找，直到找到对应的属性或方法或者到达原型链的顶端（即 Object.prototype）。● 原型对象：每个函数在创建时都有一个 prototype 属性，它指向一个对象，这个对象包含函数的默认属性和方法。● 原型链：通过原型链，对象可以访问其构造函数的原型对象上定义的属性和方法。● 实例的原型：通过 new 关键字创建对象实例时，实例会有一个。
2024-07-21 23:02:08
319
原创 构造函数和新操作符
在JavaScript中，构造函数是用来创建对象的函数。它们通常与 new 关键字一起使用，用来实例化对象并初始化其属性。构造函数可以看作是一种特殊的函数，专门用来定义和初始化对象的特性和行为。
2024-07-15 14:54:32
302
原创 JavaScript中的面向对象编程
● 对象（实例）由类实例化，类的功能类似于蓝图，通过蓝图来实现建筑（实例）● 行为（方法）从类复制到所有实例。
2024-07-13 23:11:11
364
原创 什么是面向对象编程
● 面向对象编程是一种基于对象概念的编程范式；（所谓的编程范式，就是代码风格，我们“如何”编写和组织代码）；● 我们使用对象来模拟（描述）现实世界（例如用户或者待办事项列表项）或抽象特征（例如 HTML 组件或数据结构）；● 对象可包含数据（属性）和代码（方法）。通过使用对象，我们可以将数据和相应的行为打包成一个块；例如下方：● 在面向对象编程 中，对象是自成一体的代码块；● 对象是应用程序的构件，并可相互影响；
2024-07-12 18:53:13
903
原创 DOM（文档对象模型）生命周期事件
DOM 生命周期事件涉及到从创建、更新到销毁 DOM 元素的不同阶段。● 我们来看下当HTML文档加载完再执行JavaScript代码', e);})● 除此之外，浏览器在解析 HTML 时会逐行加载并执行● 监听 load 事件当整个页面及其依赖资源（如图片、样式表）全部加载完成时触发。这种事件对应于 DOM 生命周期中的最后阶段，标志着页面的完全加载，开发者可以在这时执行最终的初始化操作或其他相关任务。})
2024-07-09 21:29:43
417
原创 构建滑块组件_第 2 部分
每个按钮表示一个幻灯片的点或指示器，其中 data-slide 属性设置为 slides 数组中对应幻灯片的索引。当用户点击一个具有 dots__dot 类的元素时，它会获取该点对应的幻灯片索引，并调用函数来处理跳转到指定幻灯片并激活相应的点元素。● 之后我们讲来当我们按下键盘的右键或者左键的时候，幻灯片也会进行切换。● 接着我们要创建活跃的点，及点击到第一个幻灯片中，第一个点就为白色。● 最后，让我们来重构一下我们这乱七八糟的代码把，重构的代码如下。● 最后，我们删除图片，让原本的内容展现出来吧！
2024-07-06 22:18:11
181
原创 构建滑块组件_第 1 部分
● 本次将和大家一起学习实现滑块的功能● 由于这有些错乱，我们将用图片来代替，以实现功能● 这里我们简单的说一下原理，如下图所示，通过改变tanslateX的值来达到滑动的效果，所以最核心的就是我们需要通过JavaScript来改变图片的切换。
2024-07-05 23:22:02
312
原创 JavaScript懒加载图像
懒加载图像是一种优化网页性能的技术，它将页面中的图像延迟加载，即在用户需要查看它们之前不会立即加载。这种技术通常用于处理大量或大尺寸图像的网页，特别是那些包含长页面或大量媒体内容的网站。
2024-07-04 23:07:10
527
原创 JS滚动时显示元素
● 之后，我们定义一个函数来处理观察者监听到变化的时候，我们应该干啥，就是移除掉section–hidden这个class。● 我们的目的呢，就是当滚入到某一节中，将section–hidden给去除就可以了。● 最后呢，我们对section元素进行迭代处理，默认情况是，这些元素是不可见的。● 接着呢，我们需要定义对象来监视页面上所有的section的视口变化。● 首先，我们先获取想要的class，存储变量中。
2024-07-03 23:11:17
189
原创 更好的方法_交叉观察器API
注：isIntersecting： isIntersecting 是 IntersectionObserverEntry 接口的一个属性，用于指示观察的目标元素（target element）当前是否与其所监听的根元素（或视口）相交（intersecting）。● 创建一个 IntersectionObserver 实例 headerObserver，用于观察页面中的页面顶部的 .header 元素与视口的交叉状态，并在交叉状态变化时调用 stickyNav 回调函数进行处理。● 首先我们先拿到导航元素。
2024-07-02 22:12:17
351
原创 实施粘贴式导航_滚动事件
● 所谓的粘贴式导航，就是当我们滑动页面到某一个位置的时候，导航不会因为滑动而消失，会固定在页面的顶部，我们来看一下如何实现；● 首先我们要获取我们想要滚动到哪一部分的时候让导航栏显示出来，这就需要我们去获取这一部分的相对于视口的一个位置信息。
2024-07-01 20:31:13
933
原创 JavaScript将参数传递给事件处理程序
这样就可以实现当我们移入到某个元素的时候，有个高亮动画，但是，这样肯定是让代码的臃肿，我们需要去重构这段代码，一般呢，我们会选择通过函数的方式来重构这段代码，例如。● 这样也是可以实现的，但是这个点击事件的匿名回调函数还是不够优雅，我们可以通过bind方法来去除这个重复的匿名回调函数。● 现在可以实现，但是有一个问题，当我们移出的时候，并不会恢复，所以我们还需要一个移除的事件。本篇文件我们将实现导航栏中，选中时候，会将您选中的进行高亮显示；● 首先我们来获取我们想要的HTML元素。
2024-07-01 20:15:55
449
原创 JavaScript创建标签式组件
● 接着我们通过条件保护来设定，当我们获取的元素为null时候，直接返回不执行后面的代码。● 接着我们要移除所有的活跃样式，这些活跃样式大家看一下之前的html和css代码。注：clicked.dataset.tab是为了获取class中的data数据。● 接着我们需要通过点击事件来获取我们点击的那个button的信息。● 当然我们首先将我们需要的元素存储到变量中，方便后面使用。● 接下来就是我们点击哪个按钮，就给哪个按钮创建活跃样式。我们本篇将实现下面的这个标签式组件。● 接着就是激活内容。
2024-06-25 10:53:47
330
原创 DOM遍历
需要注意的是，这两个属性获取的节点可能是元素节点也可能是文本节点（或者其他类型的节点）。● 我们也可以找到元素的所有子元素节点，不包括文本节点和注释节点。● 找到元素的最近的父元素节点。如果 h1 的父节点是一个元素节点，则返回这个元素节点；● 找到元素的父节点，无论父节点是什么类型的节点（元素节点、文本节点等）。● 我们也可以找到元素的所有子节点（包括元素节点、文本节点和注释节点）的 NodeList 对象。● 那我们怎么知道元素的所有兄弟元素呢，我们可以找父元素的所有子元素。
2024-06-25 10:51:25
376
LSI 2308 mpt_SAS2_Windows7_Windows_Server_2008_R2_P20.zip
2021-04-19
RCLD-0114 RG-JCOS云管理平台产品日常维护和问题排查(含UDS硬件组件).pptx
2021-04-19
RCLD-0113 RG-JCOS云管理平台产品常用功能配置(含UDS硬件组件).pptx
2021-04-19
RG-AP系列无线接入点AP_RGOS11.1(5)B9版本Web管理手册(V2.0).pdf
2021-04-14
SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训13_系统诊断工具_上网故障排除丢包模块.xls
2021-04-01
CentOs7一直转圈桌面进不去
2023-05-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人