淡蓝的云
淡蓝的云

【方案篇】事件监听函数的内存泄漏，帮你搞定！不谢！！！

本文是 理论篇 ，还有下篇 代码篇。

前言

工作中，我们会对window, DOM节点，WebSoket, 或者单纯的事件中心等注册事件监听函数。

// window
window.addEventListener("message", this.onMessage);
// WebSoket
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
// EventEmitter
emitter.on("user-logined", this.onUserLogined);

要是没有移除，就可能导致内存的泄漏。

SPA更加剧了这种现象
比如React组件加载后，在window上注册了监听事件，组件卸载没有删除，极有可能像滚雪球一样，一发不可收拾。

componentDidMount(){
    window.addEventListener("resize", this.onResize);
}
componentWillUnmount(){
  // 忘记remove EventListener
}

今天我们的主题，就是分析事件监听，并排查因此可能导致的内存泄漏。

本文主要讨论和分析几个技术点：

  1. 怎么准确知道某个对象或者函数是否被回收
  2. 常见事件监听函数的本质
  3. 如何收集DOM事件监听函数
  4. 拦截方法常见方式
  5. 弱引用回收问题
  6. 如何裁定事件监听函数重复

效果演示

报警，高危事件统计，事件统计等功能，我们一起来看看效果吧。

预警

当你进行事件注册的时候，如果发现四同属性的事件监听，就进行报警。
四同：

  1. 同一事件从属对象
    比如Window, Socket等同一个实例
  2. 事件类型，比如 message, resize， play等等
  3. 事件回调函数
  4. 事件回调函数选项

截图来自我对实际项目的分析， message事件重复添加，预警！！

[图片上传失败...(image-22f4a5-1632814967824)]

高危统计

高危统计是对预警的拔高，他会统计 四同属性 的事件监听。是排查事件回调函数泄漏最重要方法。

DOM事件

截图来自我对实际项目的分析 , window对象上message消息的重复添加， 次数高达10
[图片上传失败...(image-6ad34-1632814967825)]

EventEmitter模块
截图来自我对实际项目的分析 ,APP_ACT_COM_HIDE_ 系列事件重复添加
[图片上传失败...(image-127a0-1632814967825)]

事件统计

按照类型，罗列所有的事件监听回调函数，包含函数名，也可以包含函数体。
这中我们分析问题也是极其有用的。
[图片上传失败...(image-8473bd-1632814967825)]

所以，

各位大哥，各位大哥，各位大哥， 务必给函数起个名字，务必给函数起个名字，务必给函数起个名字。，

这时候，名字真的很重要！！！！！！！

怎么准确知道某个对象或者函数是否被回收

一种直观有效的答案： 弱引用 WeakRef + GC(垃圾回收)

为什么要弱引用呢？ 因为我们不能因为我们的分析和统计影响对象的回收？不然分析肯定也不准了。

弱引用

WeakRef 是ES2021提出来的，用于直接创建对象的弱引用， 不会妨碍原始对象被垃圾回收机制清除。

WeakRef 实例对象有一个deref()方法，如果原始对象存在，该方法返回原始对象；如果原始对象已经被垃圾回收机制清除，该方法返回undefined。

let target = {};
let wr = new WeakRef(target);

let obj = wr.deref();
if (obj) { // target 未被垃圾回收机制清除
  // ...
}

来看一个实际的例子：
左边target不会被回收，右边会被回收。
[图片上传失败...(image-b97350-1632814967825)]

看到这里，你应该至少有两个意识：

  1. window.gc()是什么鬼
    其是v8提供的方法，主动触发垃圾回收，接下来会提到。
  2. IIFE这种闭包的应用，确实可以程度减少变量污染和泄漏

垃圾回收

垃圾回收是有周期的，以chrome浏览器为例，是可以主动执行垃圾回收的。 本应该被回收的对象，主动执行回收操作之后，倘若他还在，那很大可能性就导致了泄漏。

