自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

原创 小程序内使用绝对路径

在app.js中添加如下代码:require: function(path){//解决小程序引入文件不能使用绝对路径的问题 if(path.startsWith("../")||path.startsWith("./")){ console.warn("请输入绝对路径"); return } var data = require(path) return data}然后在需要通过绝对路径引入模块的地方使用:let data = getApp().requ

2021-11-24 19:23:09 1720 1

原创 js和css的加载造成阻塞

浏览器渲染原理图:JS1.现代浏览器会并行加载js文件,参见start time列,但是按照书写顺序执行代码2.加载或者执行js时会阻塞对标签的解析,也就是阻塞了dom树的形成,只有等到js执行完毕,浏览器才会继续解析标签。没有dom树,浏览器就无法渲染,所以当加载很大的js文件时,可以看到页面很长时间是一片空白之所以会阻塞对标签的解析是因为加载的js中可能会创建,删除节点等,这些操作会对dom树产生影响,如果不阻塞,等浏览器解析完标签生成dom树后,js修改了某些节点,那么浏览器又得重新解析,然后

2021-10-28 22:30:53 538

原创 让td不被内容撑开

在td所在table设置属性:width:100%;//需要一个宽度table-layout:fixed;设置td属性:overflow:hiddenwhite-space:nowrap

2021-09-09 23:57:03 1265

原创 数组的常用方法

按是否改变原数组分类:改变原数组的:shift:将第一个元素删除并且返回删除元素,空即为undefinedunshift:向数组开头添加元素,并返回新的长度pop:删除最后一个并返回删除的元素push:向数组末尾添加元素,并返回新的长度reverse:颠倒数组顺序sort:对数组排序splice:splice(start,length,item)删,增,替换数组元素,返回被删除数组,无删除则不返回不改变原数组的:concat:连接多个数组,返回新的数组join:将数组中所有元素以参数作

2021-09-06 23:10:25 82

原创 var与let的区别

当用let声明一个变量,它使用的是词法作用域或块作用域。不同于使用 var声明的变量那样可以在包含它们的函数外访问,块作用域变量在包含它们的块或for循环之外是不能访问的。当let声明出现在循环体里时拥有完全不同的行为。不仅是在循环里引入了一个新的变量环境,而是针对每次迭代都会创建这样一个新作用域。 这就是我们在使用立即执行的函数表达式时做的事,所以在 setTimeout例子里我们仅使用let声明就可以了。...

2021-09-01 23:02:54 100

原创 理由es6实现数组去重

以下是三种方法从数组里去重,并且返回唯一的值。我最喜欢的方式是使用Set,因为它是最短最简单的。const array = [5, 2, 4, 5, 3];console.log([...new Set(array)])console.log(array.filter((item, index) => array.indexOf(item) === index))console.log(array.reduce((unique, item) => unique.includes(item

2021-08-25 23:21:43 97

原创 小程序不支持部分选择器

Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.组件 wxss 中不允许使用某些选择器,包括标签名称选择器、ID 选择器和属性选择器。

2021-08-23 16:24:34 597

原创 iframe的优缺点

iframe 的优点:iframe 能够原封不动地把嵌入的网页展现出来。如果有多个网页调用 iframe,只需要修改 iframe 的内容,就可以实现对调用 iframe 的每一个页面内容的更改,方便快捷。网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用 iframe 来嵌套, 可以增加代码的可重用性。如果遇到加载缓慢的第三方内容,如图标和广告等,可以用 iframe 来解决。iframe 的缺点:会产生很多页面,不容易管理。在几个框架中都出现上下、左右滚动条时,这些滚

2021-08-22 00:04:21 565

原创 JS 的基本数据类型和引用数据类型的区别

  基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值,当这个变量重新赋 值后看起来变量的值是改变了,但是这里变量名只是指向变量的一个指针,所以改变的是指针的 指向改变,该变量是不变的,但是引用类型可以改变。  基本数据类型不可以添加属性和方法,但是引用类型可以。基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值,会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上,引用数据类型的赋值是对象引用。  基本数据类型的比较是值的比较,引用类型的比较是引用的比较

2021-08-18 23:37:05 137

原创 箭头函数与普通函数的区别

1、箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值,这就意味着如果箭 头函数被非箭头函数包含,this 绑定的就是最近一层非箭头函数的 this。2、箭头函数没有自己的 arguments 对象,但是可以访问外围函数的 arguments 对象。3、不能通过 new 关键字调用,同样也没有 new.target 值和原型。...

2021-08-17 22:54:40 73

原创 visibility=hidden, opacity=0, display:none之间的区别

opacity=0:该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事 件,如 click 事件,那么点击该区域,也能触发点击事件的 。visibility=hidden:该元素隐藏起 来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件 。display=none:把元素隐藏 起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。...

2021-08-15 22:57:51 226

原创 csrf 和 xss 的网络攻击及防范

CSRF:跨站请求伪造,可以理解为攻击者盗用了用户的身份,以用户的名义发送了恶意请求, 比如用户登录了一个网站后,立刻在另一个tab页面访问量攻击者用来制造攻击的网站,这个 网站要求访问刚刚登陆的网站,并发送了一个恶意请求,这时候 CSRF 就产生了,比如这个制造 攻击的网站使用一张图片,但是这种图片的链接却是可以修改数据库的,这时候攻击者就可以以 用户的名义操作这个数据库,防御方式的话:使用验证码,检查https头部的refer,使用token。XSS:跨站脚本攻击,是说攻击者通过注入恶意的脚本,在

2021-08-15 22:51:48 105

原创 GET 和 POST 的区别

get 参数通过 url 传递,post 放在 request body 中。get 请求在 url 中传递的参数是有长度限制的,而 post 没有。get 比 post 更不安全,因为参数直接暴露在 url 中,所以不能用来传递敏感信息。get 请求只能进行 url 编码,而 post 支持多种编码方式get 请求会浏览器主动 cache,而 post 支持多种编码方式。get 请求参数会被完整保留在浏览历史记录里,而 post 中的参数不会被保留。GET 和 POST 本质上就是 TCP 链

2021-08-11 23:44:52 122

原创 cookie sessionStorage localStorage 区别

1、cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间 来回传递2、cookie 数据还有路径(path)的概念,可以限制。cookie 只属于某个路径下3、存储大小限制也不同,cookie 数据不能超过 4K,同时因为每次 http 请求都会携带 cookie, 所以 cookie 只适合保存很小的数据,如回话标识。webStorage 虽然也有存储大小的限制,但是比 cookie 大得多,可以达到 5M 或更大4、数据的有效期不同sessi

2021-08-11 23:37:20 102

原创 web常见http状态码

状态码的类别http状态码的由三位数字和原因短语组成,数字的第一位数字表示响应的类别,后面两位无类别。以下有五种类别。另外只要遵循状态码类别的定义,即使改变RFC2616中定义的状态码,或者服务端自行创建状态码都可以。1XX类别:informational 信息性状态码原因短语:接收的请求正在处理2XX类别:success 成功状态码原因短语:请求正常处理完毕3XX类别:redirection 重定向状态码原因短语:需要进行附加操作以完成请求4XX类别:client error 客户

2021-08-10 23:22:24 1214

原创 javascript是单线程的理解

一、javascript为什么是单线程的JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如两个线程同时操作一个dom。任务队列单线程就意味着所有任务要排队,如果前一个占用时间很长(如ajax请求),其实造成了不必要的资源的浪费。所以聪明的语言设计者想到了这点,便将任务可以分为两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同

2021-08-06 00:01:44 349 1

原创 this的理解

有以下几种状况this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象function a(){ var user = "伏地魔"; console.log(this.user); //undefined console.log(this); //Window}a();var o = { user:"伏地魔", fn:function(){ console.l

2021-07-31 01:02:37 65

原创 函数柯里化

什么是函数柯里化?是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。它的重要意义在于可以把函数完全变成「接受一个参数;返回一个值」的固定形式,这样对于讨论和优化会更加方便。简单的例子function add(){ let arr = Array.prototype.slice.call(arguments) function _add(){ let _arr = Array.prototype

2021-07-28 23:13:16 102

原创 虚拟 DOM 的优缺点?

什么是虚拟dom用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作.虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分.优点:保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作,它的一些 DOM 操作的实现必须是普适..

2021-07-26 22:40:14 374

原创 JavaScript 中 call()、apply()、bind() 的用法

call和apply 、bind都是用来修改函数中this的指向问题let name = '比的佛';let age = 20;let obj = { name: '小佛', age: 15, sayHi: function (name,hobby){ console.log(name + '你好,我是' + this.name + '我今年'+ this.age + ',很高兴你也喜欢'+ hobby) }}let person = { n

2021-07-25 23:08:37 160 1

原创 dom事件的三阶段

当一个DOM事件触发时,它不是在触发的对象上只触发一次的,而是经历三个阶段。分别为1:一开始从文档的根节点流向目标对象(捕获阶段)2:然后在目标对向上被触发(目标阶段)3:之后再回溯到文档的根节点(冒泡阶段).事件捕获阶段事件的第一个阶段是捕获阶段。事件从文档的根节点出发,随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。当事件发.

2021-07-23 22:07:41 1673

原创 手写instanceof

instanceof可检测某个对象是不是另一个对象的实例。另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。function myInstanceOf(tInstance, TClass){ let proto = tInstance.__proto__; let prototype = TClass.prototype; if(!proto){ return false; }else if(proto == p

2021-07-21 22:06:02 46

原创 作用域和作用域链的理解

作用域(scope)1. 什么是作用域作用域是在运行代码中某些特定部分中变量、函数和对象的可访问性。也就是说,作用域决定了代码区块中变量和其他的可访问性。ES6之前JavaScript没有块级作用域,只有全局作用域和局部作用域。ES6的到来,为我们提供了块级作用域,可通过命令let和const来体现。所有未定义直接赋值的变量自动声明为全局变量2. 什么是作用域链如果想得到在当前的作用域里没有定义的变量(即自由变量)的值,需要向父级作用域(下文有解释)寻找,如果父级没有,会接着向上寻找,如果直

2021-07-19 21:42:52 3695

原创 原型与原型链的理解

一、 构造函数构造函数的目的就是为了创建一个自定义类,并且创建这个类的实例。构造函数需要用new关键字来调用。function Person(name, age, gender) { this.name = name this.age = age this.gender = gender this.sayName = function () { alert(this.name); } }va

2021-07-18 18:28:41 82

原创 js函数形参和实参的区别

定义:参数有形参(parameter)和实参(argument)的区别,形参相当于函数中定义的变量,实参是在运行时的函数调用时传入的参数。** 例子:**声明函数add时,a,b就是形参。调用函数add(1,2) 1,2就是实参。function add(a,b) { return a + b};add(1,2);*注意:通过实参调用函数的时候,传入函数里的是实参的副本,因此在函数里面修改参数值并不会对实参造成影响。 var b = [1, 2, 3] fu

2021-07-17 01:00:23 645

原创 javascript序列化导致数据丢失

我们知道的序列化会导致方法丢失,那是有其他的影响呢?通过下面简单的例子一起看一下class Custom{ constructor(){ this.custom1 = 1 } customFn(){ console.log('hello, my name is custom') }}let custom = new Custom();let obj = { a: 'a', b: function() {

2021-07-11 23:52:50 475 1

原创 手写Promise

new Promise((resolve, reject) => {}).then((res) => {}, (err) => {}).then(res => {}).catch(reason => {});Promise.all([promise1, ...]).then();实现以上class Promise{ constructor(callback){ this.state = 'pending'; //状态

2021-07-11 23:32:01 103 1

原创 微信小程序Page的应用

注册页面一、使用Page构造器注册页面 Page({ data: { text: "This is page data." //页面的初始数据s }, onLoad: function(options) { // 生命周期回调—监听页面加载 }, onShow: function() { // 生命周期回调—监听页面显示 },

2021-07-11 20:05:15 1182

原创 闭包为什么会造成内存泄漏

内存泄漏会对浏览器造成很大的压力,之前隐隐约约有听说过“如果闭包不处理是一定存内存泄漏的”,这是真的吗?是为什么呢?函数作用域链创建函数outerFun()时,会创建一个预先包含全局变量对象的作用域链,保存在内部的[[Scope]]属性中。调用函数outerFun()时,为此函数创建一个执行环境。然后复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。此后,创建一个活动对象,推入执行环境作用域链的前端([0]位置)。此时执行环境的作用域链中包含两个变量对象:全局

2021-07-05 00:05:12 2754

原创 TypeScript的入门

在入门TypeScript我们常有一下几个问题:什么是TypeScript?简而言之,TypeScript是JavaScript的超集,具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。TypeScript和JavaScript的特点是什么?JavaScriptJavaScript 是一种轻量级的解释性脚本语言,可嵌入到 HTML 页面中,在浏览器端执行,能够实现浏览器端丰富的交互功能,为用户带来流畅多样的用户体验。Jav

2021-07-04 22:13:18 202 3

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除