学习笔记📒
关注
分享
扫一扫
莫亓
力氵口 口由巴 .
https://github.com/censek
展开
-
JavaScript：通过解构赋值交换两个变量的值
通过解构赋值语法，可以轻松地交换变量。let a = "hello";let b = "world";[a, b] = [b, a];// { a: 'world', b: 'hello' }原创 2020-09-27 11:29:14 · 5092 阅读 · 7 评论 -
JavaScript：字符串部分打码显示
某些时候我们需要遮蔽字符串的一部分，比如，下面代码中通过 substr(-3) 得到字符串的一部分，即从字符串末尾开始往前 3 个字符，然后再用你喜欢的字符填充剩余的位置（比如说用 *）const password = "hackme";password.substr(-3).padStart(password.length, "*");// ***kme...原创 2020-09-27 11:27:07 · 946 阅读 · 1 评论 -
数据响应式原理：Proxy代理与数据劫持 && vue中的数据响应式实现 && vue中双向绑定实现
Proxy代理与数据劫持handler.set() - 是设置属性值操作的捕获器。handler.get() - 用于拦截对象的读取属性操作。……var box = document.querySelector('.box');var data = { name: 'cici', age: 18}box.innerHTML = data.age;data.age = 21;console.log(data);// ???? 如果这样写，修改了数据之后，并不能同步更新b原创 2020-09-24 08:44:59 · 303 阅读 · 0 评论 -
防抖和节流
防抖就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。var box = document.querySelector('.box');var testDebounce = debounce(move, 1000);box.onmousemove = testDebounce;function move(ev) { console.log(ev, this); this.innerHTML = ev.clientX;}function原创 2020-09-22 17:03:46 · 132 阅读 · 0 评论 -
this 的指向问题
事件调用环境谁触发事件，函数里面的this指向的就是谁。.box1, .box2 { width: 100px; height: 100px; border: 1px solid black; background: #0A8CD2; position: relative; left: 0; transition: 1s;}<div class="box1"></div><div class="box2"></div>原创 2020-09-22 13:39:27 · 190 阅读 · 0 评论 -
一些前端有关的文章分享（更新中）
研究如何让 JS 写得更漂亮：https://mp.weixin.qq.com/s/LlNuFg4XFWKVShys1SOf1w研究 memaid 及其样式修改：https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes一个可以任意精度的十进制算数运算的库：https://github.com/MikeMcl/big.js/研究 vue 中的表格导出问题：https://www.cnblogs.com/qiu-Ann.原创 2020-09-07 09:21:29 · 420 阅读 · 0 评论 -
text-align:justify 两端对齐无效？
⚠️ text-align:justify 样式应用的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）可以通过使应用该样式部分不成为单行，在后面加点东西解决。???? 伪类解决方案：p.test { text-align: justify;}p.test:after { content: ""; display: inline-block; width: 100%;}<p class="test">只有一行很短的文字</p>text原创 2020-09-04 09:32:54 · 829 阅读 · 0 评论 -
HTTP 缓存机制及原理
https://mp.weixin.qq.com/s/M8Ew7xKStiGEnhGgCq5YPA为什么会有缓存？单纯的从计算机角度去说，比较抽象，咱们看一个实际的例子。比如，我们通常喜欢把没看完的书放在书架上，而看完以及没有看的书放在箱子中保存。如果我们把所有的书保存在箱子中，每次看书都要去箱子中找，所以非常麻烦和耗时(这里的箱子，可以想象成服务器)。当我们开始看新书时，第一次从箱子中取出，看了一半，然后我们直接放到书架上，当下次再看书的时候，直接从书架中取出，这里的书架，就是我们下边要讲到的.转载 2020-08-10 11:31:44 · 210 阅读 · 0 评论 -
解析从 Vue 初始化到首次渲染生成 DOM 以及从 Vue 数据修改到页面更新 DOM 的流程
https://mp.weixin.qq.com/s/G5nwszLRk0W51Ui_IykJxQVue 初始化从最简单的一段 Vue 代码开始：<template> <div> {{ message }} </div></template><script>new Vue({ data() { return { message: "hello world", }; },});&.转载 2020-08-10 10:55:33 · 2594 阅读 · 0 评论 -
CSS：固定外框尺寸，里面的图片尺寸不固定，让图像自适应外框
object-fit该属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。fill | contain | cover | none | scale-downfill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。cover被替换的原创 2020-08-06 08:53:51 · 1788 阅读 · 0 评论 -
CSS：滚动 (scroll-behavior & scroll-snap-align)
scroll-behavior - 设置是立即滚动还是平滑的滚动值：auto：滚动框立即滚动。smooth：滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2020-07-16 09:52:33 · 894 阅读 · 0 评论 -
CSS：选择高亮（设置高亮状态的样式 / 禁止文本选择高亮）
设置处于高亮状态的样式 - ::selection::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。只有一小部分CSS属性可以用于 ::selection 选择器。禁止文本选择高亮 - user-select: none;CSS 属性 user-select 控制用户能否选中文本。<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2020-07-14 09:33:00 · 6750 阅读 · 0 评论 -
Webpack(二)：核心特性
上一篇的最后提出了对模块化打包方案或工具的诉求：能够将散落的模块打包到一起；能够编译代码中的新特性；能够支持不同种类的前端资源模块。目前，前端领域有一些工具能够很好的满足以上这 3 个需求，其中最为主流的就是 Webpack、Parcel 和 Rollup。如何使用 Webpack 实现模块化打包？如何通过 Loader 实现特殊资源加载？如何利用插件机制横向扩展 Web...原创 2020-06-01 15:42:23 · 742 阅读 · 0 评论 -
Webpack：开发一个可以加载 markdown 文件的 Loader
开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。markdown 一般是需要转换为 html 之后再呈现到页面上的，所以我们希望导入 md 文件后，直接得到 markdown 转换后的 html 字符串，如下图所示：└─ webpack-loader ······················· sample root dir ├── src ································· source dir │ ├─原创 2020-05-29 17:17:17 · 1666 阅读 · 0 评论 -
Javascript：补0（填充字符串到目标长度）
当给定数字位数不足8位时，则在左边补充0以补足8位数。let num = 900;let nStr = num.toString().padStart(8,'0');console.log(nStr); //00000900padStart()用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。语法str.padStart(targetLength [, padString])参数targetLength当前字符原创 2020-05-29 09:32:44 · 21664 阅读 · 1 评论 -
Vue 动画：CSS 动画原理 & animate.css 库的使用 & 同时使用过渡和动画 & Js 动画与 Velocity.js 的结合 & 多个元素或组件的过渡 & 动画封装
Vue 中 CSS 动画原理<div id="app"> <div v-if="show">hello world</div> <button @click="handleClick">切换</button></div><script> var vm = new Vue({ el: '#app', data: { show: true }, methods: {原创 2020-05-22 10:00:08 · 971 阅读 · 0 评论 -
CSS：背景图片的使用（将背景图片完美适合窗口 & 创建三角背景图片 & 在背景图片上添加渐变叠加 & 制作网格背景图片 & 文字镂空背景图片效果）
1. 如何将背景图片完美的适合浏览器窗口？background-position: center;background-attachment: fixed;background-size: cover;2. 如何在CSS中使用多个背景图片？用 , 分隔。background-image: url(图片1路径), url(图片2路径);background-position: 图片1position, 图片2position;……3. 如何创建三角背景图片？效果图：通过创建两个原创 2020-05-12 11:07:01 · 884 阅读 · 0 评论 -
Vue 组件：$ref & 父子组件的数据传递 & 组件参数校验与非 props 特性 & 给组件绑定原生事件 & 非父子组件间的传值 & 在 Vue 中使用插槽 & 作用域插槽 & 动态组件
使用组件的细节点<table> <tbody> <row></row> <row></row> <row></row> </tbody></table><script>Vue.component('row', { template: '<tr><td>This is a row</td></tr>原创 2020-05-11 17:32:43 · 510 阅读 · 0 评论 -
CSS：悬浮提示文本
https://github.com/haizlin/fe-interview/issues/2008Way 1⃣️<div class="wrap"> 我是一个元素 <div class="tips"> 这是悬浮提示文字 </div></div>.wrap { position: relative; display: inline-block; margin: 4em;}.tips { position.原创 2020-05-11 10:25:55 · 8626 阅读 · 0 评论 -
CSS：实现一个斑马线效果 （条纹背景）
斑马线效果<div class="zebra-crossing"></div>.zebra-crossing { width: 180px; height: 100px; margin: 1em; background: linear-gradient(to right, #fff 50%, #bbbbbb 0); background-size: 30px 100%;}几种条纹背景的实现1. 基础渐变<div class="demo1"&g原创 2020-05-11 09:35:39 · 3928 阅读 · 0 评论 -
JavaScript：将 arguments 对象转换为数组；对数组中所有的值求和；条件短路；对条件使用逻辑或；逗号运算符；用 length 调整数组大小；通过数组解构对值进行交换；动态属性名……
https://mp.weixin.qq.com/s/q36K4uPcLWdZq_wQvPflIQ1. 将 arguments 对象转换为数组arguments 对象是函数内部可访问的类似数组的对象，其中包含传递给该函数的参数的值。但它与其他数组不同，我们可以访问其元素值并获得长度，但是不能在其上使用其他的数组方法。不过，我们可以将其转换为常规数组：var argArray = Array.prototype.slice.call(arguments);2. 对数组中所有的值求和var .原创 2020-05-09 09:29:55 · 344 阅读 · 0 评论 -
Vue 基础：Vue 实例生命周期 & 模版语法 & 计算属性、方法与侦听器 & 样式绑定 & 条件渲染 & 列表渲染 & set
♻️ Vue 实例生命周期生命周期函数就是Vue实例在某一个时间点会自动执行的函数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2020-05-08 16:52:10 · 318 阅读 · 0 评论 -
Webpack(一)：背景介绍
Webpack 本质是一个模块化打包工具，通过“万物皆模块”这种设计思想，巧妙地实现了整个前端项目的模块化。Webpack 解决的问题如何在前端项目中更高效地管理和维护项目中的每一个资源。模块化的演进过程Stage 1 - 文件划分方式Stage 2 - 命名空间方式Stage 3 - IIFEStage 4 - IIFE 依赖参数模块加载的问题更为理想的方式应该是在...原创 2020-04-28 16:20:42 · 354 阅读 · 0 评论 -
D3.js(三)：交互
d3-dragDrag-and-drop 是一种易学流行的交互手势：将指针指向目标对象，按下并且拖动它到一个新的位置，然后释放。D3 的 drag 提供了方便灵活并且抽象的拖拽交互。例子 ????：I. 力导向图II. 小球（密集恐惧症慎点）III. Draw Me◎ d3.drag()创建一个新的拖拽行为并返回自身。drag 既是一个对象，也是一个函数，通常通过 selection.c...原创 2020-03-31 14:40:53 · 719 阅读 · 0 评论 -
Gridsome(五)：UI框架 Buefy 的使用
官方文档：https://buefy.org/documentation/customization/1. 安装cnpm install buefy2. 配置// 在 main.js 中添加：import Buefy from 'buefy'import 'buefy/dist/buefy.css'Vue.use(Buefy)3. 使用????：顶部导航栏<temp...原创 2020-03-30 17:17:58 · 1906 阅读 · 0 评论 -
Prisma(四)：连接本地数据库进行增删改查操作；Subscriptions 订阅
··原创 2020-03-25 16:22:15 · 2420 阅读 · 0 评论 -
Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部 解决方案)
footer 置于页面的底部利用绝对定位/* 文件目录：src/layouts/Defaults.vue */.footer { color: #c5c5c5; bottom: 20px; position: absolute; bottom: 0;}优化博客列表显示<!-- 文件目录：src/pages/Index.vue --><temp...原创 2020-03-20 13:42:27 · 824 阅读 · 5 评论 -
Prisma(三)：检索，Prisma CLI 及 配置
哈哈，上次说到了查询所有数据和查询指定数据。查询指定数据当时是指定 id 来查询的。那还有没有别的查询方式呢？我们先来添加几条数据。除了上次说在 http://localhost:4466/_admin 通过鼠标点击添加外，我们还可以利用 mutation 来进行添加：mutation { createUser(data: { name: "css" }) { i...原创 2020-03-18 16:59:14 · 1351 阅读 · 0 评论 -
Prisma(二)：基本概念及使用
上次分享说到 prisma init 项目名 就可以自动搭建。在 http://localhost:4466/_admin 中编辑 data 数据；在 http://localhost:4466 中进行 query 和 mutation 操作测试。我们来操作一下：这里选择的是创建新的数据库。⚠️ 第一次进行 prisma init 项目名 的时候，可能会有网络的影响，会进行的...原创 2020-03-15 11:01:42 · 2353 阅读 · 0 评论 -
JavaScript 数据结构与算法(二)：栈与队列
栈栈 是限定仅 在表尾进行插入和删除操作 的线性表。 即 先进后出，后进先出 。在 应用软件 中，栈这种后进先出的数据结构的应用是非常普遍的。 比如 ，浏览器的“后退”键；Word 的撤销操作；等等。理解我们把 允许插入和删除的一端称为栈顶（top），另一端称为（栈底），不含任何数据元素的栈称为空栈。 栈又称为后进先出（Last In First Out）的线性表，简称 LIFO 结构。...原创 2020-02-16 22:32:51 · 298 阅读 · 0 评论 -
雅虎前端35条军规
原文链接：https://www.cnblogs.com/xianyulaodi/p/5755079.html雅虎前端优化的35条军规。内容部分1. 尽量减少HTTP请求数80% 的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。 这是让页面更快的关键。合并文件 是通过把所有脚...转载 2020-02-14 22:06:20 · 340 阅读 · 0 评论 -
JavaScript：九九乘法表
用 js 实现一个九九乘法口诀表1⃣️const MAX_WIDTH = 7let table = ''for (let rhs = 1; rhs <= 9; rhs++) { for (let lhs = 1; lhs <= 9; lhs++) { if (lhs <= rhs) table += `${lhs}*${rhs}=${lhs * r...原创 2020-02-11 20:50:20 · 907 阅读 · 0 评论 -
JavaScript：继承
JavaScript 使用基于原型链的继承。访问一个对象的属性时若该属性在对象上不存在，则会沿原型链向下搜寻每个原型对象。每个构造器都拥有 prototype 属性，代表该构造器的原型对象，初始为一个 Object 实例。所有用此构造器 new 出的对象都可以访问该对象的属性。function Foo(bar) { this.bar = bar }Foo.prototype.baz = '...原创 2020-02-11 16:12:01 · 186 阅读 · 0 评论 -
《蔡康永的说话之道》
透过说话，懂得把别人放在心上，这就是我相信的、蔡康永的说话之道。01已经很讨人喜欢的你在未来会更讨人喜欢利用转述别人赞美的方式。02你说什么样的话你就是什么样的人你说的话，不但是“果”，透露出你怎么看事情，还会倒过来变成“因”，倒过来“引导”你去看事情，然后再“引导”你身边重要的人这样去看你。Tips:你真的想变成给别人温暖的小太阳吗？那你就从说话开始，订出些简单的，你...原创 2019-12-23 22:26:38 · 877 阅读 · 0 评论 -
《一页纸的创意思考术》
[第六章] 领导之道：将目的地描绘出来让我们试着用图来画出愿景。用文字陈述的愿景都是谎言 / 领导者必冒险前进 / 每次探险都从英雄开始 / 七大经典探险征程 / 你的工作？创造自己的任务徽章 / 清晰是关键 / 采用任何方法皆可，但请记住：你的探险征程独一无二 / 地图帮你实现管理◎ 七大经典探险征程你的任务徽章展示的是目的地，但你还需要一张地图，用以展示到达目的地的步骤。作为一...原创 2019-12-17 22:47:14 · 585 阅读 · 0 评论