09 2021 档案
摘要：向数组中push，不会出发watch更新 template 可以不再需要顶层节点 teleport把节点挂载到指定id下 Suspense组件，展示加载状态 升级指南 键盘绑定keycode无效，绑定别名有效 移除on off 和 $once方法，使用mitt代替 filters被移除，使用meth
阅读全文
摘要：问题：ios12中，键盘收回的时候，被顶起的输入框不会自动收回 解决方案：在输入框blur的时候，调用下面的fixScrollBack函数，让页面滚动下
阅读全文
摘要：前端导出excel比较适合后台应用，应为包的体积比较大，h5应用回加载很慢，数据量很大的时候也不太合适。 https://github.com/SheetJS/sheetjs js // util.js import { saveAs } from 'file saver' import XLSX
阅读全文
摘要：Vue风格指南是官方推荐的代码规范，按照指南开发大型Vue应用，可以避免项目后期出现不可预料的问题或BUG。 官方把规范定义了四个级别：A级表示必要的，B级表示强烈推荐，C级表示推荐，D级表示谨慎使用。示例代码官方给了正例和反例，我只总结了正例的写法。就像开发API一样，正确的情况通常只有一种，而错
阅读全文
摘要：MVVM（Model View ViewModel）是一种程序的架构设计，相比于MVC，ViewModel充当了控制层（Control），Vuejs的核心就是实现这个ViewModel，用一张图表示，就是下面这样 在JS中，Model可以看做是Object对象，View就是HTML网页。在传统开发中
阅读全文
摘要：vue的懒加载插件很多，自己实现也不难，而且更加精简，调试起来也方便，只要理解了原理，无论是用vue还是react,都能轻松搞定 原理 当图片不在区域时，可用默认图片占位src,或者不设置src。用data属性保存图片的url地址，当图片出现在可视区域时，把src替换为data中保存的url即可 自
阅读全文
摘要：原理 只要知道什么时候滚动条到底部了，就知道了什么时间应该触发加载更多,当然有一些判断是不可少的，比如已经没有数据了，已经在加载中了就不要再次触发加载更多。 示例 简单数行代码，轻松实现加载更多
阅读全文
摘要：实现原理： 当鼠标移入图片区域，显示遮罩层和大图预览区 当鼠标移动，遮罩层要根据鼠标距离屏幕的坐标，动态的改变自己的距离，保证鼠标是在中心点位置 通过计算遮罩层距离屏幕的绝对距离，计算出大图应该距离屏幕的绝对距离 magnify 组件 在组件中使用 效果图
阅读全文
摘要：组件功能 过渡效果 自定义提示内容 Tip component 使用方法 挂载到全局组件： 在页面中引入组件： VueBlog的默认tip就是这么实现的，主要是通过refs实现调用子组件的方法，复杂一些的可以封装成插件。
阅读全文
摘要：古代有一小姐，遇到一个上京赶考的穷书生避雨，发现其很有才华后以身相许。 次日小姐垂泪送书生：“君若高中莫负妾身。” 书生发誓后，走了。 小姐让丫环把书生的名字纪录在册，丫头说：“这已经是第五十个书生了！” 小姐说：“没办法，总有一个会真的考上的”。 ——2016最佳小说《风投》 书生让书童把小姐的名
阅读全文
摘要：https://assets.dxycdn.com/gitrepo/lccp-weixin_develop/dist/static/js/(.+).js http://192.168.205.250:8082/dist/static/js/$1.js
阅读全文
摘要：大秦 东周灭亡后的第一个朝代：大秦，虽然只存在了15年，但却开启了长达两千年的封建帝制。 统一六国后，秦朝正式建立，三十九的嬴政成为皇帝，取自“三皇五帝”，下面是秦始皇做的几件大事： 确立三公九卿和郡县制 三公九卿被沿用到隋朝，后被”三省六部“取代。 统一度量衡、文字、货币。 南征百越、北伐匈奴 秦
阅读全文
摘要：把远程地址map到本地的文件夹配置，通配符配置 特别说明：在使用charles时候，一定要把vpn关闭，并且是先关闭vpn再启动charles，才能保证抓包成功。
阅读全文
摘要：iphone 安装第三方证书 第一步：把证书上传到外网，生成一个可下载连接 第二步：使用safari浏览器打开这个连接，会自动提示下载 第三步：打开iphone设置，找到”通用 =》描述文件“，安装刚才下载的证书 第四步：设置中搜索”信任“，在信任文件列表中启用证书 示例文件 证书文件 4.2.8证
阅读全文
摘要：accesskey属性 alt + v打开链接 说明 ：该属性定义元素激活的快捷方式，值为激活用的快捷键。适用于可点击的元素，如 ，alt键加自定义的快捷键值，或者alt+shift键加自定义的快捷键值。 class属性 说明 ：该属性为元素定义类名，多个类名用空格分隔开。 这些元素不能使用clas
阅读全文
摘要：<wbr>标签 如果想学习 AJAX，那么您必须熟悉 XMLHttpRequest 对象。 说明 ：wbr（Word Break Opportunity）该标签定义文本在何处适合添加换行。比如 这个对象，当它刚好在一行的末尾时，我们允许他在Http节点处换行，但是不允许在其他节点换行，就
阅读全文
摘要：说明 ：在HTML中某些字符是预留的，我们要想正确显示这些字符必须把它们替换成字符实体，比如大于号小于号，HTML的标签就是用尖括号定义的，为了不引起冲突，我们要用实体符号 表示小于号， 表示大于号。实体名称对大小写敏感，另外实体字符可以用名称和编号来表示，效果是一样的，只是用名称好记忆。 "实体字
阅读全文
摘要：<video>标签 your browser does not support the video tag 说明 ：该标签用于定义视频。 属性表示视频准备就绪后自动播放，逻辑属性。 属性表示是否显示控件，逻辑属性。 属性定义视频容器的高度，单位像素。 属性表示是否循环播放，逻辑属性。 属
阅读全文
摘要：<u>标签 下划线文本 说明 ：该标签定义下划线文本，underline的首字母。在样式上同ins表现相同，但是u标签是无语义的。不推荐使用该标签，建议用css设置样式 <ul>标签 Coffee Tea Milk 说明 ：该标签定义无序列表。
阅读全文
摘要：<rp><rt><ruby>标签 中 (zhōng) 国 (guó) 说明 ：ruby元素用来展示东亚文字和注音。rt元素描述注音部分。rp元素为不支持ruby元素的浏览器提供一对圆括号。
阅读全文
摘要：<textarea>标签 说明 ：该标签定义多行文本，文本区可容纳无限数量的文本，默认等宽字体。 属性规定页面加载后自动获取焦点，逻辑属性。 属性规定文本区可见宽度，值为数字。 属性规定文本区禁用，逻辑属性。 属性规定文本区所属的表单，值为表单id。 属性规定文本区域最大字符数，值为数字
阅读全文
摘要：<q>标签 小明对我说：他今天迟到了 说明 ：定义简单的行内引用。在语义上该标签同blockquote相同，只不过blockquote用于定义块级引用。q标签所包裹的内容会被浏览器加上引号（IE除外），它有一个cite属性用于定义引用的来源，但是浏览器不支持，搜索引擎可以通过该属性获取更
阅读全文
摘要：<p>标签 说明 ：该标签用于定义段落。浏览器通常会在其后添加一些空白 <pre>标签 <html> <head> </head> <body> </body> </html> 说明 ：该标签定义预格式化
阅读全文
摘要：<option>标签 杭州 绍兴 义乌 郑州 许昌 洛阳 说明 ：该标签用于定义下拉列表中的一个选项，必须位于select内部。 属性规定此选项为禁用状态。 属性规定此选项为选中状态，默认选中第一个。value属性规定发送到服务器的选项值，如果没有定义，会把option标签中的内容发送到
阅读全文
摘要：<!DOCTYPE 声明必须位于HTML文档的第一行，它指示浏览器使用哪种HTML版本进行编译指令。在HTML4.01中，<!DOCTYPE 声明引用了DTD(文档类型定义)，因为它是基于SGML（标准通用标记语言）的一个应用，引用了DTD后浏览器才能正确的呈现它，DTD规定了标记语言的规则。 HT
阅读全文
摘要：<select>标签 杭州 绍兴 义乌 杭州 绍兴 义乌 说明 ：该元素用于创建单选或多选菜单。 属性规定下拉框自动获得焦点。 属性规定下拉框为禁用状态。 属性为下拉框定义名字，主要用于为脚本提供一个钩子。 属性规定可以选择多个值。 属性规定下拉框所属的一个或多个表单。 属性规定下拉框可
阅读全文
摘要：<nav>标签 说明 ：定义导航链接部分 <noscript>标签 说明 ：定义不支持脚本的浏览器要显示的内容。支持脚本的浏览器不显示noscript中的内容。
阅读全文
摘要：<label>标签 用户名： 说明 ：为input元素定义标注。for属性规定label绑定到那个元素。form属性规定label属于那哥表单(可以是多个)。一个隐藏的功能，如果为label添加了for属性，其值为input的id，那么当鼠标点击label中的文本时，会触发input控件
阅读全文
摘要：<main>标签 说明 : 该标签用于描述文档的主体部分，其内容是独一无二的，在HTML5.2中可以同时出现对个main标签，但在同一时刻只有一个是可见状态，其他的可使用hidden属性隐藏，IE不支持该标签。 <map>标签 说明 ：定义客户端图像映射。他拥有name和id
阅读全文
摘要：<i>标签 定义斜体 说明 ：该标签定义斜体(italic)，无语义。 <iframe>标签 说明 ：该标签创建一个包航另一个文档的内联框架。 width属性 说明：规定iframe的宽度和宽度。值可以是像素和百分比。 height属性 说明：规定iframe的宽度和高度。值
阅读全文
摘要：<kbd>标签 复制内容的快捷键是Ctrl + c 说明 ：该标签用于定义键盘文本。在写技术文档时经常用，浏览器会以等宽字体来显示内容。
阅读全文
摘要：<h1> <h6>标签 说明 ：该标签用于定义标题。相同的标签可以多次出现，权重依次递减。 <head>标签 说明 ：该元素用于定义文档的头，它是所有头部元素的容器。 元素是该标签的唯一必须元素。 ,`base link meta script`等标签都可以用在h
阅读全文
摘要：<fieldset>标签 说明 ：该标签用于将表单内相关元素进行分组。lengend可以定义分组的标题。该标签有三个属性，disabled属性规定禁用fieldset。name属性为fieldset定义名字。form属性用于关联表单，属性值必须和其所属form表单的id相同。 <f
阅读全文
摘要：<datalist>标签 说明 ：该标签用于定义选项列表。需要与input标签配合使用，定义input可能的值，通过input元素的list属性可以绑定datalist。 <dl>, <dt>, <dd>标签 电话 电话是一种通讯工具 GitHub G
阅读全文
摘要：<em>标签 这件衣服今天只要15元 说明 ：该标签用于表示强调内容。样式上显示为斜体，``标签也显示为斜体，只不过没有语义。当引入新的术语或概念时也可以用此标签。 <embed>标签 说明 ：该标签定义嵌入内容。功能同``标签相同。属性width，height，src，ty
阅读全文
摘要：<canvas>标签 说明 ：该标签用于定义客户端矢量图，它本身没有行为，但它把绘图API展现给了客户端JavaScript,这也是它同svg不同的地方，svg是使用一个XML文档来描述绘图，他们在功能上是等同的，svg的优点是绘图很容易编辑。该标签有 和`width`属性，单位是px,
阅读全文
摘要：<b>标签 普通文本加粗文本 说明 ：该标签仅使文本加粗，无语义，如果仅是为了样式效果建议使用css设置。它同 有强调的语义。 <base>标签 必需属性 href: 规定当前页面所有相对链接的基准URL 可选属性 target: 规定在何处打开页面中的所有链接 说明 ：该标
阅读全文
摘要：<a>标签 download属性 说明 ：hello为浏览器下载后文件的名字，浏览器会自动检测文件的扩展名 href属性 说明 ：href值可以是相对地址，绝对地址，锚点\(\ top\) referrer属性 说明 ：规定获取资源时应该使用哪个提交者的字符串。属性值 表示 头部不会被发
阅读全文
摘要：场景 当页面内容不够一屏时，footer固定到底部。当超过一屏时，根据实际高度，footer自动向下延伸。 实现
阅读全文
摘要：mixins.scss placeholder border radius position center ellipsis border 1px safe area flex
阅读全文
摘要：引导图是为了方便用户快速的了解产品的新功能，比较好的开源项目有driverJS、introJS。了解实现思路能更好的扩展第三方应用，特别是对于这种DOM操作相关的库。 思路：这个简单的DMEO没有JS，my类是等待引导的元素，pop是一个高亮区，用于突出显示my，mask是遮罩层。在使用z inde
阅读全文
摘要：伪元素和伪类比较容易混淆，视觉上为了区分两者，CSS3规定伪元素用双冒号表示，伪类用单冒号表示。伪元素包括但不限于 ，伪类包括但不限于 以 和`:first child ::first line :first child`表示选中第一个子元素，你不需要为这个子元素添加class就能选中它 伪元素示例
阅读全文
摘要：径向渐变 径向渐变就是椭圆渐变，圆是椭圆的特殊形式，径向渐变从圆心点以椭圆的形式向外扩散，渐变的实现由两部分组成：椭圆和色标，椭圆控制渐变的位置、大小和形状；色标控制渐变的颜色和位置。 语法： 演示效果 See the Pen radial gradient by wmui (@wmui) on C
阅读全文
摘要：基本概念 使用 或者 让元素成为伸缩容器，采用flex布局的元素称为伸缩容器（flex container），容器内的子元素称为伸缩项目（flex item）。 注意： 浏览器会将直接将伸缩容器内的文字包起来成为匿名伸缩项目。 flex布局使元素FFC化（flex formating context
阅读全文
摘要：径向渐变 渐变是两种或多种颜色之间的过渡，线性渐变是多种颜色沿着一条直线（渐变线）过渡，渐变的实现由渐变线和色标两部分组成，渐变线控制渐变的方向；色标控制渐变的颜色变化，色标包括颜色和位置。浏览器从每个色标的位置淡出到下一个位置，通过确定多个色标的位置可以制作多色渐变效果。 语法： 示例效果 See
阅读全文
摘要：本篇文章中涉及到的一些概念，在上篇文章中已有介绍： "理解CSS transform 2d变换" 示例效果 See the Pen transform 3d by wmui (@wmui) on CodePen. 坐标轴 3d变换是建立在三维坐标轴上，它比二维变换多了一个z轴。写代码的时候，眼睛与电
阅读全文
摘要：示例效果 See the Pen transition by wmui (@wmui) on CodePen. 属性介绍 transition property transition property定义应用过渡效果的CSS属性名称，默认值 ，表示所有属性都获得过渡效果；属性值 表示没有属性获得过渡
阅读全文
摘要：演示效果 See the Pen transform 2d by wmui (@wmui) on CodePen. transform origin transform origin表示变形操作的原点，默认位于元素的中心，初始值 ，可定义三个值，分别表示x轴、y轴和z轴，2d变换的原点由x轴和y轴确
阅读全文
摘要：上图中绿色为顶线，蓝色中线，红色基线，粉色底线。 基本概念 行高：上下文本行基线间的距离，图中粉线之间的距离 行距：文本的底线到下一行文本的顶线之间的距离，距离上等于距离上等于line height和font size的差值，图中粉线到绿线的距离 半行距：半行距即行距的一半，距离上等于line he
阅读全文
摘要：vertical align定义行内元素（inline和inline block）的基线相对于该元素所在行的基线在垂直方向上的对齐方式，即与匿名文本大写字母X底边对齐，默认值baseline，当属性值为数值或百分比时正负值均可。 属性值介绍： 表示元素基线和父元素基线对齐 表示降低元素的基线到父元素
阅读全文
摘要：display属性规定元素生成框的类型，默认值inline。 属性值有很多，但常用且支持度较好的就那么几个。 block block元素当不设置宽度时，宽度为父元素的宽度，独占一行，支持设置宽高、外边距、内边距。不支持CSS的 属性 标签： inline inline元素宽度由内容撑开，不独占一行，
阅读全文
摘要：color 设置文本的颜色，默认有继承性。属性值可以是颜色名、十六进制颜色值、rgb值，inherit关键字。 direction 设置文本的书写方向，默认值ltr，有继承性。属性值rtl，文本方向从右向左。 继承。 结果： Hello world. Hello world. 个人理解，rtl就是把
阅读全文
摘要：overflow overflow定义内容溢出时的如何处理，默认值 表示内容会出现在元素框外。属性值 表示溢出内容会被裁剪。 表示溢出时浏览器出现滚动条以便查看溢出内容，不溢出时也会出现滚动条。 表示当内容溢出时出现滚动条，当内容不溢出时不出现滚动条。 继承。 可通过 和`overflow y`单独
阅读全文
摘要：float float属性定义元素的浮动方向，任何元素都可以设置浮动，浮动元素会生成一个块级框，无论本身是什么类型的元素。默认值 不进行浮动，属性值 元素向左浮动，属性值 元素向右浮动， 继承。 浮动元素的特性： See the Pen float by wmui (@wmui) on CodePe
阅读全文
摘要：position属性建立元素布局所用的定位机制，默认值static，称作静态位置。任何元素都可以定位，CSS中的定位通常指absolute定位、fixed定位和relative定位，除了static定位外的其他定位都可以使用top, right, bottom, left设置偏移距离，可以是正值和负
阅读全文
摘要：border collapse border collapse属性定义表格的表框显示行为。默认值 表示表格的表框和单元格的边框分开，边框之间会有空白间隙。属性值 表示合并为一个边框，它们之间的空白将不存在，因此会忽略 和`empty cells inherit`继承。 border spacing
阅读全文
摘要：padding padding属性设置元素的内边距。属性值默认0。属性值 表示由浏览器计算内边距。属性值为百分比时是基于父元素的宽度计算。属性值可以是 。 这是一个简写属性，属性值最多为4个，分别表示上内边距，右内边距，下内边距，左内边距。属性值为三个时，分别表示上内边距、左右内边距、下内边距。属性
阅读全文
摘要：实例 See the Pen center middle by wmui (@wmui) on CodePen. 固定宽高的垂直水平居中 上面的例1和例2，是固定宽高的垂直水平居中，例1采用定位结合margin负值。例2巧妙的利用定位结合 。最后三个例子都是不固定宽高的垂直水平居中，上面五种方法中我
阅读全文
摘要：margin负值 block元素可设置四个方向的值，无论正负。 inline元素上下margin值无效，左右无论正负均有效 inline block元素，当 为`baseline`时，上下margin负值无效，其他情况正负均有效。 元素重叠 两个块级元素发生重叠，后面的元素能覆盖前面元素的背景，无法
阅读全文
摘要：margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距，外边距是透明的，默认值0。这是一个简写属性，属性值最多为4个，例如 ，分别表示上外边距、右外边距、下外边距、左外边距。属性值也可以是3个，例如 ，表示上外边距、左右
阅读全文
摘要：list style type list style type表示定义列表标记的类型，默认值 表示一个实心圆点。一些常用的属性值： 无任何标记， 实心圆， 空心圆， 实心方块， 从1开始的数字(1,2,3等)， 以0开头的数字(01,02,03等), 小写英文字母（a, b, c等）, 大写英文字母
阅读全文
摘要：font family 该属性定义文本使用哪种字体，字体相关的属性都是有继承性的，所以通常只需要为body元素设置font family。上面的代码中写了很多字体，这是为了保证一种回退机制，如果用户的电脑根本没有第一种字体或者浏览器不支持第一种字体，那么浏览器就会使用第二种字体，以此类推直到找到一个
阅读全文
摘要：quotes quotes定义嵌套引用类型，简单点说就是为内容添加引用符号，用什么符号完全自定义，它默认是有继承性的，属性值可以是 。 结果： q { quotes: "\"" "\"" "(" ")"; } 你好我的朋友 在上面的嵌套引用中， 表示外部引用的符号，转义后的双引号， 表示内部的嵌套内
阅读全文
摘要：height 定义元素的高度，默认值auto，非 元素都可以直接定义高度，高度只包括内容区，不包括padding，border，margin的值，属性值可以是百分比，百分比是基于包含它的块级元素的高度，可以是CSS长度（如px，em，rem），可以使用 继承父元素的高度。 max height 定义
阅读全文
摘要：在CSS3中我认为border image算是一个比较复杂的属性，虽然平时用到的情况较少，但还是有必要深入学习下。 border image See the Pen border image by wmui (@wmui) on CodePen. border image用于定义带有背景图片的边框样
阅读全文
摘要：background color See the Pen background by wmui (@wmui) on CodePen. 说明：该属性为元素设置背景色，填充区域包括内容区，内边距，边框。默认值 表示透明，属性值可以是颜色名字（如red），可以是十六进制表示（如 ff0000），可以用R
阅读全文
摘要：圆角是CSS中一个很复杂的属性，彻底理解后可以创造出很多奇妙的效果，先看一个demo： See the Pen border radius by wmui (@wmui) on CodePen. 例1是正方形，例2是矩形，他们的圆角值都是50%，既然是百分比就有相对元素，其实百分比是相对于元素自身的
阅读全文
摘要：@keyframes See the Pen keyframes by wmui (@wmui) on CodePen. 说明：@keyframes用于定义动画，其实动画原理很简单，就是不同的时刻改变css的样式，以百分比规定改变发生的时间，它有两个关键词即 和`to`,from等价于0&表示起始位
阅读全文
摘要：前言 工作中部分选择器总是忘记其具体的含义，这在开发项目时很影响效率，我始终相信每个选择器无论简单复杂，既然诞生了就必定有他的使命，虽然常用的选择器就那么几个就够用了，但系统的掌握所有的选择器还是很有必要的，特别是如果你想开发一个属于的UI框架时，会发现合理的使用选择器，可以大量减少类名的使用。以下
阅读全文
摘要：load load事件应该是加载事件最常用的一个，它表示当页面完全加载完成后（包括图片、JS、CSS等外部资源）触发的事件 load事件不仅发生在document、window对象上，外部资源的加载也能触发load事件（如图片、JS、CSS、音频、视频、Ajax请求等等） 注意： 如果页面从浏览器缓
阅读全文
摘要：文本事件指的是当文本发生变化时所触发的事件 change change事件常用于 等元素，在它们失去焦点且value值改变时触发 input input事件表示输入框内容发生变化时触发，但通过javascript改变value时不会触发。input与change事件的区别就是不需要移除焦点就可以触发
阅读全文
摘要：剪切板操作包括复制（copy）、粘贴（paste）、剪切（cut），快捷键分别是ctrl+c、ctrl+v、ctrl+x 3个操作对应6个剪切板事件 通常情况下，cut和paste发生在可聚焦的文本框中（如input、textarea），copy可在任何文本选中时触发 对象方法 剪切板中的数据存储在
阅读全文
摘要：类型 键盘事件用来描述键盘行为，主要有keydown、keypress、keyup三个事件 注意： 1. 键盘事件必须绑定在可以获得焦点的元素上，页面刚加载完成时，焦点处于document元素。 2. 系统为了防止按键误被连续按下，第一次触发keydown事件后，会有500ms的延迟，才会触发第二次
阅读全文
摘要：引入 Web Storage的目的是解决cookie带来的限制，当数据需要严格控制在客户端时，无需持续的将数据发回服务器。 Web Storage的两个主要目标：提供一种在cookie之外的存储数据的方式、提供一种存储大量可以跨会话存在的数据的机制 Web Storage分为两类：sessionSt
阅读全文
摘要：前端性能优化的方法有很多，本文主要介绍开发中比较常用的几种优化手段 文件合并 网页中的每一个外部文件的下载都会发送一个HTTP请求，常见的有css、js、img等。合并文件能有效的减少HTTP的请求，比较有效的做法是把公共库文件合并到一个文件，因为这些文件基本不会变动，把不同页面独有的文件单独合并，
阅读全文
摘要：引入 正则表达式（Regular Expression）是一门简单语言的语法规范，是强大、便捷、高效的文本处理工具 JavaScript中的正则表达式用RegExp对象表示，由两种写法：字面量写法和构造函数写法 字面量写法 正则表达式字面量定义为包含在一对斜杠/之间的字符，并且可以设置3个标志 正则
阅读全文
摘要：本篇文章主要介绍RegExp对象以及RegExp的实例的属性和方法，如果对于正则的基础语法还不是很清楚，可以参考下 "RegExp基础语法" 这篇文章 实例属性 RegExp实例都包含下面5个属性 如果设置了RegExp的全局模式'g'，使用exec()或test()函数时，正则表达式的匹配就会从l
阅读全文
摘要：FileAPI(文件API)为Web开发人员提供一种安全的方式，以便在客户端访问用户计算机中的文件，并更好地对这些文件执行操作 File API在表单中的文件输入字段的基础上，又添加了一些直接访问文件信息的接口。HTML5在DOM中为文件输入元素添加了一个files集合。在通过文件输入字段选择了一或
阅读全文
摘要：Blob(binary large object)是计算机界通用术语之一，表示二进制大对象。在JavaScript中，Blob通常表示二进制数据，不过，它们不一定非得是大量数据，Blob也可以表示一个小型文本文件的内容。 构造函数 Blob()构造函数返回一个新的Blob对象，接收一个数组和配置项作
阅读全文
摘要：引入 cookie是一种早期的客户端存储机制，用于存储少量的文本数据。cookie数据可以自动在浏览器和服务器之间传输，因此服务器端脚本可以读写存储在客户端的cookie。任何以cookie形式存储的数据，不论服务器端是否需要，每一次HTTP请求都会把这些数据传输到服务器端。 概述 在JavaScr
阅读全文
摘要：JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，常用于服务器与客户端跨域通信，由于其良好的兼容性，在Web服务中非常流行 基础 JSONP的基本思想是向网页中动态的添加一个``元素，并设置script元素的src属性为接口地址，利用script元素天生的跨域功
阅读全文
摘要：引入 默认情况下，出于安全考虑，XHR对象只能访问与包含它的页面同一个域中的资源。但是，实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的 CORS(Cross Origin Resource Sharing)跨源资源共享是W3C的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器应该如
阅读全文
摘要：通常情况下，使用readystatechange事件监听HTTP请求的完成。XHR2规范草案定义了进度事件Progress Events事件，XHR对象在请求的不同阶段触发不同类型的事件，所以不再需要检测readyState属性，该规范定义了客户端与服务端通信的有关事件。这些事件最早其实只针对XHR
阅读全文
摘要：开发中，经常会遇到文件上传、表单提交的情况，当HTML表单同时包含文件上传元素和其他元素时，Content Type的MIME类型必须是“multipart/form data”，并且用POST方法提交表单。XMLHttpRequest 2级定义了FormData类型，为序列化表单以及创建与表单格式
阅读全文
摘要：比较常见的请求方式有GET和POST，下面对这两种方式做详细介绍 GET请求 GET请求常用于向服务器获取数据，发送请求时，参数被追加到URL的末尾。参数以问号开始，名和值之间用等号链接，名值对之间用和号（&）分隔。使用GET方式发送的数据常被称作查询字符串 编码 由于URL无法识别特殊字符，所以如
阅读全文
摘要：通过AJAX接收到的响应主体类型可以是多种形式的，包括字符串String、ArrayBuffer对象、二进制Blob对象、JSON对象、JavaScirpt文件及表示XML文档的Document对象等。下面将针对不同的主体类型，进行相应的响应解码 属性 responseText responseTe
阅读全文
摘要：AJAX是Asynchronous JavasSript And XML的简写，这项技术能够在不卸载页面的情况下发出HTTP请求，虽然名字中包含XML，但AJAX通信与数据格式无关 AJAX通信通常包含4个步骤： 1. 创建XMLHttpRequest对象 2. 发送HTTP请求 3. 接收服务器返
阅读全文
摘要：能力检测又称特性检测，它与前文介绍的用户代理检测不同，能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。能用能力检测得到解决的问题，不要使用用户代理检测 引入 能力检测的基本形式如下 下面针对不同浏览器的能力检测进行简单说明 IE检测 要检测当前IE浏览器是哪个版本，最简单的方式是使用doc
阅读全文
摘要：screen对象用来表示客户端的能力，包括浏览器窗口外部显示器的信息，开发中并不常用 属性 每个浏览器中的screen对象都包含着各不相同的属性 常用属性 availHeight、availWidth availHeight：屏幕的像素高度减去系统部件高度之后的值(只读)，代表屏幕可用高度，单位为像
阅读全文
摘要：navigator对象常用于识别客户端浏览器 属性 每个浏览器中的navigator对象都有一套自己的属性 navigator对象有很多属性，最常用的只有userAgent属性，常用于实现用户代理检测。 用户代理检测 不同平台下浏览器的userAgent检测结果 【IE3】 Mozilla/2.0
阅读全文
摘要：history对象保存了用户从打开窗口那一刻的上网历史记录。出于安全限制，开发人员无法读取用户的历史记录，但是可以通过history提供的方法，在不知道实际URL的情况下实现后退和前进 属性 history.length表示历史记录的URL数量，初始值是1，如果已经访问了3个网址，history.l
阅读全文
摘要：location对象提供当前窗口所加载文档的相关信息，它既是window对象的属性，也是document对象的属性，它也可以单独使用 属性 location将URL解析成独立的片段，让开发人员可以通过不同的属性访问这些片段 URL： |属性名|例子|说明| | | | | |hash| one|哈希
阅读全文
摘要：定义 window对象下的对话框有alert()、confirm()、prompt()和print()。这些系统对话框与浏览器中显示的网页是没有关系的，它们不是HTML，也不能通过CSS改变它们的样式，它们的外观由操作系统及浏览器设置决定。通过这几个方法打开的对话框是同步和模态的，因此这些对话框在显
阅读全文
摘要：窗口即window对象，大多数浏览器都可以打开多个标签页，每个标签页都有自己的window对象 以下只介绍所有浏览器都支持的window对象的属性和方法 属性 outerWidth、outerHeight outerWidth和outerHeight属性用于表示浏览器窗口本身的尺寸 说明：Mac电脑
阅读全文
摘要：HTML5新增了一个定时器requestAnimationFrame，旨在让动画操作更顺畅，更简单，更高效。requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有
阅读全文
摘要：setTimeout() setTimeout()方法用来指定函数或字符串在指定的毫秒数之后运行。它返回一个整数，表示定时器的编号，这个值可以传递给clearTimeout()方法用于取消对setTimeout的引用 示例中，控制台先输出0，大概过1000ms后，输出定时器setTimeout()方
阅读全文
摘要：在触发DOM上绑定的事件时，会产生一个事件对象event，这个对象中包含着与事件相关的信息，不同的事件包含的信息也有所不同。 获取事件对象 event对象是事件程序的第一个参数 属性 不同的事件类型，事件对象包含的信息也有所不同，但有一些属性和方法是共有的 type type表示被触发的事件类型 c
阅读全文
摘要：事件是网页中某个特定的瞬间，通常由用户主动触发。但实际上也可以使用JavaScript触发特定的事件，这就是接下来要介绍的事件模拟 引入 假设现在有按钮一和按钮二两个按钮，按钮一绑定了特定监听函数，现在需要点击按钮二的时候也能触发按钮一的监听函数，可以这么做 btn2通过事件复制，拥有了同btn1一
阅读全文
摘要：前面两篇文章介绍了offset偏移和client客户区，本篇scroll滚动是元素尺寸相关文章的最后一篇 滚动宽高 scrollHeight scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scrollWidth scrollWidth表示元素的总宽度，包括由于溢
阅读全文
摘要：在HTML中引入CSS有三种方式：行内样式、内部样式、外部样式。内部样式和外部样式分别是通过<style>和<link>标签引入的，它们都属于CSSStyleSheet类型。前文介绍的行内样式属于CSSStyleDeclaration类型 CSSStyleSheet CSSStyleSheet是一个
阅读全文
摘要：脚本化CSS，指的是使用JS操作CSS；脚本化行内样式，指的是用JS操作行内样式，行内样式也叫作内联样式 基础 元素节点提供style属性，用来操作CSS行内样式，style属性指向CSSStyleDeclaration对象 <div id="box" style="width: 30px;heig
阅读全文
摘要：定义 DOM遍历模块定义了用于辅助完成顺序遍历DOM结构的类型：Nodeiterator和TreeWalker，它们能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作 示例HTML <!DOCTYPE html> <html> <head> <title>Example<
阅读全文
摘要：事件处理程序又叫事件侦听器，指的是事件绑定的函数。事件处理程序有HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序三类 HTML事件处理程序 某个元素支持的每种事件，都可以使用一个与之相应事件处理程序同名的HTML特性来指定 在事件处理程序函数内部，this值等于事件的目标元素 在
阅读全文
摘要：JS与HTML的交互是通过事件实现的，事件是指文档或浏览器窗口中发生的一些特定的交互瞬间，事件流描述的是从网页中接受事件的顺序 为什么会有事件流？举个例子，页面上有个按钮，当点击按钮的时候不仅仅是触发了按钮的click，同时触发了文档的click，因为按钮是文档的一部分。事件流分为事件冒泡流和事件捕
阅读全文
摘要：客户区大小client指的是元素内容及其内边距所占据的空间大小 客户区大小 和客户区大小相关的属性有四个：clientHeight、clientWidth、clientTop和clientLeft clientHeight clientHeight属性返回元素节点的客户区高度 clientWidth
阅读全文
摘要：偏移量主要是指offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。偏移参照的是定位父级offsetParent 定位父级 定位父级(offsetParent)值的是与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列
阅读全文
摘要：动态样式是指页面加载过程中样式并不存在，页面加载完成后动态添加到页面的样式。动态样式包括通过``插入的外部样式表和通过`
阅读全文
摘要：CSS全称是层叠样式表，元素的最终渲染结果是由多个CSS样式叠加后的结果，可以通过查询计算样式获得最终的叠加结果 getComputedStyle() 元素的计算样式(computedStyle)是用一个 CSSStyleDeclaration对象来表示的，计算样式是只读的，主要通过getCompu
阅读全文
摘要：DOM节点操作方法包括创建节点、插入节点、删除节点、替换节点、查看节点（指的是查看节点间的关系）、复制节点。 创建节点 document.createElement(tagName)方法可以创建新的元素，该方法接受一个元素的标签名作为参数 所有节点都有一个ownerDocument属性，指向文档节点
阅读全文
摘要：待写 参考文章：https://www.cnblogs.com/xiaohuochai/p/6387710.html
阅读全文
摘要：innerHTML innerHTML属性是一个可读写属性。在读模式下，返回调用元素的所有子节点。在写模式下，会用指定的新值替换调用元素原先的所有子节点 在效率上，使用innerHTML要比使用appendChild()方法添加DOM的性能高 注意： 如果innerHTML属性用“+=”操作符重复追
阅读全文
摘要：DOM可以把任何HTML描绘成一个由多层节点构成的结构，节点之间的关系构成了层次，所有的页面标记都可以看做一个以特定节点为根节点的树形结构，这种结构被称作DOM树 节点中的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱 属性 parentNode 每个节点都有一个parentNode属
阅读全文
摘要：getElementById() 任何HTML元素都可以有一个id属性，在文档中该值必须唯一。如果出现了多个同名id，CSS会对所有同名id生效，但是JS脚本仅对第一个出现该id名的元素生效 getElementById(id)方法接收一个参数，表示要获取元素的id，若找到则返回该元素，若不存在则返
阅读全文
摘要：在ES6之前，可选的集合类型非常有限，常见的如数组、对象、类数组对象。数组是数值型索引的数据结构，常被用于创建队列和栈。对象本质上是键值对的集合，但是传统上只能用字符串当作键，这给它的使用带来了很大的限制。如果开发者想要创建非数值型索引的数据结构，或者不想用字符串作为对象的键值，就要另谋他法。es6
阅读全文
摘要：ES5中包含5种原始类型：字符串、数字、布尔值、null和undefined。ES6引入了第6种原始类型 —— Symbol类型 为什么要引入Symbol？ES5中对象的属性名都是字符串，这很容易造成命名冲突，最常见的就是扩展第三库的时候，要添加的新方法很可能和已有方法产生冲突。Symbol可以保证
阅读全文
摘要：文本节点详解 文本节点由Text类型表示，包含的是纯文本内容，虽然是纯文本但却是对象类型 纯文本内容中的HTML字符会被转义 当代码换行后会存在空白文本节点 属性 data属性：文本节点的data属性与nodeValue属性相同 wholeText属性：wholeText属性把当前文本节点和毗邻的文
阅读全文
摘要：动态集合是指DOM结构的变化能够自动反映到所保存的对象中，相应的静态集合是指DOM结构的变化不会自动反映到所保存的对象中 NodeList NodeList实例对象是一个类数组对象，它的成员是节点对象。childNodes和querySelectorAll()方法的返回值都是NodeList实例对象
阅读全文
摘要：若无特殊说明，DOM篇的所有文章适用于IE9+等现代浏览器 概述 DOM是JavaScript操作网页的接口，全称为文档对象模型。它的作用是将网页转成一个JS对象，从而可以使用JS对网页进行各种操作 浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再有这些节点组成一个树状结构。节点是DOM
阅读全文
摘要：概述 async函数是Generator函数的语法糖，async函数就是将 Generator 函数的星号（ ）替换成async，将yield替换成await 使用Generator 函数，依次读取两个文件 使用Async 函数，依次读取两个文件 run()执行器在上一篇文章 "Promise和异步
阅读全文
摘要：代理和反射 代理 代理(Proxy)是一种可以拦截并改变底层JS引擎操作的包装器，在新语言中通过它暴露内部运作的对象，从而让开发者可以创建内建的对象 通过new Proxy()可以创建目标对象的代理，它虚拟化了目标，所以两者看起来功能一致 代理可以拦截JS引擎内部目标的底层对象操作，这些底层操作被拦
阅读全文
摘要：前言 JS引擎是基于单线程(Single threaded)事件循环的概念构建的，同一时刻只允许一个代码块在执行，所以需要跟踪即将运行的代码，那些代码被放在一个任务队列(job queue)中，每一段代码准备执行时，都会被添加到任务队列。每当JS引擎中的一段代码结束执行，事件循环(event too
阅读全文
摘要：ES5中的“类” ES5中没有类的概念，要想实现和类相似的功能，通常是创建一个构造函数，然后把类方法赋值给构造函数的原型。许多模拟类的JS库都是基于这个模式进行开发。 类的声明 在ES6中可以用class关键字声明一个类，关键字后面紧跟着类的名字，其他部分语法类似对象字面量，但是各元素之间不需要逗号
阅读全文
摘要：平常对数据进行迭代时使用较多的是循环语句，这就要求必须初始化一个变量，记录每一次迭代在数据集合中的位置。ES6的出现，让我们可以通过程序化的方式用迭代器对象返回迭代过程中集合中的每一个元素，从而极大简化数据操作。新的数组方法和新的集合类型（如Set集合、Map集合）都依赖迭代器实现，其他的如for/
阅读全文
摘要：修饰器（Decorator）是一个函数，用来修改类的行为。 示例中的 就是一个修饰器，修改了Person类的行为，为其添加了一个静态属性isTestable 修饰器对类的行为的改变，发生在代码编译阶段而非运行阶段。修饰器的本质其实就是编译时执行的函数 示例中修饰器的行为类似下面这样 参数 修饰器的第
阅读全文
摘要：解构是一种打破原有数据结构，将其拆分为更小部分的过程 对象解构 在ES5中，开发者们为了从对象中获取特定数据并赋值给变量，通常是这样做 在ES6中，利用解构功能，可以这样做 类似于对象字面量语法的形式，只不过放到了赋值操作符的左边 可以使用解构功能为变量赋值，它会覆盖之前的变量值 注意： 一定要用一
阅读全文
摘要：在ES6之前，应用程序中的每一个js文件都共享一个全局作用域，随着应用程序越来越复杂，这样会很容易造成命名冲突和安全问题。为了解决作用域的问题，使其显得更有序，ES6引入了模块。 概念 模块是自动运行在严格模式下并且没有办法退出运行的JS代码。在模块顶部创建的变量不会自动添加到全局作用域，它只存在于
阅读全文
摘要：ES6之前，JS只有全局作用域和函数作用域，由于缺乏块级作用域，导致出现了很多怪异行为。ES6的新语法让开发者可以更好的控制作用域，本文详细介绍ES6新引入的块级作用域、let声明和const声明 let声明 let声明的用法与var声明相同。let声明可以把变量的作用域限制在当前代码块中，从而避免
阅读全文
摘要：静态方法 ES6之前，创建数组的方式主要由两种：一种是调用Array构造函数，另一种是数组字面量。ES6新增了Array.of()和Array.from()两个方法也用于创建数组。 Array.of() ES6添加这些新方法，是为了帮助开发者规避通过Array构造函数创建数组是的怪异行为。 如果Ar
阅读全文
摘要：形参默认值 JS中的函数，无论在函数定义时声明了多少形参，在函数调用时都可以传入任意数量的参数。 通常定义函数时会为可选的参数定义默认值，这样可以更方便的针对参数数量添加处理逻辑。 ES6为函数形参定义默认值很简单，直接在形参后面添加默认值即可 触发默认值 除了不传参数可以触发默认值外，当参数值是u
阅读全文
摘要：对象类别 一直以来对象的术语描述没有统一的标准，于是ES6规范定义了每一个类别的对象，对象的类别如下： 1、普通(Ordinary)对象 具有JS对象所有的默认内部行为 2、特异(Exotic)对象 具有某些与默认行为不符的内部行为 3、标准(Standard)对象 ES6规范中定义的对象，例如，A
阅读全文
摘要：正则表达式主要用于处理文本数据，即字符串。在ES6中，随着字符串操作的变更，正则表达式也进行了相应更新 构造函数 在ES5中，使用构造函数方式创建正则表达式的方式有两种 第一种情况是，参数一是一个字符串，这时第二个参数表示正则表达式的修饰符（flag） 第二种情况是，参数是一个正则表示式，这时不能设
阅读全文
摘要：求幂运算符 在ES6之前通常使用Math.pow()方法执行求幂运算，ES6新引入了求幂运算符，用两个星号（ ）表示，左操作数是基数，右操作数是指数。 求幂运算符可以和等号结合，形成新的赋值运算符（ =） 注意： 在v8引擎中，求幂运算符和Math.pow()的实现是不同的，对于特别大的运算结果会有
阅读全文
摘要：JS中的字符串是一组由引号包裹的16位Unicode字符组成的字符序列。在Unicode引入扩展字符集之后，JS中的Unicode编码规则也进行了变更，本文介绍ES6中关于Unicode的相关扩展。 基本概念 Unicode的目标是为世界上每一个字符提供唯一标识符。唯一标识符（code point）
阅读全文
摘要：JS的字符串的功能一直以来都特别有限，缺乏很多特性，比如不能直接表示多行字符串、字符串格式化、HTML转义等等。ES6通过模板字面量方式进行了填补，它通过全新的方法解决了这些问题。 基础用法 模板字面量使用反引号``标识。 js let s = console.log(s) // 'hello wo
阅读全文
摘要：常量 Math对象有8个常量，主要包括对数、派值和平方根 对数 关于数值e，可以参考知乎 "这篇文章" 派值 平方根 函数 Math对象有18个静态函数，主要包含最值、舍入、随机数、三角函数、乘方和开方。这些函数都涉及到Number()隐式类型转换，若超出范围，将返回NaN。 最值 Math.min
阅读全文
摘要：本文详细介绍ES6对字符串的扩展 字符串识别 在ES6之前，常使用indexOf()方法判断一个字符串中是否包含另一个字符串。ES6新增加了3个方法让开发者更方便的识别字符串。 【includes(str, index)】字符串包含给定文本时返回true，否则返回false。str表示要查找的文本，
阅读全文
摘要：JSON(JavaScript Object Notation)全称JavaScript对象表示法，是一种数据交换的文本格式，用于读取结构化数据。 语法规则 JSON的语法可以表示三种类型值：简单值、对象、数组。 简单值 JSON中的简单值可以是字符串、数值、布尔值、null。 字符串必须使用双引号
阅读全文
摘要：上一篇介绍了 "创建对象的5种模式" ，本篇介绍对象实现继承的3种形式。继承简单说就是在原有对象基础上稍作改动，得到一个新的对象，这个新对象可以拥有原对象的属性和方法。JS实现继承的3种方式：类式继承、class继承和拷贝继承。 JS这门语言和其他面向对象的语言不同，它并不支持类和类继承特性，只能通
阅读全文
摘要：面向对象是一种描述代码组织架构的形式，一种在软件领域对真实世界中问题的建模方法。本文主要介绍面向对象程序设计(OOP)中的一些常见名词和概念 对象 何为对象？简单说就是事物或人物在程序设计语言中的变现形式。例如“人”可以被看做是一个对象，每个人都有名字、性别和年龄这些特征，在OOP中这些特征称为属性
阅读全文
摘要：在 "JS对象类型 对象 认识对象" 一文中，介绍了创建对象的3种方式：new构造函数、对象字面量和Object.create()函数。下面基于这3种方式介绍下创建对象的5种常用模式。 对象字面量 对象字面量方式虽然可以创建单个对象，但是如果同时创建多个类似对象，会产生大量冗余代码。 工厂模式 为了
阅读全文
摘要：JS中最复杂的莫过于prototype、proto和constructor之间的三角关系，搞清楚它们之间的关系对理解JS这门语言很重要，下面是我画的一张关系图，本文以该图为例解释它们之间的关系。 基本概念 【构造函数】用来初始化实例对象的函数是构造函数。图中浅绿色的People()、Object()
阅读全文
摘要：this机制是js中很重要的知识点，它和作用域查询是两个容易混淆的知识点。本文将详细介绍this的4种绑定规则。 默认绑定 1. 全局环境中，this指向window。 2. 独立函数调用时，this指向window。严格模式下指向undefined。 3. 作为对象的方法调用时，this指向原对象
阅读全文
摘要：定义 闭包是指函数声明时所处作用域外被调用的函数。所以闭包也是函数，只不过要满足3个条件才叫闭包： 1. 访问函数所处作用域。 2. 函数嵌套。因为只有函数嵌套才能创建不同的作用域。 3. 函数所处作用域外被调用。 示例中在全局作用域中被调用的foo2函数就是一个闭包。foo2声明时所处的作用域就是
阅读全文
摘要：声明提升（hoisting）分为变量声明提升和函数声明提升。声明从它们在代码中出现的位置被“移动”到最上面的过程，被称作声明提升。每个作用域都会有声明提升。 在介绍作用域的内部原理时有提过，引擎在解释JS代码前首先进行编译，编译过程中会找到所有的声明，并用合适的作用域将它们关联起来。 以 说明，这行
阅读全文
摘要：在ES6之前，JS中的作用域只有全局作用域和函数作用域。ES6引入了块作用域，使得开发和维护都变得更简单，在这里对ES6的块作用域进行简单介绍。 let js // 示例1 for (var i= 0; i
阅读全文
摘要：词法作用域 在介绍作用域的第一篇文章中说到编译器的第一个阶段是分词，词法作用域就是定义分词阶段的作用域，是由代码中变量作用域和块作用域的位置决定的，所以词法分析器在处理代码时会保持作用域不变。 词法作用域只由函数被声明时所处的位置决定。 上面的例子中有三个逐级嵌套的作用域： 1. 第一级就是最外层的
阅读全文
摘要：浅拷贝和深拷贝是针对数组和对象而言的。对象的浅拷贝只复制了一层对象的属性，对于Array和Object这些引用类型值拷贝的是一个在内存中的地址。而深拷贝会把对象的属性通过递归的方式逐个复制，包括引用类型值。 浅拷贝 深拷贝 【方法1】 【方法2】 使用JSON全局对象的parse和stringify
阅读全文
摘要：JavaScript有一套良好的规则用来存储变量，方便变量的查找，这套规则被称作作用域。 作用域的内部原理分为编译、执行、查询、嵌套和异常5个部分，下面对这5部分进行详细介绍。 编译 编译过程有3步：分词、解析和代码生成。下面以 为例进行这3个过程的说明。 分词（tokenizing） 把字符串分解
阅读全文
摘要：属性描述符用于描述对象的值是否可配置、是否可修改、是否可枚举。 描述符类型 对象的属性描述符的类型分为两种：数据属性和访问器属性。 数据属性 数据属性包含一个数据值的位置，该位置可读取和写入值。数据属性有4个特性。 【configurable】configurable表示可配置性，它决定了是否可以用
阅读全文
摘要：定义 JavaScript的数据类型包含Undifined、Null、Boolean、Number、String和Object。对象和其他5种数据类型是不同的，其他5种是简单值，对象是一种复合值，可以把许多值聚合在一起，并通过名字访问这些值。 对象是属性的无序集合，每个属性都是一个名值对。属性名是字
阅读全文
摘要：对象的属性操作包括属性查询、属性设置、属性删除和属性继承。 属性查询 属性查询有两种方式：点运算符和方括号运算符。 【点运算符】使用点运算符访问对象属性时，属性名用一个标识符来表示，属性名必须符合变量命名规则，否则会报错。 【方括号运算符】使用方括号运算符访问对象属性时，属性名用一个字符串表示。方括
阅读全文
摘要：惰性函数和普通函数的区别是它的执行分支只在函数调用时执行一次，调用过程中函数会被另一种合适的执行方式覆盖，所以后面再调用这个函数时，就不会再执行分支语句。 使用场景 为了兼容各大浏览器，经常会在函数内部写大量if语句来检侧浏览器特性。比如为dom节点添加事件函数。 上面的函数会在每次执行点击事件时，
阅读全文
摘要：函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明，而后由著名的数理逻辑学家Haskell Curry将其丰富和发展，currying由此得名。 定义 currying又称部分求值。柯里化函数首先会接受一些参数，参数接收之后不会立即求值，而是继续返回一个新的函数，
阅读全文
摘要：函数防抖 函数防抖就是短时间内频繁触发的事件或函数，指定时间间隔内频繁触发会被忽略掉。 比较常见的如搜索联想功能，如果打字很快，这期间不需要调用后台接口。 函数节流 函数节流是使短时间内连续执行的事件或函数，变为固定时间间隔执行。 比较常见的比如疯狂点击轮播图的按钮时，轮播图依旧按照指定的轮播时间执
阅读全文
摘要：定义 高阶函数指操作函数的函数。高阶函数需要满足两个条件：函数可以作为参数被传递；函数可以作为返回值输出。 参数传递 日常开发中，把函数作为参数传递是很常见的情况，通常为了分离出容易变化的业务逻辑，会这部分逻辑放到一个函数参数里。 【回调函数】一个常见的场景，在使用ajax请求数据时，通常把一个回调
阅读全文
摘要：JS中函数定义时不需要指定参数的类型，函数调用时也不会对传入的参数进行类型检查，甚至参数的个数也不做检查，了解这些特殊情况，避免开发出错。 参数个数 当实参比形参的个数少时，多余的形参会被设置成undefined。 当实参比形参的个数多时，多余的实参在函数中无法直接获取到，可以通过arguments
阅读全文
摘要：JS中的函数也是对象，可以像普通的对象一样拥有属性和方法。函数的强大之处在于可以使用Function()构造函数创建新的函数对象。 属性 length属性 函数的length属性表示形参的个数。函数内部有一个arguments对象，arguments对象的length属性表示实参的个数。 name属
阅读全文
摘要：定义函数 定义函数的方式有三种：函数声明语句、函数表达式和Function构造函数 函数声明语句 functionName指要声明函数的名称（标识符），圆括号中是参数列表，参数之间用逗号分隔。当调用函数时，这些形参（参数列表）会被替换成实参（传入的参数）。 【声明提升】：函数声明语句定义的函数有个特
阅读全文
摘要：Date类型使用自UTC1970年1月1日0点开始经过的毫秒数来保存日期，它可以表示的时间范围是1970年1月1日0点前后的各1亿天。 基础知识 标准时间 标准时间是指GMT（格林尼治标准时间）和UTC（世界协调时间）。GMT是指位于伦敦郊区的皇家格林尼治天文台的标准时间，因为本初子午线被定义在通过
阅读全文
摘要：error对象是JavaScript的原生对象，当程序解析和运行过程中发生了错误，JS引擎就会自动产生并抛出一个error对象的实例，并且程序会终止在错误发生的地方。 ECMA 262规定error对象包含message和name两个属性，message属性保存错误信息，name属性保存错误类型。
阅读全文
摘要：创建数组 创建数组最简单的方法是使用字面量方式，在方括号中用逗号分割数组元素。 如果数组的元素还是数组，就形成了多维数组 另外一种是使用构造函数方式。 稀疏数组 稀疏数组就是包含从0开始的不连续索引的数组。 可以使用delete操作符制造稀疏数组。 可以通过省略逗号间的元素值制作稀疏数组 数组长度
阅读全文
摘要：继承方法 继承自对象的方法有三种：toString()、toLocaleString()和valueOf() toString() toString()方法返回数组中元素以逗号分隔的字符串。同不传参的join()方法表现效果一样。 toLocaleString() toLocaleString()方
阅读全文
摘要：前言 JS中undefined和null均被用来表示无，它们都是原始数据类型，而且只有细微的差别： 用来表示一个“无”的对象，转为数值时结果为0； 用来表示一个“无”的原始值，转为数值时结果为NaN。 undefined Undefined类型只有一个值，就是undefined。 以下情况均返回un
阅读全文
摘要：定义 JavaScript采用IEEE 754格式来表示数字，所以不区分整数和浮点数，JS中的数字都是用浮点数表示的。由于浮点型数值占据的内存空间是整数型的两倍，所以JS会不失时机的把浮点数值转换成整数，比如说本身就是一个整数或者小数点后面没有任何有效数值，这个数值就会被当做整数来保存 整数 JS有
阅读全文
摘要：定义 布尔类型表示逻辑实体，只有 和`false`两个值，表示真假两个状态。 转为布尔 可以使用Boolean()转型函数将一个值转为布尔值。 这七个转换成布尔值是假值，其他的都是真值。 注意： 空字符的布尔值是false， 空字符之间有空格结果就是true。 所有对象的转换结果都是true， 实例
阅读全文
摘要：定义 字符串是由引号包裹的一组由16位Unicode字符组成的字符序列 字符串类型常用于表示文本数据，每个元素被视为一个代码点，代码点占据字符序列中的一个位置，首字符从位置0开始，第二个字符位置是1，以此类推。字符串的长度等于元素的个数。 Unicode JS采用UTF-16编码的Unicode字符
阅读全文
摘要：定义 JavaScript采用IEEE 754格式来表示数字，所以不区分整数和浮点数，JS中的数字都是用浮点数表示的。由于浮点型数值占据的内存空间是整数型的两倍，所以JS会不失时机的把浮点数值转换成整数，比如说本身就是一个整数或者小数点后面没有任何有效数值，这个数值就会被当做整数来保存 整数 JS有
阅读全文
摘要：JS类型系统 JS的类型系统包括原生对象、宿主对象和浏览器扩展对象 原生对象 原生对象分为原始类型和对象类型，原始类型分为空值和包装对象，对象类型分为构造器对象和单体内置对象 原始类型 空值：JS有两个空值，分别是undefined和null，逻辑上，undefined表示原始类型的空值，null表
阅读全文
摘要：循环语句 JS有四种循环语句， ，循环的原理很简单，当条件得到满足时，循环语句中的代码重复执行，当条件不满足时结束循环。 while语句 while语句是前测试语句，在执行循环之前先对出口条件进行求值 js var count = 0; while(count
阅读全文
摘要：逻辑运算符对操作数进行布尔运算，经常和关系运算符配合使用，逻辑运算符分为逻辑非 、逻辑与 和逻辑或 ，可以应用于任何数据类型 逻辑非 逻辑非用 表示，它会先把操作数转为布尔值，然后再取反。如果同时使用两个逻辑非操作符，则相当于使用 转型函数。 逻辑与 逻辑与用两个和号 表示，要两个操作数，当操作数都
阅读全文
摘要：赋值运算符 赋值操作符用 符号表示，把等号右边的值赋值给左边的变量或属性 赋值运算符的优先级很低，所以在复杂的赋值操作中需要用圆括号来保证赋值顺序。 如果表达式中出现了多个赋值运算符，赋值顺序是从右到左 JS提供了11个复合赋值运算符，可以简化赋值操作 圆括号运算符 圆括号运算符也叫分组运算符，有两
阅读全文
摘要：算术运算符主要用于算数操作，算术运算符包括一元算术运算符和二元算术运算符 一元算术运算符 在JS中一元算术运算符包括一元加法 ，一元减法 ，递增 ，递减 一元加 一元加法运算符使用符号 表示，放在数值前面，对数值不会产生任何影响 如果为非数值应用一元加法运算，会自动代用 转型函数 使用一元加运算，可
阅读全文
摘要：关系运算符用于比较两个值之间的关系，关系成立则返回true，不成立则返回false， JS提供了`===, !==, ==, !=, , =, 'a'; // true 'B' 'a'; // false '2' '11'; // true 2的Unicode值大于1的Unicode值 ['b']
阅读全文
摘要：启用JavaScript严格模式编程可以避免代码在执行过程中出现意想不到的结果，JavaScript是一种向后兼容的语言，所以为了消除JS中一些不严谨不安全的语法，减少怪异行为的出现，在严格模式下编程是很有必要的。 启用严格模式的方法很简单，只需要在脚本顶部添加 即可，也可以只在函数中使用，只需在函
阅读全文
摘要：JavaScript表达式分为原始表达式和复杂表达式 原始表达式 原始表达式是表达式的最小单位，所以它不再包含其他表达式。原始表达式包括this关键字、标识符引用、字面量引用、数值初始化、对象初始化和分组表达式。 this关键字 this // 返回当前对象 标识符 bar; // 返回变量bar的
阅读全文
摘要：基本概念 JavaScript是一种动态的弱类型解释性语言，语法借鉴了Java，Java是一种静态的强类型解释型语言。JavaScript由ECMAScript、DOM和BOM三部分组成，主要用于实现网页的动态效果、人机交互，当然现在它的能力远不止这些了。 ECMAScript由ECMA-262定义
阅读全文
摘要：定义 标识符(Identifier)是一个名字，用来对变量、函数、属性、参数命名，或某些循环语句中跳转位置的标记。变量是标识符的一种。 变量的特性 JavaScript中的变量是弱类型的，也叫松散类型的，它可以用来保存任何数据类型。JavaScript是一种动态语言，在运行期间才做数据类型的检查，所
阅读全文
摘要："参考链接" 核心函数 js / 图片预加载 @return {function} imgList 需要预加载的图片地址 callback 图片加载完成后的回掉，可获取到加载进度值 timeout 图片加载等待时间 / (function() { var loader = function(imgL
阅读全文
摘要："参考链接" 好处是可以自定义动画效果，用起来很方便，以上代码直接复制是可以运行的
阅读全文
摘要：跨网络异步获取资源的功能以前是使用XMLHttpRequest对象实现的，Fetch API提供了更好的替代方案，可以很容易的被其他技术使用（如Servise Workers） Fetch API提供了一个全局的fetch()方法，这个方法提供了一种简单的、合乎逻辑的方式来跨网络异步获取资源。fet
阅读全文
摘要：焦点元素 通常情况下，只有可交互的元素能够获取焦点，比如表单元素、超链接。如果要让不可交互元素获得焦点，需要做特殊处理：先将tabIndex属性设置为-1，再调用focus()方法 <div id="test" style="height:30px;width:100px;background:te
阅读全文
摘要：数组 数组是最简单的内存数据结构，由于其简单性和灵活性，很多编程语言都内置数组，JS当然也支持。关于数组的介绍可参考以下文章 数组基础学习 数组方法学习 栈 栈是一种遵从后进先出（LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈的 同一端，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶
阅读全文
摘要：静态属性和方法：对象自身的属性和方法，实例无法访问 公有属性和方法：实例继承的属性和方法 私有属性和方法：对象外部无法访问的属性和方法 特权方法：可以访问私有、公有属性和方法 function People() { this.name = 'wmui'; // 公有属性 // 私有属性和方法 let
阅读全文
摘要：链表存储有序的元素集合，链表中的元素在内存中不是连续放置的，每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（也称指针或链接）组成。下图展 示了一个链表的结构： 相对于传统的数组，链表的一个好处在于，添加或移除元素的时候不需要移动其他元素，只需要找到指针的位置。而数组添加元素和移除元素，需
阅读全文
摘要：集合是由一组无序且唯一（即不能重复）的项组成的数据结构，可以把集合想象成一个既没有重复元素，也没有顺序概念的数组。在数学中，集合是一组不同的对象（的集），并且有并集、交集、差集等基本操作。 ES6提供了Set对象用于表示集合，关于Set对象的基本操作可[移步于此](https://blog.8688
阅读全文
摘要：集合、字典和散列表都可以存储不重复的值。在集合中，存储的是每个值本身。而在字典中，存储的是键值对（也称作字典映射）。在散列表中存储的也是键值对（也称作散列映射），但是两种数据结构的实现方式略有不同 ### 字典 ES6提供了Map类，也就是上面说的字典，Map类的具体操作可[移步至此](https:
阅读全文
摘要：树的相关术语 树是一种分层数据的抽象模型，一个树结构包含一系列存在父子关系的节点，每个节点都有一个父节点（除了顶部的第一个节点）以及零个或多个子节点： 根节点：位于树顶部的节点叫作根节点（11） 内部节点：至少有一个子节点的节点称为内部节点（7、5、9、15、13、20） 外部节点：没有子元素的节点
阅读全文
摘要：冒泡排序 冒泡排序是最简单的一种排序算法，同时也会效率最低的，因此在开发中很少使用这种算法进行排序 冒泡排序通过比较任何两个相邻的项，如果第一个比第二个大，则交换它们，元素项向上移动至 正确的顺序，就好像气泡升至表面一样，因此叫冒泡排序。 假设有一组数据[5,4,3,2,1]，使用冒泡排序的比较过程
阅读全文
摘要：算法复杂度用于衡量算法的效率，用大O来表示。使用大O表示法分析算法复杂度时，时常遇到以下几类函数  #### O(1) ```js function increment(num){ return ++
阅读全文
摘要：私有属性和方法 在es6中，官方并没有为类规定私有属性和方法，传统的做法是使用'_'开头的公有属性和方法来表示 class Person { constructor(age) { this._age = age; // 私有属性 } _sayAge() { // 私有方法 return this._
阅读全文
摘要：Unit testing（单元测试） 单元测试往往只关注于一个代码片段，通常是一个模块或函数，测试代码应该比较简单，可以快速实现和运行。这也意味着你会写很多的单元测试用例来保证代码的功能正常。单元测试应该没有什么依赖，比如通过网络请求获取数据库数据。单元测试的基本原则就是：多个测试用例，每个测试不同
阅读全文
摘要：Windows 开发： 主要是开发客户端（PC 机上的软件），如 QQ、迅雷、360、Chrome 等。 能够进行 Windows 客户端开发的编程语言有多种，包括 C/C++、C#、VB、Java、Delphi、易语言等。这意 味着，Windows 开发有多种学习路线，大家任选其一。不过，公司一般
阅读全文
摘要：var obj = { 1: 'a', 3: 'c', 2: 'b', } for (const key in obj) { console.log(key) } // '1' '2' '3' 原因：for-in在遍历时，先遍历出整数属性（integer properties，按照升序），然后其他属
阅读全文
摘要：Array(3).join(',').split(','); Array(3).fill(''); [...Array(3)]; Array(3).fill('').map((item, index) => index); // [0, 1,,2]
阅读全文
摘要：原文地址 命名规范 使用 BEM 命名规范，理论上讲，每行 css 代码都只有一个选择器。 BEM代表 “块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。 在选择器中，由以下三种符号来表示扩展的关系： - 中划线 ：仅作为连字符使用，表示某个块或者
阅读全文
