只想发泄一下!!很气愤!!也许是很气愤!!!!!

最新推荐文章于 2019-06-05 10:36:06 发布
原创 最新推荐文章于 2019-06-05 10:36:06 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#电话 #blog #qq

博主今日十分倒霉，上论坛被入侵，智能五笔损坏，QQ收到老妈急事留言，结果是老爸撬门换门留老妈在外且不打电话，在优快云博客发文也不成功。

今天不知道是怎么的了.

怎么着都是一个倒霉相.

先是上论坛,发现被人入侵;

然后是想进去管理,结果该死的智能五笔又说什么"已损坏"!!!!!!

最后,陈林QQ上留言,说我老妈有急事,要我马上打电话!!!!!

结果才是那个老爸把家里门撬了,换上新门就走人了,把我老妈留在外面!!!!电话也不打一个!!!

非常的可恶!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

说老实话,我现在已经没有道德了!!!!

我要卖木马!!!!!!

脏钱也要赚!!!!!!!!!!!!!!!!!!!!!!!!

气啊!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

现在在优快云面BLOG上发文章竟然也不成功!!!!!!!!!!!!!!!!

我要喷血了!!!!!!!!!!!!!!!!!!!!!

还好是写在记事本里的!!!!!!!!!!!!!!

为什么今天这么倒霉!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