基于v8引擎的浏览器，怎么主动执行垃圾回收呢？
答案是： 修改chrome的启动参数，加上 --js-flags="--expose-gc"即可

[图片上传失败...(image-4af508-1632814967825)]

之后，你就可以只直接调用gc方法进行垃圾回收

[图片上传失败...(image-5f7d65-1632814967825)]

小结

有了 WeakRef + 主动GC
你就可以在你觉得可能泄漏或污染的地方进行测试，排查问题。

通过现象看本质

事件监听的表象

回归主题，我们今天的重点是事件回调函数，
我们的在web编程中常遇见的事件订阅类型表象有：

  • DOM事件
    主要是DOM2级别的事件，也就是addEventListener, removeEventListener
  • WebSocket, socket.io, ws, mqtt等等这

从本质上来看，也是两种：

  • 基于 EventTarget 的事件订阅
    window, document , body, div等等这种常见DOM相关的元素，XMLHttpRequest, WebSocket，AudioContext 等等，其本质都是继承了EventTarget。
  • 基于 EventEmitter的事件订阅
    mqtt 和 ws 是基于 events 。
    著名的 socket.io是基于component-emitter。
    其都有共同点就是通过 on和off等方法来订阅和取消事件。

所以，我们要想监听和收集事件的订阅和取消订阅的信息，就变得简单了。

本质 - prototype

不管是EventTarget系列还是EventEmitter系列, 其本质都是实例化之后，在实例上进行订阅和取消订阅。

而实例化，为了更加好复用和更少的内存开销，一般会把公用的方法放到prototype上面，没错，问题的本质都回到原型上。

所以，事件回调收集，就是在原生上做手脚，改写原型上订阅和取消订阅的方法，两个点：

  1. 收集事件监听信息
  2. 保持原有功能

进一步的本质就是方法拦截， 那我们就一起再走近方法拦截

方法拦截

几种方法拦截的方式

方法拦截，我这里收集和整理了大约7种方式，当然有些类似，问题不大：

  • 简单重写原来的方法
  • 简单代理
  • 继承方式
  • 动态代理
  • ES6+ 标准的的 Proxy
  • ES5 标准的的 defineProperty
  • ES6+ 标准的的 decotator

具体每个方法的简单例子可以到这 几种方法拦截的方式

比较理想和通用的当然是后三种，

  • decotator
    显然这里不太合适，一是装饰器要 显式 的入侵代码，二是成本代价太高。

  • defineProperty
    非常直接和有效的方法，重定义 get，返回我们修改后的函数即可。
    不过，我就不，就不，我就喜欢玩Proxy.

  • Proxy
    其一：Proxy，返回的是一个新的对象，你需要使用这个新的对象，才能有效的代理。
    其二：我们做事要负责，要支持还原，所以更准确的说，我们要使用的是可取消的代理。 简单的代码就是如下：

const ep = EventTarget.prototype;
const rvAdd = Proxy.revocable(ep.addEventListener, this.handler);
ep.addEventListener = rvAdd.proxy;

如何收集DOM事件监听函数

我们拦截原型方法，本质就是为了收集事件监听函数。 其实除了拦截原型，也有一些方式可以获取到。

第三方库 getEventListeners

其只是直接修改了原型方法，并在节点上存储相关信息，结果可行，不推荐这么玩。

缺点

  1. 入侵了每个节点，节点上保留了事件信息
  2. 单次只能获取一个元素的监听事

chrome 控制台 getEventListeners方法获得单个Node的事件

缺点

  1. 只能在控制台使用
  2. 单次只能获取一个元素的监听事件

chrome控制台， Elements => Event Listeners

  1. 只能在开发者工具界面使用
  2. 查找相对麻烦

chrome more tools => Performance monitor 可以得到 JS event listeners, 也就是事件总数

并未有详细的信息，只有一个统计数据

数据结构和弱引用的问题

前面已经提到过了WeakRef，但是我们得思考，需要对哪些对象进行弱引用。

