CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

解构赋值的深入理解

解构赋值的深入理解 场景：一个赋值语句看不懂，大概如下第二句。 参考：MDN的解构赋值 总结：知识点只知道一部分是不够的，遇到问题好好处理，抓住每一次补基础的机会。 解构赋值语法是一种 Javascript 表达式 通过 解构赋值，可以将 属性/值 从 对象/数组 中取出，赋值给其他变量。 对象和数组逐个对应表达式，提供了一种简单的定义一个特定的数据组的方法。 //...

Posted by CodingWithAlice on March 30, 2020

ref和$refs的使用

ref和$refs的使用 场景：获取某个DOM元素进行事件的触发（调试时使用，触发click）。 参考：vue官方说明文档+慕课视频+网络博客 总结：用ref进行引用命名，$refs是所有引用的名称，尤其注意循环中ref的使用（数组）。 在标签上面使用ref通过this.$refs.名字 获取到的是标签对应的DOM元素this.$refs.hello.innerHTM...

Posted by CodingWithAlice on March 25, 2020

页面跳转--多种

页面跳转–多种 场景：实现一个页面跳转的时候，要通过改变路由地址来刷新当前页面内容。 参考：各种网络博客 总结： HTML和Script <a href=''></a> window.location.href/replace（在script中可以直接执行） window.location.href = '${l...

Posted by CodingWithAlice on March 20, 2020

改变原数组+结束循环+性能排序

改变原数组+结束循环+性能排序 场景：遍历一个数组，找到满足条件的第一项后停止遍历。 参考：完全来自于MDN，只是简化成描述+语法，方便自己复习 总结：as 会改变原数组的方法(8种)：push,pop,shift,unshift,reverse,sort,splice,fill 除了抛出异常外，不能通过 break 和 『return』 结束循环...

Posted by CodingWithAlice on March 20, 2020

babel-polyfill 补丁

babel-polyfill 补丁 场景：学习babel的时候，频繁看到 polyfill，俗称补丁 参考：各种网络博客 总结： babel-polyfill 是一种为低版本浏览器补充 ES6 方法/属性的模块 作用： 为所有 API 增加兼容方法 需要配合 preset-env 使用 缺点：需要在所有代码之前 require，且...

Posted by CodingWithAlice on March 19, 2020

安卓字体上浮

安卓字体上浮 场景：UI走查的时候，安卓字体上浮2px左右，导致上下居中效果不能实现 参考：Airen的博客（主）、网络博客 总结：非css能解决，原因是在 content-area (字体度量)内部渲染的时候发生的，css 控制的是整个 content-area 居中。能针对特定字体做处理，但是暂时无法通用处理。 单个元素 首先要明确，字体大小和 font-family 是息息相...

Posted by CodingWithAlice on March 18, 2020

模块化

模块化 常见错误点： 1、对 AMD+CMD执行顺序的表述 AMD：❌ // 少写了 ：加载模块后直接执行，无法保证执行顺序 CMD：❌ // 少写了 ：加载后，直到调用才按需执行 本文主要关注点：AMD/CMD 差异；CommonJS/ES6模块化 差异；4种模块化规范的进步，解决的问题 模块化的优点：避免命名冲突；更好的分离，按需加载；更高复用性；高可维护性； 总结： 1...

Posted by CodingWithAlice on March 17, 2020

ES6 模块导出导入方式梳理

ES6 模块导出导入方式梳理 场景：导入的一个方法执行不了，发现是没有加{}导致的，真的很难找这个问题。就此机会整理一下import和{}的使用，其实也就是 ES6 模块导出导入方式梳理。 两种默认导出方式：默认导出(export default)和命名导出(named export)   命名导出 默认导出 ...

Posted by CodingWithAlice on March 17, 2020

工作 压缩图片 webp

压缩图片 webp 场景：在工作中实际用到的场景是一张公司域名内的图片url+!60x60.jpg就可以对图片进行压缩；还有一种是!320.webp，不同的域名适用的压缩方式不同 <img class="product-img" :src="`${activity.img}!320.webp`"/> WebP是一种可以有效压缩jpg、png的图片格式。（同等图片质量，体积...

Posted by CodingWithAlice on March 16, 2020

两栏，左边固定，右边自适应的布局

两栏，左边固定，右边自适应的布局 一、左边固定，右边自适应 线索记忆： ​ margin-left（2种）：「float方法（左浮动，右margin-left）、绝对定位（左绝对，右margin-left）」 ​ flex布局：「flex:1」 ​ 『**BFC特性**：「左浮动，右BFC」』 ​ table/grid布局：『table 需要给出 width:100% 否则宽度只...

Posted by CodingWithAlice on October 26, 2019

FEATURED TAGS
《JavaScript高级程序设计4》 < JS原生基础相关 > < 算法题 > < vue相关知识点 > < CSS相关内容 > < HTTP相关 > < 面试题整理 > < 浏览器原理 > < 工作经验沉淀 > < 小程序 > < webpack > < 工程化 > < database > < 重构2 > < React17+TS4 > < node > < AI >
ABOUT ME

CodingWithAlice

✉️ hao_ling@foxmail.com

FRIENDS