前端技术
HTML
CSS
Javascript
前端框架和UI库
VUE
ReactJS
AngularJS
JQuery
NodeJS
JSON
Element-UI
Bootstrap
Material UI
服务端和客户端
Java
Python
PHP
Golang
Scala
Kotlin
Groovy
Ruby
Lua
.net
c#
c++
后端WEB和工程框架
SpringBoot
SpringCloud
Struts2
MyBatis
Hibernate
Tornado
Beego
Go-Spring
Go Gin
Go Iris
Dubbo
HessianRPC
Maven
Gradle
数据库
MySQL
Oracle
Mongo
中间件与web容器
Redis
MemCache
Etcd
Cassandra
Kafka
RabbitMQ
RocketMQ
ActiveMQ
Nacos
Consul
Tomcat
Nginx
Netty
大数据技术
Hive
Impala
ClickHouse
DorisDB
Greenplum
PostgreSQL
HBase
Kylin
Hadoop
Apache Pig
ZooKeeper
SeaTunnel
Sqoop
Datax
Flink
Spark
Mahout
数据搜索与日志
ElasticSearch
Apache Lucene
Apache Solr
Kibana
Logstash
数据可视化与OLAP
Apache Atlas
Superset
Saiku
Tesseract
系统与容器
Linux
Shell
Docker
Kubernetes
[WCAG 2.1标准]的搜索结果
这里是文章列表。热门标签的颜色随机变换,标签颜色没有特殊含义。
点击某个标签可搜索标签相关的文章。
点击某个标签可搜索标签相关的文章。
转载文章
...()没有传入或者不是标准的日期格式,那么就会返回 NaN。 alert(Date.parse()); // NaN 如果想输出指定的日期,那么把 Date.parse()传入 Date 构造方法里。 var box = new Date(Date.parse('6/13/2011')); // Mon Jun 13 2011 00:00:00 GMT+0800var box = new Date('6/13/2011'); // 直接传入,Date.parse()后台被调用 Date 对象及其在不同浏览器中的实现有许多奇怪的行为。其中有一种倾向是将超出的范围的值替换成当前的值,以便生成输出。例如,在解析“January 32, 2007”时,有的浏览器会将其解释为“February 1, 2007”。而 Opera 则倾向与插入当前月份的当前日期。 Date.UTC()方法同样也返回表示日期的毫秒数,但它与 Date.parse()在构建值时使用不同的信息。(年份,基于 0 的月份[0 表示 1 月,1 表示 2 月],月中的哪一天[1-31],小时数[0-23] ,分钟,秒以及毫秒)。只有前两个参数是必须的。如果没有提供月数,则天数为 1;如果省略其他参数,则统统为 0。 alert(Date.UTC(2011,11)); // 1322697600000 如果 Date.UTC()参数传递错误,那么就会出现负值或者 NaN 等非法信息。 alert(Date.UTC()); // 负值或者 NaN 如果要输出指定日期,那么直接把 Date.UTC()传入 Date 构造方法里即可。 var box = new Date(Date.UTC(2011,11, 5, 15, 13, 16)); 通用的方法 与其他类型一样,Date 类型也重写了 toLocaleString()、toString()和 valueOf()方法;但这些方法返回值与其他类型中的方法不同。 var box = new Date(Date.UTC(2011,11, 5, 15, 13, 16));alert('toString:' + box.toString());alert('toLocaleString:' + box.toLocaleString()); // 按本地格式输出 这两个方法在不同浏览器显示的效果又不一样,但不用担心,这两个方法只是在调试比较有用,在显示时间和日期上,没什么价值。valueOf()方法显示毫秒数。 日期格式化方法 Date 类型还有一些专门用于将日期格式化为字符串的方法。 var box = new Date();alert(box.toDateString()); // 以特定的格式显示星期几、月、日和年alert(box.toTimeString()); // 以特定的格式显示时、分、秒和时区alert(box.toLocaleDateString()); // 以特定地区格式显示星期几、月、日和年alert(box.toLocaleTimeString()); // 以特定地区格式显示时、分、秒和时区alert(box.toUTCString()); // 以特定的格式显示完整的 UTC 日期 组件方法 组件方法,是为我们单独获取你想要的各种时间/日期而提供的方法。需要注意的时候 ,这些方法中,有带 UTC 的,有不带 UTC 的。UTC 日期指的是在没有时区偏差的情况下的日期值。 alert(box.getTime()); // 获取日期的毫秒数,和 valueOf()返回一致alert(box.setTime(100)); // 以毫秒数设置日期,会改变整个日期alert(box.getFullYear()); // 获取四位年份alert(box.setFullYear(2012)); // 设置四位年份,返回的是毫秒数alert(box.getMonth()); // 获取月份,没指定月份,从 0 开始算起alert(box.setMonth(11)); // 设置月份alert(box.getDate()); // 获取日期alert(box.setDate(8)); // 设置日期,返回毫秒数alert(box.getDay()); // 返回星期几,0 表示星期日,6 表示星期六alert(box.setDay(2)); // 设置星期几alert(box.getHours()); // 返回时alert(box.setHours(12)); // 设置时alert(box.getMinutes()); // 返回分钟alert(box.setMinutes(22)); // 设置分钟alert(box.getSeconds()); // 返回秒数alert(box.setSeconds(44)); // 设置秒数alert(box.getMilliseconds()); // 返回毫秒数alert(box.setMilliseconds()); // 设置毫秒数alert(box.getTimezoneOffset()); // 返回本地时间和 UTC 时间相差的分钟数 以上方法除了 getTimezoneOffset(),其他都具有 UTC 功能,例如 setDate()及 getDate()获取星期几,那么就会有 setUTCDate()及getUTCDate(),表示世界协调时间。 2、正则表达式 假设用户需要在 HTML 表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理前,JavaScript 程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的。 什么是正则表达式 正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript 的 RegExp 类表示正则表达式,而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。 正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后,表单就会被发送到服务器,在服务器端通常会用 PHP、ASP.NET 等服务器脚本对其进行进一步处理 。因为客户端验证,可以节约大量的服务器端的系统资源,并且提供更好的用户体验。 创建正则表达式 创建正则表达式和创建字符串类似,创建正则表达式提供了两种方法,一种是采用 new 运算符,另一个是采用字面量方式。 两种创建方式 var box = new RegExp('box'); // 第一个参数字符串var box = new RegExp('box', 'ig'); // 第二个参数可选模式修饰符 模式修饰符的可选参数 参数 含义 i 忽略大小写 g 全局匹配 m 多行匹配 var box = /box/; // 直接用两个反斜杠var box = /box/ig; // 在第二个斜杠后面加上模式修饰符 测试正则表达式 RegExp 对象包含两个方法:test()和 exec(),功能基本相似,用于测试字符串匹配。test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值,如果存在则返回 true,不存在则返回 false。exec()方法也用于在字符串中查找指定正则表达式,如果 exec()方法执行成功,则返回包含该查找字符串的相关信息数组。如果执行失败,则返回 null。 RegExp 对象的方法 方法 功能 test 在字符串中测试模式匹配,返回 true 或 false exec 在字符串中执行匹配搜索,返回结果数组 // 使用 new 运算符的 test 方法示例var pattern = new RegExp('box', 'i'); // 创建正则模式,不区分大小写var str = 'This is a Box!'; // 创建要比对的字符串alert(pattern.test(str)); // 通过 test()方法验证是否匹配// 使用字面量方式的 test 方法示例var pattern = /box/i; // 创建正则模式,不区分大小写var str = 'This is a Box!';alert(pattern.test(str));// 使用一条语句实现正则匹配alert(/box/i.test('This is a Box!')); // 模式和字符串替换掉了两个变量// 使用 exec 返回匹配数组var pattern = /box/i;var str = 'This is a Box!';alert(pattern.exec(str)); // 匹配了返回数组,否则返回 null 使用字符串的正则表达式方法 除了 test()和 exec()方法,String 对象也提供了 4 个使用正则表达式的方法。 String 对象中的正则表达式方法 方法 含义 match(pattern) 返回 pattern 中的子串或 null replace(pattern, replacement) 用 replacement 替换 pattern search(pattern) 返回字符串中 pattern 开始位置 split(pattern) 返回字符串按指定 pattern 拆分的数组 // 使用 match 方法获取获取匹配数组var pattern = /box/ig; // 全局搜索var str = 'This is a Box!,That is a Box too';alert(str.match(pattern)); // 匹配到两个 Box,Boxalert(str.match(pattern).length); // 获取数组的长度// 使用 search 来查找匹配数据var pattern = /box/ig;var str = 'This is a Box!,That is a Box too';alert(str.search(pattern)); // 查找到返回位置,否则返回-1 因为 search 方法查找到即返回,也就是说无需 g 全局。 // 使用 replace 替换匹配到的数据var pattern = /box/ig;var str = 'This is a Box!,That is a Box too';alert(str.replace(pattern, 'Tom')); // 将 Box 替换成了 Tom// 使用 split 拆分成字符串数组var pattern = / /ig;var str = 'This is a Box!,That is a Box too';alert(str.split(pattern)); // 将空格拆开分组成数组 RegExp 对象的静态属性 属性 短名 含义 input $_ 当前被匹配的字符串 lastMatch $& 最后一个匹配字符串 lastParen $+ 最后一对圆括号内的匹配子串 leftContext $ 最后一次匹配前的子串 multiline $ 用于指定是否所有的表达式都用于多行的布尔值 rightContext $’ 在上次匹配之后的子串 // 使用静态属性var pattern = /(g)oogle/;var str = 'This is google!';pattern.test(str); // 执行一下alert(RegExp.input); // This is google!alert(RegExp.leftContext); // This isalert(RegExp.rightContext); // !alert(RegExp.lastMatch); // googlealert(RegExp.lastParen); // galert(RegExp.multiline); // false Opera 不支持 input、lastMatch、lastParen 和 multiline 属性。IE 不支持 multiline 属性。所有的属性可以使用短名来操作。RegExp.input 可以改写成 RegExp['$_'],依次类推。但 RegExp.input 比较特殊,它还可以写成 RegExp.$_。 RegExp 对象的实例属性 属性 含义 global Boolean 值,表示 g 是否已设置 ignoreCase Boolean 值,表示 i 是否已设置 lastIndex 整数,代表下次匹配将从哪里字符位置开始 multiline Boolean 值,表示 m 是否已设置 Source 正则表达式的源字符串形式 // 使用实例属性var pattern = /google/ig;alert(pattern.global); // true,是否全局了alert(pattern.ignoreCase); // true,是否忽略大小写alert(pattern.multiline); // false,是否支持换行alert(pattern.lastIndex); // 0,下次的匹配位置alert(pattern.source); // google,正则表达式的源字符串var pattern = /google/g;var str = 'google google google';pattern.test(str); // google,匹配第一次alert(pattern.lastIndex); // 6,第二次匹配的位 以上基本没什么用。并且 lastIndex 在获取下次匹配位置上 IE 和其他浏览器有偏差 ,主要表现在非全局匹配上。lastIndex 还支持手动设置,直接赋值操作。 获取控制 正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能,可以控制匹配模式的方式。反斜杠后的元字符将失去其特殊含义。 字符类:单个字符和数字 元字符/元符号 匹配情况 . 匹配除换行符外的任意字符 [a-z0-9] 匹配括号中的字符集中的任意字符 [^a-z0-9] 匹配任意不在括号中的字符集中的字符 \d 匹配数字 \D 匹配非数字,同[^0-9]相同 \w 匹配字母和数字及_ \W 匹配非字母和数字及_ 字符类:空白字符 元字符/元符号 匹配情况 \0 匹配 null 字符 \b 匹配空格字符 \f 匹配进纸字符 \n 匹配换行符 \r 匹配回车字符 \t 匹配制表符 \s 匹配空白字符、空格、制表符和换行符 \S 匹配非空白字符 字符类:锚字符 元字符/元符号 匹配情况 ^ 行首匹配 $ 行尾匹配 \A 只有匹配字符串开始处 \b 匹配单词边界,词在[]内时无效 \B 匹配非单词边界 \G 匹配当前搜索的开始位置 \Z 匹配字符串结束处或行尾 \z 只匹配字符串结束处 字符类:重复字符 元字符/元符号 匹配情况 x? 匹配 0 个或 1 个 x x 匹配 0 个或任意多个 x x+ 匹配至少一个 x (xyz)+ 匹配至少一个(xyz) x{m,n} 匹配最少 m 个、最多 n 个 x 字符类:替代字符 元字符/元符号 匹配情况 this where 字符类:记录字符 元字符/元符号 匹配情况 (string) 用于反向引用的分组 \1 或$1 匹配第一个分组中的内容 \2 或$2 匹配第二个分组中的内容 \3 或$3 匹配第三个分组中的内容 // 使用点元字符var pattern = /g..gle/; // .匹配一个任意字符var str = 'google';alert(pattern.test(str));// 重复匹配var pattern = /g.gle/; // .匹配 0 个一个或多个var str = 'google'; //,?,+,{n,m}alert(pattern.test(str));// 使用字符类匹配var pattern = /g[a-zA-Z_]gle/; // [a-z]表示任意个 a-z 中的字符var str = 'google';alert(pattern.test(str));var pattern = /g[^0-9]gle/; // [^0-9]表示任意个非 0-9 的字符var str = 'google';alert(pattern.test(str));var pattern = /[a-z][A-Z]+/; // [A-Z]+表示 A-Z 一次或多次var str = 'gOOGLE';alert(pattern.test(str));// 使用元符号匹配var pattern = /g\wgle/; // \w匹配任意多个所有字母数字_var str = 'google';alert(pattern.test(str));var pattern = /google\d/; // \d匹配任意多个数字var str = 'google444';alert(pattern.test(str));var pattern = /\D{7,}/; // \D{7,}匹配至少 7 个非数字var str = 'google8';alert(pattern.test(str));// 使用锚元字符匹配var pattern = /^google$/; // ^从开头匹配,$从结尾开始匹配var str = 'google';alert(pattern.test(str));var pattern = /goo\sgle/; // \s 可以匹配到空格var str = 'goo gle';alert(pattern.test(str));var pattern = /google\b/; // \b 可以匹配是否到了边界var str = 'google';alert(pattern.test(str));// 使用或模式匹配var pattern = /google|baidu|bing/; // 匹配三种其中一种字符串var str = 'google';alert(pattern.test(str));// 使用分组模式匹配var pattern = /(google){4,8}/; // 匹配分组里的字符串 4-8 次var str = 'googlegoogle';alert(pattern.test(str));var pattern = /8(.)8/; // 获取 8..8 之间的任意字符var str = 'This is 8google8';str.match(pattern);alert(RegExp.$1); // 得到第一个分组里的字符串内容var pattern = /8(.)8/;var str = 'This is 8google8';var result = str.replace(pattern,'<strong>$1</strong>'); // 得到替换的字符串输出document.write(result);var pattern = /(.)\s(.)/;var str = 'google baidu';var result = str.replace(pattern, '$2 $1'); // 将两个分组的值替换输出document.write(result); 贪婪 惰性 + +? ? ?? ? {n} {n}? {n,} {n,}? {n,m} {n,m}? // 关于贪婪和惰性var pattern = /[a-z]+?/; // ?号关闭了贪婪匹配,只替换了第一个var str = 'abcdefjhijklmnopqrstuvwxyz';var result = str.replace(pattern, 'xxx');alert(result);var pattern = /8(.+?)8/g; // 禁止了贪婪,开启的全局var str = 'This is 8google8, That is 8google8, There is 8google8';var result = str.replace(pattern,'<strong>$1</strong>');document.write(result);var pattern = /8([^8])8/g; // 另一种禁止贪婪var str = 'This is 8google8, That is 8google8, There is 8google8';var result = str.replace(pattern,'<strong>$1</strong>');document.write(result);// 使用 exec 返回数组var pattern = /^[a-z]+\s[0-9]{4}$/i;var str = 'google 2012';alert(pattern.exec(str)); // 返回整个字符串var pattern = /^[a-z]+/i; // 只匹配字母var str = 'google 2012';alert(pattern.exec(str)); // 返回 googlevar pattern = /^([a-z]+)\s([0-9]{4})$/i; // 使用分组var str = 'google 2012';alert(pattern.exec(str)[0]); // google 2012alert(pattern.exec(str)[1]); // googlealert(pattern.exec(str)[2]); // 2012// 捕获性分组和非捕获性分组var pattern = /(\d+)([a-z])/; // 捕获性分组var str = '123abc';alert(pattern.exec(str));var pattern = /(\d+)(?:[a-z])/; // 非捕获性分组var str = '123abc';alert(pattern.exec(str));// 使用分组嵌套var pattern = /(A?(B?(C?)))/; // 从外往内获取var str = 'ABC';alert(pattern.exec(str));// 使用前瞻捕获var pattern = /(goo(?=gle))/; // goo 后面必须跟着 gle 才能捕获var str = 'google';alert(pattern.exec(str));// 使用特殊字符匹配var pattern = /\.\[\/b\]/; // 特殊字符,用\符号转义即可var str = '.[/b]';alert(pattern.test(str));// 使用换行模式var pattern = /^\d+/mg; // 启用了换行模式var str = '1.baidu\n2.google\n3.bing';var result = str.replace(pattern, '');alert(result); 常用的正则 检查邮政编码 var pattern = /[1-9][0-9]{5}/; // 共 6 位数字,第一位不能为 0var str = '224000';alert(pattern.test(str)); 检查文件压缩包 var pattern = /[\w]+\.zip|rar|gz/; // \w 表示所有数字和字母加下划线var str = '123.zip'; // \.表示匹配.,后面是一个选择alert(pattern.test(str)); 删除多余空格 var pattern = /\s/g; // g 必须全局,才能全部匹配var str = '111 222 333';var result = str.replace(pattern,''); // 把空格匹配成无空格alert(result); 删除首尾空格 var pattern = /^\s+/; // 强制首var str = ' goo gle ';var result = str.replace(pattern, '');pattern = /\s+$/; // 强制尾result = result.replace(pattern, '');alert('|' + result + '|');var pattern = /^\s(.+?)\s$/; // 使用了非贪婪捕获var str = ' google ';alert('|' + pattern.exec(str)[1] + '|');var pattern = /^\s(.+?)\s$/;var str = ' google ';alert('|' + str.replace(pattern, '$1') + '|'); // 使用了分组获取 简单的电子邮件验证 var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;var str = 'yc60.com@gmail.com';alert(pattern.test(str));var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;var str = 'yc60.com@gmail.com';alert(pattern.test(str)); 3、Function类型 在 ECMAScript 中,Function(函数)类型实际上是对象。每个函数都是 Function 类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。 函数的声明方式 普通的函数声明 function box(num1, num2) {return num1+ num2;} 使用变量初始化函数 var box= function(num1, num2) {return num1 + num2;}; 使用 Function 构造函数 var box= new Function('num1', 'num2' ,'return num1 + num2'); 第三种方式我们不推荐,因为这种语法会导致解析两次代码(第一次解析常规 ECMAScript 代码,第二次是解析传入构造函数中的字符串),从而影响性能。但我们可以通过这种语法来理解"函数是对象,函数名是指针"的概念。 作为值的函数 ECMAScript 中的函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。 function box(sumFunction, num) {return sumFunction(num); // someFunction}function sum(num) {return num + 10;}var result = box(sum, 10); // 传递函数到另一个函数里 函数内部属性 在函数内部,有两个特殊的对象:arguments 和 this。arguments 是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数。但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。 function box(num) {if (num <= 1) {return 1;} else {return num box(num-1); // 一个简单的的递归} } 对于阶乘函数一般要用到递归算法,所以函数内部一定会调用自身;如果函数名不改变是没有问题的,但一旦改变函数名,内部的自身调用需要逐一修改。为了解决这个问题,我们可以使用 arguments.callee 来代替。 function box(num) {if (num <= 1) {return 1;} else {return num arguments.callee(num-1); // 使用 callee 来执行自身} } 函数内部另一个特殊对象是 this,其行为与 Java 和 C中的 this 大致相似。换句话说 ,this 引用的是函数据以执行操作的对象,或者说函数调用语句所处的那个作用域。当在全局作用域中调用函数时,this 对象引用的就是 window。 // 便于理解的改写例子window.color = '红色的'; // 全局的,或者 var color = '红色的';也行alert(this.color); // 打印全局的 colorvar box = {color : '蓝色的', // 局部的 colorsayColor : function () {alert(this.color); // 此时的 this 只能 box 里的 color} };box.sayColor(); // 打印局部的 coloralert(this.color); // 还是全局的// 引用教材的原版例子window.color = '红色的'; // 或者 var color = '红色的';也行var box = {color : '蓝色的'};function sayColor() {alert(this.color); // 这里第一次在外面,第二次在 box 里面}getColor();box.sayColor = sayColor; // 把函数复制到 box 对象里,成为了方法box.sayColor(); 函数属性和方法 ECMAScript 中的函数是对象,因此函数也有属性和方法。每个函数都包含两个属性 :length 和 prototype。其中,length 属性表示函数希望接收的命名参数的个数。 function box(name, age) {alert(name + age);}alert(box.length); // 2 对于 prototype 属性,它是保存所有实例方法的真正所在,也就是原型。这个属性 ,我们将在面向对象一章详细介绍。而 prototype 下有两个方法:apply()和 call(),每个函数都包含这两个非继承而来的方法。这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内 this 对象的值。 function box(num1, num2) {return num1 + num2; // 原函数}function sayBox(num1, num2) {return box.apply(this, [num1, num2]); // this 表示作用域,这里是 window} // []表示 box 所需要的参数function sayBox2(num1, num2) {return box.apply(this, arguments); // arguments 对象表示 box 所需要的参数}alert(sayBox(10,10)); // 20alert(sayBox2(10,10)); // 20 call()方法于 apply()方法相同,他们的区别仅仅在于接收参数的方式不同。对于 call()方法而言,第一个参数是作用域,没有变化,变化只是其余的参数都是直接传递给函数的。 function box(num1, num2) {return num1 + num2;}function callBox(num1, num2) {return box.call(this, num1, num2); // 和 apply 区别在于后面的传参}alert(callBox(10,10)); 事实上,传递参数并不是 apply()和 call()方法真正的用武之地;它们经常使用的地方是能够扩展函数赖以运行的作用域。 var color = '红色的'; // 或者 window.color = '红色的';也行var box = {color : '蓝色的'};function sayColor() {alert(this.color);}sayColor(); // 作用域在 windowsayColor.call(this); // 作用域在 windowsayColor.call(window); // 作用域在 windowsayColor.call(box); // 作用域在 box,对象冒充 这个例子是之前作用域理解的例子修改而成,我们可以发现当我们使用 call(box)方法的时候,sayColor()方法的运行环境已经变成了 box 对象里了。 使用 call()或者 apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系(耦合,就是互相关联的意思,扩展和维护会发生连锁反应)。也就是说,box 对象和 sayColor()方法之间不会有多余的关联操作,比如 box.sayColor = sayColor;。 本篇文章为转载内容。原文链接:https://blog.csdn.net/gongxifacai_believe/article/details/108286196。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-01-24 13:01:25
529
转载
SeaTunnel
...el连接Kafka 2.1 准备工作 确保已安装并启动了Kafka服务,并创建了相关的Topic以供数据读取或写入。 2.2 创建Kafka Source & Sink插件 在SeaTunnel中,我们分别使用kafkaSource和kafkaSink插件来实现对Kafka的数据摄入和输出。 yaml 在SeaTunnel配置文件中定义Kafka Source source: type: kafkaSource topic: input_topic bootstrapServers: localhost:9092 consumerSettings: groupId: seawtunnel_consumer_group 定义Kafka Sink sink: type: kafkaSink topic: output_topic bootstrapServers: localhost:9092 producerSettings: acks: all 以上代码段展示了如何配置SeaTunnel从名为input_topic的Kafka主题中消费数据,以及如何将处理后的数据写入到output_topic。 2.3 数据处理逻辑配置 SeaTunnel的强大之处在于其数据处理能力,可以在数据从Kafka摄入后,执行一系列转换操作,如过滤、映射、聚合等: yaml transform: - type: filter condition: "columnA > 10" - type: map fieldMappings: - source: columnB target: newColumn 这段代码示例演示了如何在摄入数据过程中,根据条件过滤数据行,并进行字段映射。 3. 运行SeaTunnel任务 完成配置后,你可以运行SeaTunnel任务,开始从Kafka摄入数据并进行处理,然后将结果输出回Kafka或其他目标存储。 shell sh bin/start-waterdrop.sh --config /path/to/your/config.yaml 4. 思考与探讨 在整个配置和运行的过程中,你会发现SeaTunnel对于Kafka的支持非常友好且高效。它不仅简化了与Kafka的对接过程,还赋予了我们极大的灵活性去设计和调整数据处理流程。此外,SeaTunnel的插件化设计就像一个超级百变积木,让我们能够灵活应对未来可能出现的各种各样的数据源和目标存储需求的变化,轻轻松松,毫不费力。 总结来说,通过SeaTunnel与Kafka的结合,我们能高效地处理实时数据流,满足复杂场景下的数据摄入、处理和输出需求,这无疑为大数据领域的开发者们提供了一种极具价值的解决方案。在这个日新月异、充满无限可能的大数据世界,这种组合就像是两位实力超群的好搭档,他们手牵手,帮我们在浩瀚的数据海洋里畅游得轻松自在,尽情地挖掘那些深藏不露的价值宝藏。
2023-07-13 13:57:20
166
星河万里
转载文章
...Proxy基本使用 2.1 Proxy 的 set 和 get 捕获器 2.2 Proxy 所有捕获器 (13个) 2.3 Proxy 的 construct 和 apply 3. Reflect 3.1 Reflect 的作用 3.2 Reflect 的常见方法 3.3 Reflect 的使用 3.4 Receiver的作用 3.5 Reflect 的 construct 4. 响应式 4.1 什么是响应式? 4.2 响应式函数设计 4.3 响应式依赖的收集 4.4 监听对象的变化 4.5 对象的依赖管理 4.6 对 Depend 重构 4.7 创建响应式对象 4.8 Vue2 响应式原理 Proxy 、Relect、响应式 1. 监听对象的操作 需求:有一个对象,我们希望监听这个对象中的属性被设置或获取的过程 可以通过属性描述符中的存储属性描述符来做到 这段代码就利用了 Object.defineProperty 的存储属性描述符来对属性的操作进行监听 const obj = {name: 'why',age: 18}Object.keys(obj).forEach((key) => {let value = obj[key]Object.defineProperty(obj, key, {get: function () {console.log(监听到obj对象的${key}属性被访问了)return value},set: function (newValue) {console.log(监听到obj对象的${key}属性被设置值)value = newValue} })})obj.name = 'kobe'obj.age = 30console.log(obj.name)console.log(obj.age)/ 监听到obj对象的name属性被设置值监听到obj对象的age属性被设置值监听到obj对象的name属性被访问了kobe监听到obj对象的age属性被访问了30/ 属性描述符监听对象的缺点: 首先,Object.defineProperty 设计的初衷,不是为了去监听截止一个对象中所有的属性的 我们在定义某些属性的时候,初衷其实是定义普通的属性,但是后面我们强行将它变成了数据属性描述符 其次,如果我们想监听更加丰富的操作,比如新增属性、删除属性,那么 Object.defineProperty 是无能为力的 所以我们要知道,存储数据描述符设计的初衷并不是为了去监听一个完整的对象 Ps: 原来的对象是 数据属性描述符,通过 Object.defineProperty 变成了 访问属性描述符 2. Proxy基本使用 在ES6中,新增了一个Proxy类,这个类从名字就可以看出来,是用于帮助我们创建一个代理的: 也就是说,如果我们希望监听一个对象的相关操作,那么我们可以先创建一个代理对象(Proxy对象) 之后对该对象的所有操作,都通过代理对象来完成,代理对象可以监听我们想要对原对象进行哪些操作 将上面的案例用 Proxy 来实现一次: 首先,我们需要 new Proxy 对象,并且传入需要侦听的对象以及一个处理对象,可以称之为 handler; const p = new Proxy(target, handler) 其次,我们之后的操作都是直接对 Proxy 的操作,而不是原有的对象,因为我们需要在 handler 里面进行侦听 const obj = {name: 'why',age: 18}const objProxy = new Proxy(obj, {// 获取值时的捕获器get: function (target, key) {console.log(监听到obj对象的${key}属性被访问了)return target[key]},// 设置值时的捕获器set: function (target, key, newValue) {console.log(监听到obj对象的${key}属性被设置值)target[key] = newValue} })console.log(objProxy.name)console.log(objProxy.age)objProxy.name = 'kobe'objProxy.age = 30console.log(obj.name)console.log(obj.age)/ 监听到obj对象的name属性被访问了why监听到obj对象的age属性被访问了18监听到obj对象的name属性被设置值监听到obj对象的age属性被设置值kobe30/ 2.1 Proxy 的 set 和 get 捕获器 如果我们想要侦听某些具体的操作,那么就可以在 handler 中添加对应的捕捉器(Trap) set 和 get 分别对应的是函数类型 set 函数有四个参数: target:目标对象(侦听的对象) property:将被设置的属性 key value:新属性值 receiver:调用的代理对象 get 函数有三个参数 target:目标对象(侦听的对象) property:被获取的属性 key receiver:调用的代理对象 2.2 Proxy 所有捕获器 (13个) handler.getPrototypeOf() Object.getPrototypeOf 方法的捕捉器 handler.setPrototypeOf() Object.setPrototypeOf 方法的捕捉器 handler.isExtensible() Object.isExtensible 方法的捕捉器 handler.preventExtensions() Object.preventExtensions 方法的捕捉器 handler.getOwnPropertyDescriptor() Object.getOwnPropertyDescriptor 方法的捕捉器 handler.defineProperty() Object.defineProperty 方法的捕捉器 handler.ownKeys() Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器 handler.has() in 操作符的捕捉器 handler.get() 属性读取操作的捕捉器 handler.set() 属性设置操作的捕捉器 handler.deleteProperty() delete 操作符的捕捉器 handler.apply() 函数调用操作的捕捉器 handler.construct() new 操作符的捕捉器 const obj = {name: 'why',age: 18}const objProxy = new Proxy(obj, {// 获取值时的捕获器get: function (target, key) {console.log(监听到obj对象的${key}属性被访问了)return target[key]},// 设置值时的捕获器set: function (target, key, newValue) {console.log(监听到obj对象的${key}属性被设置值)target[key] = newValue},// 监听 in 的捕获器has: function (target, key) {console.log(监听到obj对象的${key}属性的in操作)return key in target},// 监听 delete 的捕获器deleteProperty: function (target, key) {console.log(监听到obj对象的${key}属性的delete操作)delete target[key]} })// in 操作符console.log('name' in objProxy)// delete 操作delete objProxy.name/ 监听到obj对象的name属性的in操作true监听到obj对象的name属性的delete操作/ 2.3 Proxy 的 construct 和 apply 到捕捉器中还有 construct 和 apply,它们是应用于函数对象的 function foo() {console.log('调用了 foo')}const fooProxy = new Proxy(foo, {apply: function (target, thisArg, argArray) {console.log(对 foo 函数进行了 apply 调用)target.apply(thisArg, argArray)},construct: function (target, argArray, newTarget) {console.log(对 foo 函数进行了 new 调用)return new target(...argArray)} })fooProxy.apply({}, ['abc', 'cba'])new fooProxy('abc', 'cba')/ 对 foo 函数进行了 apply 调用调用了 foo对 foo 函数进行了 new 调用调用了 foo/ 3. Reflect 3.1 Reflect 的作用 Reflect 也是 ES6 新增的一个 API,它是一个对象,字面的意思是反射 Reflect 的作用: 它主要提供了很多操作 JavaScript 对象的方法,有点像 Object 中操作对象的方法 比如 Reflect.getPrototypeOf(target) 类似于 Object.getPrototypeOf() 比如 Reflect.defineProperty(target, propertyKey, attributes) 类似于 Object.defineProperty() 如果我们有 Object 可以做这些操作,那么为什么还需要有Reflect这样的新增对象呢? 这是因为在早期的 ECMA 规范中没有考虑到这种对 对象本身 的操作如何设计会更加规范,所以将这些 API 放到了 Object上面 但是 Object 作为一个构造函数,这些操作实际上放到它身上并不合适 另外还包含一些类似于 in、delete 操作符,让 JS 看起来是会有一些奇怪的 所以在 ES6 中新增了 Reflect,让我们这些操作都集中到了 Reflect 对象上 那么 Object 和 Reflect 对象之间的 API 关系,可以参考 MDN 文档: 比较 Reflect 和 Object 方法 3.2 Reflect 的常见方法 Reflect中有哪些常见的方法呢?它和Proxy是一一对应的,也是13个 Reflect.getPrototypeOf(target) 类似于 Object.getPrototypeOf() Reflect.setPrototypeOf(target, prototype) 设置对象原型的函数. 返回一个 Boolean, 如果更新成功,则返回 true Reflect.isExtensible(target) 类似于 Object.isExtensible() Reflect.preventExtensions(target) 类似于 Object.preventExtensions() , 返回一个 Boolean Reflect.getOwnPropertyDescriptor(target, propertyKey) 类似于 Object.getOwnPropertyDescriptor() , 如果对象中存在该属性,则返回对应的属性描述符, 否则返回 undefined Reflect.defineProperty(target, propertyKey, attributes) 和 Object.defineProperty() 类似, 如果设置成功就会返回 true Reflect.ownKeys(target) 返回一个包含所有自身属性(不包含继承属性)的数组 (类似于 Object.keys(), 但不会受 enumerable 影响) Reflect.has(target, propertyKey) 判断一个对象是否存在某个属性,和 in 运算符 的功能完全相同 Reflect.get(target, propertyKey[, receiver]) 获取对象身上某个属性的值,类似于 target[name] Reflect.set(target, propertyKey, value[, receiver]) 将值分配给属性的函数,返回一个 Boolean,如果更新成功,则返回 true Reflect.deleteProperty(target, propertyKey) 作为函数的 delete 操作符,相当于执行 delete target[name] Reflect.apply(target, thisArgument, argumentsList) 对一个函数进行调用操作,同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似 Reflect.construct(target, argumentsList[, newTarget]) 对构造函数进行 new 操作,相当于执行 new target(...args) 3.3 Reflect 的使用 那么我们可以将之前Proxy案例中对原对象的操作,都修改为Reflect来操作 const obj = {name: 'why',age: 18}const objProxy = new Proxy(obj, {get: function (target, key) {console.log(监听到obj对象的${key}属性被访问了)return Reflect.get(target, key)// return target[key] // 对原来对象进行了直接操作},set: function (target, key, newValue) {console.log(监听到obj对象的${key}属性被设置值)Reflect.set(target, key, newValue)// target[key] = newValue // 对原来对象进行了直接操作} })objProxy.name = 'kobe'console.log(objProxy.name)/ 监听到obj对象的name属性被设置值监听到obj对象的name属性被访问了kobe/ 3.4 Receiver的作用 我们发现在使用getter、setter的时候有一个receiver的参数,它的作用是什么呢? 如果我们的源对象(obj)有 setter 、getter 的访问器属性,那么可以通过 receiver 来改变里面的 this const obj = {_name: 'why',get name() {return this._name // 不使用receiver, _name属性的操作不会被objProxy代理,因为this指向obj},set name(newValue) {this._name = newValue} }const objProxy = new Proxy(obj, {get: function (target, key, receiver) {// receiver 是创建出来的代理对象console.log('get 方法被访问-------', key, receiver)console.log(objProxy === receiver) // truereturn Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)} })objProxy.name = 'kobe'console.log(objProxy.name) // kobe/ get 方法被访问------- name { _name: 'kobe', name: [Getter/Setter] }trueget 方法被访问------- _name { _name: 'kobe', name: [Getter/Setter] }truekobe/ 3.5 Reflect 的 construct function Student(name, age) {this.name = namethis.age = age}function Teacher() {}const stu = new Student('why', 18)console.log(stu)console.log(stu.__proto__ === Student.prototype)/ Student { name: 'why', age: 18 }true/// 执行 Student 函数中的内容,但是创建出来的对象是 Teacher 对象const teacher = Reflect.construct(Student, ['why', 18], Teacher)console.log(teacher)console.log(teacher.__proto__ === Teacher.prototype)/ Teacher { name: 'why', age: 18 }true/ 4. 响应式 4.1 什么是响应式? 先来看一下响应式意味着什么?我们来看一段代码: m 有一个初始化的值,有一段代码使用了这个值; 那么在 m 有一个新的值时,这段代码可以自动重新执行 let m = 0// 一段代码console.log(m)console.log(m 2)console.log(m 2)m = 200 上面的这样一种可以自动响应数据变量的代码机制,我们就称之为是响应式的 对象的响应式 4.2 响应式函数设计 首先,执行的代码中可能不止一行代码,所以我们可以将这些代码放到一个函数中: 那么问题就变成了,当数据发生变化时,自动去执行某一个函数; 但是有一个问题:在开发中是有很多的函数的,如何区分一个函数需要响应式,还是不需要响应式呢? 很明显,下面的函数中 foo 需要在 obj 的 name 发生变化时,重新执行,做出相应; bar 函数是一个完全独立于 obj 的函数,它不需要执行任何响应式的操作; // 对象的响应式const obj = {name: 'why',age: 18}function foo() {const newName = obj.nameconsole.log('你好啊,李银河')console.log('Hello World')console.log(obj.name)}function bar() {console.log('普通的其他函数')console.log('这个函数不需要有任何的响应式')}obj.name = 'kobe' // name 发生改变时候 foo 函数执行 响应式函数的实现 watchFn 如何区分响应式函数? 这个时候我们封装一个新的函数 watchFn 凡是传入到 watchFn 的函数,就是需要响应式的 其他默认定义的函数都是不需要响应式的 / 封装一个响应式的函数 /let reactiveFns = []function watchFn(fn) {reactiveFns.push(fn)}// 对象的响应式const obj = {name: 'why',age: 18}watchFn(function foo() {const newName = obj.nameconsole.log('你好啊,李银河')console.log('Hello World')console.log(obj.name)})watchFn(function demo() {console.log(obj.name, 'demo function ---------')})function bar() {console.log('普通的其他函数')console.log('这个函数不需要有任何的响应式')}obj.name = 'kobe' // name 发生改变时候 foo 函数执行reactiveFns.forEach((fn) => {fn()}) 4.3 响应式依赖的收集 目前收集的依赖是放到一个数组中来保存的,但是这里会存在数据管理的问题: 在实际开发中需要监听很多对象的响应式 这些对象需要监听的不只是一个属性,它们很多属性的变化,都会有对应的响应式函数 不可能在全局维护一大堆的数组来保存这些响应函数 所以要设计一个类,这个类用于管理某一个对象的某一个属性的所有响应式函数: 相当于替代了原来的简单 reactiveFns 的数组; class Depend {constructor() {this.reactiveFns = []}addDepend(reactiveFn) {this.reactiveFns.push(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }const depend = new Depend()function watchFn(fn) {depend.addDepend(fn)}// 对象的响应式const obj = {name: 'why', // depend 对象age: 18 // depend 对象}watchFn(function foo() {const newName = obj.nameconsole.log('你好啊,李银河')console.log('Hello World')console.log(obj.name)})watchFn(function demo() {console.log(obj.name, 'demo function ---------')})function bar() {console.log('普通的其他函数')console.log('这个函数不需要有任何的响应式')}obj.name = 'kobe'depend.notify() 4.4 监听对象的变化 那么接下来就可以通过之前的方式来监听对象的变化: 方式一:通过 Object.defineProperty 的方式(vue2采用的方式); 方式二:通过 new Proxy 的方式(vue3采用的方式); 我们这里先以Proxy的方式来监听 class Depend {constructor() {this.reactiveFns = []}addDepend(reactiveFn) {this.reactiveFns.push(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }const depend = new Depend()function watchFn(fn) {depend.addDepend(fn)}// 对象的响应式const obj = {name: 'why', // depend 对象age: 18 // depend 对象}// 监听对象的属性变化:Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)depend.notify()} })watchFn(function foo() {const newName = objProxy.nameconsole.log('你好啊,李银河')console.log('Hello World')console.log(objProxy.name)})watchFn(function demo() {console.log(objProxy.name, 'demo function ---------')})objProxy.name = 'kobe'objProxy.name = 'james'/ 你好啊,李银河Hello Worldkobekobe demo function ---------你好啊,李银河Hello Worldjamesjames demo function ---------/ 4.5 对象的依赖管理 目前是创建了一个 Depend 对象,用来管理对于 name 变化需要监听的响应函数: 但是实际开发中我们会有不同的对象,另外会有不同的属性需要管理; 如何可以使用一种数据结构来管理不同对象的不同依赖关系呢? 在前面我们刚刚学习过 WeakMap,并且在学习 WeakMap 的时候我讲到了后面通过 WeakMap 如何管理这种响应式的数据依赖: 实现 可以写一个 getDepend 函数专门来管理这种依赖关系 / 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取mapconst map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象const depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}// 监听对象的属性变化:Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} }) 正确的依赖收集 我们之前收集依赖的地方是在 watchFn 中: 但是这种收集依赖的方式我们根本不知道是哪一个 key 的哪一个 depend 需要收集依赖; 只能针对一个单独的 depend 对象来添加你的依赖对象; 那么正确的应该是在哪里收集呢?应该在我们调用了 Proxy 的 get 捕获器时 因为如果一个函数中使用了某个对象的 key,那么它应该被收集依赖 / 封装一个响应式函数 /let activeReactviceFn = nullfunction watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}// 监听对象的属性变化:Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {// 根据 target key 获取对应的 depnedconst depend = getDepend(target, key)// 给 depend 对象中添加响应式函数activeReactviceFn && depend.addDepend(activeReactviceFn)return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} }) 4.6 对 Depend 重构 两个问题: 问题一:如果函数中有用到两次 key,比如 name,那么这个函数会被收集两次 问题二:我们并不希望将添加 reactiveFn 放到 get 中,因为它是属于 Depend 的行为 所以我们需要对 Depend 类进行重构: 解决问题一的方法:不使用数组,而是使用 Set 解决问题二的方法:添加一个新的方法,用于收集依赖 // 保存当前需要收集的响应式函数let activeReactviceFn = nullclass Depend {constructor() {this.reactiveFns = new Set()}depend() {if (activeReactviceFn) {this.reactiveFns.add(activeReactviceFn)} }addDepend(reactiveFn) {this.reactiveFns.add(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }// 对象的响应式const obj = {name: 'why', // depend 对象age: 18 // depend 对象}/ 封装一个响应式函数 /function watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}// 监听对象的属性变化:Proxy(vue3)/Object.defineProperty(vue2)const objProxy = new Proxy(obj, {get: function (target, key, receiver) {// 根据 target key 获取对应的 depnedconst depend = getDepend(target, key)// 给 depend 对象中添加响应式函数depend.depend()return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} })watchFn(function () {console.log(objProxy.name, '--------------')console.log(objProxy.name, '++++++++++++++')})objProxy.name = 'kobe'/ why --------------why ++++++++++++++kobe --------------kobe ++++++++++++++/ 4.7 创建响应式对象 目前的响应式是针对于obj一个对象的,我们可以创建出来一个函数,针对所有的对象都可以变成响应式对象 / 保存当前需要收集的响应式函数 /let activeReactviceFn = null/ 依赖收集类 /class Depend {constructor() {this.reactiveFns = new Set()}depend() {if (activeReactviceFn) {this.reactiveFns.add(activeReactviceFn)} }addDepend(reactiveFn) {this.reactiveFns.add(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }/ 封装一个响应式函数 /function watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}/ 创建响应式对象函数 /function reactive(obj) {// 监听对象的属性变化:Proxy(vue3)/Object.defineProperty(vue2)return new Proxy(obj, {get: function (target, key, receiver) {// 根据 target key 获取对应的 depnedconst depend = getDepend(target, key)// 给 depend 对象中添加响应式函数depend.depend()return Reflect.get(target, key, receiver)},set: function (target, key, newValue, receiver) {Reflect.set(target, key, newValue, receiver)const depend = getDepend(target, key)depend.notify()} })}const info = reactive({address: '广州市',height: 1.88})watchFn(() => {console.log(info.address, '---')})info.address = '北京市' 4.8 Vue2 响应式原理 前面所实现的响应式的代码,其实就是 Vue3 中的响应式原理: Vue3 主要是通过 Proxy 来监听数据的变化以及收集相关的依赖的 Vue2 中通过 Object.defineProerty的方式来实现对象属性的监听 可以将 reactive 函数进行如下的重构: 在传入对象时,我们可以遍历所有的 key,并且通过属性存储描述符来监听属性的获取和修改 在 setter 和 getter 方法中的逻辑和前面的 Proxy 是一致的 / 保存当前需要收集的响应式函数 /let activeReactviceFn = null/ 依赖收集类 /class Depend {constructor() {this.reactiveFns = new Set()}depend() {if (activeReactviceFn) {this.reactiveFns.add(activeReactviceFn)} }addDepend(reactiveFn) {this.reactiveFns.add(reactiveFn)}notify() {this.reactiveFns.forEach((fn) => {fn()})} }/ 封装一个响应式函数 /function watchFn(fn) {activeReactviceFn = fnfn()activeReactviceFn = null}/ 封装一个获取depend的函数 /const taregtMap = new WeakMap()function getDepend(target, key) {// 根据target对象获取maplet map = taregtMap.get(target)if (!map) {map = new Map()taregtMap.set(target, map)}// 根据key获取depend对象let depend = map.get(key)if (!depend) {depend = new Depend()map.set(key, depend)}return depend}/ 创建响应式对象函数 /function reactive(obj) {Object.keys(obj).forEach((key) => {let value = obj[key]Object.defineProperty(obj, key, {get: function () {const dep = getDepend(obj, key)dep.depend()return value},set: function (newValue) {value = newValueconst dep = getDepend(obj, key)dep.notify()} })})return obj}const info = reactive({address: '广州市',height: 1.88})watchFn(() => {console.log(info.address, '---')})info.address = '北京市' 本篇文章为转载内容。原文链接:https://blog.csdn.net/wanghuan1020/article/details/126774033。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-01-11 12:37:47
679
转载
转载文章
...Lv3, LGPLv2.1, LGPLv3 --><license>TODO</license><!-- Url tags are optional, but multiple are allowed, one per tag --><!-- Optional attribute type can be: website, bugtracker, or repository --><!-- Example: --><!-- <url type="website">http://wiki.ros.org/learning_communication</url> --><!-- Author tags are optional, multiple are allowed, one per tag --><!-- Authors do not have to be maintainers, but could be --><!-- Example: --><!-- <author email="jane.doe@example.com">Jane Doe</author> --><!-- The _depend tags are used to specify dependencies --><!-- Dependencies can be catkin packages or system dependencies --><!-- Examples: --><!-- Use build_depend for packages you need at compile time: --><!-- <build_depend>message_generation</build_depend> --><!-- Use buildtool_depend for build tool packages: --><!-- <buildtool_depend>catkin</buildtool_depend> --><!-- Use run_depend for packages you need at runtime: --><!-- <run_depend>message_runtime</run_depend> --><!-- Use test_depend for packages you need only for testing: --><!-- <test_depend>gtest</test_depend> --><buildtool_depend>catkin</buildtool_depend><build_depend>geometry_msgs</build_depend><build_depend>roscpp</build_depend><build_depend>rospy</build_depend><build_depend>std_msgs</build_depend><run_depend>geometry_msgs</run_depend><run_depend>roscpp</run_depend><run_depend>rospy</run_depend><run_depend>std_msgs</run_depend><build_depend>message_generation</build_depend><run_depend>message_runtime</run_depend><!-- The export tag contains other, unspecified, tags --><export><!-- Other tools can request additional information be placed here --></export></package> vins_fusion: 双目vio等多系统 mkdir -p vins-catkin_ws/srccd vins-catkin_ws/srcgit clone https://github.com/HKUST-Aerial-Robotics/VINS-Fusion.gitcd ..catkin_makesource devel/setup.bash按照readme 3.1 Monocualr camera + IMUroslaunch vins vins_rviz.launchrosrun vins vins_node ~/catkin_ws/src/VINS-Fusion/config/euroc/euroc_mono_imu_config.yaml (optional) rosrun loop_fusion loop_fusion_node ~/catkin_ws/src/VINS-Fusion/config/euroc/euroc_mono_imu_config.yaml rosbag play YOUR_DATASET_FOLDER/MH_01_easy.bag 3.2 Stereo cameras + IMUroslaunch vins vins_rviz.launchrosrun vins vins_node ~/catkin_ws/src/VINS-Fusion/config/euroc/euroc_stereo_imu_config.yaml (optional) rosrun loop_fusion loop_fusion_node ~/catkin_ws/src/VINS-Fusion/config/euroc/euroc_stereo_imu_config.yaml rosbag play YOUR_DATASET_FOLDER/MH_01_easy.bag 3.3 Stereo camerasroslaunch vins vins_rviz.launchrosrun vins vins_node ~/catkin_ws/src/VINS-Fusion/config/euroc/euroc_stereo_config.yaml (optional) rosrun loop_fusion loop_fusion_node ~/catkin_ws/src/VINS-Fusion/config/euroc/euroc_stereo_config.yaml rosbag play YOUR_DATASET_FOLDER/MH_01_easy.bag<img src="https://github.com/HKUST-Aerial-Robotics/VINS-Fusion/blob/master/support_files/image/euroc.gif" width = 430 height = 240 /> 4. KITTI Example 4.1 KITTI Odometry (Stereo)Download [KITTI Odometry dataset](http://www.cvlibs.net/datasets/kitti/eval_odometry.php) to YOUR_DATASET_FOLDER. Take sequences 00 for example,Open two terminals, run vins and rviz respectively. (We evaluated odometry on KITTI benchmark without loop closure funtion)roslaunch vins vins_rviz.launch(optional) rosrun loop_fusion loop_fusion_node ~/catkin_ws/src/VINS-Fusion/config/kitti_odom/kitti_config00-02.yamlrosrun vins kitti_odom_test ~/catkin_ws/src/VINS-Fusion/config/kitti_odom/kitti_config00-02.yaml YOUR_DATASET_FOLDER/sequences/00/ 4.2 KITTI GPS Fusion (Stereo + GPS)Download [KITTI raw dataset](http://www.cvlibs.net/datasets/kitti/raw_data.php) to YOUR_DATASET_FOLDER. Take [2011_10_03_drive_0027_synced](https://s3.eu-central-1.amazonaws.com/avg-kitti/raw_data/2011_10_03_drive_0027/2011_10_03_drive_0027_sync.zip) for example.Open three terminals, run vins, global fusion and rviz respectively. Green path is VIO odometry; blue path is odometry under GPS global fusion.roslaunch vins vins_rviz.launchrosrun vins kitti_gps_test ~/catkin_ws/src/VINS-Fusion/config/kitti_raw/kitti_10_03_config.yaml YOUR_DATASET_FOLDER/2011_10_03_drive_0027_sync/ rosrun global_fusion global_fusion_node<img src="https://github.com/HKUST-Aerial-Robotics/VINS-Fusion/blob/master/support_files/image/kitti.gif" width = 430 height = 240 /> 5. VINS-Fusion on car demonstrationDownload [car bag](https://drive.google.com/open?id=10t9H1u8pMGDOI6Q2w2uezEq5Ib-Z8tLz) to YOUR_DATASET_FOLDER.Open four terminals, run vins odometry, visual loop closure(optional), rviz and play the bag file respectively. Green path is VIO odometry; red path is odometry under visual loop closure.roslaunch vins vins_rviz.launchrosrun vins vins_node ~/catkin_ws/src/VINS-Fusion/config/vi_car/vi_car.yaml (optional) rosrun loop_fusion loop_fusion_node ~/catkin_ws/src/VINS-Fusion/config/vi_car/vi_car.yaml rosbag play YOUR_DATASET_FOLDER/car.bag 本篇文章为转载内容。原文链接:https://blog.csdn.net/slzlincent/article/details/104364909。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-09-13 20:38:56
310
转载
ClickHouse
... 原因剖析 2.1 配置问题 首先,最常见的原因是集群配置文件(如 config.xml 或者 ZooKeeper 中的配置)中的节点地址不正确或已失效。例如: xml true node1.example.com 9000 node2.wrong-address.com 9000 2.2 网络问题 其次,网络连接问题也可能导致此异常。比如,假如在刚才那个例子里面,node2.example.com 其实是在线状态的,但是呢,因为网络抽风啊,或者其他一些乱七八糟的原因,导致ClickHouse没法跟它顺利牵手,建立连接,这时候呀,就会蹦出一个“NodeNotFoundException”。 2.3 节点状态问题 此外,如果集群内的节点由于重启、故障等原因尚未完全启动,其服务并未处于可响应状态,此时进行查询同样可能抛出此异常。 3. 解决方案与实践 3.1 检查并修正配置 仔细检查集群配置文件,确保每个节点的主机名和端口号都是准确无误的。如发现问题,立即修正,并重新加载配置。 bash $ sudo service clickhouse-server restart 重启ClickHouse以应用新的配置 3.2 确保网络通畅 确认集群内各节点间的网络连接正常,可以通过简单的ping命令测试。同时,排查防火墙设置是否阻止了必要的通信。 3.3 监控节点状态 对于因节点自身问题引发的异常,可通过监控系统或日志来了解节点的状态。确保所有节点都运行稳定且可以对外提供服务。 4. 总结与思考 面对"NodeNotFoundException:节点未找到异常"这样的问题,我们需要像侦探一样,从配置、网络以及节点自身等多个维度进行细致排查。在日常的维护工作中,咱们得把一套完善的监控系统给搭建起来,这样才能够随时了解咱集群里每一个小节点的状态,这可是非常重要的一环!与此同时,对ClickHouse集群配置的理解与熟练掌握,也是避免此类问题的关键所在。毕竟,甭管啥工具多牛掰,都得靠我们在实际操作中不断摸索、学习和改进,才能让它发挥出最大的威力,达到顶呱呱的效果。
2024-01-03 10:20:08
524
桃李春风一杯酒
Redis
...些数据。 2.1 基本原理 假设我们有一个主节点和两个从节点,当主节点接收到一条写入命令时,它会将这条命令记录在一个称为“复制积压缓冲区”(Replication Buffer)的特殊内存区域中。然后,主节点会异步地将这个命令发送给所有的从节点。从节点收到命令后,会将其应用到自己的数据库中,以确保数据的一致性。 2.2 代码示例 让我们来看一个简单的代码示例,首先启动一个主节点: bash redis-server --port 6379 接着,启动两个从节点,分别监听不同的端口: bash redis-server --slaveof 127.0.0.1 6379 --port 6380 redis-server --slaveof 127.0.0.1 6379 --port 6381 现在,如果你向主节点写入一条数据,比如: bash redis-cli -p 6379 set key value 这条数据就会被同步到两个从节点上。你可以通过以下命令验证: bash redis-cli -p 6380 get key redis-cli -p 6381 get key 你会发现,两个从节点都正确地收到了这条数据。 3. 哨兵模式 哨兵模式(Sentinel Mode)是Redis提供的另一种高可用解决方案。它的主要功能就是在主节点挂掉后,自动选出一个新老大,并告诉所有的小弟们赶紧换队长。这使得Redis能够更好地应对单点故障问题。 3.1 工作原理 哨兵模式由一组哨兵实例组成,它们负责监控Redis实例的状态。当哨兵发现主节点挂了,就会用Raft算法选出一个新老大,并告诉所有的小弟们赶紧更新配置信息。这个过程是自动完成的,无需人工干预。 3.2 代码示例 要启用哨兵模式,需要先配置哨兵实例。假设你已经安装了Redis,并且主节点运行在localhost:6379上。接下来,你需要创建一个哨兵配置文件sentinels.conf,内容如下: conf sentinel monitor mymaster 127.0.0.1 6379 2 sentinel down-after-milliseconds mymaster 5000 sentinel failover-timeout mymaster 60000 sentinel parallel-syncs mymaster 1 然后启动哨兵实例: bash redis-sentinel sentinels.conf 现在,当你故意关闭主节点时,哨兵会自动选举出一个新的主节点,并通知从节点进行切换。 4. 集群模式 最后,我们来看看Redis集群模式(Cluster Mode),这是一种更加复杂但也更强大的数据同步机制。集群模式允许Redis实例分布在多个节点上,每个节点都可以同时处理读写请求。 4.1 集群架构 在集群模式下,Redis实例被划分为多个槽(slots),每个槽可以归属于不同的节点。当你用客户端连到某个节点时,它会通过键名算出应该去哪个槽,然后就把请求直接发到对的节点上。这样做的好处是,即使某个节点宕机,也不会影响整个系统的可用性。 4.2 实现步骤 为了建立一个Redis集群,你需要准备至少六个Redis实例,每个实例监听不同的端口。然后,使用redis-trib.rb工具来创建集群: bash redis-trib.rb create --replicas 1 127.0.0.1:7000 127.0.0.1:7001 127.0.0.1:7002 127.0.0.1:7003 127.0.0.1:7004 127.0.0.1:7005 创建完成后,你可以通过任何节点来访问集群。例如: bash redis-cli -c -h 127.0.0.1 -p 7000 5. 总结 通过以上介绍,我们可以看到Redis提供了多种数据同步机制,每种机制都有其独特的应用场景。不管是基本的主从复制,还是复杂的集群模式,Redis都能搞定数据同步,让人放心。当然啦,每种方法都有它的长处和短处,到底选哪个还得看你自己的具体情况和所处的环境。希望今天的分享能对你有所帮助,也欢迎大家在评论区讨论更多关于Redis的话题!
2025-03-05 15:47:59
27
草原牧歌
转载文章
...器和ntp客户机。 2.1 ntpdate命令实现 ntpdate 安装: yum install ntpdate -y Centos系统======================================sudo apt install ntpdate Ubuntu系统 时间同步 sudo ntpdate -u cn.pool.ntp.org18 Mar 18:25:22 ntpdate[18673]: adjust time server 84.16.73.33 offset 0.015941 sec 使用ntpdate 只是强制将系统时间设置为ntp服务器时间,如果cpu tick有问题,时间还是会不准。所以,一般配合cron命令,来进行定期同步设置。比如,在crontab中添加: sudo crontab -e0 12 /usr/sbin/ntpdate 192.168.10.110 上述命令的意思是:每天的12点整,从192.168.10.110 ntp服务器同步一次时间(前提是 192.168.10.110有ntp服务)。 2.2 Ntp客户端代码实现 本质上还是创建socket连接去获取ntp服务的时间与本地时间比较,不一致修改本机时间即可。 NtpClient.h //// Created by lwang on 2023-03-18.//ifndef NTP_CLIENT_Hdefine NTP_CLIENT_Hinclude <stdio.h>include <stdlib.h>include <string.h>include <time.h>include <iostream>include <unistd.h>include <sys/select.h>include <sys/time.h>include <sys/socket.h>include <arpa/inet.h>include <netdb.h>include <errno.h>include <endian.h>include <map>include <string>include <mutex>using namespace std;define NTP_LI 0define NTP_VERSION_NUM 3define NTP_MODE_CLIENT 3define NTP_MODE_SERVER 4define NTP_STRATUM 0define NTP_POLL 4define NTP_PRECISION -6define NTP_MIN_LEN 48define NTP_SERVER_PORT 123define NTP_SERVER_ADDR "119.28.183.184"define TIMEOUT 2define BUFSIZE 1500define JAN_1970 0x83aa7e80define NTP_CONV_FRAC32(x) (uint64_t)((x) ((uint64_t)1 << 32))define NTP_REVE_FRAC32(x) ((double)((double)(x) / ((uint64_t)1 << 32)))define NTP_CONV_FRAC16(x) (uint32_t)((x) ((uint32_t)1 << 16))define NTP_REVE_FRAC16(x) ((double)((double)(x) / ((uint32_t)1 << 16)))define USEC2FRAC(x) ((uint32_t)NTP_CONV_FRAC32((x) / 1000000.0))define FRAC2USEC(x) ((uint32_t)NTP_REVE_FRAC32((x)1000000.0))define NTP_LFIXED2DOUBLE(x) ((double)(ntohl(((struct l_fixedpt )(x))->intpart) - JAN_1970 + FRAC2USEC(ntohl(((struct l_fixedpt )(x))->fracpart)) / 1000000.0))struct s_fixedpt{uint16_t intpart;uint16_t fracpart;};struct l_fixedpt{uint32_t intpart;uint32_t fracpart;};struct ntphdr{if __BYTE_ORDER == __BID_ENDIANunsigned int ntp_li : 2;unsigned int ntp_vn : 3;unsigned int ntp_mode : 3;endifif __BYTE_ORDER == __LITTLE_ENDIANunsigned int ntp_mode : 3;unsigned int ntp_vn : 3;unsigned int ntp_li : 2;endifuint8_t ntp_stratum;uint8_t ntp_poll;int8_t ntp_precision;struct s_fixedpt ntp_rtdelay;struct s_fixedpt ntp_rtdispersion;uint32_t ntp_refid;struct l_fixedpt ntp_refts;struct l_fixedpt ntp_orits;struct l_fixedpt ntp_recvts;struct l_fixedpt ntp_transts;};class NtpClient {public:NtpClient();virtual ~NtpClient();void GetNtpTime(std::string &ntpTime);in_addr_t HostTransfer(const char host);int PaddingNtpPackage(void buf, size_t size);double GetOffset(const struct ntphdr ntp, const struct timeval recvtv);private:int m_sockfd;};endif / NTP_CLIENT_H / NtpClient.cpp //// Created by lwang on 2023-03-18.//include "NtpClient.h"NtpClient::NtpClient() { }NtpClient::~NtpClient() {}in_addr_t NtpClient::HostTransfer(const char host){in_addr_t saddr;struct hostent hostent;if ((saddr = inet_addr(host)) == INADDR_NONE){if ((hostent = gethostbyname(host)) == NULL){return INADDR_NONE;}memmove(&saddr, hostent->h_addr, hostent->h_length);}return saddr;}int NtpClient::PaddingNtpPackage(void buf, size_t size) // 构建并发送NTP请求报文{if (!size)return -1;struct ntphdr ntp;struct timeval tv;memset(buf, 0, BUFSIZE);ntp = (struct ntphdr )buf;ntp->ntp_li = NTP_LI;ntp->ntp_vn = NTP_VERSION_NUM;ntp->ntp_mode = NTP_MODE_CLIENT;ntp->ntp_stratum = NTP_STRATUM;ntp->ntp_poll = NTP_POLL;ntp->ntp_precision = NTP_PRECISION;gettimeofday(&tv, NULL); // 把目前的时间用tv 结构体返回ntp->ntp_transts.intpart = htonl(tv.tv_sec + JAN_1970);ntp->ntp_transts.fracpart = htonl(USEC2FRAC(tv.tv_usec));size = NTP_MIN_LEN;return 0;}double NtpClient::GetOffset(const struct ntphdr ntp, const struct timeval recvtv) // 偏移量{double t1, t2, t3, t4;t1 = NTP_LFIXED2DOUBLE(&ntp->ntp_orits);t2 = NTP_LFIXED2DOUBLE(&ntp->ntp_recvts);t3 = NTP_LFIXED2DOUBLE(&ntp->ntp_transts);t4 = recvtv->tv_sec + recvtv->tv_usec / 1000000.0;return ((t2 - t1) + (t3 - t4)) / 2;}void NtpClient::GetNtpTime(std::string &ntpTime){char buffer[64] = {0};char cmd[128] = {0};tm local;char buf[BUFSIZE];size_t nbytes;int maxfd1;struct sockaddr_in servaddr;fd_set readfds;struct timeval timeout, recvtv, tv;double offset;servaddr.sin_family = AF_INET;servaddr.sin_port = htons(NTP_SERVER_PORT);servaddr.sin_addr.s_addr = HostTransfer(NTP_SERVER_ADDR);if ((m_sockfd = socket(AF_INET, SOCK_DGRAM, 0)) < 0){perror("socket error");return ;}if (connect(m_sockfd, (struct sockaddr )&servaddr, sizeof(struct sockaddr)) != 0){perror("connect error");return ;}nbytes = BUFSIZE;if (PaddingNtpPackage(buf, &nbytes) != 0){fprintf(stderr, "construct ntp request error \n");exit(-1);}send(m_sockfd, buf, nbytes, 0);FD_ZERO(&readfds);FD_SET(m_sockfd, &readfds);maxfd1 = m_sockfd + 1;timeout.tv_sec = TIMEOUT;timeout.tv_usec = 0;if (select(maxfd1, &readfds, NULL, NULL, &timeout) > 0){if (FD_ISSET(m_sockfd, &readfds)){if ((nbytes = recv(m_sockfd, buf, BUFSIZE, 0)) < 0){perror("recv error");exit(-1);}// 计算C/S时间偏移量gettimeofday(&recvtv, NULL);offset = GetOffset((struct ntphdr )buf, &recvtv);gettimeofday(&tv, NULL);tv.tv_sec += (int)offset;tv.tv_usec += offset - (int)offset;local = localtime((time_t )&tv.tv_sec);strftime(buffer, 64, "%Y-%m-%d %H:%M:%S", local);ntpTime = std::string(buffer);} }return ;} main.cpp include "NtpClient.h"int main(){std::string ntpTime = "";char curBuf[64] = {0};struct timeval cur;tm local;NtpClient client;client.GetNtpTime(ntpTime);cout << "ntpTime: " << ntpTime << endl;gettimeofday(&cur, NULL);local = localtime((time_t )&cur.tv_sec);strftime(curBuf, 64, "%Y-%m-%d %H:%M:%S", local);std::string curTime = std::string(curBuf);cout << "curTime: " << curTime << endl;if (curTime != ntpTime){cout << "start time calibrate!" << endl;std::string cmd = "sudo date -s \"" + ntpTime + "\"";system(cmd.c_str());cout << "cmd: " << cmd << endl;}else{cout << "time seem" << endl;}return 0;} 推荐一个零声学院免费教程,个人觉得老师讲得不错, 分享给大家:[Linux,Nginx,ZeroMQ,MySQL,Redis, fastdfs,MongoDB,ZK,流媒体,CDN,P2P,K8S,Docker, TCP/IP,协程,DPDK等技术内容,点击立即学习: 本篇文章为转载内容。原文链接:https://blog.csdn.net/weixin_46935110/article/details/129683157。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-03-01 12:56:47
112
转载
转载文章
本文针对海量数据处理场景,系统总结了多种有效方法,如分而治之结合hash映射、运用Bloom Filter与BitMap进行空间优化、利用Trie树及倒排索引技术,并介绍了排序算法(如归并排序、堆排序)在内外排序中的应用。同时,文章还探讨了在资源受限条件下,如何借助分布式计算框架Hadoop和MapReduce解决大规模数据问题。通过实例分析,详述了在不同问题中如何巧妙运用上述技术和策略,如查找重复URL、统计query频次、筛选高频词汇以及定位IP访问峰值等,展现了这些方法在实际海量数据处理任务中的高效性和实用性。
2024-03-01 12:40:17
541
转载
转载文章
该文章介绍了求解一道编程题目的两种方法:模拟法和动态规划。题目要求在给定字符串中删除最少数量的字符,使得剩余字符串无前导零且所有数字之和能被3整除。模拟法通过统计字符串中各数字模3余数出现次数,根据总和模3的结果来决定删除哪些字符;而动态规划则定义了dp[i][3]数组记录从前i个字符中选取字符构成满足特定模3条件的子串所需的最小删除字符数,通过状态转移方程进行计算并回溯得到最优解。关键词涉及“模拟法”、“动态规划”、“字符串操作”、“最小化删除元素”以及满足“3的倍数条件”的问题解决策略。虽然文章未直接运用TF-IDF、TextRank等关键词提取算法,但这些算法与文本处理技术有一定的相关性,不过在此问题中并未体现“模糊关键词匹配”或“隐含主题”等相关概念。
2023-04-14 11:43:53
384
转载
Gradle
...的幕后黑手 2.1 Gradle到底是什么? 首先,让我们简单回顾一下Gradle是什么。Gradle是一个强大的构建工具,专门用来管理依赖关系、编译代码和生成最终的应用程序。在React Native的项目里,Gradle就像是个神奇的“翻译官”和“包工头”。它先把咱们写的JavaScript代码变成能被手机理解的原生语言,然后又像叠积木一样,把所有东西组装好,最后给你整出一个安卓的APK文件或者iOS的IPA文件,方便你直接装到手机上用。如果你的Gradle配置有问题,那么App就无法成功安装到模拟器上。 2.2 问题可能在哪里? 现在,让我们回到那个让你抓狂的问题——为什么App装不上?以下是一些常见的原因: 2.2.1 Gradle版本不匹配 有时候,你的React Native版本和Gradle版本可能不兼容。比如说啊,React Native从0.60版本开始搞了个自动链接的功能,挺方便的。但你要注意啦,如果你用的Gradle版本太老了,那可能就会出问题,一些依赖项就装不全或者装不好,最后各种报错啥的,真是让人头大。嘿,之前我也碰上过这么个事儿!那时候我的 React Native 版本已经升到 0.63 了,结果 Gradle 还是老版本,就跟手机升级了系统,但壳子还是原来的那个一样,看着就别扭啊!解决方法很简单,只需要升级Gradle到最新版本即可。 代码示例: gradle // build.gradle 文件中的配置 buildscript { repositories { google() jcenter() } dependencies { classpath 'com.android.tools.build:gradle:4.2.0' // 升级到最新版本 } } 2.2.2 环境变量未配置 另一个常见的问题是环境变量没有正确配置。Gradle需要知道一些关键路径,比如Android SDK的位置。要是你忘了配这些路径,Gradle 就像没找到钥匙一样,干着急也使不上劲,最后只能眼睁睁看着构建任务挂掉。 代码示例: bash 设置环境变量 export ANDROID_HOME=/path/to/your/android/sdk export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools 2.2.3 缓存问题 Gradle有一个缓存机制,有时候这个缓存可能会出问题。比如说啊,有个依赖包老是下不下来,Gradle就一直在那儿较真儿,不停地重试,就跟个倔强的小孩似的,怎么劝都不停,最后还是没搞掂。这时,你可以尝试清理缓存并重新构建项目。 代码示例: bash 清理Gradle缓存 cd android ./gradlew clean --- 3. 解决方案 动手实践的快乐 3.1 第一步:检查Gradle版本 既然Gradle版本可能是罪魁祸首,我们首先要检查一下它的版本是否符合要求。打开android/build.gradle文件,找到classpath部分,确保它指向的是最新的Gradle版本。 代码示例: gradle dependencies { classpath 'com.android.tools.build:gradle:7.0.2' // 使用最新版本 } 如果版本过低,可以直接升级到最新版本。升级后,记得同步项目并重新构建。 3.2 第二步:配置环境变量 接下来,检查你的环境变量是否配置正确。尤其是Android SDK的路径,必须指向真实的SDK目录。如果你不确定路径,可以去Android Studio中查看。 代码示例: bash 配置环境变量 export ANDROID_HOME=/Users/username/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools 配置完成后,重启终端并运行项目,看看问题是否解决了。 3.3 第三步:清理缓存 如果前面两步都没有解决问题,可能是Gradle缓存出了问题。这时候,我们需要手动清理缓存。 代码示例: bash 进入Android目录并清理缓存 cd android ./gradlew clean 清理完成后,重新运行项目,看看是否能正常安装App。 --- 4. 总结与反思 成长的足迹 通过这次经历,我深刻体会到,React Native开发不仅仅是写代码那么简单,还需要对Gradle有深入的理解。Gradle虽然强大,但也非常复杂,稍有不慎就会出问题。不过,只要我们保持耐心,一步步排查问题,总能找到解决方案。 最后,我想说的是,开发过程中遇到问题并不可怕,可怕的是失去信心。每一次解决问题的过程,都是我们成长的机会。希望能帮到你,让你在碰到这些问题的时候,别再绕那么多弯子了,赶紧找到症结,把事情搞定! 如果你还有其他疑问,欢迎随时交流!让我们一起在React Native的世界里探索更多可能性吧!
2025-04-15 16:14:29
35
青山绿水_
c++
.... 友元类 2.1 声明友元类 与友元函数类似,友元类是指一个类被另一个类声明为友元,从而允许该类的所有成员函数访问被声明为友元类的私有和保护成员。 cpp class MyClass { private: int secretData; public: // 声明FriendClass为友元类 friend class FriendClass; }; class FriendClass { public: void accessSecret(MyClass &obj) { std::cout << "Accessing the secret from a friend class: " << obj.secretData << std::endl; } }; 在这里,FriendClass被声明为MyClass的友元类,意味着FriendClass的所有成员函数都可以访问MyClass的私有成员。 2.2 使用友元类 cpp int main() { MyClass obj; obj.secretData = 27; FriendClass friendObj; // 友元类的成员函数可以访问私有数据 friendObj.accessSecret(obj); // 输出:Accessing the secret from a friend class: 27 return 0; } 可以看到,即使accessSecret是FriendClass的一个成员函数,它依然能够成功访问到MyClass的私有成员secretData。 友情提示:虽然友元机制在某些情况下非常有用,但它打破了面向对象编程中的封装性原则,应谨慎使用。过度依赖友元可能会导致程序设计过于复杂,降低代码可读性和可维护性。在实际编程中,尽量寻找更加面向对象、符合设计原则的解决方案。不过理解并掌握这一特性对于深入理解C++是非常重要的一步。
2023-08-17 23:45:01
420
星河万里
转载文章
本文旨在指导用户在Linux环境下安装Apache TVM,首先从GitHub下载TVM源码并通过conda创建虚拟环境(tvmenv)并安装相关依赖库。接着,在该环境中配置、编译TVM源码以生成libtvm.so和libtvm_runtime.so动态链接库,并设置了特定的环境变量如TVM_LOG_DEBUG。通过Python接口验证TVM安装成功后,演示了如何将PyTorch模型转换至TVM框架下进行预测。虽然文章未详细展开,但还涵盖了如何配置VSCode远程连接调试环境以及FFI Navigator插件的安装步骤,以提升开发与调试TVM项目的体验。
2023-12-12 20:04:26
87
转载
Mahout
本文详细介绍了Apache Mahout中的Job Scheduling和Resource Allocation Policies。通过设置作业优先级和队列,可以有效管理Mahout中的任务执行。利用Hadoop和YARN,可以合理分配计算资源如内存,确保MapReduce作业高效运行。文中通过示例代码展示了如何设置作业优先级、队列以及调整资源需求,帮助提升系统性能和任务处理效率。
2025-03-03 15:37:45
65
青春印记
HBase
...优化策略 2.1 合理设置MemStore和BlockCache MemStore和BlockCache是HBase优化CPU使用的重要手段。MemStore用来缓存未写入磁盘的新写入数据,BlockCache则缓存最近访问过的数据块。合理分配两者内存占比有助于提高系统性能: java conf.setFloat("hbase.regionserver.global.memstore.size", 0.4f); // MemStore占用40%的堆内存 conf.setFloat("hfile.block.cache.size", 0.6f); // BlockCache占用60%的堆内存 2.2 精细化Region划分与预分区 Region数量和大小直接影响到HBase的并行处理能力和CPU资源分配。通过对表进行预分区或适时分裂Region,可以避免热点问题,均衡负载,从而提高CPU使用效率: java byte[][] splits = new byte[][] {Bytes.toBytes("A"), Bytes.toBytes("M"), Bytes.toBytes("Z")}; admin.createTable(tableDesc, splits); // 预先对表进行3个区域的划分 3. 探讨与思考 优化HBase的I/O和CPU使用率是一个持续的过程,需要结合业务特性和实际运行状况进行细致分析和调优。明白了这个策略之后,咱们就得学着在实际操作中不断尝试和探索。就像调参数时,千万得瞪大眼睛盯着系统的响应速度、处理能力还有资源使用效率这些指标的变化,这些可都是我们判断优化效果好坏的重要参考依据。 总之,针对HBase的I/O和CPU优化不仅关乎技术层面的深入理解和灵活运用,更在于对整个系统运行状态的敏锐洞察和精准调控。每一次实践都是对我们对技术认知的深化,也是我们在大数据领域探索过程中不可或缺的一部分。
2023-08-05 10:12:37
507
月下独酌
转载文章
这篇文章详述了Kotlin中数组的创建与操作。首先,介绍了通过Array()声明通用数组以及原生类型IntArray、BooleanArray、CharArray等的创建方式,并举例说明如何使用arrayOf()和 arrayOfNulls()指定元素或长度初始化数组。在数组操作方面,文章列举了访问、修改元素的多种方法如get、set以及便捷操作符,同时介绍了plus、slice、fill、copyOf等方法对数组进行增删改查。对于数组遍历,提到了forEach循环、for循环结合indices属性以及withIndex()函数的使用。此外,还讨论了数组间的转换(如toIntArray、toTypedArray),排序(sort、sortedArray、sorted)以及多维数组的构建。最后,演示了数组转集合、字符串拼接及条件判断等实用功能。
2023-03-31 12:34:25
66
转载
Tornado
...带来的困扰 2.1 问题描述 配置文件错误是另一个常见的部署问题。Tornado应用通常会读取配置文件来获取数据库连接信息、监听端口等设置。如果配置文件格式不正确或关键参数缺失,服务自然无法正常启动。 python 示例:从配置文件读取端口信息 import tornadotools.config config = tornadotools.config.load_config('my_config.json') port = config.get('server', {}).get('port', 8000) 如果配置文件中没有指定端口,将默认为8000 然后在启动应用时使用该端口 app.listen(port) 2.2 解决方案 检查配置文件是否符合预期格式且包含所有必需的参数。就像上面举的例子那样,假如你在“my_config.json”这个配置文件里头忘记给'server.port'设定端口值了,那服务就可能因为找不到合适的端口而罢工启动不了,跟你闹脾气呢。 json // 正确的配置文件示例: { "server": { "port": 8888 }, // 其他配置项... } 此外,建议在部署前先在本地环境模拟生产环境测试配置文件的有效性,避免上线后才发现问题。 3. 总结与思考 面对Tornado服务部署过程中可能出现的各种问题,我们需要保持冷静,遵循一定的排查步骤:首先确认基础环境搭建无误(包括依赖安装),然后逐一审查配置文件和其他环境变量。每次成功解决故障,那都是实实在在的经验在手心里攒着呢,而且这每回的过程,都像是咱们对技术的一次深度修炼,让理解力蹭蹭往上涨。 记住,调试的过程就像侦探破案一样,要耐心细致地查找线索,理性分析,逐步抽丝剥茧,最终解决问题。在这个过程中,不断反思和总结,你会发现自己的技术水平也在悄然提升。部署虽然繁琐,但当你看到自己亲手搭建的服务稳定运行时,那种成就感会让你觉得一切付出都是值得的!
2023-03-14 20:18:35
60
冬日暖阳
Kafka
...消息。 2.1 拉取机制的优势 采用拉取机制有几个好处: - 灵活性:追随者可以根据自身情况灵活调整同步频率。 - 容错性:如果追随者副本暂时不可用,不会影响到领导者副本和其他追随者副本的工作。 - 负载均衡:领导者副本不需要承担过多的压力,因为所有的读取操作都是由追随者完成的。 2.2 实现示例 让我们来看一下如何在Kafka中配置和实现这种数据复制策略。首先,我们需要定义一个主题,并指定其副本的数量: python from kafka.admin import KafkaAdminClient, NewTopic admin_client = KafkaAdminClient(bootstrap_servers='localhost:9092') topic_list = [NewTopic(name="example_topic", num_partitions=3, replication_factor=3)] admin_client.create_topics(new_topics=topic_list) 这段代码创建了一个名为example_topic的主题,它有三个分区,并且每个分区都有三个副本。 3. 副本同步的实际应用 现在我们已经了解了副本同步的基本原理,那么它在实际应用中是如何工作的呢? 3.1 故障恢复 当一个领导者副本出现故障时,Kafka会自动选举出一个新的领导者。这时候,新上任的大佬会继续搞定读写请求,而之前的小弟们就得重新变回小弟,开始跟新大佬取经,同步最新的消息。 3.2 负载均衡 在集群中,不同的分区可能会有不同的领导者副本。这就相当于把消息的收发任务分给了不同的小伙伴,这样大家就不会挤在一个地方排队了,活儿就干得更顺溜了。 3.3 实际案例分析 假设有一个电商网站使用Kafka来处理订单数据。要是其中一个分区的大佬挂了,系统就会自动转而听命于另一个健健康康的大佬。虽然在这个过程中可能会出现一会儿数据卡顿的情况,但总的来说,这并不会拖慢整个系统的进度。 4. 总结与展望 通过上面的讨论,我们可以看到副本同步和数据复制策略对于提高Kafka系统的稳定性和可靠性有多么重要。当然,这只是Kafka众多功能中的一个小部分,但它确实是一个非常关键的部分。以后啊,随着技术不断进步,咱们可能会见到更多新颖的数据复制方法,这样就能让Kafka跑得更快更稳了。 最后,我想说的是,学习技术就像是探险一样,充满了挑战但也同样充满乐趣。希望大家能够享受这个过程,不断探索和进步! --- 以上就是我对Kafka副本同步数据复制策略的一些理解和分享。希望对你有所帮助!如果有任何问题或想法,欢迎随时交流讨论。
2024-10-19 16:26:57
56
诗和远方
Dubbo
...容错机制(序号2) 2.1 负载均衡与集群容错 Dubbo通过集成多种负载均衡策略如随机、轮询、最少活跃调用数等,并结合集群容错模式(默认为failover),巧妙地处理了服务消费者故障问题。 java // 创建一个具有容错机制的引用 ReferenceConfig reference = new ReferenceConfig<>(); reference.setInterface(DemoService.class); // 设置集群容错模式为failover,即失败自动切换 reference.setCluster("failover"); 在failover模式下,若某台服务提供者出现故障或网络中断,Dubbo会自动将请求路由到其他健康的提供者节点,有效避免因单点故障导致的服务不可用。 2.2 超时与重试机制 此外,Dubbo还提供了超时控制和重试机制: java // 设置接口方法的超时时间和重试次数 reference.setTimeout(1000); // 1秒超时 reference.setRetries(2); // 允许重试两次 这意味着,如果服务消费者在指定时间内未收到响应,Dubbo将自动触发重试逻辑,尝试从其他提供者获取结果,从而在网络不稳定时增强系统的鲁棒性。 三、心跳检测与隔离策略(序号3) 3.1 心跳检测 Dubbo的心跳检测机制可以实时监控服务提供者的健康状态,一旦发现服务提供者宕机或网络不通,会立即将其剔除出可用列表,直到其恢复正常: java // 在服务提供端配置心跳间隔 ProviderConfig providerConfig = new ProviderConfig(); providerConfig.setHeartbeat(true); // 开启心跳检测 providerConfig.setHeartbeatInterval(60000); // 每60秒发送一次心跳 3.2 隔离策略 针对部分服务提供者可能存在的雪崩效应,Dubbo还支持sentinel等多种隔离策略,限制并发访问数量,防止资源耗尽引发更大范围的服务失效: java // 配置sentinel限流 reference.setFilter("sentinel"); // 添加sentinel过滤器 四、总结与探讨(序号4) 综上所述,Dubbo凭借其丰富的容错机制、心跳检测以及隔离策略,能够有效地应对服务消费者宕机或网络不稳定的问题。但是呢,对于我们这些开发者来说,也得把目光放在实际应用场景的优化上,比如像是给程序设定个恰到好处的超时时间啦,挑选最对胃口的负载均衡策略什么的,这样一来才能让咱的业务需求灵活应变,不断升级! 每一次对Dubbo特性的探索,都让我们对其在构建高可用分布式系统中的价值有了更深的理解。在面对这瞬息万变、充满挑战的生产环境时,Dubbo可不仅仅是个普通的小工具,它更像是我们身边一位超级给力的小伙伴,帮我们守护着服务质量的大门,让系统的稳定性蹭蹭上涨,成为我们不可或缺的好帮手。在实践中不断学习和改进,是我们共同的目标与追求。
2024-03-25 10:39:14
484
山涧溪流
Element-UI
...Components标准的发展,越来越多的UI框架开始支持原生Web组件,这使得跨框架使用UI组件成为可能。Element Plus亦紧随这一趋势,正逐步实现其组件与原生Web Components的无缝对接,以提升代码复用性和可维护性。 因此,对于热衷于前端技术发展的开发者来说,深入研究并掌握Element Plus等现代UI框架所提供的布局策略及最佳实践,不仅能有效提升项目开发效率,也能确保在瞬息万变的前端领域保持竞争力,创造出更加优雅且实用的用户界面体验。
2023-10-30 14:41:05
416
桃李春风一杯酒
MyBatis
...存储过程? 2.1 存储过程的基本概念 存储过程是一种预编译的SQL语句集合,可以看作是一组被封装起来的数据库操作命令。它的厉害之处在于可以直接在数据库服务器上跑,还能反复使用,这样就能省下不少网络传输的功夫,让程序跑得飞快。此外,存储过程还能增强系统的安全性,因为它可以限制用户直接访问表数据,只能通过特定的存储过程来操作数据。 2.2 存储过程的优势 存储过程在实际应用中具有很多优势,例如: - 性能优化:存储过程在数据库服务器上运行,减少了客户端与服务器之间的数据传输。 - 安全控制:通过存储过程,我们可以为不同的用户设置不同的权限,只允许他们执行特定的操作。 - 代码重用:存储过程可以被多次调用,避免了重复编写相同的SQL语句。 - 事务管理:存储过程支持事务管理,可以确保一系列数据库操作要么全部成功,要么全部失败。 三、MyBatis如何调用存储过程 3.1 配置文件中的设置 在开始编写代码之前,我们首先需要在MyBatis的配置文件(通常是mybatis-config.xml)中进行一些必要的设置。为了能够调用存储过程,我们需要开启动态SQL功能,并指定方言。例如: xml 3.2 实现代码 接下来,我们来看一下具体的代码实现。想象一下,我们有个名叫get_user_info的存储过程,就像一个魔术师,一接到你的用户ID(@user_id)和一个结果占位符(@result),就能变出这个用户的所有详细信息。下面是MyBatis的XML映射文件中对应的配置: 3.2.1 XML映射文件 xml {call get_user_info( {userId, mode=IN, jdbcType=INTEGER}, {result, mode=OUT, jdbcType=VARCHAR, javaType=String} )} 这里需要注意的是,statementType属性必须设置为CALLABLE,表示这是一个存储过程调用。{userId}和{result}分别代表输入参数和输出参数。mode属性用于指定参数的方向,jdbcType和javaType属性则用于定义参数的数据类型。 3.2.2 Java代码实现 下面是一个简单的Java代码示例,展示了如何调用上述存储过程: java public class UserService { private UserMapper userMapper; public String getUserInfo(int userId) { Map params = new HashMap<>(); params.put("userId", userId); params.put("result", null); userMapper.getUserInfo(params); return (String) params.get("result"); } } 在这段代码中,我们首先创建了一个Map对象来保存输入参数和输出结果。然后,我们调用了userMapper.getUserInfo方法,并传入了这个参数映射。最后,我们从映射中获取到输出结果并返回。 四、注意事项 在使用MyBatis调用存储过程时,有一些常见的问题需要注意: 1. 参数顺序 确保存储过程的参数顺序与MyBatis配置文件中的顺序一致。 2. 数据类型匹配 确保输入和输出参数的数据类型与存储过程中的定义相匹配。 3. 异常处理 由于存储过程可能会抛出异常,因此需要在调用时添加适当的异常处理机制。 4. 性能监控 存储过程的执行可能会影响整体系统性能,因此需要定期进行性能监控和优化。 五、总结 通过以上的介绍,我们可以看到,MyBatis调用存储过程其实并不复杂。只要咱们把MyBatis的XML映射文件配好,再按规矩写好Java代码,调用存储过程就是小菜一碟。当然,在实际开发过程中,还需要根据具体需求灵活调整配置和代码,以达到最佳效果。希望这篇文章能够帮助你在项目中更好地利用存储过程,提高开发效率和代码质量。 如果你对存储过程有任何疑问或者想了解更多细节,请随时联系我,我们一起探讨和学习!
2025-01-03 16:15:42
63
风中飘零
JSON
...件筛选了。 2.1 JavaScript中的JSON条件读取 在JavaScript中,我们可以使用循环和条件语句实现JSON条件读取。下面是一个简单的示例: javascript var jsonData = { "users": [ // ... ] }; for (var i = 0; i < jsonData.users.length; i++) { var user = jsonData.users[i]; if (user.age > 28) { console.log(user); } } 这段代码会遍历users数组,并打印出年龄大于28岁的用户信息。 2.2 使用现代JavaScript方法 对于更复杂的查询,可以利用Array.prototype.filter()方法简化条件读取操作: javascript var olderUsers = jsonData.users.filter(function(user) { return user.age > 28; }); console.log(olderUsers); 这里我们使用了filter()方法创建了一个新的数组,其中只包含了年龄大于28岁的用户。 3. 进阶 深度条件读取与JSONPath 在大型或嵌套结构的JSON数据中,可能需要进行深度条件读取。这时,JSONPath(类似于XPath在XML中的作用)可以派上用场。虽然JavaScript原生并不直接支持JSONPath,但可通过第三方库如jsonpath-plus来实现: javascript const jsonpath = require('jsonpath-plus'); var data = { ... }; // 假设是上面那个大的JSON对象 var result = jsonpath.query(data, '$..users[?(@.age > 28)]'); console.log(result); // 输出所有年龄大于28岁的用户 这个例子展示了如何使用JSONPath表达式去获取深层嵌套结构中的满足条件的数据。 4. 总结与思考 JSON条件读取是我们在处理大量JSON数据时不可或缺的技能。用各种语言技巧和工具灵活“玩转”,我们就能迅速找准并揪出我们需要的信息,这样一来,无论是数据分析、应用开发还是其他多种场景,我们都能够提供更棒的支持和服务。随着技术的不断进步,未来没准会出现更多省时省力的小工具和高科技手段,帮咱们轻轻松松解决JSON条件读取这个难题。因此,不断学习、紧跟技术潮流显得尤为重要。让我们一起在实践中不断提升对JSON条件读取的理解和应用能力吧!
2023-01-15 17:53:11
383
红尘漫步
转载文章
...该研究表明,在大规模标准化测试中,运用机器学习算法和统计模型能够有效分析考生答题数据,精确调整题目难度和区分度,从而提高考试结果的信度和效度。 具体而言,研究人员借鉴了单峰函数优化方法,并创新性地结合三分法策略来动态调整试题参数,以实现得分分布的最佳匹配。这种方法不仅适用于编程竞赛的评分系统优化,更在各类资格认证、入学选拔等高风险考试设计中展现出了巨大潜力。同时,报告强调了保留有效数字的重要性,确保成绩计算和排名的公平性和准确性。 此外,随着我国新高考改革的深入推进,考试评价体系也在不断升级和完善。例如,部分地区引入智能化考试系统,通过实时监测和分析学生作答数据,动态生成适合不同层次学生的考题,实现了对考试难度和区分度的精细化管理,有力推动了教育公平与质量提升。 总之,从DTOJ 1486:分数这一具体的编程问题出发,我们看到了现代科技如何赋能传统考试评价方式,使其在保持公正严谨的同时,更加科学高效。未来,随着人工智能和大数据技术的持续发展,考试设计与数据分析将深度融合,进一步推动教育评价体系的现代化进程。
2023-08-30 11:55:56
154
转载
站内搜索
用于搜索本网站内部文章,支持栏目切换。
知识学习
实践的时候请根据实际情况谨慎操作。
随机学习一条linux命令:
history | grep keyword
- 查看历史命令中包含特定关键词的部分。
推荐内容
推荐本栏目内的其它文章,看看还有哪些文章让你感兴趣。
2023-04-28
2023-08-09
2023-06-18
2023-04-14
2023-02-18
2023-04-17
2024-01-11
2023-10-03
2023-09-09
2023-06-13
2023-08-07
2023-03-11
历史内容
快速导航到对应月份的历史文章列表。
随便看看
拉到页底了吧,随便看看还有哪些文章你可能感兴趣。
时光飞逝
"流光容易把人抛,红了樱桃,绿了芭蕉。"