【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(二)

目录

1 -> HML语法

1.1 -> 页面结构

1.2 -> 数据绑定

1.3 -> 普通事件绑定

1.4 -> 冒泡事件绑定5+

1.5 -> 捕获事件绑定5+

1.6 -> 列表渲染

1.7 -> 条件渲染

1.8 -> 逻辑控制块

1.9 -> 模板引用

2 -> CSS语法

2.1 -> 尺寸单位

2.2 -> 样式导入

2.3 -> 声明样式

2.4 -> 选择器

2.5 -> 选择器优先级

2.6 -> 伪类

2.7 -> 样式预编译

2.8 -> CSS样式继承6+

3 -> JS语法

3.1 -> 语法

3.2 -> 对象

3.3 -> 方法

3.4 -> 获取DOM元素

3.5 -> 获取ViewModel

1 -> HML语法

HML(HarmonyOS Markup Language)是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。

1.1 -> 页面结构

<!-- test.hml -->
  <div class="item-container">
  <text class="item-title">Image Show</text>
  <div class="item-content">
  <image src="/common/xxx.png" class="image"></image>
  </div>
  </div>

1.2 -> 数据绑定

<!-- test.hml -->
  <div onclick="changeText">
  <text> {
  
  {content[1]}} </text>
  </div>
/*test.css*/
.container{
  margin: 200px;
}
// test.js
export default {
  data: {
    content: ['Hello World!', 'Welcome to my world!']
  },
  changeText: function() {
    this.content.splice(1, 1, this.content[0]);
  }
}

说明

  • 针对数组内的数据修改，请使用splice方法生效数据绑定变更。

  • hml文件中的js表达式不支持ES6语法。

1.3 -> 普通事件绑定

事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。

事件支持的写法有：

  • "funcName"：funcName为事件回调函数名(在JS文件中定义相应的函数实现)。

  • "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量(前面不用写this.)。

  • 示例

<!-- test.hml -->
  <div class="container">
  <text class="title">{
  
  {count}}</text>
  <div class="box">
  <input type="button" class="btn" value="increase" onclick="increase" />
  <input type="button" class="btn" value="decrease" @click="decrease" />
  <!-- 传递额外参数 -->
  <input type="button" class="btn" value="double" @click="multiply(2)" />
  <input type="button" class="btn" value="decuple" @click="multiply(10)" />
  <input type="button" class="btn" value="square" @click="multiply(count)" />
  </div>
  </div>
/* test.css */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 454px;
  height: 454px;
}
.title {
  font-size: 30px;
  text-align: center;
  width: 200px;
  height: 100px;
}
.box {
  width: 454px;
  height: 200px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  width: 200px;
  border-radius: 0;
  margin-top: 10px;
  margin-left: 10px;
}
// test.js
export default {
  data: {
    count: 0
  },
  increase() {
    this.count++;
  },
  decrease() {
    this.count--;
  },
  multiply(multiplier) {
    this.count = multiplier * this.count;
  }
};

1.4 -> 冒泡事件绑定5+

冒泡事件绑定包括：

  • 绑定冒泡事件：on:{event}.bubble。on:{event}等价于on:{event}.bubble。

  • 绑定并阻止冒泡事件向上冒泡：grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。

  • 示例

<!-- test.hml -->
  <div>
  <!-- 使用事件冒泡模式绑定事件回调函数。5+ -->;
<div on:touchstart.bubble="touchstartfunc"></div>
  <div on:touchstart="touchstartfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向上传递。5+ -->
  <div grab:touchstart.bubble="touchstartfunc"></div>
  <div grab:touchstart="touchstartfunc"></div>
  <!-- 使用事件冒泡模式绑定事件回调函数。6+ -->
  <div on:click.bubble="clickfunc"></div>
  <div on:click="clickfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向上传递。6+ -->
  <div grab:click.bubble="clickfunc"></div>
  <div grab:click="clickfunc"></div>
  </div>
// test.js
export default {
  clickfunc: function(e) {
    console.log(e);
  },
  touchstartfuc: function(e) {
    console.log(e);
  },
}

说明

采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。

1.5 -> 捕获事件绑定5+

Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。

捕获事件绑定包括：

  • 绑定捕获事件：on:{event}.capture。

  • 绑定并阻止事件向下传递：grab:{event}.capture。

  • 示例

<!-- test.hml -->
  <div>
  <!-- 使用事件捕获模式绑定事件回调函数。5+ -->
  <div on:touchstart.capture="touchstartfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向下传递。5+ -->
  <div grab:touchstart.capture="touchstartfunc"></div>
  </div>

