Alanni

给喜欢的包加星(类似 github 的 star)其实我把加星就当作是收藏的操作，其实在 npm 中它就是收藏的作用，因为在官网中，我们并不能像 github 一样清楚的看到这个仓库有多少颗 star。 npm star [package-name] 取消收藏 npm unstar [package-name] 查看收藏列表 npm stars 这些操作都会报出在你的账号下，所以很方便。不用担心本机操作后其他地方看不到。你只需要有一个 npm 账户就可以了 登录 npm首先你要有一个 npm 的账号，没有的在👉npm 官网注册一个就行了。 注意:在官网注册的账号，登陆时使用淘宝源会报错，要改回默认源 推荐使用 nrm 或者 yrm 来快速切换镜像源,个人推荐使用 yrm,为什么呢?看下图 yrm 会同时将你的 npm 和 yarn 一起切换,并且 ls 后会有*号标注当前正在使用的源,记得 nrm 以前也有的,现在不知道怎么了… 当然你可以手动 npm 切换为默认源 npm config set registry https://registry.npmjs.org ...

CSS 函数CSS 函数用作各种 CSS 属性的值。所以基本上我们用它来评估一些 CSS 值。让我们看看其中的一些功能。 attr()此函数用于访问元素属性的值。让我们通过例子来理解它。 ---- html ---<div data-bg="black"></div>--- css ---div { width: 100px; height: 100px; backgound: arrt(data-bg);} 你可以看到我们有一个“div”和一个“data-bg”自定义属性，现在我可以使用 attr() 在 CSS 中访问它的值。所以，这就是你可以做很多有趣的事情的方式。 所以输出将是这样的。 calc()在 attr() 之后我们有 calc()。顾名思义，它有助于执行 CSS 值的计算。当我们想要进行精确计算时，这可能很有用。 --- html ---<div class="box"></div>--- css ---.box { width: calc(100 ...

引言EcmaScript 2015 中引入了 Proxy 代理 与 Reflect 反射 两个新的内置模块。 我们可以利用 Proxy 和 Reflect 来实现对于对象的代理劫持操作，类似于 Es 5 中 **Object.defineProperty()**的效果，不过 Reflect & Proxy 远远比它强大。 大多数开发者都了解这两个 Es6 中的新增内置模块，可是你也许并不清楚为什么 Proxy 一定要配合 Reflect 使用。 前置知识 Proxy 代理，它内置了一系列”陷阱“用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。 Reflect 反射，它提供拦截 JavaScript 操作的方法。这些方法与 Proxy 的方法相同。 简单来说，我们可以通过 Proxy 创建对于原始对象的代理对象，从而在代理对象中使用 Reflect 达到对于 JavaScript 原始操作的拦截。 如果你还不了解 & ，那么赶快去 MDN 上去补习他们的知识吧。 毕竟大名鼎鼎的 VueJs/Core 中核心的响应式模块就是基 ...

其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。 第一步：简单实现function cloneShallow(source) { var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } return target;}// 测试用例var a = { name: "muyiy", book: { title: "You Don't Know JS", price: "45" }, a1: undefine ...

模板在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下 <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div><script> let num = 1; let content = document.getElementById('content'); function count() { content.innerHTML = num++; ...

当行文本.text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} overflow: hidden（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap（设置文字在一行显示，不能换行） text-overflow: ellipsis（规定当文本溢出时，显示省略符号来代表被修剪的文本） 多行文本（css）.text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} -webkit-line-clamp: 2（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。为了实现该效果，它需要组合其他的WebKit属性） display: -webkit-box（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ） -webkit-box-orient: ve ...

思路 最终效果 主要难点： 如何实现 展开 和 收起 切换按钮的文字环绕效果 如何实现多行文本溢出省略效果 如何实现 展开 和 收起 的状态or文字切换 初始html： <div class="text"> <label class="btn">展开</label> <span> 但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅， 里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头 长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然 是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万 马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出</span></div><style> .text { width: 475px; border: aqua solid 1px; color: #333; font ...

前言小问题总是被人们视而不见，等到遇到的时候又突然想不起来，无从下手，所以我们需要经常总结，这样可以帮助我们更好的记忆东西。今天我们总结两个不起眼的小问题：margin 塌陷和 margin 合并。 margin 塌陷什么是 margin 塌陷我们先来举个例子，然后引出什么是 margin 塌陷 需求：在父元素中，通过 margin 让父元素相对左边及顶部距离100px，也让子元素相对于父元素左边和顶部各50px。 代码如下： div.father{ width: 200px; height: 200px; background-color: rgb(219, 68, 101); margin-left: 100px; margin-top: 100px;}div.father div.son{ width: 100px; height: 100px; background-color: rgb(56, 248, 207); margin-left: 50px; margin-top: 50px; ...

Vue中的key在使用Vue开发项目中，如果使用循环渲染没有使用key的时候，vue会警告。但是这个key的作用是什么。 概念在Vue官网中提到 建议尽可能在使用 v-for 时提供 kye，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是Vue识别节点的一个通用机制，key并不与 v-for 特别关联。 用 key 管理可复用的元素，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外。 通过上诉可以大致了解 key 可以使 Vue 在复用时快速高效的渲染元素。 原理Vue在渲染列表的时候采用就地复用的原则,如果改变了dom的顺序，那么vue不会对dom元素的顺序做修改,而是就此复用当前的元素 假设我们要在BC之间插入一个元素,如图所示 如果我们没有设置key的值那么 Vue 就会把整个列表重新渲染一变，得到如图结果 要是我们添加了key的话 Vue 会通过对先前 key 值配对的属性不会重新渲染一次，如图（左边没设置key，右边设置了key） 注意 key 值是唯一的，建议不要设 ...

es6里面新增了两个声明变量的方法，一个是let，用于声明变量。一个是const，用于声明常量。var、let和const的区别经常会被面试官问到，大多数人都可能回答的是作用域和变量提升这两方面的不同，但你们知道内在原理吗？ 下面我们就从声明过程、内存分配和变量提升三个方面来看一下这三者之间的区别。 声明过程var遇到有var的作用域,在任何语句执行前都已经完成了声明和初始化，也就是变量提升而且拿到undefined的原因由来。 通过下面示例可以看到变量a的声明跑到console.log的前面去了，只是赋值还是在console.log之后进行赋值的，console.log得到的结果就是undefined. 这就是所谓的变量提升了。 console.log(a); // undefinedvar a = 10;// 变量提升后var a; // 声明并初始化console.log(a); // a未赋值返回undefineda = 10; // 赋值 let解析器进入一个块级作用域,发现let关键字，变量只是先完成声明,并没有到初始化那一步。此时如果在此作用域提前访问，则报错xx ...