JS
文章平均质量分 53
Kobe_G
shopee前端开发工程师,一名正在进阶的前端学习者
展开
-
HTML5中的FileReader对象
FileReader对象使用原创 2022-12-30 16:20:26 · 1411 阅读 · 0 评论 -
React大文件分片上传方案
大文件分片上传方案原创 2022-11-08 19:14:58 · 2530 阅读 · 0 评论 -
css、js的加载是否阻塞DOM的解析与渲染
首先说一下浏览器渲染页面的流程:浏览器内核(渲染进程)拿到静态资源后,渲染大概可以划分成以下几个步骤:解析html构建dom树解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)布局render树(Layout/reflow),负责各元素尺寸、位置的计算绘制render树(paint),绘制页面像素信息浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。从以上步骤可以得出几个结论:1.html和css的原创 2022-04-29 18:30:00 · 2753 阅读 · 1 评论 -
js中关于函数参数引用传递的误区
先看一段代码:let a = [1, 2, 3]function fn(b) { b = [4, 5, 6]}fn(a)console.log(a)正确的打印结果应该是 [1,2,3],函数体中的代码并没有影响到外部变量a我们在学习js的时候经常听到的一句话是 简单类型传值,复杂类型传址,意思是简单类型传递的是变量的值,而复杂类型(引用类型)传递的是变量的地址。这句话其实是错误的,这是为了方便理解才总结出来的,而事实是:ECMAScript中所有函数的参数都是按值传递的在向函数传递引用原创 2021-12-25 21:06:07 · 553 阅读 · 0 评论 -
一文搞懂useCallback的使用
一、useCallback的作用usecallback不是用来解决组件中有过多内部函数导致的性能问题:1.我们要知道,js创建一个函数的成本是非常小的,这点计算对于计算机来说是小case2.其实使用useCallback会产成额外的性能:对deps的判断3.其实每次组件重新渲染时,都无所谓避免重新创建内部函数,因为即使useCallback的deps没有变,它也会重新创建内部函数作为useCallback的实参那么,它的作用到底是什么?useCallback的作用其实是用来避免子组件不必要的reR原创 2021-12-11 21:57:59 · 40727 阅读 · 2 评论 -
前端场景问题经验总结
一、vue中使用$refs时TS报错比如我们在video标签上使用了ref属性,<video ref='myVideo'></video>当我们用this.$refs.myVideo.xxx时ts会报错没有这个属性或方法解决方案:如果你使用了vue-property-decorator,可以用Ref装饰器解决import { Vue, Component, Ref } from 'vue-property-decorator'@Componentexport d原创 2021-09-04 21:19:48 · 547 阅读 · 0 评论 -
typeScript学习笔记(二)
一、高级类型原创 2021-08-22 17:23:07 · 117 阅读 · 0 评论 -
用express和mockjs实现前端mock serve
本文介绍一种用express和mockjs实现模拟后端接口返回数据的思路,直接上代码:1.在项目根目录新建文件夹:mock2.在mock文件夹下新建mock.js和mockData.js文件3.//mock.jsconst Mock = require('mockjs')const express = require('express')const mockData = require('./mockData')const mockDatas = Object.entries(mockDat原创 2021-08-22 17:20:21 · 252 阅读 · 1 评论 -
Use Chrome DevTools Like a Senior Frontend Developer
https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674转载 2021-01-10 11:56:47 · 181 阅读 · 0 评论 -
typeScript学习笔记(一)
一、基础类型布尔值、数字、字符串let isDone: boolean = false;let decLiteral: number = 6;let hexLiteral: number = 0xf00d;let name: string = "bob";let sentence: string = `Hello, my name is ${ name }.数组let list: number[] = [1, 2, 3];let list: Array<number>原创 2020-10-13 13:19:42 · 508 阅读 · 0 评论 -
推荐一些好用的插件,可搭配react使用
react-sortable-hoc作用:可以很简便地对元素进行拖拽用法:import { SortableContainer, SortableElement } from "react-sortable-hoc";import arrayMove from "array-move";const SortableList = SortableContainer(({ children...原创 2020-03-24 17:45:12 · 726 阅读 · 0 评论 -
ES6入门基础知识
一、let和const1.let在ES5中没有块级作用域这一概念,但在ES6中,新增了let命令,let所声明的变量只在let命令所在的代码块内有效。暂时性死区(TDZ):let没有变量声明提升,在let命令声明变量之前,该变量都是不可用的不可重复声明:let不允许在相同作用域内,重复声明同一个变量对于for循环的计数器,很适合用let命令:下面的代码如果使用var,最后输出的是10...原创 2019-08-31 16:18:53 · 238 阅读 · 0 评论 -
js高级进阶知识
一、函数的原型1.创建对象的三种方式:字面量、调用系统的构造函数、自定义构造函数2.工厂模式创建对象: function createObject(name,age) { var obj=new Object(); obj.name=name; obj.age=age; obj.sayHi=function () { c...原创 2019-06-16 22:39:20 · 2299 阅读 · 0 评论 -
通过JS点击按钮使value值循环改变
比如我们现在要做一个公司的打卡系统,有一个“签到”按钮,点一下“签到”按钮就变成“签退”,再点一下又变成“签到”。以下代码可以实现这个功能:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <script type=&q原创 2018-10-08 22:28:26 · 7720 阅读 · 10 评论 -
在js中innerHTML与innerText的区别
innerHTML:获取双闭合标签里面的html内容,并且要识别标签。innerText:获取双闭合标签里面的文本内容,不会识别html标签。具体看下方代码演示:(只展示了body和script里面的代码)<body> <div id="box1"> 我是box1的内容 <div> 我是...原创 2018-10-10 21:09:35 · 1659 阅读 · 0 评论 -
使用ajax原生代码向服务器后端请求或发送数据的方法
ajax使用步骤: 1.给后端发请求 2.服务端返回数据 3.根据服务端返回的数据,做相应的操作首先,我们实例化一个XHR对象,代表我要使用AJAX技术。var xhr = new XMLHttpRequest();然后向服务器发送请求,以下是两种发送请求的方法(“GET&amp;amp;amp;amp;amp;amp;amp;quot;和&amp;amp;amp;amp;amp;amp;amp;quot;POST”)xhr.原创 2018-10-15 21:23:09 · 5107 阅读 · 8 评论 -
Js中关于用appendChild()插入节点的注意事项
众所周知,我们可以使用appendChild()给一个父节点插入子节点,这种方法插入的位置都是在父节点元素最后一个子元素之后插入的。 但是,如果插入的子节点是DOM文档树里面已经存在的节点的话,这个节点会被移动到用appendChild()插入的位置,而不会被复制。可以看以下样例:<div id="father"> <div id="son">123&...原创 2018-11-28 21:02:23 · 8756 阅读 · 6 评论 -
在Js中如何判断一个字符串是否以另外一个字符串为开头
字符串可以说是大多数编程语言中最重要也是最难掌握的一部分,比如在c语言中判断一个字符串是否以另外一个字符串为开头,如果一个一个去比较两个字符串中每一个字符的话,比较麻烦且容错率高。那么在Js中我们如何判断一个字符串是否是以另外一个字符串为开头呢?一、在JavaScript中,已经有封装好的判断一个字符串是否以另外一个字符串为开头的函数,可以直接调用,非常方便。<script>...原创 2018-11-28 21:44:22 · 3671 阅读 · 0 评论 -
关于如何用for循环给不同的dom元素绑定不同的驱动函数的问题
今天我们要实现的是用for循环给不同的dom元素绑定不同的驱动函数(每个元素的触发事件是相同的)1.我们先在body里面写两个相同的标签:<body> <input type="text"> <input type="text"></body>2.需求:我们想实现点击第一个input的时候alert出1,点击第二个in...原创 2018-12-15 20:35:43 · 527 阅读 · 4 评论 -
JS特效-三大家族-原生封装
一、首先,我们先了解一下三大家族及其区别(offset/scroll/client)1.offset1.1.offsetWidth = width+padding+border;1.2.offsetHeight = Height+padding+border;1.3.offsetTop:检测距离带有定位的父盒子的上面的距离,返回值不带有px1.4.offsetLeft:检测距离...原创 2018-12-16 22:05:41 · 317 阅读 · 0 评论 -
jQuery基础知识和常用API(选择器/DOM操作/UI)
一、选择器1. 入口函数jQuery的入口函数一般为:$(document).ready(function () { //1.文档加载完毕,图片不加载的时候就可以执行这个函数。 })这种写法类似于原生js中的window.onload = function () {}当然,jQuery也有其他的入口函数,比如:$(function () { ...原创 2018-12-23 22:30:29 · 334 阅读 · 2 评论 -
Canvas绘图基础知识
一、绘制直线1.准备"画布",画布默认大小是300px*150px<canvas width="600" height="400" ></canvas><!--注意:对画布设置宽高只能在行内设置,不在css中设置-->2.获取元素并绘制一条简单的直线<script> /*1.获取元素*/ var myCanvas = $(...原创 2019-04-01 12:51:36 · 450 阅读 · 0 评论 -
JS中关于函数名与变量名重名、作用域链、预解析的问题
一、预解析1.先说js代码的预解析问题,js和许多其他语言不同,它在执行之前会预解析代码,意思就是变量声明和函数声明提升,值得注意的是函数声明提升比变量声明提升的优先级高,先来看几个例子:console.log(a);//打出的是 undefinedvar a=1;console.log(a);//打出的是 1上面的代码与下面的代码等价:var a;console.log(a);...原创 2019-04-18 22:08:54 · 1157 阅读 · 0 评论 -
对js基础知识的一些理解
一、js中的数据类型1.简单类型numberstringboolnullundefined2.复杂类型obiect3.对“简单类型传值,复杂类型传址”的理解1.首先理解简单类型和复杂类型的变量如何在内存中存储简单类型的值在栈中存储,即变量名和变量的值都在栈里复杂类型的实例对象在堆中存储,实例对象的地址在栈中存储:即实例对象的变量名在栈中存储,变量名对应的是实例对...原创 2019-06-16 21:35:10 · 226 阅读 · 0 评论 -
关于如何将从服务器接收的json数据动态显示在前端页面上的问题
首先你要学会如何向后端发送请求和接收数据,然后就可以试着将接收的数据显示在前端页面上。现在,我们在本地上写一个json文件: [ { "name": "xxl", "age": 20, "gender": "男", "work":"学生" }, { "name&q原创 2018-10-18 15:27:14 · 10094 阅读 · 0 评论