JavaScript
关注
分享
扫一扫
文章平均质量分 50
我是噢噢噢
这个作者很懒，什么都没留下…
展开
-
前端模块化总结
前言以模块化的方式来开发可以提高代码复用率，并且可以更好地拆分组件，降低耦合度，提高可维护性。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。模块化规范1. CommonJS模块的加载：用同步的形式加载文件。对于服务器端，模块文件都在本地磁盘，所以读取非常快，比较适合。对于浏览器端，要从服务器加载模块，但是限于网络原因，更适合异步的形式。module.exports = value //暴露模块exports.xxx = value //暴露模块requ原创 2021-06-15 22:19:04 · 128 阅读 · 0 评论 -
map遍历数组时正确使用 async 与 await
问题背景在处理数据的时候，经常需要拿到一个iXXXd再去XXX表里面查询，但是查询是异步操作。返回的数据中，newMatchInfo一直是空的let newMatchInfo = matchInfo.map(async item => { item.competionName = await acceptableMatchModel.query(`select competitionName from tb_competition where competitionId = '${it原创 2021-06-03 21:30:55 · 3225 阅读 · 2 评论 -
JS深浅拷贝
浅拷贝只能拷贝一层对象常用的浅拷贝方法：1. concat数组const arr = [1,2,3];let newArr = arr.concat();newArr[0] = 5;console.log(arr);console.log(newArr);2.slice数组const arr = [1,2,3];let newArr = arr.slice();newArr[0] = 5;console.log(arr);console.log(newArr);3.原创 2021-05-19 16:11:55 · 86 阅读 · 0 评论 -
Javascript多叉树的递归遍历
背景遍历树形结构的菜单，实现子菜单的添加与删除。要实现的功能：添加子菜单获取到的数据有：整个菜单树形结构的数据以及目前选中的父菜单的key。逻辑：遍历这棵多叉树，找到父结点，拼接好子结点的信息，再push到父结点的children中。删除子菜单获取到的数据有：整个菜单树形结构的数据以及目前选中的菜单的key。逻辑：遍历这棵多叉树，找到选中菜单的父结点，再遍历父结点的子结点找到选中的结点，利用splice删除选中结点。实现方法这两种功能都需要遍历多叉树。这就涉及到大家不愿去触原创 2021-05-13 20:11:48 · 651 阅读 · 0 评论 -
项目总结
这次项目是一个H5移动端开发。做一个本地的公交卡充值APP。采用的是MUI框架。对于这次遇到的问题我想从几个方面做一个总结。规范方面：1.文件夹里面不要有中文不要有中文！因为当时下载切图的时候没有注意，有一个图片的命名有中文字符，我在用Hbuider真机调试的时候界面一直运行不出来。2.对于重复利用的代码写成一个函数。提高可用性。3.全局变量用g开头写在前面，局部变量用_开头4.写在mui.plusready()里面的东西需要真机调试才能起作用，浏览器不行。html :1.问题：我有页面A，原创 2021-01-09 15:04:14 · 122 阅读 · 1 评论 -
关于splice和slice
在写归并排序的时候用到了splice方法截取数组，但是一直得不到想要的效果。数据老是不全，后来才知道是因为我用的splice方法会修改原数组，所以我的原始数据就越截越少==那用什么呢？还有一个slice方法。它也可以截取数组，还可以截取字符串，值得注意的是，这个方法不会改变原数组和原字符串。这让我想起了在JS中字符串作为基本数据类型是存储在栈内存中的，栈内存存储的值大小固定，所以基本数据类型都具有不可变性，这些方法都不能改变原来的值。而是返回一个新的值。所以同理splice不可以操作字符串，会报错，因原创 2020-11-20 16:00:17 · 168 阅读 · 0 评论 -
JS中函数参数的传递
在探究函数参数传递之前，我们需要了解一下JS中的数据类型与内存。JS中分为基本数据类型和引用数据类型。对于基本数据类型，他们的变量名和值是直接存在栈空间中国的。而对于引用数据类型，他们的值存在堆空间，栈空间存变量名，和指向堆空间内存的地址。红宝书中有一句话，JS函数都是按值传参的。对于基本数据类型，很好理解。对于引用类型，我开始一直没绕出来，直到把这么数据类型的存储方式给结合起来之后，才体会到。这里有一个例子： let obj = {}; function changeValue(原创 2020-10-10 10:29:44 · 765 阅读 · 0 评论 -
判断this绑定对象的方法
this的指向问题是JS中比较经典的问题，也很重要。在看了《你不知道的JavaScript》之后，想来总结一下。关于this先要知道几个点this指向是在函数调用时才绑定它的上下文取决于函数调用时的各种条件this的指向取决于函数的调用方式通过函数的调用位置找到对应的绑定规则，确定this的指向（箭头函数单独说）四条绑定规则默认绑定主要像一些独立函数的调用。非严格模式指向全局对象，严格模式指向undefined隐式绑定当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑原创 2020-10-07 16:14:15 · 255 阅读 · 0 评论 -
JS中的变量提升背后的机制
当我执行下面的代码时，你觉得会打印什么？ <script> a = 2; console.log(a); var a; </script>刚开始很多人会觉得是undefined，因为a的声明是在赋值之后，但实际上打印的是2。之前只知道这是JS的变量提升，但是不知道背后的机制。我们习惯将var a = 2;看作是一个声明，但是JS引擎其实并不是这样认为。JS引擎把它看作是两个声明。var a 定义声明 ，a =原创 2020-10-06 21:44:33 · 146 阅读 · 0 评论 -
使用节流函数实现图片懒加载
在开始之前，我们有必要知道什么是图片懒加载，什么又是节流函数？图片懒加载当我们访问一个图片很多的页面的时候，如果一次性加载完所有的图片，那响应速度可想而知。用户体验非常不好。并且一次性向服务器发送大量请求，可能会导致页面卡顿崩溃等。所以我们需要“懒”一点。怎么懒呢？就是监听页面滚动事件，根据页面滚动，我们再加载图片。主要思路如下：img标签的src属性指向一同一张小图片或者空白设置一个新的属性new-src指向真正的图片路径载入页面时将可视区的图片的src换成new-src监听滚动事件/原创 2020-09-24 16:31:01 · 276 阅读 · 0 评论 -
js中的事件委托
要想了解事件委托，就要先了解事件冒泡。那么事件冒泡是什么？事件冒泡是指JS中当触发某些具有冒泡性质的事件时，首先在触发元素寻找是否有相应的注册事件，如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应，这就是事件冒泡那事件委托是什么？事件委托利用事件冒泡，给父节点设置事件监听，然后点击子节点，通过冒泡原理冒泡到父节点，父节点上又绑定了事件，所以事件就被触发了好处是什么？减少DOM操作，提高页面的整体运行性能例子：我们先通过文字来理解。假如说一个公司有10个人（相当于原创 2020-08-02 23:10:39 · 104 阅读 · 0 评论 -
用innerHTML修改input标签的文本信息无效
Input标签是单标签，没有结束符，它所显示的文本信息放在value里面，如果我们直接改input标签的innerHTML/innerText就没有效果。所以我们通过修改value值来修改显示的文本信息原创 2020-07-21 17:01:12 · 938 阅读 · 0 评论 -
HTML简单计算器实现
这款计算器的主要功能有加减乘除，平方开方，清零，回退，连续加减乘除等功能。成品图如下：功能模块图如下：整体用一个table标签创建一个五行六列的表格，这里上HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2020-07-02 10:19:02 · 4557 阅读 · 0 评论 -
简单动画函数的封装 -逐步优化
封装好一个简单的动画函数后就可以直接调用，非常方便，在制作轮播图中也会应用。实现原理通过定时器不断的移动盒子位置具体步骤获取元素当前位置，用offsetLeft让盒子在当前位置移动一个距离用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位才可以使用element.style.left一个简单的动画函数封装 //简单动画函数封装obj目标对象 target目标位置 function animate(obj, target) {原创 2020-06-03 16:33:24 · 232 阅读 · 0 评论 -
JavaScript中的函数传参问题
访问变量的时候可以按值和按引用，而ECMAScript中的所有函数的参数只能按值传递。当向参数传递基本类型的值时function addTen(num){ num += 10; return num;}var number = 20;var result = addTen(number);alert(number);//20alert(result);//30被传递的number的值会被复制给函数的局部变量num，函数内部num + 10,但是这一变化并不会影响函数外部的numbe原创 2020-05-26 09:58:42 · 264 阅读 · 0 评论