weixin_46372074的博客

extends、寄生组合式继承寄生式组合继承可以算是引用类型继承的最佳模式。

ECMA是一个致力于信息和通信系统标准化的行业协会。let实例2.const 声明常量声明对象、数组类型使用 const，非对象类型声明选择 let频繁使用对象方法、数组元素，就可以使用解构赋值形式。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 解构赋值。适用于与this无关的回调,有关this的回调用匿名函数call：调用一个对象的一个方法，用另一个对象替换当前对象。1.改变dom的属性2.筛选偶数9.函数形参初始值ES6 允许给函数参数设置默认值，当

1.检测浏览器是否支持worker2.写一个Worker要运行的JS文件（包含回传函数 —— 事件处理函数）处理页面传来的信息, 并将结果传回去3.用构造函数生成一个Worker4.向worker发送消息5.接收 Worker 传来的消息6.终止 worker方法一：HTML页面方法二线程中自己关闭...

localStorage和sessionStoragelocalStoragesetItem -- 设置一个值存储方法和存字符串存对象getItem -- 读取removeItem -- 删除```javascriptlocalStorage浏览器通过本地存储存在了硬盘上setItem – 设置一个值存储方法和存字符串//方法一、window.localStorage.setItem('keyString', 'valueString')//方法二、window.localStorage.k

JS闭包用法闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。简言之，闭包就是函数内部的函数（而且这个内部函数可以访问外部函数内的作用域）。function outside() { var name = 'closure'; //外部变量 function inside() {//闭包,一个内部函数 alert(name); } inside();//使用内部函数}outside();

前端之Web APIAPI它们是基于对象的客户端 JS中API操作文档从服务器获取数据的API第三方 API地理位置 api（Geolocation API）绘制图形视频和音频 API设备API客户端存储Web APIsAPIAPI：应用程序接口，可以通过提供的接口直接使用某种功能。相当于插座上的接口。它们是基于对象的对象是API使用的数据（包含在对象属性中）的容器以及API提供的功能（包含在对象方法中）。客户端 JS中API不是JS的一部分，但是是在JS的基础上构建的。种类：浏览器AP

前端之异步JS预备知识异步概述什么是同步什么是异步线程JS是单线程的异步简介异步的两种使用方式callbacks (老派异步)callbacks 异步情况callbacks 同步情况promise (新派异步)Promises 对比 callbacks介绍异步JSJS异步执行的函数setTimeout()setInterval()预备知识异步的本质**事件队列: **像promise这样的异步操作被放入事件队列中，事件队列在主线程完成处理后运行，这样它们就不会阻止后续JavaScript代码的运行。

前端之JSONJSONJSON概念注意:JSON验证JSON 结构JSONJSON概念JSON ( JavaScript对象表示法 ) 是一种轻量级的数据交换格式。用于将结构化数据表示为JavaScript对象的标准格式，通常**用于在网站上表示和传输数据. **JSON是基于 JavaScript 语法，但它又独立于JavaScript, 所以许多程序环境能够读取（解读）和生成 JSON。JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON

前端之JS对象1.对象基础对象的定义子命名空间访问内容用点表示法 和 括号表示法设置对象成员更新数据创建新成员"this"的含义document 对象2.面向对象的程序（OOP）类继承多态构建函数和对象真正的构造函数创建对象的其他方式Object()构造函数create()方法小结3.对象原型prototype 属性 -- 继承成员被定义的地方__proto__查看原型链constructor 属性修改原型常用模式继承对象使我们将一些信息安全地锁在了它们自己的包内，防止它们被损坏。1.对象基础对象是一

前端之JS事件events事件（events)常用事件绑定事件的方式函数绑定 -- 推荐使用绑定匿名函数行内绑定 -- 不要用事件对象阻止默认行为事件冒泡及捕获事件委托事件（events)个人理解: 元素绑定事件, 触发行为.事件: 绑定某种行为, 当行为触发时, 运行指定的代码(函数).事件是在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作（列如：运行一些代码）的机制，每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代

前端之JS代码块条件语句 -- 做选择if……else……语法:条件运算符switch三元运算符条件语句 – 做选择在代码中的做决定, 不同的数据, 做出不同的决定.游戏中, 生命值归零, 游戏结束;if……else……语法:if (满足这个条件) { 就执行这里的代码1;} else {//如果不满足上面的条件, 就执行下方的代码2 代码2}条件语句可以嵌套使用, 而且完全可以做更多的选择 – else if(){}数量不限。:if(){}else if(){}……

前端之js变量变量 -- 存储信息声明变量初始化 =let 和 var 的区别更新变量变量命名的规则变量类型NumberStringBooleanArrayObject动态类型变量 – 存储信息变量能够存储任何的东西 – 不只是字符串和数字。变量可以存储更复杂的数据，甚至是函数。变量的独特之处在于它存放的数值可变.声明变量使用变量的第一步就是创建它 – 也就是声明一个变量。声明一个变量的语法是在 var 或 let 关键字之后加上这个变量的名字：let myName;let myAge;

前端之JS起步程序运行的目的，为达目的应选定的代码类型，以及如何使这些代码协同运行。let 和 var 之间的区别常量用于存储不希望更改的数据，用关键字 const 创建，本例中用常量来保存对界面元素的引用。界面元素的文字可能会改变，但引用是不变的。函数是可复用的代码块，可以一次编写，反复运行，从而节省了大量的重复代码。...

前端之JavaScript第一步JavaScript是什么promptJavaScript可以做什么API浏览器 API第三方 API----------------------------------------------------------------------------------------------------牢记初心，砥砺前行JavaScript是什么HTML是一种标记语言，用来结构化我们的网页内容;CSS 是一种样式规则语;JavaScript 是一种脚本，一门编程语言，

前端之我的布局实践目标素材正常布局流对素材的解读展示目标素材素材正常布局流将素材代码导入编辑器后, 如下:对素材的解读<style>/* 第一步 -- 正常布局流 --------------------------------------------------*//* 白色背景, 黑色字体,外边距为零内容完美贴合窗口, 字体大小1.2em = 19.2px, 行高1.2, 字体样式*/body { background-color: #fff;

前端之媒体查询入门媒体查询媒体查询语法媒体类型单位pt屏幕宽度朝向 (横放 或 竖放)媒体查询 逻辑与或非断点移动优先的响应式设计媒体查询CSS媒体查询提供了一种应用CSS的方法 – 浏览器和设备的环境与指定规则相匹配的时候CSS被应用.媒体查询语法<style>@media media-type and (media-feature-rule) { /* CSS rules go here */}</style>翻译:<style>@medi

前端之响应式设计

前端之多列布局多列布局 -- 父容器属性设置列数设置至少列宽给多列增加样式列间隙列间的线列与内容折断break-inside多列布局 – 父容器属性设置列数column-count 指定列数设置至少列宽column-width 设置多列布局中的理想列宽。任何列的宽度都不会小于该值。给多列增加样式列间隙column-gap 设置使用元素列之间的间隔.间隔的宽度和列的宽度与总的页面宽度不能相互满足时,就会出现列减少.列间的线column-rule:是column-rule-

前端之定位布局定位布局前提文档流定位静态定位 -- 是文档的元素默认状态相对定位 relative绝对定位z-index固定定位 -- fixed黏性布局 -- sticky定位布局定位布局就是允许从正常的文档流布局中取出元素, 将它放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。前提文档流元素:万物皆盒: 围绕元素内容添加任何内边距、边界和外边距.默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。无法设置尺寸,

前端之浮动布局引入浮动图片浮动段首字母下沉多列浮动布局两列布局三列布局清除浮动浮动问题box-sizing修复下图问题最初,文本内浮动图像,文字环绕在它的左边或右边.之后,任何东西都可以浮动,出现了drop-cap（首字下沉）.现在,被看作传统的布局方法。引入浮动图片浮动<style>/* 浮动图片图片向左浮动,此时文本会包围过来,然后用图片外边距向右推开文本,留出间隙 */img { float: left; margin-right: 30px;}&l

前端之Grid布局网格网格布局创建网格网格添加列网格间隙 gap网格添加行属性显式网格与隐式网格的区别minmax() 函数自动使用多列填充基于线的元素放置grid-template-areas属性放置元素网格CSS网格是一个用于web的二维布局系统.可以把内容按照行与列的格式进行排版.网格布局网格是由一系列水平及垂直的线构成的一种布局模式。网格具有 列（column）与行（row），间隙(又叫"沟槽")（gutter）。创建网格选择一个容器,加上属性display:grid;就创建了一

前端布局之弹性盒子正常布局流弹性盒子display:flex换行(父)flex-directionflex-wrap(父)flex(子)flex-flowflex item的动态尺寸nth-of-type()flex指定flex item的最小值水平和垂直对齐align-itemjustify-contentflex item 排序flex 嵌套正常布局流改变元素尺寸要display：block 或 inline-block；相邻元素，margin重叠，大者保存，小者消失 — 这被称为外边距叠加。

前端之CSS布局一览CSS布局布局类型正常布局流display属性弹性盒子 Flexbox用法：flex属性Grid布局用法：终于学到了我最期望的地方了。。。CSS布局CSS布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。布局类型正常布局流display属性弹性盒子网格浮动定位CSS 表格布局多列布局正常布局流就是浏览器默认的HTML布局方式。其他布局方式都会覆盖掉默认布局样式。display属性设置元素的行为方式。

前端之样式化链接链接链接状态默认样式应用样式在链接后插入外部链接图标将链接样式化为按钮Web字体查找字体免费的字体经销商在线字体服务Web 字体使用下载字体（第一次用）我下载的四种字体牛刀小试——大学社区链接链接状态五个状态伪类：Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。Hover: 当用户的鼠标光标刚好停

前端之样式列表List列表列表的默认样式处理列表间距列表特定样式符号样式 list-style-type项目符号位置 list-style-position使用自定义的项目符号图片 list-style-imagelist-style 速记有序列表计数 start倒序value 指定数值列表大体上和其他文本一样List列表列表的默认样式ul ， ol ，dl 元素设置margin的顶部和底部: 16px（1rem）;当我将根元素的字体大小改为10px时，所以，list列表的margi

前端之字体与文本文本样式的分类字体text-transform颜色 colortext-decorationfont-familyfont-size4种字体常用属性text-shadow文本布局text-align 对齐方式line-height 行高间距（字母和单词）Font小试牛刀——文本内容：文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。文本样式的分类字体样式: 字体，大小，粗体或斜体，等等。文本布局: 文本间距以及其

CSS调试与风格CSS调试起因bug？debug验证CSS规范CSS调试起因结果和目的不一样。bug？运行时与预期不符都是bug。debug解决bug。网页链接：网页开发者工具保存调试过程的修改验证CSS ValidatorCSS规范1.保持统一全部属性都放在同一行或每个属性占一行2.写注释方便寻找，甚至可以用搜索寻找。如注释以 || 开头，搜索时，一次可以跳跃一整个部分。3.css文件内可以分部分。第一部分可以是通用样式第二部分写类的样式另一种是按部分写：布

前端之表格

前端之图像、媒体和表单元素替换元素调整图像大小max-widthobject-fit布局中的替换元素万物皆盒替换元素替换元素：图像和视频，具有宽高比。css不能改变它们的内部布局，只能改变它们位置。调整图像大小如何处理图片的溢出呢？max-width<style>.container1 .box { width: 200px; border: 2px solid rebeccapurple;}.max { max-width: 100%;}&lt

前端之CSS的值与单位CSS的值颜色数值长度绝对长度单位相对长度单位百分比数字图片位置字符串函数CSS中使用的每个属性都允许拥有一个或一组值CSS的值颜色CSS中的值是一种定义允许子值集合的方法。eg:color：关键字（blue）十六进制值rgb()函数 rgba()函数——添加了透明度hsl()函数——色调，饱和度，亮度 hsla()函数——添加了透明度数值数据类型长度绝对长度单位相对长度单位百分比相对于父元素（100%）有些情况不接受百分比。数字不带

前端之溢出溢出overflow溢出CSS中万物皆盒，盒子无法装下的时候就会出现溢出的情况。我们通过使用 width和height（或者逻辑属性 inline-size 和 block-size）限制元素盒子的时候就有可能发生溢出（overflow）。eg：内容过多，超出元素盒子的height；内容太大，超出元素盒子的width；目的：控制溢出表现的形式；减少溢出。overflowoverflow是控制溢出的表现方式。默认visible（溢出可见）。overflow: hidden →

前端之书写模式书写模式writing-mode逻辑外边距、边框和内边距属性书写模式书写模式指文本的排列方向是横向还是纵向的。使用 writing-mode 属性切换模式。writing-modewriting-mode的三个值分别是：horizontal-tb: 块流向从上至下。对应的文本方向是横向的。vertical-rl: 块流向从右向左。对应的文本方向是纵向的。vertical-lr: 块流向从左向右。对应的文本方向是纵向的。这里的t：topr：rightb：bottom

前端之背景与边框背景背景颜色背景图片背景平铺图片大小渐变、背景图像和圆角，背景和边框的巧妙运用。背景背景颜色background-color属性定义了CSS中任何元素的背景颜色。元素的内容和内边距。<style>/* Background Colors 范围：内容和内边距-------------------------------------------------- */.box { background-color: #567895; border: 3

前端之盒模型盒模型块级盒子 和 内联盒子块级盒子（Block box）内联盒子（Inline box）弹性布局 flex盒模型在 CSS 中，所有HTML元素都可以看作盒子，由内而外表示为——内容 内边距 边框 外边距。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。块级盒子 和 内联盒子用display 属性的进行设置，比如 inline（内联盒子） 或者 block（块级盒子）。块级盒子（Block box）Block box会扩展并占据父容器的所有空间，所以在绝大数的情况下

前端之关系选择器

前端之伪类、伪元素伪类、伪元素是选择器？？？伪类？伪类的简单示例伪类、伪元素是选择器？？？选择器的数量众多，使用目的明确。了解使用方法后查阅列表进行使用。伪类？选择器的一种，用于选择处于特定状态的元素。如：同类型元素的第一个鼠标悬浮在元素上……它们的样式会发生改变，就像是应用了一个类。作用：减少类的使用。格式：伪类以冒号开头。伪类的简单示例...

前端之选择器选择器选择器参考表类型选择器选择器用来指定网页上我们想要样式化的HTML元素。选择器所选择的元素，叫做“选择器的对象”。选择器参考表类型选择器又名“标签名选择器”或者是”元素选择器“，因为它在文档中选择的对象是一个HTML标签/元素。<style></style>...

前端之层叠与继承层叠三要素选择器优先级继承控制继承重设所有属性值!important——提高优先级层叠CSS —— Cascading Style Sheetscascade 英 /kæˈskeɪd/ 美 /kæˈskeɪd/n. 小瀑布（尤指大瀑布的一支）；倾泻，流注；瀑布状物；倾泻（或涌出）的东西；（很快发生的）一连串事情；（尤指信息或知识等的）连续传递过程；（一个过程中前一个引发后一个的）连续阶段，一系列装置v. （水）倾泻，流注；大量落下，垂下；连续传递，传授；使（装置，物品）串联

前端之第一次尝试个人主页<!DOCTYPE html><html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s

前端之css函数函数calc() 函数函数函数由函数名和一些括号组成，括号内放置了该函数的允许值。calc() 函数calc() 函数用于动态计算长度值。calc()函数支持 “+”, “-”, “*”, “/” 运算；<style>#only { font-style: italic; color: purple; width: calc(100% - 100px);}</style>网页实例（Ctrl+U查看原码）随着学习持续更