m0_56947432的博客

原创 jsbridge的概念和具体使用

在Android中，你可能需要调用相应的服务或方法来处理请求，并在完成后调用回调。- 在iOS中，使用JSBridge的回调机制来调用JavaScript的回调函数。- **性能**：频繁的JSBridge调用可能影响性能，优化调用和处理过程。- **兼容性**：确保JSBridge的实现兼容不同的设备和操作系统版本。- **错误处理**：在原生代码和JavaScript中都要有错误处理机制。- **安全性**：确保通信是安全的，避免潜在的安全风险，如注入攻击。

原创 WebAPIs(07)

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？

原创 WebAPIs(06)

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

原创 WebAPIs(05)

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

原创 WebAPIs(04)

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

原创 WebAPIs(03)

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。比如：谁绑定了这个事件。鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。把事情委托给别人，代为处理。事件委托也称为事件代理，在 jQuery 里面称为事件委派。说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

原创 WebAPIs(02)

script>// 1. 获取元素的属性值// (1) element.属性//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index</script>自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

原创 WebAPIs(01)

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。举例解释什么是API。例如，C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。javascript中有一个函数alert()可以在页面弹一个提示框，这个函数就是js提供的一个弹框工具。

原创 react-router v6使用

react-router中提供了多种Router,用来包裹整个应用。在 Web 浏览器中运行时应使用 <BrowserRouter> 或 <HashRouter>

原创 React中的hook使用

这个是用在处理DOM的时候,当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否则可能会出现出现闪屏问题, useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制。如果当前渲染是紧急更新的结果，比如用户输入，应使用之前的值。// react18 以前，所有的更新都是紧急的. 更新用户输入过程中，事件的触发频率非常，会导致大量重新渲染，页面可能会出现卡顿。在浏览器执行绘制之前，

原创 虚拟dom和diff算法

在当前的实现中，一棵子树能在其兄弟之间移动，但不能移动到其他位置。例如,下面的这种情况. React并不会改变A树的位置,而是拆除A树,在D节点下重新创建A树.实际开发中应避免这样的操作,不过目前的开发中基本没有这种情况该算法不会尝试匹配不同组件类型的子树。如果你发现你在两种不同类型的组件中切换，但输出非常相似的内容，建议把它们改成同一类型。Key 应该具有稳定，可预测，以及列表内唯一的特质。不稳定的 key会导致许多组件实例和 DOM 节点被不必要地重新创建或渲染错误，这反而导致了性能下降。

原创 redux的使用

Redux 是 JavaScript 应用的可预测状态容器，用来集中管理状态。特点：集中管理、可预测、易于测试、易于调试、强大的中间件机制满足你所有需求。注意：redux 是一个独立于 react 的库，可以配合任何 UI 库/框架来使用。redux的三大原则单一数据源State是只读的使用纯函数来执行修改什么情况下需要使用redux总体原则: 大型项目状态管理复杂才用某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态。

原创 鸿蒙课程学习总结（03）

组件预览默认的预览设备为Phone，若您想查看不同的设备，或者不同的屏幕形状，或者不同设备语言等情况下的组件预览效果，可以通过设置@Preview的参数，指定预览设备的相关属性。请注意，如果被预览的组件是依赖参数注入的组件，建议的预览方式是：定义一个组件片段，在该片段中声明将要预览的组件，以及该组件依赖的入参，并在组件片段上标注@Preview注解，以表明将预览该片段中的内容。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。

原创 鸿蒙课程学习总结（02）

按住快捷键Ctrl并选择需要声明的变量名、方法名、接口名、类名等，即可在模块的Index.ets文件中批量生成相应的声明信息。提供代码的自动补全能力，编辑器工具会分析上下文，并根据输入的内容，提示可补全的类、方法、字段和关键字的名称等，支持模糊匹配。自动补齐功能默认按最短路径进行排序，如仅需按照最近使用过的类、方法、字段和关键字等名称提供补全内容排序，可以在。编辑器支持将HSP和HAR模块中变量、方法、接口、类等需要对外暴露的信息，通过。，指定需要覆写的对象（方法、变量等），点击。，完成方法快速生成。

原创 鸿蒙课程学习总结（01）

默认情况下，DevEco Studio已预置了代码格式化的规范，您也可以个性化的设置各个文件的格式化规范，设置方式如下：在。支持对代码块的快速折叠和展开，既可以单击编辑器左侧边栏的折叠和展开按钮对代码块进行折叠和展开操作，还可以对选中的代码块单击鼠标右键选择折叠方式，包括折叠、递归折叠、全部折叠等操作。提供Find Usages代码引用查找功能，帮助开发者快速查看某个对象(变量、函数或者类等)被引用的地方，用于后续的代码重构，可以极大的提升开发者的开发效率。双击查找的结果可以快速打开所在文件的位置。

原创 如何修改第三方npm包

在你的项目的 package.json中，需要指向本地的包而不是npm注册表中的包。如果官方包有更新，你需要手动将这些更新合并到你修改后的版本中。如果你的修改是长期且重要的，你可能希望发布这个修改后的包。为了安全和方便修改，建议将包的源码复制到你的项目目录中。首先，确保你已经在你的项目中安装了需要修改的npm包。找到你安装的npm包所在的位置，通常在 node modules文件夹中。在编辑器中，你可以对包的源代码进行修改，修复bug，添加新功能等，每次修改完包代码后，你需要重新安装依赖来更新你的项目。

原创 vue有了数据响应式为何还要diff

