- 博客(60)
- 收藏
- 关注
RSS订阅原创 Angular 由一个bug说起之五：为什么现代CSS系统倾向于少用或不用absolute定位？
在过去，使用position: absolute定位元素是一种常见的技术，但是随着前端开发的发展，现代CSS系统倾向于减少或避免使用absolute定位。在实际项目中，我们应该优先考虑使用基于文档流的布局方法，只有在必要时才使用absolute定位。在大型项目中，随着页面结构的变化，维护absolute定位的元素可能需要更多的时间和精力。absolute定位的元素可能会遮挡屏幕阅读器的内容，降低网站的可访问性。使用基于文档流的布局可以确保内容在阅读器中正确呈现，提高了网站的可访问性。
2024-04-26 14:17:47
473
原创 Angular进阶之八： Angular Animation在项目中的实践经验
所以如果绑定动画的组件中存在不同的定位，最好是都统一成一个方向的绝对定位。我在实际的项目中体会到，相比 css 动画，Angular Animation 最大的优点是能够提供一系列很准确的关键帧回调函数(callback)。这是官方文档的说法，但实际上它监听的是 animation state 的改变。特别要注意的是删除节点的操作需要在第二步完成，所以我们需要监听第一个步骤完成时的回调。在渲染时会解析组件中所有的子组件，这在性能上会造成极大的损耗，所以应当尽量减少动画所影响到的组件。
2024-03-19 16:29:29
857
原创 Angular 由一个bug说起之四：jsonEditor使用不当造成的bug
是字符串，或者相应的捕获组在正则表达式中不存在，则该模式将被替换为一个字面量。如果该组存在但未匹配（因为它是一个分支的一部分），则将用空字符串替换它。替换字符串可以包括以下特殊替换模。，但是实际结果是被替换为。
2024-03-01 11:15:04
440
翻译 Angular进阶之七： 不要在html template中使用函数（翻译）
因为在OnPush 策略下，变更检测会在第一次检查后被禁用，当输入属性（@Input）没有发生改变时，Angualr会跳过OnPush 控件以及其子控件。在上边的示例中，我们可以在person被更改时计算全名，因此我们可以添加一个fullName属性，当ngOnChanges 中改变person输入的值时，重新计算fullName的值。但是，这并没有解决潜在的性能问题。此时， Angular Template 里没有任何函数的踪迹，但是 get fullName() 每次在变更检测时都会被调用。
2024-01-23 10:45:23
68
原创 Angular进阶之六：Progressive rendering
通过自定义指令将数据加载设计为异步操作，我们成功地实现了 Progressive Rendering，使得页面在数据加载的同时逐步呈现，提高了用户体验。在本文中，我们将探讨如何在 Angular 中通过自定义指令实现 Progressive Rendering，特别是处理从服务器获取大量数据的场景。通过自定义指令将数据加载设计为异步操作，并在数据加载的同时允许页面逐步渲染，以提高用户对应用的感知。运行你的 Angular 应用，你将看到页面在加载过程中逐步呈现列表项，提高了用户对应用的感知。
2023-12-28 15:01:33
809
原创 Angular 进阶之五： Signals到底用不用？
在上面例子中increase使用set每次用新数组更新signal，decrease使用update，每次只改原来的数组，在子组件中，会看到，increase会触发子组件的ngOnChange，但是decrease不会。两个组件，父组件的html template里绑定了computedNames，和canDecrease，从外表也看不出来区别，但是如果使用鼠标在蓝色区域晃动，控制台就会打印canDecrease被不停调用，computedNames没事，这个例子说明了。我们用下面一个简单的例子来说明。
2023-12-22 16:00:49
1281
原创 Angular 进阶之四：SSR 应用场景与局限
尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。等生命周期钩子，因此项目引用的第三方的库也不可用其它生命周期钩子，这对引用库的选择产生了很大的限制；构建的页面可以爬到页面上的所有内容，包括其中一些在后端渲染好的数据，其中读取到的数据都可以用作。将页面渲染移动到服务器端，页面的每一次点击、修改都需要调用因此会增加服务器的压力，以其相比还是。内容丰富，复杂交互的动态网页，对首屏加载有要求的项目，对。，网络爬中就可以抓取到完整页面的信息。
2023-12-05 11:00:38
360
原创 Angular 由一个bug说起之三：为什么时不时出现额外的水平/垂直滚动条？怎样能更好的防止它的出现？
虽然视图的内容也是由我们来控制，看似是不会出现滚动条的情况，但是我们的页面是可以互动的。通过分析并明确视窗与内容的关系，我们不仅能有效避免上述情况的发生，还能降低其它问题出现的概率。而当元素里的内容（包括文本内容、图片、视频等内容）的大小超出窗口的大小区域时，内容会有一部分显示在盒子所在区域的外部，这就是。制定并遵循代码规范。规范的代码也是考察程序员能力的一个方面，清晰整洁的代码能够规避很多错误，并且也易于维护。视图窗口简单来说就是呈现内容的视口，浏览器就是一个窗口，其中所显示的内容就是视图内容。
2023-12-04 14:00:01
404
原创 Angular 由一个bug说起之二：trackBy的一点注意事项
接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚。数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy。组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题。我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。接下来我用一个例子来演示一下。点击changeData。
2023-11-16 15:46:15
1650
原创 Angular 由一个bug说起之一：List / Grid的性能问题
3：使用trackBy，trackBy是angular提供的函数，来告诉angular怎么跟踪数组里的项目。这会减少不必要的DOM的删除和重建。4：但是对于更复杂的表的使用，比如分组管理数据。打开或者关闭某个组的时候，还要操作DOM，那么在以上几种方法的基础上可能还会卡顿。在angular中，MatTable构建简单，使用范围广。使用过多的ngStyle或者ngClass。第一次渲染会卡顿，且ngStyle的值未被覆盖。一次性渲染太多数据，这会花费CPU很多时间。以上就是几种常用的优化方法。
2023-11-10 15:21:18
1091
原创 Angular安全专辑之五 —— 防止URL中敏感信息泄露
由于URL 可能会被第三方拦截和查看（比如互联网服务商、代理或者其他监视网络流量的攻击者），所以URL中的敏感数据会带来安全风险，攻击者可能会捕获并使用它进行攻击。：攻击者可以创建模仿合法网站的虚假网页，并在 URL 中包含敏感数据，以诱骗用户泄露其登录凭据或其他敏感信息。: URL 中的敏感数据泄露会被攻击者拦截，并导致个人身份信息或者系统机密信息泄露。： 攻击者可以使用URL中的敏感数据对用户账户进行未授权的访问，并执行各种恶意活动。这样就可以防止auth token 在URL里出现了。
2023-10-16 11:04:51
573
原创 Angular安全专辑之四 —— 避免服务端可能的资源耗尽(NodeJS)
如防止爬虫过度爬取、防止暴力破解密码、避免频繁调用支付接口等。提供可定制的响应如429 Too Many Requests。地址或其他标准轻松地对请求进行速率限制。包括基础限制、路由限制、动态限制、自定义。应用程序中实现速率限制。方便地集成到Express应用中。是一个轻量实用的速率限制中间件。基于IP地址实现速率限制。设置最大请求数和时间窗口。请求频率进行限制的场景。框架的一个流行中间件。应用的流量进行管控。
2023-08-31 11:07:20
1353
原创 Angular安全专辑之三 —— 授权绕过，利用漏洞控制管理员账户
管理员用户的邮箱地址受到保护，不能更改为攻击者的邮箱地址，攻击者也就不能通过忘记密码功能获取到管理员权限了。而且由于攻击者此时拥有管理员权限，所以造成的损失将是非常巨大的。，不同的用户拥有不同的权限。相对来说管理员账户所对应的权限是极高的，它可以修改当前用户或者比它权限低的账户信息。注意：管理员用户可以没有任何限制的修改邮箱地址，所以即便是邮箱的域名被修改(@example.com -> @xxx.com)也是合法的。角色的经过身份验证的用户可以结合更新用户信息的方法和。比如我的项目所遇到的问题，具有。
2023-08-29 16:36:08
1000
原创 Angular安全专辑之二——‘unsafe-eval’不是以下内容安全策略中允许的脚本源
不包含‘unsafe-eval’的理由是eval 实际上是不安全的。它在每种语言中的意思是“获取这个字符串并执行它的代码”。这个错误的意思是，拒绝将字符串评估为 JavaScript，因为‘unsafe-eval’不是以下内容安全策略中允许的脚本源。尽量避免使用eval方法，大多数情况下，eval方法是可以被避免的。而不是把‘unsafe-eval’加入到CSP白名单中。因为我的安全策略（CSP）白名单中并不包含‘unsafe-eval’这个选项。上述的代码可以这样更改，代码正常工作。
2023-08-17 11:11:15
1365
原创 Angular安全专辑之一 —— CSP防止XSS攻击
在白名单策略中，可以使用他来指定浏览器仅渲染或执行来自白名单中的资源。即便是被恶意注入了脚本，因为脚本并不在白名单中，因此不会执行。它通过允许网站管理员定义哪些资源可以加载到网页中，从而限制了恶意脚本的执行。以下是一个简单的示例将所有的脚本限制为只能从同一域加载，但是允许从。禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。禁止加载外域代码，防止复杂的攻击逻辑。控制加载样式表的来源。控制加载音视频的来源。控制加载脚本的来源。控制加载图片的来源。控制加载字体的来源。控制加载框架的来源。
2023-08-09 10:00:20
1266
原创 用Git 命令行列出一个分支修改文件列表的脚本
根据commit的id，列出来所有修改的文件名，sort | uniq用来去重，如果需要过滤文件夹或者类型的话，可以在renames后面加“ -- folder”， 如果需要过滤文件类型的话可以再加“| grep xxx.xx”。在自动化执行过程中需要找到这个分支修改的文件列表，就像github pull request里面那样，试了几种办法，这个办法是成功的。
2023-07-18 19:01:46
304
1原创 Angular组件之：ngx-bootstrap VS Angular Material part 1 —— Tabs
ngx-bootstrap vs angular material
2022-09-23 13:36:55
670
原创 Angular 基础之——原生路由 VS ui-router
路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。要实现前端路由，需要解决两个核心问题：下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。...
2022-07-13 10:15:39
282
原创 Angular 组件接口之 ControlValueAccessor
ControlValueAccessor 是什么？简单来说ControlValueAccessor是一个接口，它被用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。其使用方式和OnInit类似，需要程序员在自定义组件里面实现相应的方法。import {ControlValueAccessor,NG_VALUE_ACCESSOR} from '@angular/forms';@Component({ selector: 'custo...
2022-04-24 17:31:14
1873
原创 Angular 基础篇——Rxjs之四：debounce, first, last, throttle, delay
RxJS简介Reactive Extensions for JavaScriptRxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。RxJS核心概念Observable (可观察对象...
2022-04-01 16:16:45
1259
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人