l1621834733-CSDN博客

原创 swiper滑动出当前window问题记录

h5页面使用swiper库实现拖动幻灯片功能，页面是iframe内嵌至父窗口，鼠标点击卡片拖拽滑动时，若鼠标滑出iframe窗口，会出现卡片卡顿住，此时松开鼠标，无论鼠标是否在iframe窗口内，卡片都不会复位，需要重新点击iframe窗口才会复位。猜想出现这个问题大概率是swiper没有对多document下的边界做处理，github上搜了下发现有人提出了相同问题。

2024-01-03 12:57:02 375 1

我们知道，早期为了让人能够拜托01组成的完全二进制的机器语言，人们发明了汇编语言，汇编语言的每一个指令都对应着二进制机器代码的一个指令，但是由于是基于英文缩写的字母和十六进制等组成的语言，人们已经能理解代码的含义了。链接分为静态链接和动态链接，静态链接是将程序里依赖到的库文件、其他源文件的代码直接搬运到用到的程序中，而动态链接是函数的代码被放到称作是动态链接库或共享对象的某个目标文件中。链接程序此时所作的只是在最终的可执行程序中记录下共享对象的名字以及其它少量的登记信息。注意，这不是必须的步骤。

2023-04-02 20:30:37 116

原创前后端交互--websocket

websocket和http一样，是应用层协议，只不过与http区别的是，http是无状态的，而websocket是全双工有状态的长连接，客户端服务端一旦建立连接便可以持续双向通信。

2023-02-17 00:43:11 678

原创前端开发设计模式--发布订阅

在实际项目中，可以定义一个全局的发布订阅对象，用于处理所有订阅发布事件，这样的好处是便于管理以及节省变量空间，最基本的发布订阅需要三个方法： 1、发布 2、订阅 3、取消订阅。发布订阅在前端开发中随处可见，最简单的例子就是给元素绑定监听事件，绑定即为订阅，在适当的时机触发就是发布的一个过程。

2022-11-06 20:55:52 238

原创算法--回溯

回溯算法回溯算法是一种暴力枚举算法，效率并不高，但是一些特定场景下通过多层循环暴力枚举也很难实现，这个时候就需要回溯算法回溯与树能够通过回溯算法解出来的数据都能抽象为多叉树核心–回溯回溯算法的核心就是回溯，一旦枚举的项不符合条件或者到达边界就到了回退的时候终止条件必须设置终止条件，否则会无线递归陷入死循环回溯经典应用排列组合子项棋盘问题（N皇后、解数独）...

2021-09-01 13:11:28 81

原创 ES6自定义class Promise

自定义promise自定义promise注意点this的指向问题，自定义promise时需要时刻注意this的指向，基本上我们都要保证this指向实例执行器函数executor是同步的，一旦创建实例就会执行一遍执行器函数then：如果实例是pending状态则保存回调，后续状态改变再异步调用，因此要创建保存回调的数组，数组里存的是回调对象then：如果实例不是pending状态则直接异步调用保存回调时要考虑后续状态改变了怎么修改status要注意onResolve和onReject回调的初始

2021-07-26 22:18:45 110

原创 2021-07-21