选择什么数据结构存储

既然是进行统计和分析，肯定要存储一些数据。
而这里我们是需要以对象作为键，因为我们要统计的是某个EventTarget或者EventEmitter的实例的事件订阅情况。

所以首选项， Map , Set, WeakMap, WeakSet，你会选择谁呢？
WeapMap和WeakSet看起来美好，但存在一个 很致命 的问题，那就是 不能进行遍历 。 不能遍历，当然就没法进行统计。

所以这里选择Map是比较合适的。

对那些数据弱引用

先罗列一下事件订阅和取消订阅需要设计到的数据：

window.addEventListener("message", this.onMessage, false);
emitter.on("event1", this.onEvent1);

对照代码分析：

  1. target
    事件挂载的对象，假如是EventEmitter，挂载的对象就是其实例
  2. type
    事件类型
  3. listener
    监听函数
  4. options
    选项，虽然EventEmitter没有，都没有，我们就认为一样即可。

选择的是对target和listener进行弱引用，
, 大致的数据存储结构如下。

[图片上传失败...(image-dc1b6d-1632814967825)]

我们对事件从属的主体和事件回调函数进行弱引用，TypeScript表示为:

interface EventsMapItem {
    listener: WeakRef;
    options: TypeListenerOptions
}

Map, Record>

看似OK了，其实有个不容小视的问题，伴随着程序的支持运行， Map的Key的数量会增长，这个Key为WeakRef， WeakRef弱引用的对象可能已经被回收了，而与tartget关联的WeakRef并不会被回收。

当然，你可以周期性的去清理，也可以遍历的时候无视这些没有真实引用的WeakRef的Key。

但是，不友好！ 这里，就有请下一个主角 FinalizationRegistry

FinalizationRegistry

FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。

看个简单的例子：

const registry = new FinalizationRegistry(name => {
    console.log(name,  " 被回收了");
});
var theObject = {
    name: '测试对象',
}
registry.register(theObject, theObject.name);
setTimeout(() => {
    window.gc();

    theObject = null;
}, 100);

[图片上传失败...(image-57e5f9-1632814967825)]

对象被回收之后，如期的输出消息，这里， theObject = null不可以少，所以，确定对象不被使用之后，设置为null绝对不是一个坏习惯。

我们用FinalizationRegistry来监听对事件从属对象的回收，代码大致如下：

  #listenerRegistry = new FinalizationRegistry<{ weakRefTarget: WeakRef }>(
    ({ weakRefTarget }) => {
      console.log("evm::clean up ------------------");
      if (!weakRefTarget) {
        return;
      }
      this.eventsMap.remove(weakRefTarget);
      console.log("length", [...this.eventsMap.data.keys()].length);
    }
  )
 
 
不难理解，因为Map的key就是WeakRef, 所以target被回收之后，我们需要把与其关联的WeakRef也删除掉。
 
 
到此为止，我们可以收集对象和其注册的事件监听函数信息，有了数据，下一步就是预警，分析和统计。
 
 
如何判断重复添加的事件监听函数
 
 
基于EventTarget的事件订阅
 
 
先来一起看一段代码，请思考一下，按钮点击之后，输出了几次 clicked：
 
 


function onClick(){
    console.log("clicked");
}
const btnEl = document.getElementById("btn");

btnEl.addEventListener("click", onClick);
btnEl.addEventListener("click", onClick);
btnEl.addEventListener("click", onClick);

 
 
答案是： 1次
 
 
因为EventTarget有天然去重的本领，具体参见 多个相同的事件处理器
 
 
你可能说你懂了，那我们稍微提升一下难度, 现在是几次呢？？
 
 
    btnEl.addEventListener("click", onClick);
    btnEl.addEventListener("click", onClick, false);
    btnEl.addEventListener("click", onClick, {
        passive: false,
    });
    btnEl.addEventListener("click", onClick, {
        capture: false,
    });
    btnEl.addEventListener("click", onClick, {
        capture: false,
        once: true,
    });

 
 