// xxx.js
export default {
  touchstartfuc: function(e) {
    console.log(e);
  },
}

1.6 -> 列表渲染

<!-- test.hml -->
  <div class="array-container" style="flex-direction: column;margin: 200px;">
  <!-- div列表渲染 -->
  <!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
  <div for="{
  
  {array}}" tid="id" onclick="changeText">
  <text>{
  
  {$idx}}.{
  
  {$item.name}}</text>
  </div>
  <!-- 自定义元素变量名称 -->
  <div for="{
  
  {value in array}}" tid="id" onclick="changeText">
  <text>{
  
  {$idx}}.{
  
  {value.name}}</text>
  </div>
  <!-- 自定义元素变量、索引名称 -->
  <div for="{
  
  {(index, value) in array}}" tid="id" onclick="changeText">
  <text>{
  
  {index}}.{
  
  {value.name}}</text>
  </div>
  </div>
// test.js
export default {
  data: {
    array: [
      {id: 1, name: 'jack', age: 18},
      {id: 2, name: 'tony', age: 18},
    ],
  },
  changeText: function() {
    if (this.array[1].name === "tony"){
      this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18});
    } else {
      this.array.splice(2, 1, {id:3, name: 'Bary', age: 18});
    }
  },
}

tid属性主要用来加速for循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识，如果未指定，数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下：

  • for="array"：其中array为数组对象，array的元素变量默认为$item。

  • for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。

  • for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。

说明

  • 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。

  • 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。

  • tid不支持表达式。

1.7 -> 条件渲染

条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下：

<!-- test.hml -->
  <div class="container">
  <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
  <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
  <text if="{
  
  {visible}}"> Hello-world1 </text>
  <text elif="{
  
  {display}}"> Hello-world2 </text>
  <text else> Hello-World </text>
  </div>
/* test.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}
// test.js
export default {
  data: {
    visible: false,
    display: true,
  },
  toggleShow: function() {
    this.visible = !this.visible;
  },
  toggleDisplay: function() {
    this.display = !this.display;
  }
}

优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。

<!-- test.hml -->
  <div class="container">
  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
  <text show="{
  
  {visible}}" > Hello World </text>
  </div>
/* test.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}
// test.js
export default {
  data: {
    visible: false,
  },
  toggle: function() {
    this.visible = !this.visible;
  },
}

说明

禁止在同一个元素上同时设置for和if属性。

1.8 -> 逻辑控制块

<block>控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。

<!-- test.hml -->
  <list>
  <block for="glasses">
  <list-item type="glasses">
  <text>{
  
  {$item.name}}</text>
  </list-item>
  <block for="$item.kinds">
  <list-item type="kind">
  <text>{
  
  {$item.color}}</text>
  </list-item>
  </block>
  </block>
  </list>
// test.js
export default {
  data: {
    glasses: [
      {name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]},
      {name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]},
    ],
  },
}

1.9 -> 模板引用

<!-- template.hml -->
<div class="item"> 
  <text>Name: {
  
  {name}}</text>
  <text>Age: {
  
  {age}}</text>
</div>
<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div>
  <comp name="Tony" age="18"></comp>
</div>

2 -> CSS语法

CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。

2.1 -> 尺寸单位

  • 逻辑像素px(文档中以<length>表示)：

    • 默认屏幕具有的逻辑宽度为720px，实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素(从720px向1440物理像素，所有尺寸放大2倍)。
    • 额外配置autoDesignWidth为true时，逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。

  • 百分比(文档中以<percentage>表示)：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。

2.2 -> 样式导入

为了模块化管理和代码复用，CSS样式文件支持 @import 语句，导入css文件。

2.3 -> 声明样式

每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。

1. 内部样式，支持使用style、class属性来控制组件的样式。例如：

<!-- index.hml -->
<div class="container">
  <text style="color: red">Hello World</text>
</div>
/* index.css */
.container {
  justify-content: center;
}

2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入：

/* style.css */
.title {
  font-size: 50px;
}
/* index.css */
@import '../../common/style.css';
.container {
  justify-content: center;
}

2.4 -> 选择器

css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：

选择器样例样例描述
.class

.container

用于选择class="container"的组件。
#id#titleld用于选择id="titleId"的组件。
tagtext用于选择text组件。
,.title, .content用于选择class="title"和class="content"的组件。
#id .class tag#containerld .content text非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：#containerId>.content。