自定义promise(function (window) { const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function Promise(excutor) { const self = this;//promise的实例 self.status = PENDING; self.data = undefin

2021-07-21 02:21:59 127

原创 Vue源码解析--数据代理

const vm = new MVVM({ el: "#test", data: { name: '张三2' } })//先new一个vue配置对象/*数据代理其实就是利用了Object.defineProperty方法来给new出来的一个vue对象添加一个和vue中data里相同属性名的属性，所以vue中访问data里的属性，不需要this.data.name 只需要this.name 就可以访问到，这是因为，我们在创建这个vue实例的时候，就..

2021-06-21 10:05:10 114

原创 2021-03-13

基于Less的自定义栅格系统的实现bootstrap的栅格系统主要是用于移动端的开发，他能使我们非常高效率地进行响应式布局，栅格系统原理是：每一行分成12列，每一列宽度占容器的十二分之一，在布局时，我们只要规定在各种分辨率之下（大屏、中屏、小屏等）该div所占的列数，就能很方便地进行布局。由于每一列之间具有槽宽，在列的最外层我们需要套一个行元素来消除槽宽具体实现如下：设置大、中、小屏时屏幕宽度以及最外层容器container宽度变量声明行设置列设置媒体查询实现完整自定义栅格系统这里我们

2021-03-13 10:10:56 60

原创轮播图的实现思路

在使用原生js和框架作出轮播图后，我对轮播图的整体构造和功能有了一个较为具体的掌握，以下是我总结出来的轮播构造：总体的布局轮播的一般结构是在外部使用一个容器div,将overflow设置为hidden，接下来是在div里套一个列表ul，并且ul的长度是（全部轮播图+2）*每张图片的长度，这样才能够实现循环轮播，如图所示：在播放到第二张图1时让轮播图瞬间跳变到第一张图1，这样能实现无缝衔接，同理播放第一张图5也是如此。这样设置完之后，我们就只能看到一张图，其余都被隐藏起来了，我们通过给ul设置定位，

2020-11-15 16:57:28 3403

原创 jquery小项目--轮播图

jquery小项目–轮播图比起原生js，使用jquery制作轮播图更加简洁高效，能够节省出大约一百行代码，以下是代码，附带有详细注释，需要引入jquery库，网上很容易找<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scala

2020-11-15 16:36:35 166

原创原生js实现轮播图

一、写入网页基本结构body:网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化css:初始化：包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化css设置：根据图片数与图片宽度设置轮播图宽度二、设置js逻辑需要完成的功能有：1、鼠标移入轮播图逐渐出现左右浮动块2、点击浮动块切换图片3、点击小圆点切换图片4、切换图片同时切换小圆点5、自动播放6、鼠标移入轮播图自动播

2020-10-25 14:18:06 212

原创 js基础--原型对象与原型对象链

一、原型对象使用构造函数构造出实例对象的时候，会伴随着一个原型对象，这个原型对象与构造函数是同时出现的，原型对象的一个重要作用是存放同一个构造函数构造出的不同实例化对象的相同属性，就是说，我们构造出几个“人”，他们身高体重不同，但是毛发颜色相同，这个时候我们就不必在在构造函数里添加毛发颜色这一属性，再逐个添加相同的颜色值，而是可以将这一属性添加到构造函数的原型对象的属性里，这样我们在构造实例对象的时候就不用设置毛发颜色，而是通过原型对象来找出毛发颜色，具体过程如下：<script>

2020-09-29 23:53:44 265

原创 js基础--this

this在js中的重要性不言而喻，许多函数都得通过this来指引，那么this在js中具体是起着什么作用呢？this的本质是一个对象，代表着调用这个函数或者方法的对象（执行者）;在函数当中，函数也可以叫做是window对象的方法，this永远代表window在事件当中，回调函数当中的this，代表的是事件对象在对象的方法（通常为对象里的函数）当中，this代表的是这个对象在构造函数当中，代表的是实例化出来的对象！！这一点许多人都会忽略！...

2020-09-29 23:21:18 79

原创前端学习day 10--小米商城首页的制作

经过一段时间学习后，我已经能通过css和html制作一些简单的静态网页，以下是我简单制作的小米商城的首页，可能有点粗糙，相信以后能更加完善。一、项目搭建我使用的编辑器是vscode，刚开始是用webstorm但是不知道为什么css修改之后浏览器打开样式却没变，最终还是决定用vscode我创建了mi文件夹用来存放项目，mi.html、mi.css分别用来写该网页的结构和样式，fontawesome是我从网上下载的图标字体库，可以直接在项目里使用图标字体，img用来存放一些背景图片，base.css用来

2020-09-06 22:36:26 2676 3

l1621834733的博客