- 博客(21)
- 收藏
- 关注
RSS订阅原创 web components 前端组件化趋势？
Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装的HTML 标记，使用时不用加载任何额外的模块。自定义组件和小部件基于 Web Components 标准构建，可跨现代浏览器工作，并可与任何支持 HTML 的 JavaScript 库或框架一起使用
2024-02-24 15:49:47
1163
原创 tab吸顶问题总结
前言最近由于经手的任务遇到过几回tab吸顶的问题，其实tab吸顶实现并不难，但是tab吸顶常常是与选项卡切换一起出现的。本人较菜并且记忆力不好，所以记录下，哈哈哈！一、tab吸顶的实现方式tab吸顶可以通过几种方式实现，实现大体分为两种：1.css实现 2.js监听scroll实现；但是实际开发中使用的就是一种那就是js的实现方式。但不管怎么说，该说得说，不必要（其实也挺有必要）说的也得说说1.position:sticky实现吸顶(不推荐)sticky其实就是fixed与relative这两
2021-12-14 11:17:15
3126
1
原创 js-各种for循环分析
在我们开发过中使用最多的无外乎就是三大结构：顺序结构、选择结构、循环结构。在JavaScript中的循环结构多种多样，如最常见的for循坏、forEach循环、for…in循环、for…of循环；当然还有while等其它循环，但是此文只讨论各种for循环，分析它们的优势及局限性。1. 普通for循环for循环是最普通也是使用频率比较高的let array = [3,5,2,1]for (let i = 0; i < array.length; i++) { console.log(ar
2021-08-17 09:56:49
281
原创 vue上线前项目优化
1.项目优化策略生成打包报告启用第三方cdnelement-ui按需加载路由懒加载首页内容定制2.具体优化2.1 进度条-nprogressyarn add nprogressimport NProgress from 'nprogress'// 进度条开始，一般放在请求拦截器中NProgress.start()// 进度条结束，放在响应拦截器中NProgress.done()2.2 移除consoleyarn add ‘babel-plugin-transfo
2021-07-23 14:20:40
188
原创 mongoose通过聚合管道查询
$project筛选字段//与order.find({},{'trade_no': 1, 'all_price': 1})类似，但是更灵活//只查询trade_no与all_priceorder.aggregate([ { $project: {trade_no: 1, all_price: 1} }])$match同样是筛选，但是粒度更细，类似mysql where语句//只查询trade_no与all_price,并且all_price不小于80//
2021-06-01 17:38:11
911
原创 mongoose常用查询语句
模糊查询//查询name含有‘张’的数据user.find({'name': /张/})//查询name以‘张’开头的数据user.find({'name':/^张/})//使用$regexuser.find({'name': {$regex: 'xx'}})查询返回指定字段//查询并且只返回name,age//_docuser.find({}, {name: 1, age: 1}).then(item => item._doc)排序//age排序,1表示升序，-1表示
2021-06-01 17:36:25
896
原创 js-call、apply、bind
我们知道this的指向存在四种情况，其中有一种就是通过call、apply、bind改变this指向，并且这是面试中常考问题，接下来我们深入理解它们。1. call、apply、bind基本介绍这三个方法都挂载在 Function 构造函数的原型上，所以必须通过函数调用，我们可以通过 Function.prototype.call 查看打印的是 [Function: call]语法：func.call(thisArg, arg1, arg2, ...) // thisArg后可以接任意多个参数fu
2021-05-12 19:48:11
85
原创 js-性能优化之列表提前加载
前言在移动端加载新的数据一般是通过触底后触发事件并在该事件中进行获取新数据的操作，这种操作逻辑是使用最为广泛的。但是这种操作只有用户真正触底了，才会触发，并且之后才会发送获取新数据的请求，而在获取新数据这一过程中，用户需要等待，会降低用户体验，而这就是我们需要优化的地方，因此我们在这里使用预加载，为用户提前加载数据。当然用预加载技术不能盲目地提前为用户加载将来的数据，盲目加载数据只会造成服务器压力增大。因此我们需要预测用户的行为，而预测用户行为需要标准。例如在实际列表预加载情况中，我们可以根据用户下滑列
2021-05-04 20:50:59
873
原创 js-Promise对象理解与使用
1.什么是PromisePromise是异步编程的一种解决方案。相比于回调函数更加强大、更加合理。Promise对象的两个特点：1.Promise对象状态不受外界影响 2.状态一旦改变就不会再变Promise对象的三种状态：1.Pending (进行中) 2.Fulfilled (已成功) 3.Rejected (已失败)。Pending只会变为Fulfilled和Rejected中的其中一种，并且只要变为其中一种状态就会凝固，不会再发生改变，这时就成为Resolved (已定型)缺点：1. 无法
2021-05-03 19:53:42
331
原创 js-各种for循环分析
在我们开发过中使用最多的无外乎就是三大结构：顺序结构、选择结构、循环结构。在JavaScript中的循环结构多种多样，如最常见的for循坏、forEach循环、for…in循环、for…of循环；当然还有while等其它循环，但是此文只讨论各种for循环，分析它们的优势及局限性。1. 普通for循环for循环是最普通也是使用频率比较高的let array = [3,5,2,1]for (let i = 0; i < array.length; i++) { console.log(ar
2021-04-28 16:08:44
273
原创 js-什么是闭包
什么是闭包在函数被调用时会为这个函数创建一个执行上下文，该上下文中有一个活动对象，对象中包含函数中的变量；并创建一个作用域链，该作用域链的第一个指针指向该函数的活动对象，之后的指针指向外层函数活动对象，以此，直到指向全局对象的变量对象。当函数执行结束时，该函数的活动对象会被销毁，但是对于闭包是不一样的。闭包是指哪些引用另一个函数作用域中变量的函数，通常闭包通过嵌套函数实现。具体解释起来就是嵌套函数中，外部函数返回一个内部函数，但是由于内部函数引用了外部函数的变量，所以导致即使外部函数执行结束后，依然在内
2021-04-28 09:08:16
231
原创 js-事件及事件委托
1. 事件当用户浏览网页时，存在许许多多与网页交互的操作。例如按钮的点击、屏幕的滑动、鼠标的移动等等，通过这些交互完成某些操作，达到某种效果。我们可以将这些交互称之为事件。2. 事件冒泡事件冒泡是指事件在某个元素上触发后一直向上传播（父元素），一直传播到document。如果向上冒泡的过程中遇到相同的事件，则触发。例如下面的例子：<body> <div id="myDiv"> <ul> <li id="myLi
2021-04-24 14:43:04
210
原创 js-性能优化之节流
不管在pc端还是移动端，都存在一种非常普遍的交互方式–滚动屏幕。以移动端为例，当用户滚动屏幕的时候，触发滚动的回调函数可以用于监听滚动的距离，提前加载下一页数据。一般情况下只要屏幕滚动了滚动事件就会一直触发，这会大大减少页面的性能。因此我们可以通过节流函数来稀释滚动事件的执行。**节流：**指连续触发事件但是在 n 秒钟内只执行一次函数。 节流会稀释函数的执行频率。实际上节流与防抖的效果是类似的。**场景：**屏幕滚动、鼠标移动、input输入、连续点击按钮等其他场景。<!DOCTYPE htm
2021-04-22 17:23:39
187
原创 js-性能优化之防抖
在移动端开发中，存在这样一种交互方式–下拉刷新，下拉刷新一般用于刷新当前页，从而获取最新的数据。但是在实际使用过程中，用户习惯快速重复的进行下拉的操作。如果用户每进行一次下拉操作都发起请求，这无疑会非常浪费带宽，而且许多刷新是无效刷新，即返回的数据与当前原有的数据相同。这种场景是可以进行优化的，通过使用防抖函数，在用户第一次操作下拉刷新的时候触发，之后的n秒（1秒或2秒）不再触发下拉刷新的回调函数。**什么是防抖：**所谓防抖，就是指触发事件 n 秒后才执行回调函数，如果在这 n 秒内又触发了事件，则重新
2021-04-20 21:23:49
191
原创 js-this指向谁？
this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时。this的绑定与函数声明的位置无关，只取决于函数的调用方式。this的四种调用模式:普通函数调用模式对象方法调用模式构造器调用模式call()、apply()、bind()1.普通函数调用模式函数调用模式中的函数不是对象的属性值，而是直接作为函数调用，在这种模式下this指向全局对象。function test() { this.a = 3}test() //直接调用console.log(a);
2021-04-18 21:37:12
85
原创 js-词法分析:为什么变量与函数会出现声明提升？
函数在运行阶段之前还存在一个非常重要的阶段叫做词法分析阶段，该阶段主要分几步做了几件事：第一步：分析参数第二步：分析var变量声明第三步：分析函数声明具体步骤：在函数运行前，生成Active Object（活动对象AO）。把收到的形参作为AO属性，属性值为实参值。分析var变量声明。如 var age。如果AO上没有age属性，则在AO上添加对应的属性，值为undefined，如AO = {age: undefined}如果AO上存在该属性，则不作任何操作分析函数声明，如
2021-04-16 21:44:52
266
1
原创 js作用域理解
js中的作用域什么是作用域，作用域实际就是根据变量名称去查找变量值的一套规则。通过下面例子简单理解作用域。let a = 1function t1() { let b = 2 function t2() { let c = 3 console.log(a + b + c); } t2()}t1() //6这个例子我们可以很简单的得出t1()运行的输出值为6，但是这是如何执行的呢?当t2()执行的时候，由于t2函数形成的
2021-04-14 19:45:24
128
原创 js-继承几种方式及优缺点
js中常用的继承方式有如下几种：原型链继承、盗用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承，当然还有es6中的class继承(本文不讲，其本质还是原型链)。如果对原型没什么概念可以跳转至：js-理解什么是原型1.原型链继承子类要继承自父类，则将父类的实例作为子类的原型实现继承。function Animal() { this.legNum = 4 this.desc = { size: 'small', }}Animal....
2021-04-11 16:44:57
615
2
原创 js-理解什么是原型
1.什么是原型首先要明白一点：原型存在于对象中的。接下来阐述什么原型：在js中，每个构造函数内部都有一个prototype属性，该属性的值是个对象，该对象包含了该构造函数所有实例共享的属性和方法。当我们通过构造函数创建对象的时候，在这个对象中有一个指针，这个指针指向构造函数的prototype的值，我们将这个指向prototype的指针称为原型。或者用另一种简单却难理解的说法是：js中的对象都有一个特殊的[[Prototype]]内置属性，其实这就是原型。function Animal() {
2021-04-11 16:36:27
3058
2
原创 js-创建对象的几种方式
面对单个不可复用的对象创建时，我们往往会直接使用对象字面量来创建。如下，这是最简单的对象创建方式，但是面对创建大量属性相似的对象时，通过字面量的方式去逐一创建，需要足够的耐心，最后结果看起来还很呆。//字面量方式创建对象const obj = { name: 'lisi', age: 16}es6前并没有class的概念，而且即使是es6中的class，其也只是依赖原型的语法糖而已，其本质还是引用而非拷贝。所以我们通过函数来模拟，从而产生可复用对象，这也是之前常用的方式。产生可...
2021-04-07 14:59:09
280
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人