Hibop Yuan
Hibop Yuan
## 梳理下redux Api - import { createStore, combineReducers, bindActionCreators, applyMiddleware } from 'redux'; 【静态】 - let { subscribe, dispatch, getState } = createStore(reducer， initStore) 【实例后的】 - reducer = （previousState, action）...
关于 XSS 与 CSRF 两种跨站攻击 ==================== 【转载】https://blog.tonyseek.com/post/introduce-to-xss-and-csrf/ 在那个年代，大家一般用拼接字符串的方式来构造动态 SQL 语句创建应用，于是 SQL 注入成了很流行的攻击方式。在这个年代， 参数化查询 [\[1\]](#id1) 已经成了普遍用法，我们已经离 SQL 注入很远了。但是，历史同样悠久的 XSS 和 CSRF 却没有远离我们。由于之前已经对 XSS 很熟悉了，所以我对用户输入的数据一直非常小心。如果输入的时候没有经过 Tidy 之类的过滤，我一定会在模板输出时候全部转义。所以个人感觉，要避免 XSS 也是很容易的，重点是要“小心”。但最近又听说了另一种跨站攻击 CSRF ，于是找了些资料了解了一下，并与 XSS...
## 一、写在前面 > **你的简历是自己工作的答卷，项目经历是你给面试官出的考纲。** ——关于面试，引用叶老湿的一句话。 所以，面试一定是与我的简历、工作经历相关的，一些面试题并不一定适用于任何人，但是你可以从中了解他们考察的点，以及侧重点。基础知识可以查漏补缺。 ## 二、发散性问题思考： [关于前端面试问题思考后的回答](https://hibop.github.io/2017/11/07/%E5%85%B3%E4%BA%8E%E5%89%8D%E7%AB%AF%E5%8F%91%E6%95%A3%E6%80%A7%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E7%9A%84%E6%80%9D%E8%80%83/) ## 三、面试实践： ### 记一次鹅厂面试： 一般包括，电话面试、笔试/一面， 二面/HR面，大厂的套路是就一个问题延伸至你不会为止，很锻炼自己心理素质和承受力，同时也是对自己知识深度的大检阅。 + 技术面试：技术； + 负责人面试：项目把控能力、项目深度、项目架构能力、业务等； + HR面试： 性格、沟通、潜力； - 自我介绍 - 说一说自己全程参与，比较得意的项目： 这个问题扩展性比较大，在问的过程中，看自己的项目角色定位，有没有参与架构、模块设计等等；...
 ## 一、在Vue中使用Vuex的核心步骤： - 在Vue中安装 Vuex插件： `Vue.use(Vuex)`； - new Store()实例，并插入到Vue的option中：`new Vue({ store })`； - 使用`this.$store.state`、`this.$store.getter`得到state，`this.$store.commit(mutation)`、`this.$store.dispatch(action)[异步] `更新action； ## 二 、Vuex 源码的核心逻辑 1. 安装插件 2. store初始化 3. 跟踪状态变化 ### 插件安装原理 Vue.use(Vuex) 作为研究源码的入口，完成的第一个工作，就是在...
## Symbol 1. 魔术字符串（在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值），改由含义清晰的变量代替。 ``` // bad const TYPE_AUDIO = 'AUDIO' const TYPE_VIDEO = 'VIDEO' const TYPE_IMAGE = 'IMAGE' // good const TYPE_AUDIO = Symbol(‘AUDIO’) const TYPE_VIDEO = Symbol(‘VIDEO’) const...
> commit message 是开发的日常操作, 写好 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG, 对项目的管理实际至关重要, 但是实际工作中却常常被大家忽略. 本文主要梳理： - git工作流 - git commit msg - git changelog - git lint / hook ## 常用工具： -...
## 一定要做好数据初始化， 否则会发现数据会莫名奇妙 数据更新界面不更新情况： - beforeCreate 创建之前：已经完成了 初始化事件和生命周期 - created 创建完成：已经完成了 初始化注册和响应， 数据初始化一般放到created里面 - beforeMount 挂载之前：已经完成了模板渲染 - mounted :挂载之后：已完成HTML虚拟化，创建了el节点 可以**操作DOM**了 - beforeDestroy ：摧毁之前：整个vue都处在实时监控空渲染和更新 - destroyed: 已摧毁，已经摧毁了观察者，子元素和事件监听 1. 原生事件绑定一般放在mounted去操作。一些插件的使用或者组件的使用中进行操作。 mounted在整个实例生命中只执行一次 2....
# JavaScript 算法与数据结构 [](https://travis-ci.org/trekhleb/javascript-algorithms) [](https://codecov.io/gh/trekhleb/javascript-algorithms) 本仓库包含了多种基于 JavaScript 的算法与数据结构。 每种算法和数据结构都有自己的 README 并提供相关说明以及进一步阅读和 YouTube 视频。 _Read this in other languages:_ [_English_](https://github.com/trekhleb/javascript-algorithms/), [_繁體中文_](README.zh-TW.md), [_한국어_](README.ko-KR.md), [_Polski_](README.pl-PL.md), [_Français_](README.fr-FR.md), [_Español_](README.es-ES.md), [_Português_](README.pt-BR.md) ## 数据结构 数据结构是在计算机中 组织和存储数...
## 先看问题 > 一个下拉列表拉取上千条数据； > dashboard图表卡片无分页下拉； ==> 页面直接卡死，或者长时间白屏。非常影响体验 ## 方法 - 监听滚动 - 向下滚动时往后加载数据 - 向上滚动时往前加载数据 - 数据有进有出 ```js import Vue from 'vue'; const scrollDirective = Vue.directive('scroll', { bind (el,...
## display的几个常用的属性值，inline ， block， inline-block - **inline**: - 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行； - height，width设置无效，**大小由内容撑开**（可以撑开内容的padding、font-size、line-leight）； - padding有效，margin的left和right产生边距效果，但是top和bottom就不行； - **block**: - 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度； - 能够改变元素的height，width的值； - 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果； - ** inline-block:** - 不独占一行的块级元素。 ## css中的百分比 - **width...