CjBkl-CSDN博客

原创 JavaScript 实现选择排序

选择排序的基本思想为每一趟从待排序的数据元素中选择最小（或最大）的一个元素作为首元素，直到所有元素排完为止。在算法实现时，每一趟确定最小元素的时候会通过不断地比较交换来使得首位置为当前最小，交换是个比较耗时的操作。其实我们很容易发现，在还未完全确定当前最小元素之前，这些交换都是无意义的。我们可以通过设置一个变量 min，每一次比较仅存储较小元素的数组下标，当轮循环结束之后，那这个变量存储的就是当前最小元素的下标，此时再执行交换操作即可。代码实现：function selectSort(ar

2021-07-18 11:43:39 294

原创 JavaScript 实现冒泡排序

冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样，每一趟会将最小或最大的元素“浮”到顶端，最终达到完全有序。代码实现： function bubbleSort(arr) { if (!Array.isArray(arr) || arr.length <= 1) return; let lastIndex = arr.length - 1; while (lastIndex > 0) { // 当最后一个交换的元

2021-07-18 11:16:44 223 1

原创 JavaScript 如何查找一篇英文文章中出现频率最高的单词？

直接上代码function findMostWord(article) { // 合法性判断 if (!article) return; // 参数处理 article = article.trim().toLowerCase(); let wordList = article.match(/[a-z]+/g), visited = [], maxNum = 0, maxWord = ""; article = .

2021-07-18 10:47:05 687 1

原创 js 中倒计时的纠偏实现？

在前端实现中我们一般通过 setTimeout 和 setInterval 方法来实现一个倒计时效果。但是使用这些方法会存在时间偏差的问题，这是由于 js 的程序执行机制造成的，setTimeout 和setInterval 的作用是隔一段时间将回调事件加入到事件队列中，因此事件并不是立即执行的，它会等到当前执行栈为空的时候再取出事件执行，因此事件等待执行的时间就是造成误差的原因。一般解决倒计时中的误差的有这样两种办法：（1）第一种是通过前端定时向服务器发送请求获取最新的时间差，以此来校准倒计时时

2021-07-18 10:27:31 474

原创 JavaScript 中 Math.ceil 和 Math.floor

Math.ceil() === 向上取整，函数返回一个大于或等于给定数字的最小整数。 Math.floor() === 向下取整，函数返回一个小于或等于给定数字的最大整数。

2021-07-18 10:23:28 418

原创 JavaScript 使用闭包实现每隔一秒打印 1,2,3,4

// 使用闭包实现 for (var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.log(i); }, i * 1000); })(i);} // 使用 let 块级作用域 for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, .

2021-07-18 10:20:06 1083 1

原创 vue 中 key 值的作用？

vue 中 key 值的作用可以分为两种情况来考虑。第一种情况是 v-if 中使用 key。由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此当我们使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的 input 元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。因此我们可以通过使用 key 来唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。这个时候 key 的作用是

2021-07-12 23:03:19 2431 1

原创 Vue 中 vue-router的导航钩子函数

（1）全局的钩子函数 beforeEach 和 afterEach ，beforeEach 有三个参数，to 代表要进入的路由对象，from 代表离开的路由对象。next 是一个必须要执行的函数，如果不传参数，那就执行下一个钩子函数，如果传入 false，则终止跳转，如果传入一个路径，则导航到对应的路由，如果传入 error ，则导航终止，error 传入错误的监听函数。（2）单个路由独享的钩子函数 beforeEnter，它是在路由配置上直接进行定义的。（3）组件内的导航钩子主要有这三种：

2021-07-11 17:32:57 934

原创小程序云开发如何实现随机获取数据库里面的数据？

直接上代码const result = db.aggregate().sample({ size: 5 }).match({ is_show: true }).end()// size 每次随机的条数// is_show 数据过滤条件，不需要的话直接match 去掉就行// 具体方法说明可以参考官网说明（完结）下面是我的小程序，欢迎扫码支持...

2021-07-11 17:23:14 2859

原创小程序如何实现抖音视频效果？

1、wxml部分代码，主要是利用swiper 标签滑动切换，事件处理，具体参数说明可以去小程序官网文档看。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html <swiper vertical="{{true}}" current="{{current}}" circular="{{false}}" bindchange="bindchange" easi

2021-07-11 17:01:11 1215

原创小程序如何实现满屏播放视频效果？

在小程序开发文档中，有个小程序页面配置，navigationStyle 有两个值，default默认样式custom自定义导航栏，只保留右上角胶囊按钮。可以参考文档具体说明https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html这个最好只在一级页面设置，如果当前是二级页面的话，设置满屏左上角就没有返回键了，这个要注意下。（完结）下面是我自己的小程序，不过我放在二级页面里面..

2021-07-11 16:05:38 2034

原创小程序一页显示多个视频video，细节交互优化处理

1、页面部分代码 <view class="new-list" wx:for="{{videoList}}" wx:for-index="i" wx:for-item="item" wx:key="i"> <view class="video-wrap"> <!-- 视频展示海报，先不去显示video ,通过点击海报，显示当前的video标签，播放当前的视频，这样做的目的是节流，一开始加载很多video 标签的话会加载很慢，有点卡顿，所

2021-07-11 15:56:24 1477 1

原创小程序中如何渲染html标签文本？

小程序中通过<rich-text nodes="{{Html}}"></rich-text> 可以渲染出html 格式的文本内容Html是标签字符串，具体可以参考文档https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html（完结）我的小程序里面有实现，可以看看...

2021-07-11 15:10:33 598

原创 CSS中zoom:1 的清除浮动原理?

清除浮动，触发 hasLayout； zoom 属性是 IE 浏览器的专有属性，它可以设置或检索对象的缩放比例。解决 ie 下比较奇葩的 bug。譬如外边距（margin）的重叠，浮动清除，触发 ie 的 haslayout 属性等。来龙去脉大概如下：当设置了 zoom 的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变 zoom 值时其实也会发生重新渲染，运用这个原理，也就解决了 ie 下子元素浮动时候父元素不随着自动扩大的问题。z

2021-07-10 16:12:41 438

原创使用 clear 属性清除浮动的原理？

使用 clear 属性清除浮动，其语法如下： clear:none|left|right|both 如果单看字面意思，clear:left 应该是“清除左浮动”，clear:right 应该是“清除右浮动”的意思，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。官方对 clear 属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”，我们对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。还需要注意的一点是 clear 属

2021-07-10 16:07:31 2824

原创 CSS中 margin 重叠问题的理解

相关知识点：块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”。产生折叠的必备条件：margin 必须是邻接的!而根据 w3c 规范，两个 margin 是邻接的必须满足以下条件： •必须是处于常规文档流（非 float 和绝对定位）的块级盒子，并且处于同一个 BFC 当中。 •没有线盒，没有空隙，没有 padding 和 border 将他们分隔开 •都属于垂直方向上相邻的外边距，可以

2021-07-10 15:59:54 570

原创 ‘display‘、‘position‘和‘float‘的相互关系？

（1）首先我们判断 display 属性是否为 none，如果为 none，则 position 和 float 属性的值不影响元素最后的表现。（2）然后判断 position 的值是否为 absolute 或者 fixed，如果是，则 float 属性失效，并且display 的值应该被设置为 table 或者 block，具体转换需要看初始转换值。（3）如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 di

2021-07-10 15:26:04 179

原创简单介绍使用图片 base64 编码的优点和缺点。

base64 编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url 属性。使用 base64 的优点是：（1）减少一个图片的 HTTP 请求使用 base64 的缺点是：（1）根据 base64 的编码原理，编码后的大小会比原文件大小大 1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。（2）使

2021-07-10 15:21:56 1174

原创＜img＞的 title 和 alt 有什么区别？

title 通常当鼠标滑动到元素上的时候显示alt 是 <img> 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。...

2021-06-30 21:43:03 427

原创实现不使用 border 画出 1 px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

2021-06-30 21:41:31 934

原创 Vue 中 computed 和 watch 的差异？

（1）computed 是计算一个新的属性，并将该属性挂载到 Vue 实例上，而 watch 是监听已经存在且已挂载到 Vue 实例上的数据，所以用 watch 同样可以监听 computed 计算属性的变化。（2）computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值。而 watch 则是当数据发生变化便会调用执行函数。（3）从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响

2021-06-30 21:32:17 87

原创快速了解 Vue 组件间的参数传递方式？

（1）父子组件间通信第一种方法是子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。第二种是通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。第三种是使用 provider/inject，在父组件中通过 provider 提供变量，在子组件中通过inject 来将变量注入到组件中。不论子组件有多深，只

2021-06-30 21:28:45 368

原创快速了解 Vue 的各个生命周期函数

Vue 一共有 8 个生命阶段，分别是创建前、创建后、加载前、加载后、更新前、更新后、销毁前和销毁后，每个阶段对应了一个生命周期的钩子函数。（1）beforeCreate 钩子函数，在实例初始化之后，在数据监听和事件配置之前触发。因此在这个事件中我们是获取不到 data 数据的。（2）created 钩子函数，在实例创建完成后触发，此时可以访问 data、methods 等属性。但这个时候组件还没有被挂载到页面中去，所以这个时候访问不到 $el 属性。一般我们可以在这

2021-06-29 22:40:06 623

原创 Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 label 标签上的属性for定义的名字要和input 标签里面的id一样，两个才能绑定到一起。<label for="label-for"> Number: </label> <input type=“text“ name="Name" id="label-for"/>...

2021-06-29 21:51:48 1386

原创 iframe 有那些优缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。优点：（1）程序调入静态页面比较方便;（2）页面和程序分离;缺点:（1） iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况。（2）搜索引擎的检索程序无法解读这种页面，不利于网页的

2021-06-29 21:46:29 612

原创 cookies，sessionStorage 和 localStorage 的区别

SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。存储大小：cookie 数据大小不能超过 4 k 。sessionS

2021-06-29 21:32:02 224

空空如也

空空如也