FrankKai
FrankKai
一直以来都有用let和const，看似深入学习过，但其实没有真正完全理解，在模棱两可的用，之前在城西的一次面试就被问的哑口无言，所以我将通过mdn的资料针对性地学习[let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) 和 [const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)，并且会写一些易懂的例子，也会涉及到一些规范里的内容。 - block，statement和expression的区别是什么？ - 为什么选择了'let'作为block-scoped variable declaration？ - let和const不会像var一样绑定值到global 对象！ - let和const不能像var一样同一个scope下声明多次！ - let和const不会像var一样变量声明提升！ - 循环中let/var与setTimeout的羁绊！ - for循环无异步参与时，var，let效果相同 - for循环有异步参与时，var异常，let创建块作用域 - Array.prototype.forEach与setTimeout，独立作用域
项目中有用到vue-router和webpack实现异步加载组件，使用的就是import的函数语法`import()`语法 在学习webpack的代码拆分章节时，也有专门的一个章节用来讲这个，因此需要系统性学习一下import的函数语法`import()`。 - 最简单的结构 - 初识import() - 为什么要动态引入 - 动态引入使用示例 - 如何在webpack中使用import()实现动态引入 - vue-router中如何结合webpack如何动态引入 ### 最简单的结构 ```js var promise = import("module-name"); ``` ### 初识import() 标准版的import语法是static的，因此会在加载时就引入所有的代码。 但是很多情况下我们需要动态引入模块，也就是说满足特定条件才加载模块，我们可以使用动态引入去做这件事。 ### 为什么要动态引入 一共有5个原因。 -...
 今天看element-react源码的时候，又看到了这张似曾相识却又异常陌生的老面孔，那就是Function.prototype.apply()... ``` import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; export default class Component extends React.Component { classNames(...args) { return classnames(args); } className(...args) { return...
 用中文怎么叫合适？ 相等？全等？ 其实并不合适，叫double equals 或者treble equals，或者叫不懂的人觉得比较不专业的双等或者三等操作符，是更加严谨和正确的叫法。 为什么这么说？看完这篇博客你就明白了。 #### **一、入门阶段：自我经验（一脚一坑）** 我的理解是： ==是相等，值相等，返回true。 ===是全等，值相等，类型也相等，返回true。 上面的理解是错的，`[]==false`和`[1]===[1]`返回就可以推翻。`[]==false`，他们的值并不相等，但是返回true。[1]和[1]，值相等，类型也相等，返回为false。因此上面理解是错的。 正确的理解是： >**==是相等，先转换再比较，返回true。 ===是全等，不转换就比较，返回true。** `[]==false`，false是转换为0，[]强制转换成0(**解释不清楚**)，`0 == 0` ,返回为true。 `[1] === [1]`，不转换就比较，`[1]===[1]`，左右的[1]指向内存中两个独立的，地址不同的数组，故返回false。 看下最简单的例子： ①基础类型vs基础类型 `1== true //true` `1...
记录踩过的坑。 - 跨域绘制脏canvas问题 - canvas裁剪图片 - 如何使两次绘制之间的连续起来？ - 如何让两次绘制canvas之间有过渡效果？ - macOS与windows上的canvas.toDataURL()不同 - 如何解决canvas内存泄漏问题
在学习nodeschool的count-to-6教程时，遇到了这两个常用但是一直没有系统学习的概念，因此在mdn找到相关文档进行学习。 - [Rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) - rest parameters语法 - rest parameters与arguments的区别 - rest parameters没出现前，es5怎么做？ - rest parameters既然是数组，可以直接解构吗？ - 优雅的使用rest parameters的例子 - [Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) - 几种spread场景 - function calls中的spread语法 - array literals中的spread语法...
当我们谈起**如何防范web安全中的XSS攻击**时，通常会说：浏览器引入了内容安全策略，也就是CSP(Content Security Policy)，去解决XSS攻击的问题。 有人说，**CSP的核心思想是让服务器决定浏览器能够加载哪些资源，相当于一个前端资源白名单。这样做的目的是抵御XSS攻击，提升前端安全性。** 那么CSP到底什么呢？ 这句对CSP的概括是否准确呢？ - CSP前言 - 面临的威胁 - 如何使用CSP - 示例：常用的使用示例 - 测试你的策略 - 开启报告 - 违规报告语法 - 违规报告采样 - CSP指令指南 - 腾讯AlloyTeam两篇非常好的CSP文章 ### CSP前言 Content Security...
>行内元素和块级元素有什么异同？ *可能你觉得这是一个老掉牙的问题，但其实并没有那么简单。* 对于初学者来说，当遇到面试官问到这个问题的时候，脑海里的第一印象是css的display属性，值为inline时为行内元素，值为block时为块级元素，那值为inline-block时呢，元素是块级行内元素吗？ 其实我们看问题的角度从一开始就错了，错误地站在了css的角度，而真正正确的是站在html的角度。因为这里的元素，本质上是指html的DOM元素。 下面我们就3个原理展开深入： - 深入理解inline元素 - 深入理解block-level元素 - 深入理解display属性 并且提出两个问题： - 行内元素和块级元素有什么异同？ - css属性display如何影响元素？
Vuex那些事儿
用vuex也有一段时间了，但仅仅是很基础的用，没有学习高级特性，更没有深入过源码 由于手上负责的聊天项目较为复杂，深入学习vuex更显得很有必要，从而优化聊天部分的前端实现 基于以上目的，我将在这里记录自己在实践过程中的一些总结。 - mapState与mapGetter的区别是什么？ - Vuex的plugins有什么用？ - this.$store.commit()和mapMutation()哪种更好？ - mutation与action区别是什么？ - Modules的namespacing是什么操作？ - 一次vuex的状态变更经历哪些步骤？ - Vuex是如何与Vue框架做双向数据绑定的？