Web前端学习路线笔记（十七）ES6快速复习

几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class="niceButton2">click</button> css部分： .niceButton2{ position: relative; background-color: rgb(32, 93, 224); border: none; font-size: 28px;

vscode配置用户代码片段

一、第一种方法下载live-server插件 1.打开vscode扩展商店 搜索并安装live-server插件 2.重启vscode 右键你需要跑在服务器上的文件，点击open with Live Server就行了 以下是已经打开页面的url，可以看到跑在了本地服务器上。 二、第二种方法 npm安装liver-server 1.在vscode中打开命令终端（右键在终端中打开就自动进入那个目录） wind+r cmd打开的集成终端也可以。 然后在命令行输入： npm install live

调试代码：在开发者工具的 “Sources” 或 “调试” 面板中，找到你的源代码文件（通常在 “localhost” 或 “webpack” 目录下），然后找到你添加了 debugger 的代码行。查看变量和调试信息：在开发者工具的 “Sources” 或 “调试” 面板中，你可以查看和检查代码中的变量值、调用栈和其他调试信息。然后，可以使用调试工具栏中的按钮（如 “继续”、“单步执行”、“跳过”）来逐行执行代码，并观察变量的值和调试信息。触发断点：在浏览器中执行触发该断点的操作。

创建一个新对象，如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址。总而言之，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。创建一个新对象，如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，则从堆内存中开辟一个新的区域存放该引用类型指向的堆内存中的值,且修改新对象的值不会影响原对象。结论：没有影响，深拷贝成功。函数没了，正则变为空对象。

前端工程化 1.什么是前端工程化 前端工程化指的是: 在企业级的前端项目开发中，把前端开发所需要的工具，技术，流程，经验等进行规范化，标准化。 1)模块化 （js的模块化,css的模块化,资源的模块化） 2)组件化（复用现有的UI结构，样式，行为） 3)规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理） 4)自动化（自动化构建，自动化部署，自动化测试） 4)前端工程化的解决方案 早期的前端工程化解决方案：grunt ,gulp 目前主流的前端工程化解决方案: webpack(ht

但它们的版本不一样。模块之间是互相独立的，他们都会在它自身的node_module里先找，如果都找到了，那他们所用的模块确实是不同版本的。简而言之，当前的模块的node_modules找到了自己的依赖里使用的这个包，就不会再向上查找了，所以你即使在最外层的模块里加载了最新的这个包，那么它也不会生效。即使你在项目最外层的package.json里引入了2.2.0以上的版本，那么它并不会被向上加载到。若果追踪到文件系统的根目录也没有找到对应的依赖，那么nodejs就会找不到对应模块的报错。...

1.引入两个js 去bootcdn搜索就行。 jquery.js <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> jquery cookie <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> 2.

值得注意的是，只有当dispaly:-webkit-box 且-webkit-box-orient: vertical;Two-value syntax 表示两行语法,text-overflow是支持传入两个值的，如: text-overflow: clip clip;截断边缘处需要放省略号，它有固定宽度，当判断显示的内容不够显示省略号时，会把整个单词都隐藏，否则单词会被截断部分显示省略。当传入两个值的时候，第一个值表示左边超出部分的省略，第二个值表示右边超出的省略。省略边缘单词的长短可能会影响省略效果。

Express简介 1. 什么是Express 官方给出的概念: Express 是基于Node.js 平台，快速、开放、极简的Web开发框架。 通俗的理解：Express的作用和Node.js内置的http模块类似，是专门用来创建Web服务器的。 Express 本质： 就是一个npm 上的第三方的包，提供了快速创建Web服务器的便捷方法。 Express的中文官网地址:https://www.expressjs.com.cn/ 4.17.1 2. 进一步理解 Express 思考：不使用Express

flex，inline-flex

document.documentElement.scrollTop 有些移动端不支持，导致无法获取正确的滚动高度，使用document.body.scrollTop移动端也能正常获取，兼容一下）（小细节：offsetTop计算的是当前元素距离父元素顶部的高度，多层嵌套则需要递归叠加offsetTop，所以建议是选取最外面的那层元素，则可以直接获取距离窗口的高度）当页面滚动高度超过元素距离窗口的高度，设置为fixed，且top为0（当然bottom也可以，数值随便设）1）计算元素距离窗口的高度。

学习git有利于大项目多人协作开发

数组求和方法总结

jQuery鼠标拖动元素事件（实现拖动一个派蒙的效果) 1.引入jquery.js <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 2.实现原理 通过设置鼠标按下事件，鼠标移动事件，和鼠标弹起事件来完成整个效果。 2.1.获取可拖动元素位置 2.2.鼠标移动事件mousemove ​ 可以获取鼠标的位置，通过鼠标位置的偏移量（改变量)来确定想要拖动元素的新的位置。新位置