示例：

<!-- 页面布局test.hml -->
<div id="containerId" class="container">
  <text id="titleId" class="title">标题</text>
  <div class="content">
    <text id="contentId">内容</text>
  </div>
</div>
/* 页面样式test.css */
/\* 对所有div组件设置样式 \*/
div {
  flex-direction: column;
}
/* 对class="title"的组件设置样式 */
.title {
  font-size: 30px;
}
/* 对id="contentId"的组件设置样式 */
#contentId {
  font-size: 20px;
}
/* 对所有class="title"以及class="content"的组件都设置padding为5px */
.title, .content {
  padding: 5px;
}
/\* 对class="container"的组件下的所有text设置样式 \*/
.container text {
  color: \#007dff;
}
/\* 对class="container"的组件下的直接后代text设置样式 \*/
.container &gt; text {
  color: \#fa2a2d;
}

以上样式运行效果如下：

其中“.container text”将“标题”和“内容”设置为蓝色，而“.container > text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖。

2.5 -> 选择器优先级

选择器的优先级计算规则与w3c规则保持一致(只支持：内联样式，id，class，tag，后代和直接后代)，其中内联样式为在元素style属性中声明的样式。

当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 > id > class > tag。

2.6 -> 伪类

css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled状态可以用来设置元素的disabled属性变为true时的样式。

除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列：

名称支持组件描述
:diaabled支持disabled属性的组件表示disabled属性变为true时的元素(不支持动画样式的设置)。
:active支持click事件的组件表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。
:waitingbutton表示waiting属性为true的元素(不支持动画样式的设置)。
:checkedinput[type="checkbox"、type=“radio”]、switch表示checked属性为true的元素(不支持动画样式的设置)。

伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式：

<!-- index.hml -->
<div class="container">
  <input type="button" class="button" value="Button"></input>
</div>
/* index.css */
.button:active {
  background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */
}

说明

针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker。

2.7 -> 样式预编译

预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。

  • 当前文件使用样式预编译，例如将原index.css改为index.less：

/* index.less */
/* 定义变量 */
@colorBackground: #000000;
.container {
  background-color: @colorBackground; /* 使用当前less文件中定义的变量 */
}

引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss：

/* style.scss */
/* 定义变量 */
$colorBackground: #000000;

在index.scss中引用：

/* index.scss */
/* 引入外部scss文件 */
@import '../../common/style.scss';
.container {
  background-color: $colorBackground; /* 使用style.scss中定义的变量 */
}

说明

引用的预编译文件建议放在common目录进行管理。

2.8 -> CSS样式继承6+

css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承：

  • font-family

  • font-weight

  • font-size

  • font-style

  • text-align

  • line-height

  • letter-spacing

  • color

  • visibility

3 -> JS语法

JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。

3.1 -> 语法

支持ES6语法。

  • 模块声明

    使用import方法引入功能模块：

import router from '@system.router';
  • 代码引用

        使用import方法导入js代码：

import utils from '../../common/utils.js';

3.2 -> 对象

  • 应用对象
属性类型描述
$defObject

使用this.$app.$def获取在app.js中暴露的对象。

 说明：

> 应用对象不支持数据绑定，需主动触发UI更新。

示例代码

// app.js
export default {
  onCreate() {
    console.info('Application onCreate');
  },
  onDestroy() {
    console.info('Application onDestroy');
  },
  globalData: {
    appData: 'appData',
    appVersion: '2.0',
  },
  globalMethod() {
    console.info('This is a global method!');
    this.globalData.appVersion = '3.0';
  }
};
// index.js页面逻辑代码
export default {
  data: {
    appData: 'localData',
    appVersion:'1.0',
  },
  onInit() {
    this.appData = this.$app.$def.globalData.appData;
    this.appVersion = this.$app.$def.globalData.appVersion;
  },
  invokeGlobalMethod() {
    this.$app.$def.globalMethod();
  },
  getAppVersion() {
    this.appVersion = this.$app.$def.globalData.appVersion;
  }
}
  • 页面对象
属性类型描述
dataObject/Function

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

data与private和public不能重合使用。

$refsObject持有注册过ref 属性的DOM元素或子组件实例的对象。
privateObject页面的数据模型，private下的数据属性只能由当前页面修改。
publicObject页面的数据模型，public下的数据属性的行为与data保持一致。
propsArray/Objectprops用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。
computedObject用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。

