我的笔记
文章平均质量分 62
Goat恶霸詹姆斯
本是后山人,偶作前堂客
展开
-
DAPP开发(一)——web3.0和智能合约
web1.0~3.0,很多年前,互联网没有那么发达,刚出来的时候,仅仅只能在网上浏览观看信息,这就是1.0,后来出现了很多的软件,人们不仅可以浏览还可以发表自己的看法,手机app百花齐放,每个应用都有自己的数据库,存储数据,这就是2.0,现如今出现了3.0,去中心化的思想摆脱了数据库,即可实现不用数据库也可以使用的DAPP。我们所写的驱动区块链的程序就是DAPP。以太坊底层是基于账户,而非UTXO的,所以有一个特殊的Address的类型,用于定位用户,定位合约,定位合约的代码(合约本身也是一个账户)。原创 2023-05-10 23:15:49 · 1907 阅读 · 1 评论 -
使用Webpack5搭建项目
当项目越来越大时,打包速度越来越慢,我们想要提升打包速度,其实还是要提升js的打包速度,对于js文件处理,我们主要使用,eslint,babel,terser,所以我们要提升运行速度,关于terser,在生产环境下webapck会自动激活这个插件并且压缩js代码,我们没有配置过,所以我们看不见。如果我们只要渲染首页,就应该只加载首页的js文件,其他文件不应该加载,所以我们需要将打包生成的文件进行代码分割,生成多个js文件,这样加载的资源就越少,速度越快。原创 2023-04-22 22:27:49 · 523 阅读 · 0 评论 -
three.js
对于three.js而言,需要定义相机在网页上输出的画布尺寸,canvas画布:threejs虚拟相机渲染三维场景在浏览器网页上呈现的结果称为canvas画布。//画布宽高关于material的属性,可以直接通过其属性名直接访问,设置需要通过set方法来执行,包括其他的对象属性都可以这样访问以及膝盖。//读取属性值//设置属性值shininess: 30,//高光强度属性默认30specular: 0x444444, //默认是深灰色});原创 2023-10-06 16:57:45 · 417 阅读 · 0 评论 -
Content-Type的取值
接口发送参数、接收响应数据,都需要双方约定好使用什么格式的数据,例如 json、xml。只有双方按照约定好的格式去解析数据才能正确的收发数据。而 Content-Type 就是用来告诉你数据的格式,这样我们才能知道怎么解析参数。原创 2023-09-22 22:43:47 · 265 阅读 · 0 评论 -
原生ajax
Asynchronous JavaScript and xml 异步的 js 和 xml(数据承载方式) ,本质:使用js提供的异步对象XMLHttpRequest 异步的向服务器提交请求,并且接受服务器响应回来的数据。原创 2023-09-22 22:04:25 · 266 阅读 · 0 评论 -
关于token续签
通常我们会对token设置一个有效期,于是,就有了token续签的问题。由于token并没有续时机制,如果不能及时的替换掉过期的token,可能会拦截用户正常的请求,用户只能重新登录,如果提交的信息量很大,会给用户带来很不愉快的用户体验。原创 2023-09-20 23:34:55 · 335 阅读 · 0 评论 -
TypeScript 语法
super函数调用:当子类继承父类后,有了自己的构造函数,那么相当于父类的构造函数被重写,那么将不会调用父类的构造函数会报错,此时需要调用super函数来执行父类的构造函数。abstact类:当一个类只用于继承时,那么使用抽象类,且不能用来创建对象,抽象父类的公共方法,需要子类必须重写抽象方法,不用写函数体,抽象方法只能写在抽象类中。原创 2023-08-13 23:24:57 · 1122 阅读 · 2 评论 -
base64转二进制流,file文件
img标签src属性,可以直接使用base64字符串,base64需要先解码,然后再转为文件。img标签src属性,可以直接使用base64字符串,base64需要先解码,然后再转为流。原创 2023-08-09 22:25:26 · 625 阅读 · 0 评论 -
React Hooks
当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中必须以 use 开头,如不遵循,由于无法判断某个函数是否包含对其内部hook的调用,React将无法自动检查你的hook是否违反了hook规则,与vue3中自定义组合式api用法相同。原创 2023-08-06 23:17:48 · 932 阅读 · 0 评论 -
vue3的语法
vue3不要和vue2混用,vue2可以访问到setup中的数据,但setup不能访问到vue2的数据,如果有重复数据,setup的优先级更高。props:值为对象,包含组件外部传递过来的,且组件内部声明接收了的属性,想要获取props的属性,一定需要props接收参数,这点和vue2相同,倘若不使用props接收,那么数据会存储在context参数中的attrs属性中。通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除等,比起vue2多出了增加和删除属性的监听。原创 2023-08-01 00:03:02 · 446 阅读 · 0 评论 -
H5拖拽功能draggable
H5提出了拖拽的功能,被拖动元素(除img,a标签,默认可以拖动)需要添加。ondragover 应用于目标元素,当停留在目标元素上时调用(持续触发)ondragleave 应用于目标元素,当鼠标离开目标元素时调用。ondragenter 应用于目标元素,当拖拽元素进入时调用。ondrop 应用于目标元素,当在目标元素上松开鼠标时调用。ondrag 元素正在拖动时触发(整个过程持续触发)ondragleave 当鼠标离开拖拽元素时调用。ondragstart 用户开始拖动元素时触发。原创 2023-07-23 18:46:54 · 1043 阅读 · 0 评论 -
vue生命周期前后都做了哪些事情?
进行vue实例初始化,在这个时候开始完成的是vue实例自身对象注入,内部使用相关事件和对应生命周期函数初始化当这个方法执行的时候,vue实例仅仅是完成内部事件和生命周期函数数据的注入,跟语法的校验,我们编写的data,method开始注入在这个时候函数执行的时候vue实例已经完成自定义data,method,computed属性初始化,以及语法效验,vue实例已经生成,但还没有生成dom。原创 2023-07-22 23:51:41 · 263 阅读 · 0 评论 -
js的几种排序
【代码】js的几种排序。原创 2023-07-22 21:30:01 · 175 阅读 · 0 评论 -
vue的一些不常用知识点
【代码】vue的一些不常用知识点。原创 2023-07-20 08:00:57 · 62 阅读 · 0 评论 -
DAPP(七)——React与智能合约的架构整合
修改合约的配置文件truffle-config.js,来约定打包的json文件放在哪里,添加contracts_build_directory属性,修改到src目录下,方便我们引入。启动项目,如此一来,我们便连接到了智能合约,我们获取到了需要的所有对象信息,那么前端就可以实现交互,实践示例会上传到资源,可自行查看,关于智能合约的内容就到这里,以后有问题再补充。可以在脚手架终端执行truffle的命令语句,truffle migrate --reset。合并一下react和智能合约,创建react脚手架。原创 2023-07-15 00:01:36 · 567 阅读 · 0 评论 -
DAPP开发(五)——创建货币
可以在metamask添加自己的货币,在编译打包合约的json文件中networks就是对应的货币地址,添加到metamask即可。ERC-20就是一套基于以太坊的标准代币发型协议。有了ERC-20,开发者们得以搞笑,可靠,低成本的创造专属自己项目的代币。在线平台的信誉积分,金融资产类似于公司股份的资产,像美元一样的法定货币,一盎司黄金以及更多。代币的完成,还需要对应的交易所来交易货币。我们来创建一个新的货币。原创 2023-07-10 00:20:45 · 449 阅读 · 0 评论 -
关于前端浏览器,元素定位的尺寸位置
node.getBoundingClientRect(),该方法的返回值为一个对象,具有width和height两个尺寸属性,如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。screenX/Y表示事件触发位置相对屏幕的左上角的位置。的宽度/高度,即你打开的浏览器软件显示的宽度/高度。原创 2023-06-13 23:43:09 · 416 阅读 · 0 评论 -
在输入URL后,前端浏览器的工作流程
js会阻塞HTML的解析,因为js既可以操作dom,又可以操作cssom,如果不等js下载解析执行完以后再构建dom,页面有些内容会可能会出现了又消失,所以不管是行内js代码还是外部js代码,都会让HTML的解析停止下来,虽然dom可以部分解析,但对于网页来说,就相当于阻塞了第一次的渲染,js执行完之前,页面什么都没有,执行完以后就都正常了,形成渲染树,进行布局,绘制等。通过DNS解析以后,获取到了相应的站点,会通过safeBrowsing来检查站点是否是恶意站点,如果是则展示为恶意站点,会阻止访问。原创 2023-06-03 18:23:21 · 572 阅读 · 0 评论 -
前端GC垃圾回收机制
显而易见,会出现空间碎片化的问题,相比于空间碎片,但是提升的速度会很大,所以V8引擎还是会采用标记清理。当垃圾回收时,会阻塞js的执行,将一整段的垃圾回收拆分成许多小步,组合交替完成垃圾回收,替代之前一口气完成的垃圾回收,会降低时间消耗,第一次标记号所有直接可达对象,然后执行js代码,再进行间接可达对象的标记,以此类推,最后清除。如下图,释放了三个字的空间,但是并不连续,中间还有个根对象,所以还是分散的,地址并不连续,所以后续如果需要1.5空间,那么左边的就多了0.5,右边的又不够,形成了空间的碎片化。原创 2023-05-22 23:41:36 · 674 阅读 · 0 评论 -
DAPP开发(四)——Solidity语法
和uint是一样的,bytes默认是bytes1,byte1相当于uint8,bytes可以从1写到bytes32,bytes32其实就是uint256,它的长度其实就是对应的后缀数字,1-32,以一增加,但是其长度属性是不可以修改的。,必须通过转为bytes类型后才可以,通过bytes的[index]获取内容,获取到的是十六进制的数据,修改单个字节也是通过bytes类型。固定长度bytes转string:分两步,固定长度bytes转为动态长度bytes,将动态长度bytes转为string。原创 2023-05-21 23:38:17 · 718 阅读 · 0 评论 -
DAPP开发(三)——智能合约开发
storage类型的数据存在链上,类似计算机的硬盘,消耗gas多,memory和calldata类型的临时存储在内存里,消耗gas少。打开开发配置,下方advance高级配置可以指定扣钱的账户,如不指定,默认是第一个登录的账号扣钱,这里我们是account2,导入的ganache账户。internal:只能从当前合约或当前合约的派生合约中访问,外部无法访问,由于它们没有通过合约的ABI向外部公开,所以他们可以接受内部类型的参数,比如映射或存储引用。局部变量的素具存储在内存,不上链,gas低,声明在函数内。原创 2023-05-15 23:45:22 · 780 阅读 · 0 评论 -
HTML手写拖拽功能
原理主要还是通过鼠标坐标位置的计算偏移量,然后赋值给拖拽的元素的top和left属性,话不多说了,直接上代码。原创 2023-05-14 16:43:26 · 121 阅读 · 0 评论 -
使用Webpack5搭建项目(react篇)
检测HMR热更新,样式文件是可以触发,但是js文件依旧不行,所以引用插件,react-refresh-webpack-plugin。页面重新启动即可,但是刷新页面会有404的问题,解决方案:historyApiFallback,配置webapck.dev.js。在引入的时候我们没有这里是对js文件有自动补全的功能,但这里是jsx文件,所以继续配置webpack.dev.js。新建项目,生成package.json文件,创建config文件夹,创建webpack.dev.js文件。原创 2023-04-26 23:29:51 · 1210 阅读 · 0 评论 -
使用Webpack5搭建项目(vue篇)
修改和优化webpack.prod.js,修改只处理js文件,添加vue-loader,修改devtool,修改文件补充的拓展。由于大部分配置一样,我们从上一篇react项目中,复制webpack.dev.js以及webpack.prod.js。复制webpack.prod.js为webpack.config.js。2.自动补充拓展名修改为.vue文件,同时处理js文件,不是jsx。修改webpack.config.js文件。配置webpack.config.js。新建配置babel.config.js。原创 2023-04-29 22:24:56 · 947 阅读 · 0 评论 -
前端二进制流的关系
全称:binary large object,二进制大对象,是一个js对象,可以用来存储大量二进制编码格式的数据,Blob对象是不可修改的,读取内容的唯一方法是FileReader。分为两种工具,一种是TypeArray类型的,另外一种就是DataView,前者的数组成员都是同数据类型,后者可以是不同的数据类型,类似于元组。1.readAsArrayBuffer():读取指定的Blob内容,result属性中保存的将是被读取文件的ArrayBuffer对象。原创 2023-05-13 22:35:07 · 501 阅读 · 0 评论 -
H5--Canvas使用以及API
Canvas前端绘图工具,Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色。canvas 搭配video。原创 2023-05-07 20:10:48 · 854 阅读 · 1 评论 -
正则表达式规则
元字符:正则表达式主要依赖于元字符。元字符不代表他们本身的字面意思,他们都有特殊的含义。一些元字符写在方括号中的时候有一些特殊的意思。以下是一些元字符的介绍:运算符优先级:正则表达式从左到右进行计算,并遵循优先级顺序,这与算术表达式非常类似。相同优先级的从左到右进行运算,不同优先级的运算先高后低。下表从最高到最低说明了各种正则表达式运算符的优先级顺序:基本匹配:^:以某个为起始的正则;$:以某个为结尾的正则;精准匹配。原创 2023-05-05 22:22:39 · 1354 阅读 · 0 评论 -
vue 自定义指令
例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。arg:传给指令的参数,可选。value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。:指令所绑定的元素,可以用来直接操作 DOM。指令的参数可以是动态的。原创 2023-05-04 23:34:11 · 497 阅读 · 0 评论 -
webpack plugin原理以及自定义plugin
对象中保存着完整的webpack环境配置,每次启动webpack构件时,都只创建一次的对象,我们可以通过compiler获取到ebpack的主环境配置,比如:loader,plugin等。代码角度来说:webpack在编译的过程中,会触发一系列的tapable钩子事件,插件要做的就是找到对应的钩子,往上面挂自己的任务,也就是注册事件,webpack在构建的时候,就会一起触发注册的事件。点击下一个断点,就是我们的debugger的地方,可以看到compiler的内容,当然也包括compilation。原创 2023-05-03 21:59:49 · 1063 阅读 · 0 评论 -
webpack loader原理以及自定义loader
表示跳过pre和normal和post loader,即使在module里配置了style-loader,css-loader,如是pre或normal或post类型的,也不会执行的。:表示跳过pre和normal loader,即使在module里配置了style-loader,css-loader,如是pre或normal类型的,也不会执行的。:表示跳过normal loader,即使在module里配置了style-loader,css-loader,如是normal类型的,也不会执行的。原创 2023-05-02 18:25:17 · 358 阅读 · 0 评论 -
vue修饰符的使用
在某些键盘上,特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘,如 Knight 键盘,space-cadet 键盘,meta 都被标记为“META”。.enter .tab .delete (捕获“Delete”和“Backspace”两个按键) .esc .space .up .down .left .right。你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。在监听键盘事件时,我们经常需要检查特定的按键。请注意,系统按键修饰符和常规按键不同。原创 2023-04-30 21:28:16 · 466 阅读 · 0 评论 -
关于es5,es6,es2016,es2017的常用方法
Object.defineProperty(object, property, descriptor) 添加或更改对象属性。Object.defineProperties(object, descriptors) 添加或更改多个对象属性。Object.isExtensible(object) 如果可以将属性添加到对象,则返回 true。Object.preventExtensions(object) 防止向对象添加属性。Object.isSealed(object) 如果对象被密封,则返回 true。原创 2023-04-30 20:15:21 · 522 阅读 · 0 评论 -
webpack优化
使用code split 对代码进行分割成多个js文件,从而使单个文件体积更小,并行加载js更快,并通过import动态导入语法进行按需加载,东二达到使用时加载该资源,不用时不加载资源。使用@babel/plugin-transform-runtime 插件对babel进行处理,让辅助代码从中引入,而不是每个文件都生成辅助代码,从而体积更小。使用Preload/prefetch对代码进行提前加载,等未来需要使用时就能直接使用,从而用户体验更好,但是存在兼容性的问题,看情况使用。原创 2023-04-23 22:01:41 · 396 阅读 · 0 评论 -
Redux的配置以及使用
View视图中通过dispatch触发action修改state中的数据,state中的数据修改后更新View视图中去,在class组件中,我们通过store中Api方法subscribe() 监听state数据的变化,从而更新react组件重新渲染组件。另外一种方式使用redux工具包实现,在之前的文章()中已经有介绍了,就不再赘述了。简单总结redux的执行流程。原创 2023-04-09 21:15:34 · 310 阅读 · 0 评论 -
React脚手架config-overrides.js文件的配置
主要讲讲在react脚手架在不使用eject命令的情况下,如何进行webpack的配置。网上查询了好多,只有针对相关的配置,这次全面的看一看配置。在根目录下创建文件config-overrides.js,这里主要是由插件customize-cra来实现,配置包含两部分,customizer和utilitiescustomizer整体配置就是这些。原创 2023-04-09 20:10:50 · 2561 阅读 · 3 评论 -
React父子组件通过props通信
React父子组件通过props通信。原创 2023-04-02 17:01:05 · 90 阅读 · 0 评论 -
React 组件式编程生命周期
getSnapShotBeforeUpdate,用于组件更新时,在最近一次渲染输出前调用,在组件发生更改之前从Dom中捕获一些信息,此生命周期函数的返回值会传给componentDidUpdate(),componentDidUpdate可接收3个参数,preProps,preState,最后一个就是snapShot,getSnapShotBeforeUpdate传递的值。原创 2023-04-01 22:42:17 · 34 阅读 · 0 评论 -
React ref的定义方式
3.React.createRef(),调用后可以返回一个容器,该容器可以存储被ref所标识的节点,但是这个方式专人专用,每个创建的容器只能对应一个,如果绑定了多个,那么最后一个元素绑定有效。1.字符串的形式,但是官方不推荐使用,会存在一些效率问题,已经过时的使用方法,未来版本可能会移除。但实际情况无关紧要,两种都可以。原创 2023-04-01 20:22:27 · 261 阅读 · 0 评论 -
前端接收数据流解析下载
前端接收数据流解析下载原创 2023-03-25 18:35:15 · 85 阅读 · 0 评论 -
vuex的使用
vuex的使用原创 2023-02-26 02:59:04 · 50 阅读 · 0 评论