react-router React Router 5 React Router 6 概述 React Router以三个不同的包发布到npm上,它们分别是: react-router:路由的核心库,提供了很多的组件和钩子。 react-router-dom:包含了react-router所有内容,并添加了一些专门用于DOM的组件,例如<BrowserRouter>等。 react-router-nativ 2022-12-23 React 整理
HTML标签语义化和SEO HTML标签语义化与SEO的关系 HTML标签语义化 概念 HTML5标签语义化指:合理正确的使用语义化的标签来创建页面结构。 语义化的优点 在没有CSS样式的情况下,页面整体也会呈现很好的结构效果。 代码结构清晰,易于阅读。 利于开发和维护,方便其他设备解析(如屏幕阅读器)根据语义渲染网页。 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同的标签来赋予不同的权重。 常见的语义化标签 结 2022-10-11 CSS和HTML 整理
WebGL playcanvas PlayCanvas 是一款使用 HTML5 和 WebGL 技术运行游戏以及其他 3D 内容的开源游戏引擎,PlayCanvas 以其独特的性能实现了在任何手机移动端和桌面浏览器端均可以流畅运行。 对于开发者来说,可以在playcanvas的平台进行开发,也可以在本地开发。 官方文档 | 官方实例 | GitHub仓库 起步 123456789101112131415 2022-10-09 WebGL 整理
图片懒加载 图片懒加载 什么是图片懒加载 通常情况下,HTML终端图片资源会自上而下依次加载,但对于含有大量图片资源的网站,会采用“按需加载”的方式,也就是当图片资源出现在视口区域内才会被加载,可以大大节省网站的浏览,这种技术就是图片懒加载技术。 基本原理 主要通过监听图片资源容器是否出现在视口区域内,来决定图片资源是否被加载。 早期实现 给目标元素指定一张占位图,将真实的图片链接存储在自定义属性中,通常是 2022-10-02 CSS和HTML 整理
script标签中的async和defer属性 script标签中的async和defer属性 参考地址 在 HTML 中会遇到以下三类 script: <script src='xxx'></script> <script src='xxx' async></script> <script src='xxx' defer></script> script 浏览器 2022-10-01 CSS和HTML 整理
单页面应用路由实现 单页面应用路由实现 单页面应用与多页面应用 什么是单页面应用? 单页面应用指的是第一次进入页面的时候会请求一个html文件,切换到其他组件的时候,虽然路径会发生相应的变化,但是没有新的html文件请求,原理是javascript会感知到url的变化,然后javascript会动态的将当前页面的内容清除掉,然后将下一个页面的内容挂载到当前的页面上,这个时候的路由不是由后端做的而是由前端来做的,来判断 2022-09-29 浏览器 整理
Promise/A+ Promise/A Promise/A+可以用来检验手写的Promise时候合格,一共872个样例。 如何使用 12yarn inityarn add -D promises-aplus-tests 初始化并安装npm包(笔者习惯用yarn)。 把自己的写好的Promise对象放入一个文件,命名为TestPromise.js。 根据github上的描述增加一个静态方法,并用commonJS的 2022-09-20 JavaScript 整理
VDOM VDOM 一个手写的VDOM类库 使用babel转换jsx代码 目前实现jsx到js的转换不需要完全依赖react的库,只需要用babel的新插件 配置环境 12yarn inityarn add -D @babel/cli @babel/core @babel/plugin-transform-react-jxs 运行babel 1./node_modules/.bin/babel sr 2022-09-17 React 整理
React React 语法基础 jsx语法规范 定义虚拟DOM时,不要写引号。 标签中混入JS表达式要用{}. 样式的类名指定不要用class而要用className。 内联样式。要用style={{key:value}}的形式去写。 只有一个根标签。 标签必须闭合。 标签首字母 若小写字母开头,则将改标签为html中同名的元素。 若大写字母开 2022-08-02 React 整理