答案： 还是 1次
 
 
其裁定是否相同回调函数的标准是：options中的capture的参数值一致。capture默认值是false。
 
 
正因为这个特性，我们在拦截订阅函数的时候，需要进行判断，以免误收集。
 
 
如果是addEventListener返回的是布尔值，那倒是可以作为一个判断的依据，可惜的是返回的是undefined，天意，笑过，不哭。
 
 
到这里，有些人应该是笑了， 这不是不重复添加吗？ 那又何来泄漏？？？
 
 
泄漏的根本来源
 
 
我开头提了一句 SPA更加剧了这种现象， 这种现象就是事件函数导致内存泄漏的现象。
 
 
// Hooks 也有同样问题
componentDidMount(){
    window.addEventListener("resize", this.onResize);
}
componentWillUnmount(){
  // 忘记remove EventListener
}


 
 
this.onResize是随着组件一起创建的，所以组件每创建一次，其也会被创建一次，虽然代码相同，但依旧是一个新的她。
 组件销毁时，但是this.onResize时被 window 给引用了，并不能被销毁。
 
 
后果可想而知， 基于 EventEmitter的事件函数，也是同样的道理。 如果你有打日志的习惯，就会发现，疯狂输出的日志，你该庆幸， 发现了泄漏问题。
 
 
何为相同函数
 
 
如何判断相同函数，成为了我们的关键。
 
 
引用相同当然是，在基于EventTarget事件订阅体系下，是天然屏蔽的，而基于EventEmitter的订阅体系就没那么幸运了。
 
 
这时候，大家天天见，却也忽视不见的方法出场了， toString， 没错，是他，是他，是他，我们可爱的小toString。
 
 
function fn(){
    console.log("a");
}
console.log(fn.toString()) 
// 输出：：
// function fn(){
//    console.log("a");
//}

 
 
大家还有记得 玉伯 的 seajs 吗，其依赖查找，就是借助了toString
 
 
[图片上传失败...(image-e7bba0-1632814967825)]
 
 
我们比内容，绝大情况是没问题了， 除了：
 
 
     
  
  1. 你的函数代码真就一样
     ESLint里面有一个规则，好像是没使用this的方法，是不该写在class里面的。真一样，你应该思考是的代码实现了。
    2.  
  
  2. 内置函数
    3.  
 
 
 
const random = Math.random
console.log("name:", random.name, ",content:", random.toString())
// name: random ,content: function random() { [native code] }

 
 
     
  
  1. 被bind的函数
    2.  
 
 
 
function a(){
    console.log("name:", this.name)
}

var b = a.bind({})
console.log("name:", b.name, ",content:", b.toString())
// name: bound a ,content: function () { [native code] }

 
 
所以我们检查内置函数和bind之后的函数，基本思路就是name和{ [native code] }。
 
 
问题大不，问题挺大，也就是说我们被bind之后的函数无法被比较了，就无法裁定是否是相同的函数了。
 
 
重写bind
 
 
答案就是重写bind，让其返回的函数有属性指向原函数，如果有更好的方式，请务必告诉我。
 
 
function log(this: any) {
    console.log("name:", this.name);
}

var oriBind = Function.prototype.bind;
var SymbolOriBind = Symbol.for("__oriBind__");
Function.prototype.bind = function () {
    var f = oriBind.apply(this as any, arguments as any);
    f[SymbolOriBind] = this;
    return f;
}

const boundLog: any = log.bind({ name: "哈哈" });
console.log(boundLog[SymbolOriBind].toString());

//function log() {
//    console.log("name:", this.name);
//}


 
 
重写bind之后，必然会多了不安定元素， 所以：
 
 
     
  
  1. 也采用WeakRef来引用，减少不安定心理
    2.  
  
  2. 默认不开启重写bind
     基本问题排查差不多了，再开启重写bind选项，仅仅分析被bind之后的事件监听函数。 
    3.  
 
 
 