3.3 -> 方法

  • 数据方法
方法参数描述
$setkey: string, value:any

添加新的数据属性或者修改已有数据属性。

用法：

this.$set('key',value)：添加数据属性。

$deletekey: string

删除数据属性。

用法：

this.$delete('key')：删除数据属性。

示例代码

// index.js
export default {
  data: {
    keyMap: {
      OS: 'HarmonyOS',
      Version: '2.0',
    },
  },
  getAppVersion() {
    this.$set('keyMap.Version', '3.0');
    console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0

    this.$delete('keyMap');
    console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
  }
}
  • 公共方法
方法参数描述
$elementid: string

获得指定id的组件对象，如果无指定id，则返回根组件对象。

用法：

<div id='xxx'></div>

- this.$element('xxx')：获得id为xxx的组件对象。

- this.$element()：获得根组件对象。

$rootElement无

获取根组件对象。

用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。

$root无获得顶级ViewModel实例。
$parent无获得父级ViewModel实例。
$childid: string

获得指定id的子级自定义组件的ViewModel实例。

用法：

this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。

  • 事件方法
方法参数描述
$watchdata: string, callback: string | Function

观察data中的属性变化，如果属性值改变，触发绑定的事件。

用法：

this.$watch('key', callback)

  • 页面方法
方法参数描述
scrollTo6+scrollPageParam: ScrollPageParam将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。
表1 ScrollPageParam6+
名称类型默认值描述
positionnumber-指定滚动位置。
idstring-指定需要滚动到的元素id。
durationnumber300指定滚动时长，单位为毫秒。
timingFunctionstringease指定滚动动画曲线，可选值。
complete() => void-指定滚动完成后需要执行的回调函数。

示例：

this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})

3.4 -> 获取DOM元素

1. 通过$refs获取DOM元素

