发表于 | 更新于 | 分类于
前言之前没有接触过富文本编辑器原理，在页面光标能在文本之间随意选择，删除和输入很好奇，一直以为是一种hack技术，原来页面本身有的一个属性，配合实现还有js的方法和属性。 实现原理实现富文本效果有两种方法：1. iframe+designMode，2. contenteditable。 方法一：iframe+designMode页面中iframe嵌入一个子页面，把iframe的属性designMode设为on，这个子页面的所有内容就可以想使用文字处理软件一样，对文本进行加粗、斜体等设置。 主页面 12345678910111213141516171819<!DOCTYPE html> ...
阅读全文 »

发表于 | 更新于 | 分类于
参数为正数的情况slice()和substring()的第二个参数指定的是字符串最后一个字符后面的位置，而substr()的第二个擦输指定的则是返回的字符串个数。 12345678var stringValue = "hello world";console.log(stringValue.slice(3)); // "lo world"console.log(stringValue.substring(3)); // "lo world"console.log(stringValue.substr(3)); // "lo ...
阅读全文 »

发表于 | 更新于 | 分类于
XSS（cross-site scripting 跨域脚本攻击）攻击是最常见的 web 攻击，其重点是“跨域”和“客户端执行”。XSS 攻击分为三种，分别是： Reflected XSS（基于反射的 XSS 攻击） Stored XSS（基于存储的 XSS 攻击） DOM-based or local XSS（基于 DOM 或本地的 XSS 攻击） 1、Reflected XSS基于反射的 XSS 攻击，主要依靠站点服务端返回脚本，再客户端触发执行从而发起 Web 攻击。 例子 1、做个假设，当亚马逊在搜索书籍，搜不到书的时候显示提交的名称。 2、在搜索框搜索内容，填入“aler ...
阅读全文 »

发表于 | 更新于 | 分类于
1、目标实现 理解双向数据绑定原理； 实现 {{ }}、v-model和基本事件指令v-bind（:）、v-on（@）； 新增属性的双向绑定处理； 2、双向数据绑定原理vue实现对数据的双向绑定，通过对数据劫持结合发布者-订阅者模式实现的。 2.1 Object.definePropertyvue通过Object.defineProperty来实现数据劫持，会对数据对象每个属性添加对应的get和set方法，对数据进行读取和赋值操作就分别调用get和set方法。 1234567891011121314Object.defineProperty(data, ...
阅读全文 »

发表于 | 更新于 | 分类于
项目构建自动化，错误查起来越来越不知所措，坑很多，踩过后要记录，防止踩第二遍 vue单文件@import css文件，不加~会报错123<style lang="stylus" scoped>@import 'assets/css/variable'</style> 报错：12345678910[HMR] bundle has 1 errors172:176 ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/v ...
阅读全文 »

发表于 | 更新于 | 分类于
flex弹性布局相关属性 详细参考：阮一峰博客 1.flex-direction 定义沿水平或主轴方向 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2.flex-wrap 定义换行方式 nowrap（默认值）: 不换行 wrap: 换行，第一行在上面 wrap-reverse: 换行，第一行在上面 3.flex-flow flex-flow 属性是flex-direction属性和flex ...
阅读全文 »

发表于 | 更新于 | 分类于
前言在平常的工作中位运算用得比较少，一般用其他更容易理解得方式去达到相同目的。在计算机内部，一切运算最终都转化成二级制元算，直接使用二级制运算执行得效率是最高的。偶尔看到一道面试题，复习一下这方面知识，先来看一下这道面试题： 123var a = 10;a ^= (1<<4) - 1;a的值 题目先放一放，看看js中有哪些位运算。 1. 位与(&)真真为真，其余为假 1234569和10二进制位与运算 1001 & 1010 ------- 1000 由于奇数的二进制末位为1，偶数为0，跟1的位与运算后，分别为1和0，因此可以用位与运 ...
阅读全文 »

发表于 | 更新于 | 分类于
数据类型转化表首先上数据类型转化表，便于遇到问题直接查看 值 字符串 数字 布尔值 对象 undefined null “undefined” “null” NaN false false throws TypeError throws TypeError true false “true” “false” 1 0 new Boolean(true) new Boolean(false) “”(空字符串) “1.2”(非空，数字) “one”（非空，非数字） 0 1.2 NaN false true true new String(“”) ...
阅读全文 »

发表于 | 更新于 | 分类于
1、如果子元素全部设置为浮动，则父元素是塌陷的 在元素末尾加块级空元素设置clear:both； 1234.last { display: block; clear: both;} 在父级容器设置before/after模拟一个块级空元素 12345.clearfix:after { content: ""; display: block; clear: both;} 父级容器直接设置overflow: auto/hidden; 2、普通文档流中块级垂直外边距合并解决办法：用padding代替，或改成inline- ...
阅读全文 »

发表于 | 更新于 | 分类于
《JavaScript高级程序》已过一遍，梳理js基础知识点，思维导图是极有帮助的，搜了一下，还真有整理得很全的，收藏一波。 1. 变量 2. 数组 3. 运算符 4. 流程语句 5. 字符串函数 6. DOM操作 7. BOM操作 8. window对象 9. 函数 10. 正则表达式 11. DOM对象
阅读全文 »