怎么识别是不是被bind之后的函数，还是上面提到的
 
 
     
  
  1. 函数名, 其名为 bound [原函数名] 
    2.  
  
  2. 函数体， { [native code] } 
    3.  
 
 
 
小结
 
 
基本思路
 
 
     
  
  1.  WeakRef建立和target对象的关联，并不影响其回收
    2.  
  
  2. 重写 EventTarget 和 EventEmitter 两个系列的订阅和取消订阅的相关方法, 收集事件注册信息
    3.  
  
  3. FinalizationRegistry 监听 target回收，并清除相关数据
    4.  
  
  4. 函数比对，除了引用比对，还有内容比对
    5.  
  
  5. 对于bind之后的函数，采用重写bind方法来获取原方法代码内容
    6.  
 
 
 
两个疑虑
 
 
     
  
  1. 兼容性
     是的，只能用在比较新的浏览器上调试。但是，问题不大！ 发现并修复了，低版本大概率也修复了。
    2.  
  
  2. 移动端怎么调试
     可以的，不是本文重点。
    3.  
 
 
 
上面的几个问题分析完毕之后，我们完事具备，只欠东风。
 
 
敬请期待 代码篇
 
 
写在最后
 
 
技术交流群请到 这里来。
 或者添加我的微信 dirge-cloud，带带我，一起学习。
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(【方案篇】事件监听函数的内存泄漏，帮你搞定！不谢！！！)

        

            

                
    
                    
  • 斤斤计较的婚姻到底有多难？
                        白心之岂必有为

                        
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
    
                    
    • 
                    
  • 情绪觉察日记第37天
                        露露_e800

                        
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
    
                    
    • 
                    
  • 芦花鞋一四
                        许叶晗

                        
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
    
                    
    • 
                    
  • QQ群采集助手，精准引流必备神器
                        2401_87347160
其他经验分享
                        
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
    
                    
    • 
                    
  • 关于沟通这件事，项目经理不需要每次都面对面进行
                        流程大师兄

                        
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
    
                    
    • 
                    
  • 机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
    
                    
    • 
                    
  • 铭刻于星（四十二）
                        随风至

                        
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
    
                    
    • 
                    
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说
                        造命者说

                        
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
    
                    
    • 
                    
  • 2020-01-25
                        晴岚85

                        
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
    
                    
    • 
                    
  • 随笔 | 仙一般的灵气
                        海思沧海

                        
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
    
                    
    • 
                    
  • 想家
                        爆米花机

                        
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
    
                    
    • 
                    
  • 【iOS】MVC设计模式
                        Magnetic_h
iosmvc设计模式objective-c学习ui
                        
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
    
                    
    • 
                    
  • OC语言多界面传值五大方式
                        Magnetic_h
iosui学习objective-c开发语言
                        
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
    
                    
    • 
                    
  • 一百九十四章. 自相矛盾
                        巨木擎天

                        
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
    
                    
    • 
                    
  • UI学习——cell的复用和自定义cell
                        Magnetic_h
ui学习
                        
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
    
                    
    • 
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • 10月|愿你的青春不负梦想-读书笔记-01
                        Tracy的小书斋

                        
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
    
                    
    • 
                    
  • C语言宏函数
                        南林yan
C语言c语言
                        
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
                    
    • 
                    
  • 地推话术，如何应对地推过程中家长的拒绝
                        校师学

                        
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
    
                    
    • 
                    
  • 谢谢你们，爱你们！
                        鹿游儿

                        
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
    
                    
    • 
                    
  • C语言如何定义宏函数？
                        小九格物
c语言
                        
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
    
                    
    • 
                    
  • 微服务下功能权限与数据权限的设计与实现
                        nbsaas-boot
微服务java架构
                        
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
    
                    
    • 
                    
  • 理解Gunicorn：Python WSGI服务器的基石
                        范范0825
