Tammy-Zting-Blog

第1章 Javascript-基础知识1.1 变量类型与变量计算1.1.1 值类型与引用类型值类型 值类型(不会相互影响):undefined、string、number、boolean 1234var a=100;var b=a;a=200;console.log(b)//100 引用类型 引用类型：对象、数组、函数 1234var a={age:20}var b=ab.age=21console.log(a.age)//21 值类型与引用类型的区别 两者之间的一个区别是，原始数据类型是通过值传递的，对象是通过引用传递的。 值传递：意味着创建原始文件的副本。把它想象成一对双胞胎:他们出生的时候一模一样，但是双胞胎中的老大在战争中失去了一条腿，而老二却没有。 引用传递: 意味着创建原始文件的别名。当我妈妈叫沙雕的时候，虽然我的名字叫小智，但这并不是说我就突然就克隆了一个自己:我仍然是我，只是可以用不同名字来称呼我而已。 JS中的“严格”模式是什么 当使用严格模式时，不能使用隐式声明的变量，或为只读属性赋值，或向不可扩展的对象添加属性。 值类型和引用类型 ...

第4节 关键CSS4.1 原理 关键CSS将样式分为两类：首屏样式和页面其余部分的样式 只将首屏样式存储到<style>标签中，并将其内联到HTML，剩下的样式将从外部文件加载。 使用标签加载CSS，而是使用preload提示 1<link rel="preload" href="..." as="style" onload="this.rel=stylesheet'" > 这样可以在不阻塞渲染的情况下加载CSS。CSS完成下载时，标签上的onload事件处理程序将被触发。下载完成后，rel属性的值就会从preload转换为stylesheet。这将标签从资源提示更改为普通CSS引入，后者将CSS应用于首屏以外的内容。JavaScript polyfill作为兜底，以防浏览器不支持preload提示。就是这么简单！ 4.2 实现 480、667、768、800、900、1024和1280像素的位置绘制参考线。这些是流行设备的常见垂直分辨率，并且大多数设备的分辨率包含在两者之间的任何位置。制作好这些参考线后，你需要调整浏览器窗口的大小，以查看内容在每个临 ...

第1节 理解Web性能1.1 模拟网络连接 由于是在本地计算机上运行客户网站的，所以向本地主机发出请求不会出现延迟。但没有延迟就很难衡量任何性能提升，因为这种场景下不会存在网络瓶颈。 首先打开Chrome，启用开发者工具。在Windows下需要按F12，在Mac下则要按Command +Alt + I。此时开发者工具应该会出现在Chrome窗口中。另一种办法是选择View ➤ Developer➤Developer Tools（视图→开发者→开发者工具）菜单。出现Tools菜单时，点击窗口顶部的Network选项卡，如图所示。 注意！用完要记得关闭，不然会影响浏览其他网站 1.2 资源瀑布图 在Network选项卡中，首先要确保选中Disable cache复选框。首次访问一个网站时，不会有任何资源缓存——这个场景才是你想要重现的，否则网站的资源将从缓存中提供。尽管有缓存时网站加载速度更快，但最好假设普通用户未曾缓存过你的网站资源。对于这样的未知站点，此类情况发生的概率更大。 在Network选项卡中，要确保左上角的Record按钮处于开启状态（见图1-7）。按钮为红色代表 ...

Google实用调试方法 按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。 Dom元素截图，第一步打开命令输入Screenshot Capture node screenshot,全屏截图Screenshot Capture full size screenshot 在控制台使用上一次操作返回值$_ 重新发起xhr请求 ​ 在平时和后端联调时，我们用的最多的可能就是Network面板了。但是每次想重新查看一个请求，我们往往都是通过刷新页面、点击按钮等方式去触发xhr请求，这种方式有时显得会比较麻烦，我们可以通过google提供的Replay XHR的方式去发起一条新的请求，这样对于我们开发效率的提升是有所帮助的。 测试一个DOM节点文字太长时，样式是否会混乱 在控制台输入document.body.contentEditable=”true”或者document.designMode = ‘on’就可以实现对网页的编辑了。 网络面板（Network**）的幻灯片模式** 启动Net ...

JS 中强大的操作符数值分割符 _ES2021 引入了数值分割符 _，在数值组之间提供分隔，使一个长数值读起来更容易。 12let number = 100_0000_0000_0000 // 0太多了不用数值分割符眼睛看花了console.log(number) // 输出 100000000000000 此外，十进制的小数部分也可以使用数值分割符，二进制、十六进制里也可以使用数值分割符。 1230x11_1 === 0x111 // true 十六进制0.11_1 === 0.111 // true 十进制的小数0b11_1 === 0b111 // true 二进制 逗号运算符 ,逗号操作符对它的每个操作数求值（从左到右），并返回最后一个操作数的值。 1expr1, expr2, expr3... 示例：将数组的第一项和第二项调换，并返回两项之和： 12345function reverse(arr) { return [arr[0], arr[1]]=[arr[1], arr[0]], arr[0] + arr[1]&# ...

React Hook常用场景State Hook更新更新分为以下两种方式，即直接更新和函数式更新，其应用场景区分点在于： 直接更新不依赖于旧state值 函数式更新依赖于旧state值 12345// 直接更新setState(newCount);// 函数式更新setState(prevCount => prevCount - 1); 实现合并于class不同，useState不会自动合并并更新对象，而是直接替换它 1234setState(preVState=>{ //也可以使用Object.assign return {...preVState,...updateValues}}) Effect Hook基础用法可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate和 componentWillUnmount这三个函数的组合 123456789101112131415function Effect(){ const [count ...

基本画布功能 基本 设置width和height 使用getContext()方法，传入“2d”获取绘图上下文引用 使用时最好先测试一下getContext是否存在 示例 12345678910//html<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>//jslet drawing = document.getElementById("drawing"); // 确保浏览器支持<canvas> if (drawing.getContext) { let context = drawing.getContext("2d"); // 其他代码} toDataURL()方法导 ...

发送按钮 send1234567<div id="send-btn"> <button> <!-- 此处的可换成svg --> <a title="// 这里是一个svg的占位,可换成你喜欢的动态图"></a> send &l ...

Git 学习config 设置用户名和账号 使用了--global参数 表示你这台机器上的所有仓库都会用这个配置 12git config --global user.name "Your Name"git config --global user.email "email@example.com" 查看配置 1git config --list 创建仓库 创建文件夹 12mkdir learngitcd learngit 初始化仓库 初始化后会生成一个.git目录，这个目录是隐藏的，不要手动删掉 1git init 把文件添加到仓库 123git add yourfile.txt //或者添加所有git add . 提交到仓库 -m后面输入的是本次提交的说明，输入有意义的说明很重要 1git commit -m "wrote a yourfile.txt" 注意-am区别 1git commit -am "xxxxx" 可以省略使用git add命令将已跟踪文件 ...

数组常用方法forEachevery 用来判断所有的数组元素都满足一个条件才返回truesome 用来判断数组元素中一个元素满足一个条件即返回truesort 排序find()(ES6 新增) 用来查找目标元素，找到就返回该元素，找不到返回 undefined 语法：arr.find(callback(element index array),thisArg]) 参数： callback 在数组每一项上执行的函数，接收 3 个参数 element:当前遍历到的元素 index:可选 当前遍历到的索引 array:可选 数组本身 thisArg 可选。指定 callback 的 this 参数。返回值：当某个元素通过 callback 的测试时，返回数组中的一个值，否则返回 undefined。 findIndex()ES6 新增) 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1 语法：arr.findIndex(callback(element index array),thisArg]) 参数： callback 在数组每一项上执行的函数，接 ...