滑动加载前端框架-mescroll
这是我见过最牛逼的滑动加载前端框架前言在手机端实现下拉刷新和下拉加载是最常见不过的需求了。今天大师兄就给大家分享一个非常精致的js框架:mescroll.
提示:以下是本篇文章正文内容,下面案例可供参考
一、mescroll简介mescroll.js 是在 H5端 运行的下拉刷新和上拉加载插件。1.4.1以上版本,还能配置图片懒加载效果。
mescroll.js 是原生Javascript开发的, 不依赖jquery,zepto等,还支持vue。
二、快速开始
下载并引用 mescroll.min.css , mescroll.min.js
12345678// unpkg的CDN: <link rel="stylesheet" href="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.css"> <script src="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.js" charset=&q ...
vue3 响应式对象的 api ,你全用过了吗?
vue3 响应式对象的 api ,你全用过了吗?Ⅰ. ref、reactive ( 递归监听 )123456789import {<!-- -->ref,reactive} from 'vue';setup() {<!-- --> const num = ref(123); num.value = 456; const obj = reactive({<!-- -->num:123}); obj.value = 456;}
ref 对象 在 html 模板中会 自动添加 value ( ref 对象中__v_isRef:true 进行判断的 )
ref 对象 => reactive( { value:0 } ) 底层自动转换为 reactive
最终 基本数据 类型采用 => (Object.defineProperty) ,引用数据 类型采用 => ( proxy 代理 )2. isRef、isReactive ( ...
Node.js 笔记
1. 初识node.js与内置模块1.1 回顾与思考浏览器中的javaScript的组成部分
JS核心语法- webAPI
为什么JavaScript可以再浏览器中被执行? 待执行的JS代码 JS解析引擎 不同的浏览器使用不同的JS解析引擎为什么JS可以操作DOM还有BOM? 每个浏览器中内置了DOM,BOM这样的API函数,因此浏览器中的javaScript才可以调用它们浏览器中JS的运行环境 运行环境是指代码正常运行所需要的必要环境 Chrome浏览器运行环境: V8引擎和内置API函数
v8引擎负责解析和执行js代码- 内置API是由运行环境提供的特殊接口,只能在所属的运行环境中被调用 ** js能否做后端开发?**
1.2 Node.js简介1.什么是Node.js? Node.js是一个基于Chrome V8引擎的JS运行环境
2.Node.js中的JS运行环境 V8引擎和内置API函数
浏览器是JS的前端运行环境- Node.js是Js的后端运行环境- Node.js中无法调用DOM和BOM等浏览器内置API
3. Node.js可以做什么?
4. Node.j ...
问题场景
1. el-table分页数据+回显+勾选状态+记录数据(map实战)原以为js中即便是学到了map可实际上也不会用到map,可我今天就遇到一个el-table分页查询,然后需要勾选表格内容,切换页码后回显勾选项的需求。
一开始想的是,把所有已勾选的数据用list来维护,可稍微一思索就发现这样实际执行起来还是有缺陷的,比如用于来回切换页码等场景稍微一复杂就容易乱套。
还是应该记录每一条数据的信息,用户点击勾选的时候,用当前的勾选情况去跟已勾选的数据做一个比对。如果已记录的数据里存在当前列表中的勾选项,同时本次属于勾选状态,则不做处理。
如果处于未勾选状态,则从用于记录的总数据中删除该选项。如果总得记录结果没有改数据,同时该数据本次是勾选状态,则把新数据添加进去。
用map是最好的了,于是就实战一下,试试手~
123456789101112<el-button @click="query"> 获取新数据</el-button><el-table ref="myTable" :data="tableData ...
Bug解决
1. ReferenceError和TypeError为什么区分LHS和RHS是一件重要的事情?
因为在变量还没有声明(在任何作用域中都无法找到该变量)的情况下,这两种查询的行为是不一样的。
考虑如下代码:
12345function foo(a) { console.log( a + b ); b = a;}foo(2);
第一次对b进行RHS查询时是无法找到该变量的。也就是说,这是一个“未声明”的变量,因为在任何相关的作用域中都无法找到它。
如果RHS查询在所有嵌套的作用域中遍寻不到所需的变量,引擎就会抛出ReferenceError 异常。值得注意的是,ReferenceError 是非常重要的异常类型。
相较之下,当引擎执行LHS查询时,如果在顶层(全局作用域)中也无法找到目标变量,全局作用域中就会创建一个具有该名称的变量,并将其返还给引擎,前提是程序运行在非“严格模式”下。
“不,这个变量之前并不存在,但是我很热心地帮你创建了一个。”
ES5中引入了“严格模式”。同正常模式,或者说宽松/懒惰模式相比,严格模式在行为上有很多不同。其中一个不同的行为是严 ...
leetcode-字符串
leetcode-字符串反转字符串地址:https://leetcode.cn/problems/reverse-string/
简单。。
123456789101112/** * @param {character[]} s * @return {void} Do not return anything, modify s in-place instead. */var reverseString = function(s) { for(let i = 0; i < Math.floor(s.length / 2); i++) { let temp = s[i]; s[i] = s[s.length - i - 1]; s[s.length - i -1] = temp } return s};
(*)反转字符串 ||地址:https://leetcode.cn/problems/reverse-string-ii/
字符串不好处理, ...
leetcode-栈与队列
栈的实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354// 栈类function Stack() { // 栈中的属性 this.items = [] // 栈中相关方法 // push(element): 添加一个新元素到栈顶位置. // pop():移除栈顶的元素,同时返回被移除的元素。 // peek():返回栈顶的元素,不对栈做任何修改(这个方法不会移除栈顶的元素,仅仅返回它)。 // isEmpty():如果栈里没有任何元素就返回true,否则返回false。 // clear():移除栈里的所有元素。 // size():返回栈里的元素个数。这个方法和数组的length属性很类似。 Stack.prototype.push = function (element) { this.items.push(element) ...
leetcode-数组
记录一下数组刷题目录和题解
具体题目和题解参考代码随想录和leetcode官方
刷题二分查找地址:https://leetcode-cn.com/problems/binary-search/
二分查找涉及的很多的边界条件,逻辑比较简单,但就是写不好。例如到底是 while(left < right) 还是 while(left <= right),到底是right = middle呢,还是要right = middle - 1呢
写二分法,区间的定义一般为两种,左闭右闭即[left, right],或者左闭右开即[left, right)。
我就主要掌握一种,左闭右闭。
代码:
123456789101112131415161718192021var search = function(nums, target) { // 定义target在左闭右闭的区间里,[left, right] let left = 0; let right = nums.length - 1; // 当left==right,区间[left, right]依 ...
leetcode-链表
最近刷 leetcode 链表系列刷的头昏脑胀,感觉要写个博客记录一下做链表题的思路。
两大思路目前链表题做下来,看了这么多题解,可以总结做题有两个方向。
常规思路,迭代,用指针慢慢的找。
递归(递归需要设计的很巧妙)
链表题目可以简单的被分为三大类:
链表的处理
合并
删除
链表的反转以及衍生题目
链表成环问题以及衍生题目
刷题链表的定义12345678class ListNode { val; next = null; constructor(value) { this.val = value; this.next = null; }}
leetcode 的核心代码模式不需要写链表的定义,但是笔试时是ACM模式,需要自己写链表的定义,这里采用ES6的写法。
移除链表元素题目地址:https://leetcode-cn.com/problems/remove-linked-list-elements/
链表的迭代操作有两种方式:
直接使用原来的链表来进行删除操作。
设置一个虚拟头结点在进行删除操作。
...
leetcode-哈希
哈希表基础知识哈希表是根据关键码的值而直接进行访问的数据结构。
数组其实就是一张哈希表
哈希表中关键码就是数组的索引下标,然后通过下标直接访问数组中的元素,如下图所示:
那么哈希表能解决什么问题呢,一般哈希表都是用来快速判断一个元素是否出现集合里。
例如要查询一个名字是否在这所学校里。
要枚举的话时间复杂度是O(n),但如果使用哈希表的话, 只需要O(1)就可以做到。
我们只需要初始化把这所学校里学生的名字都存在哈希表里,在查询的时候通过索引直接就可以知道这位同学在不在这所学校里了。
将学生姓名映射到哈希表上就涉及到了hash function ,也就是哈希函数。
哈希函数哈希函数,把学生的姓名直接映射为哈希表上的索引,然后就可以通过查询索引下标快速知道这位同学是否在这所学校里了。
哈希函数如下图所示,通过hashCode把名字转化为数值,一般hashcode是通过特定编码方式,可以将其他数据格式转化为不同的数值,这样就把学生名字映射为哈希表上的索引数字了。
如果hashCode得到的数值大于 哈希表的大小了,也就是大于tableSize了,怎么办呢?
此时为了保证映射出来的索 ...