ipythonlinux运维
                        
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
    
                    
    • 
                    
  • 小丽成长记（四十三）
                        玲玲54321

                        
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
    
                    
    • 
                    
  • 学点心理知识，呵护孩子健康
                        静候花开_7090

                        
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
    
                    
    • 
                    
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹
                        黄错错加油

                        
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
    
                    
    • 
                    
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断
                        尐尐呅

                        
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
    
                    
    • 
                    
  • c++ 的iostream 和 c++的stdio的区别和联系
                        黄卷青灯77
c++算法开发语言iostreamstdio
                        
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
    
                    
    • 
                    
  • 瑶池防线
                        谜影梦蝶

                        
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
    
                    
    • 
                    
  • 爬山后遗症
                        璃绛

                        
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
    
                    
    • 
                                
  • 矩阵求逆（JAVA）初等行变换
                                    qiuwanchi
矩阵求逆（JAVA）
                                    
    package gaodai.matrix;

import gaodai.determinant.DeterminantCalculation;

import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

/**
 * 矩阵求逆(初等行变换)
 * @author 邱万迟
 *
    
                                
    • 
                                
  • JDK timer
                                    antlove
javajdkschedulecodetimer
                                    
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 
2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 
3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
    
                                
    • 
                                
  • JVM调优总结 -Xms -Xmx -Xmn -Xss
                                    coder_xpf
jvm应用服务器
                                    
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 
 
典型设置：   
 
  
   
    java -Xmx
    
                                
    • 
                                
  • JDBC连接数据库
                                    Array_06
jdbc
                                    
    package Util; 
 
import java.sql.Connection; 
import java.sql.DriverManager; 
import java.sql.ResultSet; 
import java.sql.SQLException; 
import java.sql.Statement; 
 
 
public class JDBCUtil { 
 
 //完
    
                                
    • 
                                
  • Unsupported major.minor version 51.0（jdk版本错误）
                                    oloz
java
                                    
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) 
 at org.apache.catalina.loader.WebappClassL
    
                                
    • 
                                
  • 用多个线程处理1个List集合
                                    362217990
多线程threadlist集合
                                    
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 
 
 


import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.CountDownLatch;

public c
    
                                
    • 
                                
  • JSP简单访问数据库
                                    香水浓
sqlmysqljsp
                                    
    学习使用javaBean，代码很烂，仅为留个脚印 
 
 

public class DBHelper {

	private String driverName;
	private String url;
	private String user;
	private String password;
	private Connection connection;
	privat
    
                                
    • 
                                
  • Flex4中使用组件添加柱状图、饼状图等图表
                                    AdyZhang
Flex
                                    
    1.添加一个最简单的柱状图       
?       1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28      
<?xml version= 
"1.0"&n
    
                                
    • 
                                
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面
                                    aijuans
android
                                    
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下： 
     
[html]  
view plain 
copy       
 
 <RelativeLa
    
                                
    • 
                                
  • 查询汇总的sql
                                    baalwolf
sql
                                    
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
    
                                
    • 
                                
  • Linux du命令和df命令区别
                                    BigBird2012
linux
                                    
            1，两者区别      
       du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。 
       
    
                                
    • 
                                
  • AngularJS中的$apply，用还是不用？
                                    bijian1013
JavaScriptAngularJS$apply
                                    
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。 
        但是首先，让我们把$apply转换成一种简化的形式。 
        scope.$apply就像一个懒惰的工人。它需要按照命
    
                                
    • 
                                
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化
                                    bit1129
zookeeper
                                    
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理 
  
ClientCnxn构造方法 
  
&
    
                                
    • 
                                
  • 【Java命令一】jmap
                                    bit1129
Java命令
                                    
    jmap命令的用法： 
  
[hadoop@hadoop sbin]$ jmap
Usage:
    jmap [option] <pid>
        (to connect to running process)
    jmap [option] <executable <core>
        (to connect to a 
    
                                
    • 
                                
  • Apache 服务器安全防护及实战
                                    ronin47

                                    
    此文转自IBM. 
Apache 服务简介 
Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 
由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
    
                                
    • 
                                
  • unity 3d实例化位置出现布置？
                                    brotherlamp
unity教程unityunity资料unity视频unity自学
                                    
    问：unity 3d实例化位置出现布置？ 
答：实例化的同时就可以指定被实例化的物体的位置,即 position   
Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 
这样你不需要再用Transform.Position了, 
  
如果你省略了第二个参数(
    
                                
    • 
                                
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data
                                    bylijinnan
java重构
                                    
    
import java.awt.Color;
import java.awt.Container;
import java.awt.FlowLayout;
import java.awt.Label;
import java.awt.TextField;
import java.awt.event.FocusAdapter;
import java.awt.event.FocusE
    
                                
    • 
                                
  • struts2更改struts.xml配置目录
                                    chiangfai
struts.xml
                                    
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) 
web.xml文件修改如下： 
  
<filter>
<filter-name>struts2</filter-name>
<filter-class&g
    
                                
    • 
                                
  • redis做缓存时的一点优化
                                    chenchao051
redishadooppipeline
                                    
      
      最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。 
      首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
    
                                
    • 
                                
  • mysql导出数据不输出标题行
                                    daizj
mysql数据导出去掉第一行去掉标题
                                    
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 
 
如通过下面命令导出数据： 
mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 
 
结果为： 
 
studentid
    
                                
    • 
                                
  • phpexcel导出excel表简单入门示例
                                    dcj3sjt126com
PHPExcelphpexcel
                                    
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 
<?php 
error_reporting(E_ALL); 
ini_set('display_errors', TRUE); 
ini_set('display_startup_errors', TRUE); 
  
if (PHP_SAPI == 'cli') 
 die('
    
                                
    • 
                                
  • 爱情格言
                                    dcj3sjt126com
格言
                                    
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
    
                                
    • 
                                
  • 转 Activity 详解——Activity文档翻译
                                    e200702084
androidUIsqlite配置管理网络应用
                                    
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
    
                                
    • 
                                
  • win7安装MongoDB服务
                                    geeksun
mongodb
                                    
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads 
  
2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
    
                                
    • 
                                
  • Javascript魔法方法:__defineGetter__,__defineSetter__
                                    hongtoushizi
js
                                    
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 
在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 
例如,在一个图书类中,我们自动为Book加上书名符号: 
function Book(name){  
    
                                
    • 
                                
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应
                                    jinnianshilongnian
cache
                                    
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头：    Content-Type:text/html; charset=gb2312   Date:Mon, 05 Jan 2015 01:58:05 GMT   Expires:Mon , 05 Jan 15 02:03:00 GMT   Last-Modified:Mon, 05
    
                                
    • 
                                
  • 数据源架构模式之行数据入口
                                    home198979
PHP架构行数据入口
                                    
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。 
  
一、概念 
行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。 
  
二、简单实现行数据入口 
为了方便理解，还是先简单实现： 
<?php
/**
 * 行数据入口类
 */
class OrderGateway {
    /*定义元数
    
                                
    • 
                                
  • Linux各个目录的作用及内容
                                    pda158
linux脚本
                                    
    1）根目录“/”   　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 
Windows 
操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。   　　2）/bin   　　/bin   　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 
linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
    
                                
    • 
                                
  • ubuntu12.04上编译openjdk7
                                    ol_beta
HotSpotjvmjdkOpenJDK
                                    
    获取源码  
 从openjdk代码仓库获取(比较慢) 
 
 安装mercurial Mercurial是一个版本管理工具。   sudo apt-get install mercurial    
 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
    
                                
    • 
                                
  • 将数据库字段转换成设计文档所需的字段
                                    vipbooks
设计模式工作正则表达式
                                    
            哈哈，出差这么久终于回来了，回家的感觉真好！ 
        PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
    
                                
    •