![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端基础
js,css
凉拌菜是个汉堡包
我是一只欢乐的小菜鸟
展开
-
前端性能指标
小菜鸡今天开始接触前端性能指标,之前一直觉得项目的性能一般,但是又说不出哪里有问题、哪里可优化一.监控工具使用chrome的lighthouse测试页面性能二.指标含义FP、FCP、FMP、TTI三.各指标的优化本章内容copy,慢慢参悟1.FP的优化(白屏时间)SPA 切换场景,一般页面一直处于有内容状态,首次渲染的概念意义不大优化 FP 指标,关键是缩短资源的下载时间,以及减少阻塞浏览器渲染 DOM 的任务的执行时间。常见方法有:减少外链 CSS 资源的数原创 2021-03-14 21:59:42 · 769 阅读 · 0 评论 -
为什么元素浮动之后,文字会环绕在周边,而不是跟浮动元素重合?
今天在切图的时候遇到一个问题: <div class="header"> <div class="arrow_left"></div> <div class="class_name">{{cname}}</div&原创 2018-11-05 16:45:22 · 945 阅读 · 0 评论 -
JS设计模式:观察者模式
学习MVVM的资料,在此记录观察者模式建立一种对象与对象之间的依赖关系,一个对象发生改变时将自动通知其他对象,其他对象将相应作出反应。在此,发生改变的对象称为观察目标,而被通知的对象称为观察者,一个观察目标可以对应多个观察者,而这些观察者之间没有相互联系,可以根据需要增加和删除观察者,使得系统更易于扩展,这就是观察者模式的模式动机。发布订阅模式发布订阅模式是最常用的一...原创 2019-04-24 20:20:05 · 123 阅读 · 0 评论 -
JS基础:理解bind,apply和call
call和bind本质上是apply方法的语法糖一、关联今天看到一篇手写bind的文章,首先提到绑定隐式丢失的问题,然后提出普遍的解决方法是call和applyfunction foo() { console.log( this.a); }var obj = { a: 2 };var bar = function() { foo.call(obj); ...原创 2019-03-27 22:43:14 · 155 阅读 · 0 评论 -
JS设计模式:模块模式
模块模式的关键在于对象字面量和闭包。对象字面量封装模块,闭包实现私有和公有。它提供了一种包装混合公有/私有方法和变量的方式,防止其泄露至全局作用域。为我们提供了一个屏蔽处理底层事件逻辑的整洁解决方案,同时只暴露一个接口供其他部分使用。该模式的特点是返回一个对象而不是一个函数,除此之外非常类似一个立即调用的函数表达式。由于闭包的存在,声明的变量和方法只在该模式内部可用。但在返回对象上定义...原创 2019-03-11 16:11:20 · 492 阅读 · 0 评论 -
JS设计模式:工厂模式
工厂模式是一种创建型模式。它的特点在于,提供一个通用的接口来创建对象,不显式地要求使用一个构造函数,我们可以指定我们所希望创建的对象工厂的类型。假设有一个UI工厂,我们要创建一个UI组件的类型。不需要直接使用new运算符或者通过另一个创建型构造函数创建这个组件,而是要求Factory对象创建一个新的组件。我们通知Factory需要什么类型的对象,它会进行实力化,然后将它返回给我们。PS.除...原创 2019-03-11 11:46:52 · 100 阅读 · 0 评论 -
JS基础:字符串操作
JS提供的String API一、字符串查找search(),indexOf()方法,查找子字符串并返回第一个子字符串的初始位置(输入子串,返回位置)var str='abcdef'console.log(str.search('bc')) // 1console.log(str.search('u')) // -1indexOf()是更底层的方法。对于查找具体子字...原创 2019-02-08 14:28:25 · 171 阅读 · 0 评论 -
JS基础:原型链图拆解
识别原型链关键:跟着__proto__走画出原型链关键:理解A,A.prototype与B.__proto__网上的原型链图有很多种,作为新手看着看着就迷糊了。看不懂的其中一个原因是他们一步到位,从老老老父亲到刚new的对象都放在一张图上。 一、I级原型因此想要理解,首先从最上层的Object开始捋一下:如图,Object是js提供的引用类型。它是function对象,...原创 2019-02-06 01:10:02 · 156 阅读 · 0 评论 -
JS基础:关于原型链的基本知识
1.__proto__,prototype通过new操作符实现的继承关系:child.__proto__ = father.prototype 只有function有prototype属性2.Object与new ObjectFunction,Object,Array是function对象,对于子对象来说他们是构造函数 new Object是对象3.原生类型与对象类型判断原生类...原创 2019-02-06 00:03:36 · 100 阅读 · 0 评论 -
JS基础:Object.defineProperty的应用
Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性并返回这个对象其自带get()和set()两个访问器,可在对象属性取值赋值的时候自定义方法。1.赋值取值时自定义方法问:p1的name改变了,a1的name也要跟着改变,怎么实现function Person() {}function Animal()...原创 2019-02-05 17:23:21 · 151 阅读 · 0 评论 -
JS基础:函数柯里化
概述curry(add,1,2,3)(1)(2)(3,4,5,5)()函数柯里化(curry)是说,把函数参数分多次传入,最终获得的结果和一次性输入全部参数一致。好的柯里化函数可以自定义函数func,作为第一个参数传入。实现function curry(func){ var args=[].slice.call(arguments,1) var _func=functio...原创 2019-02-04 13:26:14 · 370 阅读 · 0 评论 -
读真·犀牛书有感
1.变量是一种为数据创建引用的方式。目的是可以通过变量名多次访问该数据。在函数中,如果某传入的参数被多次访问,则应该先将数据赋值给局部变量。2.JS的数据类型分为两种:原始类型和对象类型。原始类型包括数字、字符串、布尔值、null、undefined。数组是特殊的有序对象;函数也是具有相关联可执行代码的特殊对象。3.JS不是一种强类型语言,而是松散类型/动态类型。因此变量在不同时候可以...原创 2018-07-19 22:57:49 · 560 阅读 · 0 评论 -
函数计数器·自定义函数属性vs闭包
js的函数并不是原始值,而是一种特殊的对象。也就是说,函数可以拥有属性。当函数需要一个“静态”变量来在调用时保持某个值不变,最方便的方式就是给函数定义属性。——《犀牛书》8.4 作为值的函数下面的例子实现函数对象的计数器属性//由于函数声明被提前了,因此这里是可以在函数声明之前给它的成员赋值的uniqueInteger.counter=0;function uniqueInt...原创 2018-07-25 14:30:56 · 178 阅读 · 0 评论 -
作为值的函数
在JS中,函数不仅是一种语法,也是值。也就是说,可以将函数赋值给变量,存储在对象的属性或者数组的元素中。——《犀牛书》8.4 作为值的函数为了便于理解JS的函数是如何做数据的,看一下这样一个函数定义:function square(x){return x*x}这个定义创建一个新的函数对象,并将其赋值给变量square。函数的名字实际上是看不见的,square仅仅是变量的名字...原创 2018-07-25 13:11:23 · 239 阅读 · 0 评论 -
嵌套函数中的关键字this
和变量不同,关键字this没有作用域的限制,嵌套的函数不会从调用它的函数中继承this。如果嵌套函数作为方法调用,其this的值指向调用它的对象。如果嵌套函数作为函数调用,其this值不是全局对象(非严格模式下)就是undefined(严格模式下)。很多人误以为调用嵌套函数时this会指向调用外层函数的上下文。如果你想访问这个外部函数的this值,需要将this的值保存在一个变量里,这个变量和内...原创 2018-07-24 21:40:43 · 1214 阅读 · 1 评论