- 博客(53)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 angular中使用 ngModel 自定义组件
4. 使用自定义组件：现在，您可以在父组件中使用自定义组件，并使用 ngModel 指令将其绑定到 Angular 组件中的属性。此外，您还可以使用 Angular 表单的其他功能，例如验证、错误处理等。的属性，它将与自定义组件的输入值进行双向绑定。当输入值发生变化时，数组将自定义组件注册为 ngModel 指令的合法目标。在模板中，我们使用了一个输入元素，并通过。进行了双向数据绑定。事件监听器来捕获输入值的变化，并调用。在上面的示例中，我们创建了一个名为。在父组件的类中，您可以定义一个名为。
2023-10-07 17:41:00
1109
2
原创 拖拽组件，取消子组件的点击事件 - 涉及 拖拽组件，低代码工程 - pointer-events
1、屏蔽鼠标事件（hover、active、onclick、阻止缺省鼠标指针的显示）2、事件穿透3、svg元素使用。
2023-09-04 18:00:18
246
原创 监听DOM尺寸变化 - ResizeObserver
box2 是边框盒模型（IE盒模型），width = 内容区（content）+ 内边距（padding） + 内边框（border），height 同理。entries 参数返回是一个数组，里面包含监听的每个 DOM 元素的相关信息，其中 contentRect 包含的是变化后的 内容区域 的尺寸信息。#box1 是 标准盒模型（w3c标准），width = 内容区（content），height 同理。observe 方法用于开始观察指定的 Element 或 SVGElement 的尺寸变化。
2023-07-07 16:11:03
1233
原创 微前端micro-app使用产生的子项目bug(blockly-js 定位失效问题)
因为是微前端，所以是嵌套的方式，此时侧边栏是占有位置的。通过分析得知是上层定位出现问题，打开开发者模式，通过选中分析它的上层父级，通过分析得知是上层定位出现问题，打开开发者模式，通过选中分析它的上层父级，通过点击可以感受到，项目中blockly块的定位出现问题。所以进行正常分析，肯定块显示的上层附近定位，位置出现问题。所以进行正常分析，肯定块显示的上层附近定位，位置出现问题。通过定位问题，知道问题所在，所以通过js进行修改。通过定位问题，知道问题所在，所以通过js进行修改。，所以照成了位置显示的错误。
2023-03-13 14:18:23
638
1
原创 pnpm link 使用
在开发包中pnpm link --global将当前包link到全局node_modules中在常规项目中pnpm link --global @xxx 即可 【这里的 @xxx一定是开发包中的package.json中的name】
2023-03-07 14:55:54
1003
原创 console.log() 与 console.dir() 的区别：
其四、注意：该特性是非标准的，请尽量不要在生产环境中使用它!(还是使用 console.log() 比较好)其二、而具体是什么信息就以传递的实参为准，然后就是在控制台就能显示自己传递参数的结果；其三、该方法对于输出== DOM ==对象非常有用，因为会显示。其二、一般是：打印出该对象(object)的所有属性和属性值;对象的所有属性 (特别是：输出节点属性和属性值时最好用);
2023-02-06 15:50:24
338
原创 ES6迭代器 Iterator 详细介绍
迭代器，是 ES6 引入的一种新的遍历机制，主要讲解的是 Iterator 、迭代过程、可迭代的数据结构。通过本文的学习，我们学会了迭代，迭代虽然一般用的较少，但是了解其原理是非常有必要的，这样才可以实现定义自己的迭代器来遍历对象。
2023-02-02 16:24:36
580
原创 发布订阅 和 观察者模式
发布订阅模式中，发布者发布消息时不会将消息直接发送给订阅者，发布者和订阅者之间不存在直接的联系；在发布者和订阅者之间存在第三方平台，称为消息代理或调度中心或中间件，它维持着发布者和订阅者之间的联系，可以处理所有发布者发布的消息并将它们分发给对应的订阅者，实现了发布者与订阅者之间的解耦。观察者模式定义了观察者和被观察者的一对多的依赖关系，它们之间存在直接的联系；当被观察者发布通知时，所有依赖于它的观察者都将得到通知。尽管它们之间有区别，但有些人可能会说。模式的变异，因为它们概念上是相似的。
2023-01-30 16:33:03
132
原创 promise、async await、generator函数
我们知道Promise与函数都是用来解决JavaScript中的异步问题的，从最开始的回调函数处理异步，到Promise处理异步，到Generator处理异步，再到处理异步，每一次的技术更新都使得JavaScript处理异步的方式更加优雅，从目前来看，被认为是异步处理的终极解决方案，让JS的异步处理越来越像同步任务。异步编程的最高境界，就是根本不用关心它是不是异步。
2022-12-23 16:12:08
1121
原创 比较for、for...in、for...of、forEach
缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，方法不能使用break，continue语句跳出循环，或者使用return从函数体返回，对于空数组不会执行回调函数。缺点：不适用于处理原有的原生对象（原生对象是一个子集，包含一些在运动过程中动态创建的对象）优点：便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率。循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如。定义：用于循环遍历数组或对象属性，fot in循环里面的index是。
2022-12-13 11:29:22
426
原创 hashchange和popstate事件触发条件
hash是URL中#后面那部分，同时修改hash值不会引起页面的刷新，也不会向服务器重新发送请求。通过hashchange事件可以监听它的变化。备注：以上三种方式均可以触发hashchang事件, pushState和replaceState均不能触发hashchang事件。history提供了popstate监听事件，但是只有以下两种情况会触发该事件。
2022-12-12 15:05:16
2979
原创 页面按钮多出的边框-outline属性
项目依赖版本升级后，再次更新发现出现了一个边框，本来以为是border，但是发现并不是因为这个属性造成的。后面经过排查发现是bootstrap 文件里面对button多出来了outline属性。
2022-12-02 15:51:12
399
原创 micro-app-源码解析4-数据通信篇-终篇
所以我们要进行数据绑定，基座应用一次只能向指定的子应用发送数据，子应用只能发送数据到基座应用，至于子应用之间的数据通信则通过基座应用进行控制，这样数据流就会变得清晰。通过修改原生的setAttribute方法，当改变属性的时候，进行获取值，然后将获取的值放入发布订阅当中。所以选择通过改写原型链上setAttribute方法处理对象类型属性，对传递的数据进行拦截，加上发布订阅实现父子的通信。子应用对父亲的传值，通过标签本身的属性[data]，通过datachange方法来进行传值的。发布订阅功能的代码实现。
2022-12-02 15:07:51
1463
原创 如何对npm包进行测试开发
对需要进行测试的npm 包输入npm link项目中引入是name 指的是package.json 里面name， 而不是文件的名称。
2022-12-01 15:50:44
580
原创 micro-app-源码3-样式隔离篇
官方文档已经非常清晰了，我这边进行文档二次标注，让你更加清晰的阅读。此时就会产生影响，所以样式隔离就是要排除父子相同设置时候的影响。1.例如当父子元素 同样设置样式。
2022-11-30 14:00:03
568
原创 微前端-micro-app 使用 onresize和addEventListener区别
因为onresize是dom0级别的会被父亲和其他给覆盖，所以在子应用中。dom0级别，一次只能绑定一个函数，下个函数会将上个函数给覆盖。dom2级别，一次可以绑定多个函数，各个函数不会覆盖。
2022-11-30 11:32:19
310
原创 error TS2687:All declarations of ‘**‘ must have identical modifier
第三方框架包 error TS2687:All declarations of ‘**‘ must have identical modifier 报错，最后使用。
2022-11-28 18:23:53
733
原创 CSSStyleSheet 对象（css 样式表）- 你不知道的有趣功能
CSS 样式表由 CSS 规则组成，可以通过 CSSRule 对象操作每条规则。如果为 true，样式表被关闭，且不能应用于文档。规定该样式表的样式表语言。以 MIME 类型表示，CSS 样式表的类型为 “text/css”。CSSStyleSheet 对象 代表着，css文件被浏览器解析后生成的css样式表。返回样式表的位置（URL），如果是内联样式表，则为 null。以数组的形式返回样式表中所有 CSS 规则。返回包含该样式表的样式表（如果有的话）。返回将该样式表与文档相关联的节点。
2022-11-17 14:34:30
1247
原创 监听dom变化的方法 - MutationObserver-基本使用
但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。对一个节点添加观察器，就像使用addEventListener方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。用来清除变动记录，即不再处理未处理的变动。
2022-11-16 11:22:55
1251
原创 Scss-混入和继承且如何正确使用
是版本当中引入的新语法特性，完全兼容CSS3的同时继承了强大的动态功能。混入（）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，Scss目前使用指令来进行混合操作。上面的代码建立了一个名为的Mixin，并传递了一个变量$radius作为参数，然后在后续代码中通过继承是Scss中非常重要的一个特性，可以通过@extend上面代码将.message中的CSS属性应用到了.success、.error、
2022-11-15 14:37:28
1419
原创 正则表达式-基础文档
是用来描述字符串内容格式，使用它通常用于匹配一个字符串的内容是否符合格式要求。\d [0-9] \d可以匹配一个任意的数字字符\D [^0-9] \D 匹配任意一个不是数字的字符\s 可以匹配任意的空白。\S 可以匹配任意的不是空白的字符。\w 可以匹配任意的字母、数字或下划线。\W 可以匹配任意的字母、数字、下划线以外的内容。
2022-11-14 10:28:39
372
原创 typeScript - compilerOptions
文件指定编译项目所需的根文件和编译器选项，本文只将。配置选项进行中文化解析，完整内容请参考官方文档。
2022-11-08 10:50:40
509
原创 微前端 - micro-app-源码1-渲染篇
这里我们使用的是通过customElements创建的自定义元素，因为它不仅提供一个元素容器，还自带了生命周期函数，我们可以在这些钩子函数中进行加载渲染等操作，从而简化步骤。分别请求css和js资源，请求资源后的处理方式不同，css资源会转化为style标签插入DOM中，而js不会立即执行，我们会在应用的mount方法中执行js。接下来我们就需要完成子应用的静态资源加载及渲染。请求到子项目，再次请求的时候使用的基座的地址，因为子项目的是相对路径，此时要改为绝对路径，或者使用src去拼接。
2022-11-08 10:48:27
997
原创 前端好用的markdown 插件总结(涉及生成目录)
兜兜转转没有发现特别好用的插件，最后自己用正则解析marked.js，生成的html实现。代码实现this.mdContent (markdown 内容)return {}})
2022-11-03 17:13:02
2396
原创 微前端 micro-app 源码研究-提前准备
微前端是前端发展的一种趋势，且便于项目开发管理，我选择micro-app 对微前端进行开发，并对它的原理进行研究，增加自己对其的深入了解
2022-10-21 10:21:46
630
原创 vue-router 路由 pushstate replacestate popstate 详解
如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。使用虚拟路由的时候，angular 13的drawer 组件监听 popstate 的变化，会清空drawer内容，造成的问题。将当前URL和history.state加入到history中，并用新的state和URL替换当前。state：与要跳转到的URL对应的状态信息。
2022-10-21 10:18:58
2448
原创 域名，为什么不可以自己随便起域名
域名的由来由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点，人们设计出了域名，并通过网域名称系统（DNS，Domain Name System）来将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。1.客户机（PC）向首选DNS服务器（首选DNS服务器是指当前你的PC机连接的DNS服务器，Windows可以使用ipconfig命令查看）发起请求：”你知道www.benet.com的IP吗？“如果首选DNS服务器知道（一般如果首选DNS
2021-12-15 17:24:06
2452
原创 一文学会 canvas
save()保存画布的所有状态restore()恢复 canvas 状态的save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。可能保存的状态有：当前应用的变形（即移动，旋转和缩放，见下）以及下面这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shado
2021-10-09 18:15:12
1198
原创 前端上传文件，multipart-formdata，boundary的使用
是因为浏览器识别到formdata对象， 会自动设置content-type为multipart-formdata; boundary=随机字符串。加上了bondary作为请求参数的文本分隔符 这样子
2021-08-17 14:21:17
24531
1
原创 import和require的区别
1. import和require的区别node编程中最重要的思想就是模块化，import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方， require可以理解为一个全局方法import是编译时调用，所以必须放在文件开头本质require是赋值过程，其实require的结果就是对象、
2021-08-16 17:17:40
242
原创 keep-alive 失效
keep-alive 后mouted还是会运行下面是文章链接，以及跳转后的页面当跳转的文章页面回退后，会默认使用vue的生命周期destroy 将缓存清除，这个时候链接页面会默认解决方法将本页面和跳转后的页面都包裹在keep-alive中就行了标题跳转的页面使用activated代替mounted方法...
2020-10-28 16:06:05
702
原创 node接收图片报错 PayloadTooLargeError: request entity too large
1、问题：前端将图片转换为base64格式字符串发送到后台（环境node），出现：PayloadTooLargeError: request entity too large前端收到后台413（Payload Too Large）2、原因/解决：nodejs 做为服务器，在传输内容或者上传文件时，系统默认大小为100kb，这时，我们需要修改系统限制。我们在server.js中调用接口和对应方法中，加入对应参数即可，如：app.use(bodyParser.json({limit : “210
2020-10-23 11:26:24
2684
原创 echart显示自定义图标
可以通过矢量图标实现自定义需求实现方式在阿里图标中找到想要的图标，然后将svg改为矢量图标<svg t="1592984597912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3428" width="200" height="200"><path d="M512 896C299.936 896 128 724.064 128 512S2.
2020-06-24 15:48:16
1085
原创 mysql按天显示
自己通过查询的时间进行连表查询SELECT DATE_FORMAT(DATE_SUB(last_day(curdate()), INTERVAL xc-1 day), '%Y-%m-%d') as date FROM ( SELECT @xi:=@xi+1 as xc from (SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6) xc1,
2020-06-24 15:31:40
367
vue.js在<head>头文件不被使用的问题
2019-07-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人