Diff 算法是一种高效更新DOM 的策略，它通过比较新旧虚拟 DOM 树的差异，最小化了更新操作，提高了页面的渲染效率。Vue 中的数据响应式和虚拟 DOM 的 diff 算法是两个不同的概念，它们分别解决了不同的问题，相互协作以提高页面渲染的效率和性能。虚拟 DOM+Diff 算法:提高了页面渲染的效率和性能减少了不必要的 DOM 操作，确保了页面的流畅性和响应性。数据绑定:保证了视图与数据的同步更新，当数据发生变化时，视图会自动更新，避免了手动操作 DOM的繁琐和易出错性。

原创 http 状态码以及代表的意义（详细猫猫图解）

原创 跨域的产生以及相关解决方法

跨域（Cross-Origin Resource Sharing，简称 CORS）是指在浏览器中，由于安全原因，一个网页（即一个域下的文档）不能直接请求另一个域下的资源。这是浏览器的同源策略（Same-Origin Policy）的一部分，旨在防止恶意网站读取另一个网站的敏感数据。同源策略：所谓同源策略是浏览器的一种安全机制，来限制不同源的网站不能通信。同源就是域名、协议、端口一致。Web 页面：当一个网页尝试通过或fetchAPI 请求另一个域的资源时。Web 字体。

原创 TypeScript教程（03）

类型别名用来给一个类型起个新名字。类型别名常用于联合类型。

原创 TypeScript教程（02）

如果是一个普通类型，在赋值过程中改变类型是不被允许的：但如果是any类型，则允许被赋值为任意类型。以下代码虽然没有指定类型，但是会在编译的时候报错：事实上，它等价于：TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检查。

原创 TypeScript教程（01）

(TypeScript 是带有类型语法的 JavaScript)TypeScript最终还是会编译成javascript运行。

原创 HarmonyOS应用开发者基础认证和高级认证的学习和证书领取

传统厚重的App ，整体体验好，功能齐全，但开发成本高、周期长，且存在搜索，安装，升级，卸载等一系列需要用户主动关注的显性操作，这些显性操作给用户带来了实质性的使用成本。随着人们对交互和信息获取的智能化要求越来越高，移动设备的计算能力越来越强，在设备侧就能提供AI的相关能力，例如自然语言交互、环境智能感知、图像识别等。全新的全场景设备体验，正深入改变消费者的使用习惯。同时应用开发者也面临设备底座从手机单设备到全场景多设备的转变，全场景多设备的全新底座，为消费者带来万物互联时代更为高效、便捷的体验。

原创 移动web开发（04）

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。中文网官网推荐网站Bootstrap：是用于开发响应式布局，移动设备优先的web项目。框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。组件：很多样式的下拉菜单，导航栏，按钮等等组件。

原创 移动web开发（03）

媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询Less（LeanerStyle Sheets 的缩写）是一门CSS扩展语言，也成为CSS预处理器。做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，

原创 移动web开发（02）

flex-direction：设置主轴的方向 （direction：方向）justify-content：设置主轴上的子元素排列方式 （justify： [ˈdʒʌstɪfaɪ] ，证明..有理。content：内容）flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap。

原创 移动web开发（01）

布局视口为啥设置为980px？因为我们PC端的网页一般就是1000左右，所以差不多能显示完。布局视口的缺点，就是现实的pc的网页的内容会比较小。

原创 HTML&CSS项目实战

我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。Web 服务器**一般指网站服务器**，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；

原创 HTML&CSS项目实战

品优购品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作主页列表页注册页。

原创 HTML&CSS提高篇

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

原创 CSS基础篇（07）

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：div {width: 0;height: 0;我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了为了照顾兼容性 低版本的浏览器，加上 font-size: 0;

原创 CSS基础篇（06）

day08-前端基础CSS第六天今日目标 能够说出 为什么要用定位 能够说出 定位的 4 种分类 能够说出 4 种定位各自的特点 能够说出 为什么常用子绝父相布局 能够写出 淘宝轮播图布局 能够说出 显示隐藏的 3 种方式以及区别 1. 定位(position) 介绍1.1 为什么使用定位我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

原创 CSS基础篇（05）

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

原创 CSS基础篇（04）

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法：选择器 { float: 属性值;为什么需要清除浮动？父级没高度。子盒子浮动了。影响下面布局了，我们就应该清除浮动了。

原创 CSS基础篇（03）

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠。

原创 CSS基础篇（02）

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。后代选择器、子选择器、并集选择器、伪类选择器等等元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

原创 CSS基础篇（01）

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。简单来说，就是选择标签用的。

原创 HTML基础篇（02）

</ul> 中只能嵌套 <li></li>，直接在 <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol>1. <ol></ol>中只能嵌套<li></li>，直接在<ol> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd>

原创 WebKit简介及工作流程

WebKit的生态系统庞大，拥有社区支持，广泛应用于移动设备、嵌入式系统等，Blink引擎就是从WebKit分支出来的，专为Chrome浏览器设计，但保留了WebKit的核心特性和理念。4. **绘制与合成**：完成布局计算后，WebKit会开始绘制和合成网页内容，将网页内容绘制到屏幕上，这个过程涉及到GPU加速、绘图操作、文字排版等多个环节。2. **CSS渲染**：在DOM树创建完成后，WebKit会开始解析CSS样式，并应用到DOM树上，生成渲染树。

原创 HTML基础篇（01）

- 注释语句 --> 快捷键: ctrl + / 一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的. 添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的 ###特殊字符： 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。###文本格式化标签： 在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。