运营如何提需求？不要只想着靠产品经理！
02-26
这些反馈通常都不会很明确，需要运营同学进行整理挖掘、沟通调研进而提炼出需求。如果不经整理提炼就统统丢给产品跟研发同学去处理的话——会被鄙（qia）视（si）的……它们俩是从1到10和从0到1的区别。我个人的建议...
查看内容 世界杯来了！小程序赛事操作来一波~
03-29
由于体验不错，又正在学习小程序知识，马上就想动手实践学习一下“腾讯体育”小程序的制作。到目前为止，只想说一句“选择是好的，过程是一言难尽的”，虽然还没全部完成，但也遇到不少问题，希望此分享可以给你带来...
雨,又是雨......
嗷嗷叫的老马
08-25 1256
一点半.外面下起了小雨.路灯微黄的光照着地面.四周很安静,除了偶尔开过的出租车.锁定记费的电脑,慢慢地走出去,一直走到雨中.淋着细细的雨,心情无比舒畅.原来,我是真的喜欢小雨.
QQ群讲义3--BC3.1的图形学设置及两个经典图形学算法
计经集注--VBSpine专栏
10-08 3770
众所周知，TC和BC这两个软件由于历史的原因，在中国的生命力出了奇的顽强,TC似乎是不少高校学生学C语言的首选,黑乎乎的运行界面,导致了好多人认为TC只能写出这种黑乎乎的程序,当然，TC和BC诞生在那个年代，写Windows程序确实困难（注意，是困难，并不是不可以）,而且，即使不写Windows，写个窗口和图形的程序虽然有点麻烦,但也是完全可以的,在学生时代，每个用BC和TC的人可能都想写个图形程
每天只问小孩四句话（转载收藏） 最强悍的教育方式~都看看吧！
beyondqd的专栏
07-11 5597
有位父亲他对女儿的教育方式比较独特，他从来没有辅导过女儿做功课什么的，就是每天回来跟女儿聊十分钟，只聊四个问题，就完成了他的家庭教育。这四个问题是： 1，学校有什么好事发生吗？ 2，今天你有什么好的表现？ 3，今天有什么好收获吗？ 4，有什么需要爸爸的帮助吗？ 看似简单的问题背后其实蕴涵着丰富的含义:     第一个问题其实是在调查女儿的价值观，了解她心里面觉得哪些是好的，哪些是不好的
《那些年啊，那些事——一个程序员的奋斗史》十一
热门推荐
undoner
10-07 1万+
101     回家了！从大巴下来，踏上北海的土地，段伏枥不由地深吸一口气:多么熟悉的带有腥味的空气！虽然说每年段伏枥都会回家过年，但每次都感慨万分。是啊，外出的游子谁不是这样呢？外面的世界或许很精彩，或许很美，但总欠缺了一种熟悉的味道。即使像自己在深圳呆了三年有余，却还是觉得很陌生，似乎只是一个匆匆过客，终究会离开一样。只有回到了家乡，才会有那种回到家的踏实感。       国人的春节归家
《那些年啊，那些事——一个程序员的奋斗史》十四(完结)
undoner
12-29 2393
125   距离离职交接的一个月时间还剩几天，本来应该是平淡无事的，却没想到最后还是波澜四起。昨天下班前，公司突然停了电。这本是件普通得不能再普通的事情，可没想到过了一会来电了，或许是波峰电压太大，或许是稳压电源做工太糟糕，公司所配的笔记本一闪之后居然再也起不来了！段伏枥想尽办法折腾了一番，最后还是无果:笔记本烧掉了！     烧掉了，还能有啥办法，拿去修呗。不过这笔记本有点特殊，是武总向严董
《当程序员的那些狗日日子》六
undoner
10-25 1万+
《当程序员的那些狗日日子》（五十一）太不给力的年终奖 2009年12月中旬，敖总请研发部各人去台湾六天游，这是敖总每年一次的对研发部同仁的特别恩惠。此外此次台湾游敖总还请了负责技术支持的另外三位同事一同前往。由于办证及其他原因，最后只有立经理、小钟、良子、小陆和我，再加上敖总，一共六人成行。 这次台湾六天游，一个人的团费大概四千多元，虽然说是“羊毛出在羊身上”，但如果敖总不请各人去台湾游，那钱
《演讲之禅》读书笔记
心流汇聚之地
07-28 2340
在读了《演讲之禅》三分之一的时候，先后参加了中国开发者大会和阿里嘉年华，在这两个大会上刻意地观摩了大师们的演讲。然后在看完了这本书，觉得此书总结得实在精辟。提升演讲技巧是需要实践的，反复练习才会有进步。http://blog.youkuaiyun.com/hursing 摘录下我觉得非常有用的东西。 处理这些尴尬场面的方法就是，设想除你本人之外的每一个人都会很快忘记这些事情，别人才不会在乎那么多呢。
:glowing_star: 当您现在真的只想通过 HTTP 提供一些文件时！
06-28
miniserve - 通过 HTTP 提供文件和目录的 CLI 工具当您现在真的只想通过 HTTP 提供一些文件时！miniserve是一个小型的、自包含的跨平台 CLI 工具，它允许您只获取二进制文件并通过 HTTP 提供一些文件。有时，这只是...
CanvasDOU!手册
10-21
- **快速实现目标**：适合那些只想快速展示简单图形的用户。 #### 二、适用人群 - **非专业编程人员**：尤其是那些对编程不熟悉但又需要在网页中展示图形的人。 - **快速原型设计者**：对于需要快速创建图形原型的...
请尊重我们移动10086每一位前台客服人员(ZZ)
06-05 275
请尊重我们移动10086每一位前台客服人员(ZZ)只想让每一个人了解我们，只想让每个一人善待我们，没有华丽的语言，只有真实的经历……　　　　请尊重我们10086每一位前台客服人员　　　　10086想必大家都知道是什么电话！对，是...
前端！！！！！！！！
最新发布
09-26
<think> 我们正在讨论的是在前端开发中，如何通过条件渲染（如v-if或类似的if/else逻辑）来创建和移除监听器（事件监听器或观察者）。关键点在于：当条件满足时创建监听器，当条件不满足时移除监听器，以避免内存泄漏和确保正确性。 根据引用[1]，条件渲染指令（如v-if）会真正地创建或销毁DOM元素。因此，我们可以利用这个特性来管理监听器：在元素被创建时（例如，在组件的mounted生命周期或类似钩子中）添加监听器，在元素被销毁时（例如，在beforeUnmount或类似钩子中）移除监听器。 但是，如果我们不使用框架，而是使用原生JavaScript，或者我们在框架中需要手动管理监听器（例如，在条件渲染的块外部添加监听器），那么我们需要在条件变化时手动添加和移除监听器。 以下是两种常见场景的解决方案： 1. 在框架中（例如Vue）利用条件渲染和生命周期钩子自动管理监听器。 2. 在原生JavaScript中，通过手动在条件变化时添加和移除监听器。 下面我们分别讨论： ### 1. 在Vue中使用v-if和生命周期钩子 在Vue中，我们可以使用v-if来控制组件的渲染，并在组件的生命周期钩子中添加和移除监听器。 例如： ```vue <template> <button v-if="showButton" @click="handleClick">Click me</button> </template> <script> export default { data() { return { showButton: true } }, methods: { handleClick() { console.log('Button clicked'); } } } </script> ``` 在这个例子中，我们不需要手动管理点击事件的监听器，因为Vue的模板语法会自动处理：当`showButton`为true时，按钮被渲染并添加点击事件监听器；当`showButton`为false时，按钮被销毁，同时事件监听器也被移除。 但是，如果我们添加的是非模板事件（例如，使用`addEventListener`添加的监听器）或者我们监听的是window对象等，就需要在生命周期钩子中手动添加和移除。 例如，我们想在组件显示时监听窗口的resize事件，在组件不显示时移除： ```vue <template> <div v-if="isActive"> <!-- 内容 --> </div> </template> <script> export default { data() { return { isActive: true } }, mounted() { // 当组件被挂载时，如果isActive为true，则添加监听器 if (this.isActive) { window.addEventListener('resize', this.handleResize); } }, beforeUnmount() { // 在组件卸载之前，移除监听器 window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { console.log('Window resized'); } }, watch: { // 监听isActive的变化，当变为false时移除监听器，当变为true时添加监听器 isActive(newVal) { if (newVal) { window.addEventListener('resize', this.handleResize); } else { window.removeEventListener('resize', this.handleResize); } } } } </script> ``` 注意：在Vue 3中，我们可以使用`watchEffect`或组合式API来更简洁地管理。 ### 2. 在原生JavaScript中使用条件控制 在原生JavaScript中，我们可以通过条件判断来动态添加和移除事件监听器。 例如，我们有一个按钮，我们只想在用户登录状态下监听它的点击事件： ```html <button id="myButton">Click me</button> ``` ```javascript let isLoggedIn = false; // 初始未登录 const button = document.getElementById('myButton'); function handleClick() { console.log('Button clicked'); } // 当登录状态改变时，我们需要更新监听器 function setLoginStatus(loggedIn) { if (loggedIn) { // 登录时添加监听器 button.addEventListener('click', handleClick); } else { // 未登录时移除监听器 button.removeEventListener('click', handleClick); } isLoggedIn = loggedIn; } // 初始状态设置 setLoginStatus(isLoggedIn); // 模拟登录状态改变 setTimeout(() => { setLoginStatus(true); // 登录，添加监听器 }, 2000); setTimeout(() => { setLoginStatus(false); // 登出，移除监听器 }, 5000); ``` 在这个例子中，我们通过一个函数`setLoginStatus`来根据登录状态添加或移除事件监听器。 ### 3. 使用观察者模式或发布订阅模式 对于更复杂的情况，比如多个条件或多个监听器，我们可以使用观察者模式或发布订阅模式来管理。但基本思想仍然是在条件满足时注册监听器，在条件不满足时移除。 ### 注意事项： - 确保移除监听器时传入的函数与添加时是同一个函数（同一个引用）。 - 在移除监听器之前，确保已经添加了监听器，否则多次移除可能会出错（但通常不会报错，只是没有必要）。 ### 总结 使用if/else控制创建和移除监听器的方法： 1. **在框架中**：利用条件渲染指令（如v-if）和生命周期钩子自动或手动管理。 2. **在原生JavaScript中**：通过一个条件设置函数，在条件变化时手动添加或移除监听器。 核心原则：在需要监听的时候添加，在不需要的时候移除，以避免不必要的内存占用和潜在的错误。 希望这个回答对你有帮助！ §§ 相关问题 §§ 1. 在Vue中，除了v-if，还有哪些指令可以控制元素的显示和隐藏？ 2. 在React中如何实现类似的条件渲染和监听器管理？ 3. 如何避免在移除事件监听器时因函数引用不一致导致的问题？ 4. 在Angular中，如何通过结构指令（如*ngIf）来管理监听器？ </think> ### 前端使用 `if/else` 控制监听器的创建与移除方法 在前端开发中，通过 `if/else` 控制监听器的创建和移除是**资源管理的关键实践**。以下是具体实现方法和最佳实践： --- #### 一、核心实现原理 1. **条件触发机制** 在条件分支中动态添加/移除监听器： ```javascript let eventListener = null; function toggleListener(condition) { if (condition) { // 创建监听器 eventListener = element.addEventListener('click', handleClick); } else { // 移除监听器 element.removeEventListener('click', handleClick); eventListener = null; } } ``` 2. **框架中的组件生命周期集成**（以 Vue 为例） 利用 `v-if` 和生命周期钩子自动管理[^1]： ```vue <template> <button v-if="showButton" @click="handleClick">按钮</button> </template> <script> export default { data() { return { showButton: true } }, methods: { handleClick() { /* 处理逻辑 */ } }, watch: { showButton(newVal) { if (!newVal) { window.removeEventListener('resize', this.handleResize); } } }, mounted() { window.addEventListener('resize', this.handleResize); }, beforeUnmount() { window.removeEventListener('resize', this.handleResize); } } </script> ``` --- #### 二、关键实践技巧 1. **引用一致性原则** 添加/移除时必须使用**同一个函数引用**： ```javascript // ✅ 正确做法（使用函数变量） const handler = () => console.log("Clicked"); element.addEventListener('click', handler); element.removeEventListener('click', handler); // ❌ 错误做法（匿名函数无法移除） element.addEventListener('click', () => console.log("Clicked")); ``` 2. **框架中的条件渲染优化** ```javascript // React 示例：useEffect + 条件依赖 useEffect(() => { if (isActive) { window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); } }, [isActive]); // 依赖项控制创建/销毁 ``` 3. **原生 DOM 的精细控制** ```javascript const button = document.getElementById('myButton'); let isListening = false; function toggleListener() { if (!isListening) { button.addEventListener('click', () => { console.log("事件触发"); toggleListener(); // 点击后自动移除 }); isListening = true; } else { button.removeEventListener('click', handleClick); isListening = false; } } ``` --- #### 三、特殊场景处理 1. **异步操作中的监听器** 在异步任务完成后移除监听器： ```javascript function fetchData() { const loadingHandler = () => showSpinner(); document.addEventListener('mousemove', loadingHandler); fetch('/api/data') .then(data => { /* 处理数据 */ }) .finally(() => { document.removeEventListener('mousemove', loadingHandler); }); } ``` 2. **自定义事件管理** 使用事件委托替代多个监听器： ```javascript // 父元素统一处理 → 避免频繁创建/销毁 document.getElementById('parent').addEventListener('click', (e) => { if (e.target.matches('.child') && condition) { // 条件满足时处理 } }); ``` --- #### 四、内存泄漏防范 1. **必须销毁的监听器类型** | **监听器类型** | **是否必须移除** | **原因** | |---------------------|------------------|---------------------------| | `window`/`document` | ✅ | 全局对象长期存在[^3] | | SPA 路由事件 | ✅ | 组件销毁后仍可能触发 | | WebSocket 监听 | ✅ | 持久连接需手动关闭 | | 第三方库事件 | ✅ | 库可能不会自动清理 | | 组件内部元素 | ❌ | 随 DOM 销毁自动移除[^1] | 2. **检测内存泄漏工具** - Chrome DevTools → Performance 录制分析 - `performance.memory` API 监控 --- #### 五、最佳实践总结 1. **组件生命周期绑定** 在 `mounted`/`useEffect` 添加，在 `beforeUnmount`/清除函数移除 2. **引用保存** 始终将事件处理函数保存为变量 3. **条件标准化** 使用布尔标志位（如 `isListening`）控制状态 4. **框架优先原则** 优先使用框架提供的指令（如 `v-on`、`@click`）自动管理 ```mermaid graph TD A[条件判断] -->|条件成立| B[创建监听器] A -->|条件不成立| C[移除监听器] B --> D[保存处理函数引用] C --> E[核对函数引用一致性] D --> F[事件触发执行] E --> G[释放内存资源] ``` ---
评论 11
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值