♛琉璃-CSDN博客

原创 Vue3+Vite+TS：多入口项目搭建（简单版）

vue3+vite+ts 多入口demo

2022-09-01 16:58:26 7023 1

原创 ajax简单封装

(function () { function ajax(options) { //new ajax() //死递归 return new init(options); } ajax.prototype = { constructor: ajax, send: function () { //this-->当前的实例 let { met

2021-01-08 20:01:14 189

Yapi 由 YMFE开源，旨在为开发、产品、测试人员提供更优雅的接口管理服务，可以帮助开发者轻松创建、发布、维护API。官方文档：https://hellosean1025.github.io/yapi/devops/index.html环境要求nodejs（7.6+)mongodb（2.6+）环境准备node如果yapi部署过程中出现报错:Accessing non-existent property 'count' of module exports inside circula

2020-12-30 16:04:09 505

原创 jQuery源码-数据类型检测

(function () { "use strict"; var class2type = {}; var getProto = Object.getPrototypeOf; var toString = class2type.toString; //->Object.prototype.toString var hasOwn = class2type.hasOwnProperty; //->Object.prototype.hasOwnProperty

2020-12-28 18:54:06 178

原创 js 手撕call源码

//不考虑兼容，若考虑兼容可以使用arguments，同时可以通过[].slice.call(arguments)将其转化为数组Function.prototype.call = function call(context, ...params) { // this(self)->fn context->obj params->[10,20] //如果不传参或者传入null/undefined，非严格模式下为window（不考虑严格模式） context ==

2020-12-28 15:42:22 191 1

原创 js实现鼠标拖拽效果

初步<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{

2020-12-22 20:15:12 184

原创 js实现树形菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ul{ list-style: none; } .box { wid..

2020-12-22 20:10:25 589

原创 js实现商品展示放大镜效果

原理：左边一张小图，右边是一张大图（初始隐藏），当鼠标移入小图时出现放大镜（遮罩模块），同时大图（溢出隐藏）出现。移动鼠标时放大镜的移动距离与大图移动距离成比例，方向相反。放大镜与大图之间比例关系为：放大镜的left值/小图盒子的宽度=大图的left/大图盒子的宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"

2020-12-22 19:38:01 290

原创数组常用方法的简单封装

首先回顾有关原型的三句话：把每个函数当做对象时，有一个属性prototype，其值是一个对象；每个prototype都有一个constructor属性，指向prototype属性所在构造函数；每个对象都有一个__proto__属性，指向所属类的原型。数组基本操作方法以下方法均改变原数组，需要操作数组的 length 属性Push返回值：新数组的长度思路：数组的长度等于 arguments[i]Array.prototype.myPush = function () { f

2020-12-21 19:51:08 198

原创简述jQuery及其应用

jQuery是一款用原生js封装的操作DOM的类库。他里面封装了大量的方法，基于这些方法我们可以快速的进行DOM操作和项目的开发。API文档 http://jquery.cuishifeng.cn/。jQuery的三大版本jquery-1.11.3.min.js第一代版本的特点：大而全，方法是兼容所有浏览器的（包括IE6），主要应用于需要考虑兼容的PC端项目中v2.xxx 第二代版本主要是为移动端的开发准备的，不再兼容低版本浏览器（例如：IE8及以下），配合出现的还有 jQuery mobil

2020-12-20 22:32:54 193

原创柯理化函数之简单封装call/bind方法

柯理化函数编程思想是一种预先处理的思想。主要是利用闭包的保存、保护的功能，保存私有上下文中的一些信息，供其下级上下文中调取使用，也就是我们把一些信息先预先保存下来，后期让其下级上下文使用。常见使用场景：大函数执行返回小函数。闭包当一个函数执行时，形成了一个私有作用域，保护里面的私有变量不受外界的干扰，这种机制就叫做闭包。大部分人口中的闭包是当一个函数执行的时候，里面有一个引用数据类型被外界占用了，形成了不销毁作用域。一说闭包是指有权访问另一个函数作用域中的变量的函数。而创建闭包的常见方式，就是在一个函

2020-12-20 21:54:09 132

原创 jQuery 实现“购物车计算器”

html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body, ul, li { margin: 0; padding: 0; list-style: none; ..

2020-12-20 21:33:49 397

原创 js 实现瀑布流

瀑布流又称瀑布流式布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

2020-12-20 19:59:57 243

原创 js 实现图片懒加载（延迟加载）

图片懒加载（图片延迟加载）：当图片不在浏览器可视区域中时（即我们此时看不见图片），我们可以先不请求图片资源，当图片出现在浏览器可视区域中时再加载资源。实现思路1.结构中，我们用一个盒子包裹着图片（在图片不展示的时候，可以占据着这个位置，并且设置默认的背景图或者背景颜色）2.最开始，img的src中不设置任何的图片地址，把图片的真实地址设置给自定义属性true-img（最开始不展示图片:可以让图片隐藏）3.当浏览器窗口完全展示到图片位置的时候，我们再去加载真实图片，并且让其显示出来（第一屏幕中的图片

2020-12-20 19:38:18 233

原创 jQuery部分源码剖析

JS代码执行的环境浏览器：PC端、移动端「webkit、gecko、trident、blink…」Hybrid混合APP开发：把H5页面嵌入都native app（IOS/安卓）的webview中「webkit」-----windownode：一个基于v8引擎，渲染和解析JS的环境----没有window，全局对象global小程序…jQuery部分源码剖析//(function(){}()) 等价 (function(){})()//jQuery源码中自执

2020-12-19 21:13:22 429 2

原创 js实现左右轮播图

js实现左右轮播图，实现效果有自动播放、点击分页器切换和点击左右按钮切换等。原理将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。实现效果多张图片自动轮换展示，对应分页器小圆点高亮显示图片无缝切换（图片列表中第一张和最后一张图片一致）鼠标滑入/滑出停止/开启图片轮换展示点击前进/后退按钮查看当前图片前一张/后一张图片点击分页器小圆点切换对应图片实现思路获取操作对象请求数据渲染数据封装函数autoMove，将其传入定时器，实现.

2020-12-19 13:07:35 2397 1

原创 js盒子模型案例之回到顶部

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #back{ position: f.

2020-12-12 20:16:04 263

原创求数组最大值的方法

Math.max()注意：Math.max()传入的参数是离散的数字，故而需要使用展开运算符...将数组展开。var ary=[1,2,3];var res=Math.max(...ary);console.log(res);手动封装getMax()方法function getMax(ary){ var max=ary[0]; for(var i=1;i<ary.length;i++){ if(max<ary[i]){ max

2020-12-05 19:37:11 443

原创 JavaScript 求平均数的方法（实参个数不确定）

求平均数的方法。要求：传递的参数的个数不确定去掉最高分和最低分方法一function average(){ var max=Math.max(...arguments); var min=Math.min(...arguments); var sum=0; for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; } return (sum-max-min)/(argum

2020-12-05 19:35:56 6976

原创逻辑运算符与、或、非（ && 、|| 、！）及短路特性

逻辑运算符用于判定变量或值之间的逻辑。或||运算符两边有一边成立即为true 。//第一个值如果是true，那a就是第一个值，如果第一个值是false，就是第二个值。var a = 1 || 2;//1var a = null || 1;//1与&&运算符两边有一边不成立即为false 。//如果第一个值为假，那a的值就是第一个，如果第一个值为真，那a的值就是第二个值。var a = null && 1;//nullvar a = 1 &&amp

2020-12-05 19:33:31 2128

原创把类数组转为数组的方法

手动封装 toArray() 方法function toArray(likeArray){ var newAry=[]; for(var i=0;i<likeArray.length;i++){ newAry.push(likeArray[i]); } /* for (let key in likeArray) { newAry.push(likeArray[key]); } */ return newAry;}fu

2020-12-05 19:31:40 140

原创 js实现简单“商品总价计算”

实现思路一、搭建html结构，凡是需要操作数值的地方都用一个小盒子划分开（商品选中数量、单价、小计（已选同类商品价值总和）、商品总数、已选商品价值总和、选中商品中最高单价）二、给每一个加/减操作button绑定一个onclick事件1、获取当前button的父节点，用于快速找到其他需要操作的节点2、点击button同类商品选中数量的加/减操作：1）获取到存放商品数量的元素2）获取到button属性flag，根据flag属性值判断进行何种运算3）运算前保存元素中已有值oldNum，并创建变量存.

2020-12-05 19:20:51 8098

原创 JS 简单实现商品排序

具体思路请求数据（ajax四部曲）1、创建ajax实例 var xhr=new XMLHttpRequest()2、采取xx方法打开请求的xx地址(默认异步) xhr.open("get","data/data.json")3、onreadystatechange xhr.onreadystatechange=function(){ //xhr.status 符合以2开头的三位数 if(xhr.readyState==4&&/^2\d{2}/.

2020-12-05 19:10:53 1729

原创 js 原型继承

在JavaScript中，继承的主要思路就是利用原型链，而实现继承的方式有很多，本文主要介绍的继承方式为：原型链继承、中间类继承、借用构造函数、寄生组合继承。原型链继承基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道每个构造函数都有一个原型对象prototype，原型对象都包含一个指向构造函数的指针constructor，而实例都包含一个指向原型对象的内部指针（一些浏览器中为__proto__）。那么，如果我们让原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型

2020-12-04 09:41:48 84

原创 js 中的 this 指向

面向对象语言中 this 表示当前对象的一个引用。不过在 JavaScript 中 this的指向不是固定不变的，它会随着执行环境的改变而改变。与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。对于函数而言，this指向的是函数执行的主体，也就是说是谁把函数执行的，那么

2020-11-27 20:01:27 101

原创简单理解js的垃圾回收机制

在js引擎中对变量的存储主要有两种位置，堆内存和栈内存。栈内存提供js的运行环境（window全局作用域、函数执行的私有作用域），存储基本数据类型的值。堆内存存储引用数据类型的值，其中对象存储的是属性—值对（键值对），函数存储的是字符串。我们每次给变量存值或者执行函数的时候都会占用内存空间，如果一直这样下去，日积月累，电脑总会装不下的，所以我们需要释放内存空间。而JavaScript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存，这样我们无需关心内存使用问题，可以专注代码编写。堆内存释

2020-11-27 18:33:17 196

空空如也

空空如也