“学习笔记” 共(7)篇
vue学习笔记 vue学习笔记{mtitle title="vue学习笔记"/}ES6 模块化node.js 遵循了 CommonJS 的模块化规范。其中： 导入其它模块使用 require() 方法 模块对外共享成员使用 module.exports 对象 模块化的好处： 大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。前端模块化规范的分类在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。 但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化 标准，例如： AMD 和 CMD 适用于浏览器端的 Javascript 模块化 CommonJS 适用于服务器端的 Javascript 模块化 太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的 ES6 模块化规范诞生了！什么是 ES6 模块化规范ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学 习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。 ES6 模块化规范中定义： 每个 js 文件都是一个独立的模块 导入其它模块成员使用 import 关键字 向外共享模块成员使用 export 关键字在 node.js 中体验 ES6 模块化node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照 如下两个步骤进行配置： ① 确保安装了 v14.15.1 或更高版本的 node.js ② 在 package.json 的根节点中添加 "type": "module" 节点ES6 模块化的基本语法ES6 的模块化主要包含如下 3 种用法： ① 默认导出与默认导入 ② 按需导出与按需导入 ③ 直接导入并执行模块中的代码默认导出默认导出的语法： export default 默认导出的成员默认导入的语法： import 接收名称 from '模块标识符默认导出的注意事项每个模块中，只允许使用唯一的一次 export default，否则会报错默认导入时的接收名称可以任意名称，只要是合法的成员名称即可按需导出按需导出的语法： export 按需导出的成员按需导入按需导入的语法： import { s1 } from '模块标识符'按需导出与按需导入的注意事项① 每个模块中可以使用多次按需导出 ② 按需导入的成员名称必须和按需导出的名称保持一致 ③ 按需导入时，可以使用 as 关键字进行重命名 ④ 按需导入可以和默认导入一起使用直接导入并执行模块中的代码如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模 块代码，Promise1. 回调地狱多层回调函数的相互嵌套，就形成了回调地狱。回调地狱的缺点： 代码耦合性太强，牵一发而动全身，难以维护 大量冗余的代码相互嵌套，代码的可读性变差如何解决回调地狱的问题为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。Promise 的基本概念① Promise 是一个构造函数 我们可以创建 Promise 的实例 const p = new Promise() new 出来的 Promise 实例对象，代表一个异步操作 ② Promise.prototype 上包含一个 .then() 方法 每一次 new Promise() 构造函数得到的实例对象， 都可以通过原型链的方式访问到 .then() 方法，例如 p.then() ③ .then() 方法用来预先指定成功和失败的回调函数 p.then(成功的回调函数，失败的回调函数) p.then(result => { }, error => { }) 调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的基于 then-fs 读取文件内容由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式。因此，需要先运行如下的命令，安装 then-fs 这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容：then-fs 的基本使用调用 then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。.then() 方法的特性如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用，就解决了回调地狱的问题基于 Promise 按顺序读取文件的内容Promise 支持链式调用，从而来解决回调地狱的问题通过 .catch 捕获错误在 Promise 的链式操作中如果发生了错误，可以使用 Promise.prototype.catch 方法进行捕获和处理如果不希望前面的错误导致后续的 .then 无法正常执行，则可以将 .catch 的调用提前，Promise.all() 方法Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）。Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的 .then 操作（赛跑机制）。. 基于 Promise 封装读文件的方法方法的封装要求： ① 方法的名称要定义为 getFile ② 方法接收一个形参 fpath，表示要读取的文件的路径 ③ 方法的返回值为 Promise 实例对象创建具体的异步操作如果想要创建具体的异步操作，则需要在 new Promise() 构造函数期间，传递一个 function 函数，将具体的异步操作定义到 function 函数内部。获取 .then 的两个实参通过 .then() 指定的成功和失败的回调函数，可以在 function 的形参中进行接收，调用 resolve 和 reject 回调函数Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理。async/await什么是 async/await async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在 async/await 出 现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。.then 链式调用的优点： 解决了回调地狱的问题 .then 链式调用的缺点： 代码冗余、阅读性差、 不易理解async/await 的基本使用使用 async/await 简化 Promise 异步操作async/await 的使用注意事项① 如果在 function 中使用了 await，则 function 必须被 async 修饰 ② 在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行JavaScript 是单线程的语言JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。 单线程执行任务队列的问题： 如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。. 同步任务和异步任务为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类： ① 同步任务（synchronous） 又叫做非耗时任务，指的是在主线程上排队执行的那些任务 只有前一个任务执行完毕，才能执行后一个任务 ② 异步任务（asynchronous） 又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数步任务和异步任务的执行过程① 同步任务由 JavaScript 主线程次序执行 ② 异步任务委托给宿主环境执行 ③ 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行 ④ JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行 ⑤ JavaScript 主线程不断重复上面的第 4 步EventLoopavaScript 主线程从“任务队列”中读取异步 任务的回调函数，放到执行栈中依次执行。这 个过程是循环不断的，所以整个的这种运行机 制又称为 EventLoop（事件循环）结合 EventLoop 分析输出的顺序正确的输出结果：ADCB。其中： A 和 D 属于同步任务。会根据代码的先后顺序依次被执行宏任务和微任务什么是宏任务和微任务 JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是： ① 宏任务（macrotask） 异步 Ajax 请求、 setTimeout、setInterval、 文件操作 其它宏任务 ② 微任务（microtask） Promise.then、.catch 和 .finally process.nextTick 其它微任务宏任务和微任务的执行顺序每一个宏任务执行完之后，都会检查是否存在待执行的微任务， 如果有，则执行完所有微任务之后，再继续执行下一个宏任务
css学习笔记 css学习笔记1.1块级元素显示特点：独占一行（一行只能显示一个）宽度默认是父元素的宽度，搞多默认由内容撑开可以设置宽高代表标签：div、p、h系列、ul/li、dl、dt、dd、form、hesder、nav、footer......2.1行内元素显示特点：一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高代表标签：a、span、b、u、i、s、strong、ins、em、del......3.1行内块元素显示特点：一行可以显示多个可以设置宽高代表标签：input、textarea、button、select....特殊情况：img标签有行内块元素的特点，但是Chrome调试工具中显示的结果是linline4.1元素显示模式转换目的：改变元素默认的显示特点，让元素符合布局要求语法：display：block 转换成块元素display：inline-block 转换成行内块元素display：inline 转换成行内元素HTML嵌套规范注意点块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等....但是：p标签中不要嵌套div、p、h等块级元素a标签内部可以嵌套任意元素但是：a标签不能嵌套a标签css的特性1.1继承性的介绍特点：子元素有默认继承父元素样式的特点（子承父业）可以继承的常见属性（文字控制属性都可以继承）colorfont-style、font-weight、font-size、font-familytext-indent、text-alignline-height注意点：可以通过调试工具判断样式是否可以继承继承失效的特殊情况如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式a标签的color会继承失效h系列标签的font-size会继承失效2.1层叠性特性：给同一个标签设置不同的样式--->此时样式会层叠叠加-->会共同作用在标签上给同一个标签设置相同的样式--->此时样式会层叠覆盖-->最终写在最后的样式会生效注意点：当样式冲突时，只有当选择器优先级相同是，才能通过层叠性判断结果3.1优先级特性：不同的选择器具有不同的优先级，优先级高德选择器样式会覆盖优先级低选择器样式优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important注意点：!important写在属性值的后面，分号的前面！!important不能提升继承的优先级，只要是继承优先级最低实际开发中不建议使用!important3.2权重叠加计算场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效权重叠加计算公式：（每一级之间不存在进位）比较规则：先比较第一级数字，如果比较出来了，之后的统统不看如果第一级数字相同，此时再去比较第二级数字如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）注意点：!important如果不是继承，则权重最高，天下第一！盒子模型1.1盒子模型的介绍盒子的概念1.页面中的每个标签，都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局2.浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子盒子模型css中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域 （border）、外边距区域（margin）构成，这就是盒子模型2.1内容的宽度和高度作用：利用width和height属性默认设置是盒子内容区域的大小属性：width/heigh常见数值：数字+px3.1边框（border）--连写形式属性名：border属性值：单个取值的连写，取值之间以空格隔开如：border：10px solid red; border-top：10px solid red; （单独控制上边框）solid:实线； dashed：虚线； dotted：点线注意：border会撑大盒子尺寸结构伪类选择器作用与优势：做用：根据元素在html中的结构关系查找元素优势：减少对于HTML中类的依赖，有利于保持代码整洁场景：常用于查找父级选择器中的子元素选择器E:first-child{} 匹配父元素中第一个子元素，并且是E元素E:last-child{} 匹配父元素中最后一个子元素，并且是E元素E:nth-child(n){} 匹配父元素中第N个子元素，并且是E元素E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素伪元素伪元素：一般页面中的非主体内容可以使用伪元素区别：1. 元素：HTML设置的标签 2. 伪元素：由css模拟出来的标签效果 种类：：：before 在父元素内容的最前添加一个伪元素：：after 在父元素内容的最后添加一个伪元素注意点：必须设置content属性才能生效伪元素默认是行内元素
最新评论
-
11小时前 - 11天前
- 14天前
- 14天前
- 16天前
舔狗日记