<!-- index.hml -->
<div class="container">
  <image-animator class="image-player" ref="animator" images="{
  
  {images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
// index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' },
    ],
  },
  handleClick() {
    const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
    const state = animator.getState();
    if (state === 'paused') {
      animator.resume();
    } else if (state === 'stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

2. 通过$element获取DOM元素

<!-- index.hml -->
<div class="container">
  <image-animator class="image-player" id="animator" images="{
  
  {images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
// index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' },
    ],
  },
  handleClick() {
    const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
    const state = animator.getState();
    if (state === 'paused') {
      animator.resume();
    } else if (state === 'stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

3.5 -> 获取ViewModel

根节点所在页面：

<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
  <div class="container">
    <text>{
  
  {text}}</text>
    <parentComp></parentComp>
  </div>
</div>
// root.js
export default {
  data: {
    text: 'I am root!',
  },
}

自定义parent组件：

<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="parentClicked">parent component click</text>
  <text class="text-style" if="{
  
  {showValue}}">hello parent component!</text>
  <childComp id = "selfDefineChild"></childComp>
</div>
// parent.js
export default {
  data: {
    showValue: false,
    text: 'I am parent component!',
  },
  parentClicked () {
    this.showValue = !this.showValue;
    console.info('parent component get parent text');
    console.info(`${this.$parent().text}`);
    console.info("parent component get child function");
    console.info(`${this.$child('selfDefineChild').childClicked()}`);
  },
}

自定义child组件：

<!-- child.hml -->
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
  <text class="text-style" if="{
  
  {show}}">hello child component</text>
</div>
// child.js
export default {
  data: {
    show: false,
    text: 'I am child component!',
  },
  childClicked () {
    this.show = !this.show;
    console.info('child component get parent text');
    console.info('${this.$parent().text}');
    console.info('child component get root text');
    console.info('${this.$root().text}');
  },
}

感谢各位大佬支持！！！

互三啦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/962468.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CPU、GPU、NPU

CPU、GPU、NPU

文章目录 内存、带宽、时延&#xff1a;尽可能提高算力的利用率&#xff01;AI 芯片基础 内存、带宽、时延&#xff1a;尽可能提高算力的利用率&#xff01; CPU计算本质&#xff1a;数据如何传输【AI芯片】芯片基础03 横坐标&#xff1a;算力敏感度&#xff0c;每次操作能执…
阅读更多...
11.QT控件：输入类控件

11.QT控件：输入类控件

1. Line Edit(单行输入框) QLineEdit表示单行输入框&#xff0c;用来输入一段文本&#xff0c;但是不能换行。 核心属性&#xff1a; 核心信号&#xff1a; 2. Text Edit(多行输入框) QTextEdit表示多行输入框&#xff0c;也是一个富文本 & markdown编辑器。并且能在内容超…
阅读更多...
蓝桥杯刷题DAY1：前缀和

蓝桥杯刷题DAY1：前缀和

所谓刷题&#xff0c;讲究的就是细心 帕鲁服务器崩坏【算法赛】 “那个帕鲁我已经观察你很久了&#xff0c;我对你是有些失望的&#xff0c;进了这个营地&#xff0c;不是把事情做好就可以的&#xff0c;你需要有体系化思考的能力。” 《幻兽帕鲁》火遍全网&#xff0c;成为…
阅读更多...
【Proteus仿真】【51单片机】简易计算器系统设计

【Proteus仿真】【51单片机】简易计算器系统设计

目录 一、主要功能 二、使用步骤 三、硬件资源 四、软件设计 五、实验现象 联系作者 一、主要功能 1、LCD1602液晶显示 2、矩阵按键​ 3、可以进行简单的加减乘除运算 4、最大 9999*9999 二、使用步骤 系统运行后&#xff0c;LCD1602显示数据&#xff0c;通过矩阵按键…
阅读更多...
Office / WPS 公式、Mathtype 公式输入花体字、空心字

Office / WPS 公式、Mathtype 公式输入花体字、空心字

注&#xff1a;引文主要看注意事项。 1、Office / WPS 公式中字体转换 花体字 字体选择 “Eulid Math One” 空心字 字体选择 “Eulid Math Two” 使用空心字时&#xff0c;一般不用斜体&#xff0c;取消勾选 “斜体”。 2、Mathtype 公式输入花体字、空心字 2.1 直接输…
阅读更多...
Baklib对比其他知识管理工具的优势及应用效果全面分析

Baklib对比其他知识管理工具的优势及应用效果全面分析

内容概要 Baklib知识中台作为一种集成化的数字化平台&#xff0c;其核心功能围绕知识的高效管理、共享以及运用展开。这一平台不仅为企业提供了统一的知识管理架构&#xff0c;还依托智能化技术&#xff0c;使得组织内外的知识资源能够实现流畅的交互与利用。通过Baklib&#…
阅读更多...
python：洛伦兹变换

python：洛伦兹变换

洛伦兹变换&#xff08;Lorentz transformations&#xff09;是相对论中的一个重要概念&#xff0c;特别是在讨论时空的变换时非常重要。在四维时空的背景下&#xff0c;洛伦兹变换描述了在不同惯性参考系之间如何变换时间和空间坐标。在狭义相对论中&#xff0c;洛伦兹变换通常…
阅读更多...
Janus-Pro 论文解读：DeepSeek 如何重塑多模态技术格局

Janus-Pro 论文解读：DeepSeek 如何重塑多模态技术格局

Janus-Pro&#xff1a;多模态领域的璀璨新星——技术解读与深度剖析 一、引言 在人工智能的浩瀚星空中&#xff0c;多模态理解与生成模型犹如耀眼的星座&#xff0c;不断推动着技术边界的拓展。Janus-Pro作为这一领域的新兴力量&#xff0c;以其卓越的性能和创新的架构&#x…
阅读更多...
稀疏混合专家架构语言模型（MoE）

稀疏混合专家架构语言模型（MoE）

注&#xff1a;本文为 “稀疏混合专家架构语言模型&#xff08;MoE&#xff09;” 相关文章合辑。 手把手教你&#xff0c;从零开始实现一个稀疏混合专家架构语言模型&#xff08;MoE&#xff09; 机器之心 2024年02月11日 12:21 河南 选自huggingface 机器之心编译 机器之心…
阅读更多...
被裁与人生的意义--春节随想

被裁与人生的意义--春节随想

还有两个月就要被迫离开工作了十多年的公司了&#xff0c;不过有幸安安稳稳的过了一个春节&#xff0c;很知足! 我是最后一批要离开的&#xff0c;一百多号同事都没“活到”蛇年。看着一批批仁人志士被“秋后斩首”&#xff0c;马上轮到我们十来个&#xff0c;个中滋味很难言清…
阅读更多...
AVL搜索树

AVL搜索树

一、介绍 高度平衡的搜索二叉树&#xff0c;保证每个节点的左右子树高度差不超过1&#xff0c;降低搜索树的高度以提高搜索效率。 通过平衡因子和旋转来保证左右子树高度差不超过1 二、插入节点 1、插入规则 &#xff08;1&#xff09;搜按索树规则插入节点 &#xff08;…
阅读更多...
unity导入图片素材注意点和AI寻路模块导入

unity导入图片素材注意点和AI寻路模块导入

当我们导入了图片资源&#xff0c;我们需要设置为Sprite类型 UI资源的位置通常是Rect Transform 要进行转化&#xff1a; (imgHP.transform as RectTransform).sizeDelta new Vector2((float)hp / maxHP * hpW,74); RectTransform 是Unity中用于UI元素的特殊变换组件&#…
阅读更多...
中国网络安全产业分析报告

中国网络安全产业分析报告

网络安全是总体国家安全观的重要组成部分&#xff0c;切实维护网络空间安全&#xff0c;筑牢国家网络安全屏障&#xff0c;已成为关系我国发展全局的重大战略任务。近年来&#xff0c;我国网信相关部门深入推进网络安全治理&#xff0c;网络安全政策法规体系更加健全&#xff0…
阅读更多...
kimi，天工，gpt，deepseek效果对比

kimi，天工，gpt，deepseek效果对比

偶然间碰到的这个问题&#xff0c;这个问题感觉有点意思&#xff0c;他不是定义性的问题&#xff0c;而是不同概念之间的区别对比&#xff0c;我觉得这个效果立竿见影&#xff0c;一看就能看出来回答问题水平的层次。 单纯这个问题的答案&#xff0c;deepseek远超gpt&#xff…
阅读更多...
Github 2025-01-30 Go开源项目日报 Top10

Github 2025-01-30 Go开源项目日报 Top10

根据Github Trendings的统计，今日(2025-01-30统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Go项目10Ollama: 本地大型语言模型设置与运行 创建周期：248 天开发语言：Go协议类型：MIT LicenseStar数量：42421 个Fork数量：2724 次关注人…
阅读更多...
MySQL查询优化（三）：深度解读 MySQL客户端和服务端协议

MySQL查询优化（三）：深度解读 MySQL客户端和服务端协议

如果需要从 MySQL 服务端获得很高的性能&#xff0c;最佳的方式就是花时间研究 MySQL 优化和执行查询的机制。一旦理解了这些&#xff0c;大部分的查询优化是有据可循的&#xff0c;从而使得整个查询优化的过程更有逻辑性。下图展示了 MySQL 执行查询的过程&#xff1a; 客户端…
阅读更多...
【4Day创客实践入门教程】Day3 实战演练——桌面迷你番茄钟

【4Day创客实践入门教程】Day3 实战演练——桌面迷你番茄钟

Day3 实战演练——桌面迷你番茄钟 目录 Day3 实战演练——桌面迷你番茄钟1. 选择、准备元件、收集资料2. 硬件搭建3.编写代码 Day0 创想启程——课程与项目预览Day1 工具箱构建——开发环境的构建Day2 探秘微控制器——单片机与MicroPython初步Day3 实战演练——桌面迷你番茄钟…
阅读更多...
leetcode 2300. 咒语和药水的成功对数

leetcode 2300. 咒语和药水的成功对数

题目如下 数据范围 示例 注意到n和m的长度最长达到10的5次方所以时间复杂度为n方的必然超时。 因为题目要求我们返回每个位置的spell对应的有效对数所以我们只需要找到第一个有效的药水就行&#xff0c;这里可以先对potions排序随后使用二分查找把时间复杂度压到nlogn就不会…
阅读更多...
Android Studio 正式版 10 周年回顾，承载 Androider 的峥嵘十年

Android Studio 正式版 10 周年回顾，承载 Androider 的峥嵘十年

Android Studio 1.0 宣发于 2014 年 12 月&#xff0c;而现在时间来到 2025 &#xff0c;不知不觉间 Android Studio 已经陪伴 Androider 走过十年历程。 Android Studio 10 周年&#xff0c;也代表着了我的职业生涯也超十年&#xff0c;现在回想起来依然觉得「唏嘘」&#xff…
阅读更多...
互斥锁/信号量实现5个线程同步

互斥锁/信号量实现5个线程同步

互斥锁 实现同步 互斥锁保证在同一时刻&#xff0c;只有一个线程可以访问共享资源&#xff0c;从而实现了线程同步。 思路 1 创建互斥锁(1个) pthread_mutex_t mutex; 2 初始化互斥锁 所有线程开始执行前&#xff0c;pthread_mutex_init(&mutex, …
阅读更多...
最新文章

Copyright @ 2022~2023