JS
关注
分享
扫一扫
文章平均质量分 55
Albert Yang
一代歌神，阿尔伯特·杨，一名Java程序员，正在学习前端。真正能让你走远的，从来都是积极自律与勤奋。
展开
-
VsCode自定义注释
vscode骚操作自定义注释打开设置窗口，并输入snippets，选择第一个选项(Snippets:Configure User Snippets)。打开一个js文件，输入文件注释的前缀jsNoteTitle，回车即可生成我们配置好的注释。上边的配置文件一共四个注释，一个文件注释，一个函数注释，一个修改注释，一个变量注释。，可以根据自己的喜好定义。body里面是自定义注释的内容，可以根据自己的需要增改。进入到 javascript.json 文件中后，添加如下代码，保存退出即可。原创 2022-10-24 18:11:53 · 8451 阅读 · 0 评论 -
5分钟用CSS实现毛玻璃效果 CSS Glassmorphism
目录1 视频2 知识点2.1CSS calc() 函数2.2 CSS var() 函数2.3 backdrop-filter2.4 CSS3box-sizing属性2.5 实现思路3 参考代码3.1 HTML3.2 CSS1 视频视频地址：https://www.bilibili.com/video/BV1Ny4y1U7hp5分钟实现CSS毛玻璃效果，王冰冰照片毛玻璃效果2 知识点2.1CSS calc() 函数CSS cal...原创 2020-12-23 12:47:34 · 12093 阅读 · 8 评论 -
十分钟实现炫酷透明计算器，CSS3+JavaScript实现3D炫酷计算器
vanilla-tilt.js使用方法:https://micku7zu.github.io/vanilla-tilt.js/HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>炫酷透明计算器：公众号AlbertYang</title> <link rel="stylesheet" type="text/css" href="原创 2020-12-17 23:59:35 · 9354 阅读 · 31 评论 -
NodeJS基础入门教程(1)-一文让你快速了解什么是NodeJS
1什么是NodeNode是一个基于Chrome V8引擎的JavaScript代码运行平台。WEB浏览器也是JavaScript代码运行平台。常见的JavaScript运行平台：WEB浏览器,Node。2Node.js安装2.1官网下载下载官网：https://nodejs.org/en/Node.js有两个不同的版本，LTS(Long Term Support长期支持版稳定版)版，Current(拥有最新特性的实验版)版。一般我们下载LTS版。2.2安装根据自己的系统和版本在官网原创 2020-12-12 12:47:41 · 4797 阅读 · 36 评论 -
使用canvas把照片旋转任意角度
1. 效果演示地址：https://www.albertyy.com/2020/8/rotateImg.html2. canvas关于canvas的使用我在这篇文章中有简单的介绍，可以看一下。3. 代码实现<!DOCTYPE html><html> <head> <title>图片旋转：公众号AlbertYang</title> </head> <style type="text/css">原创 2020-08-13 18:10:01 · 5580 阅读 · 25 评论 -
不会吧不会吧，你不会还不知道这些提高JS代码质量的骚操作吧？
目录1 评价代码质量指标1.1 健壮性1.1.1 参数校验1.1.2 try, catch1.1.3 控制变量权限1.2 可扩展性1.2.1 模块分明1.2.2 高内聚低耦合1.2.3 用添加代替更改1.3可读性1.3.1 变量命名规范1.3.2 代码结构清晰2 设计模式2.1 用享元模式减少重复代码2.2 策略模式/状态模式2.3 装饰器模式3 总结1 评价代码质量指标1.1 健壮性程序的健壮性是指程序在执行时，在局部发生错误原创 2020-08-10 08:38:08 · 12665 阅读 · 83 评论 -
设计模式(12)[JS版]--JavaScript必会设计模式之外观模式（Façade Pattern）
目录1 什么是外观模式2 外观模式的主要的参与者3 代码实现4 实例应用4.1 跨浏览器事件4.2阻止默认和冒泡事件5 总结1 什么是外观模式外观模式为子系统提供了一个接口，它屏蔽一个或多个子系统的复杂功，提供了一个一致的界面（接口）给用户。外观模式是一个非常简单的模式，但它的功能却很很强大，非常有用。外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式可以将一些复杂操作封装起来，并创建一个简单的接囗用于调用，它经常出现在多层架构的系统中。外观模式的.原创 2020-08-06 22:09:35 · 3291 阅读 · 19 评论 -
设计模式(11)[JS版]-JavaScript中的注解之装饰器模式
目录1 什么是装饰器模式？2 装饰器模式的主要参与者有哪些3 代码实现4 实例应用5ES7 中的 decorator6 总结1 什么是装饰器模式？装饰器模式模式动态地扩展了（装饰）一个对象的行为，同时又不改变其结构。在运行时添加新的行为的能力是由一个装饰器对象来完成的，它 "包裹 "了原始对象，用来提供额外的功能。多个装饰器可以添加或覆盖原始对象的功能。装饰器模式属于结构型模式。和适配器模式不同的是，适配器模式是原有的对象不能用了，而装饰器模式是原来的对象还能用，在不改变原.原创 2020-08-05 23:38:20 · 6599 阅读 · 40 评论 -
设计模式(10)[JS版]-JavaScript如何实现组合模式？？？
目录1什么是组合模式2主要参与者3代码实现4应用实例4.1 表单验证4.1 图片阅读器5总结1什么是组合模式组合模式允许创建具有属性的对象，这些对象是原始项目或对象集合。集合中的每个项目本身可以容纳其他集合，创建深度嵌套结构。树型控件是复合模式的一个完美例子。树的节点要么包含一个单独的对象（叶子节点），要么包含一组对象（节点的子树）。组合模式用于简单化，一致化对单组件和复合组件的使用；其实它就是一棵树。 组合模式能对于工作能起到简化作用，组合...原创 2020-08-04 22:35:22 · 5920 阅读 · 45 评论 -
设计模式(9)[JS版]-JavaScript设计模式之如何实现桥接模式？？？
1什么是桥接模式Bridge模式允许两个组件，即客户端和服务一起工作，每个组件都有自己的接口。Bridge是一种高级架构模式，它的主要目标是通过两级抽象来编写更好的代码。它有利于对象之间非常松散的耦合，有时也被称为双适配器模式。 桥接模式的作用在于将实现部分和抽象部分分离， 以便两者可以独立的变化。 这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。Bridge模式弱化了代码之间的耦合，将抽象和其实现分离，便于二者独立变化、让API更加健壮，有利于分层，提高组.原创 2020-08-03 22:53:18 · 4858 阅读 · 45 评论 -
设计模式(8)[JS版]-JavaScript设计模式之如何实现适配器模式？？？
目录1 什么是适配器模式？2 参与者3 实例讲解4 其它应用5 总结1 什么是适配器模式？适配器模式是将一个接口（对象的属性和方法）转换为另一个接口。适配器允许编程组件协同工作，否则由于接口不匹配而无法协同工作。适配器模式也称为包装器模式。适配器模式可以想象为我们日常生活中经常使用的接口转换器，实现两个或者多个不同的数据存储器进行数据交换，适配各自不同数据输出口的工具。适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。它只能用来协调语法上的差异问题。适配器.原创 2020-08-02 21:05:01 · 6638 阅读 · 38 评论 -
JS+CSS实现左右文字滚动
<!doctype html><html> <head> <meta charset="UTF-8"> <title>文字滚动：公众号AlbertYang</title> <script src="js/jquery-1.11.3.min.js"></script> <style type="text/css"> * { margin: 0; padding.原创 2020-07-28 17:50:04 · 3563 阅读 · 0 评论 -
设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现？？？
目录1.什么是原型模式2 参与者3实例讲解4使用 Object.create实现原型模式4.1Object.create()的用法4.2 用Object.create实现继承4.2.1 单继承4.2.2 多继承4.3 propertyObject参数4.4 Polyfill4.5改写原型模式实现5 总结1.什么是原型模式原型模式（prototype）是指用原型实例指向创建对象的种类，并且通过拷贝这些原型创建新的对象。 原型模式不单是一种设...原创 2020-07-27 22:18:55 · 7078 阅读 · 24 评论 -
设计模式(6)[JS版]-JavaScript如何实现抽象工厂模式？
目录1 学习目标2 什么是抽象工厂模式？3 抽象工厂模式作用4工厂模式参与者5 代码实现1 学习目标通过本篇文章的学习，你应当掌握以下知识：1 知道什么是抽象工厂模式？2 掌握抽象工厂模式的作用以及什么时候需要使用抽象工厂模式3 掌握使用JS实现抽象工厂模式的代码编写。2 什么是抽象工厂模式？抽象工厂模式提供了一种封装一组具有相同主题的单个工厂而无需指定其具体类的方法。即工厂的工厂；一个将单个但相关/从属工厂分组在一起的工厂，但未指定其具体类别。一个抽象工.原创 2020-07-24 21:28:39 · 4294 阅读 · 22 评论 -
设计模式(5)[JS版]-JavaScript如何实现工厂方法模式？
目录1 什么是工厂方法模式？2工厂方法模式作用3工厂方法模式参与者4 代码实现1 什么是工厂方法模式？在基于类的编程中，工厂方法模式是一种创建模式，该模式使用工厂方法来处理创建对象的问题，而不必指定将要创建的对象的确切类。这是通过调用工厂方法来创建对象的，而不是通过调用构造函数，该工厂方法在接口中指定并由子类实现，或者在基类中实现，并且可以选择由派生类覆盖。它提供了一种将实例化逻辑委托给子类的方法。工厂方法按照客户端的指示创建新对象。在JavaScript中创建对象的一种方法..原创 2020-07-23 20:52:03 · 5814 阅读 · 20 评论 -
设计模式(4)[JS版]-JavaScript如何实现建造者模式？
目录1什么是建造者模式2 建造者模式的作用和注意事项3.代码实现4总结1什么是建造者模式建造者模式（Builder）可以将一个复杂对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式，那么用户只需要指定需要建造的类型就可以得到所需要的东西，而具体建造的过程和细节不需要知道。建造者模式实际，就是一个指挥者，一个建造者和一个用户。用户调用指挥者，指挥者调用具体建造者工作，建造者建造出具体的东西给用户。建造者模式我们在代码中经常用到...原创 2020-07-21 20:59:56 · 5509 阅读 · 37 评论 -
设计模式(3)[JS版]-JavaScript中的构造函数模式是什么？
上篇文章单例模式：https://blog.youkuaiyun.com/qq_23853743/article/details/1074515611什么是构造函数模式构造函数用于创建特定类型的对象一不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概，但是有特殊的构造函数。通过new关键字来调用自定义.原创 2020-07-20 22:23:20 · 4430 阅读 · 20 评论 -
设计模式(2)[JS版]---JavaScript如何实现单例模式？
目录1 什么是单例模式？2单例模式的作用和注意事项3代码实现4案例应用4.1 使用单例模式管理命名空间4.2 使用单例模式为不同命名空间的button按钮添加click事件，并且使他们之间能够互相通信1 什么是单例模式？单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访...原创 2020-07-19 21:58:24 · 2883 阅读 · 17 评论 -
黑客帝国中代码雨如何实现？用 canvas 轻松实现代码雨炫酷效果！
1 效果演示地址：https://www.albertyy.com/2020/7/codeRain.html2 用到的知识点2.1 什么是 canvas标签?<canvas> 是一个HTML5中新增的元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成绘制图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。2.1.1创建一个画布（Canvas）<canvas>实例:<canvas id="...原创 2020-07-18 22:05:34 · 5115 阅读 · 19 评论 -
什么是JavaScript 的闭包？？？
闭包（closure）是Javascript语言的一个难点，闭包是一个函数与周围状态（词法环境）的引用捆绑在一起（封闭）的组合，在JavaScript中，每次创建函数时，都会同时创建闭包。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰，即形成一个不销毁的栈环境。阅读本文前需要了解JS局部变量和全局变量。不清楚的可以看我的上篇文章：https://blog.youkuaiyun.com/qq_23853743/article/details/1069461001 计原创 2020-07-18 16:44:36 · 9287 阅读 · 51 评论 -
搞懂JavaScript全局变量与局部变量，看这篇文章就够了
<script type="text/javascript">var a = "Hello";function test(){var a;console.log(a);a = "World";console.log(a);} //undefined //World var b = "Hello";fun...原创 2020-06-26 11:22:06 · 11225 阅读 · 31 评论 -
你不知道的CSS妙用，纯CSS实现炫酷照片墙
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...原创 2020-06-23 23:02:09 · 2817 阅读 · 0 评论 -
JS中!function(){}()的理解
这种写法，是一种立即执行函数的写法，即IIFE等设计模式。这种函数在函数定义的地方就直接执行了。理解IIFE设计模式的关键是要认识到，在ES6之前，JavaScript仅具有函数作用域（因此缺少块作用域），并通过闭包内部的引用传递值。ES6之后情况已不再如此，因为JavaScript的ES6版本使用let和const关键字实现了块作用域。(function(){})()是匿名函数，主要利用函数内的变量作用域，避免产生全局变量，影响整体页面环境，增加代码的兼容性。(function(){})是一.原创 2020-06-15 10:56:22 · 33647 阅读 · 5 评论