【问题标题】:Closing Adobe's Creative Cloud Web SDK Properly正确关闭 Adob​​e 的 Creative Cloud Web SDK
【发布时间】:2015-12-23 19:52:25
【问题描述】:

我们使用 Creative Cloud Web SDK 和 AngularJS 创建了一个单页应用程序。现在我们遇到了一个问题,即使在编辑器被删除并且状态/视图(我们正在使用 UI-Router)已经更改后,对编辑器元素的引用似乎仍然存在于页面中。如果应用程序随后重新启动编辑器,它会创建新的 DOM 对象和事件侦听器。编辑器中内置的 .close() 函数似乎只是隐藏了编辑器,实际上并没有将其删除。

有没有办法正确关闭编辑器,以便可以在同一页面上安全地重新启动它,而不会由于 DOM 对象数量的增加而导致内存泄漏?

也许将编辑器的元素保留在页面上,但不管发生的其他事情如何都隐藏起来?这样它就不应该在每次需要启动时都创建一个新的编辑器。

感谢您的宝贵时间。

【问题讨论】:

    标签: angularjs aviary image-editor adobecreativesdk creative-cloud


    【解决方案1】:

    图像编辑器不应该在每次启动时创建新的 DOM 元素,因此我们可能需要查看一些代码才能弄清楚在这种情况下发生了什么。

    示例代码库

    我有一个simple demo repo using Angular, UI Router, and the Creative SDK Image Editor

    除了自述文件中的步骤之外,您还需要转到 server/index.html 并取消注释 <navbar> 指令。

    用户界面

    当您运行应用程序时,您会看到以下内容(图片下方的说明):

    注意:在这种情况下,导航栏本身与预期的演示无关,但将演示 UI 路由器和图像编辑器共存。

    导航栏中的链接是 UI 路由器状态(ui-sref=homeui-sref=modules)。

    “编辑图像”按钮启动 Creative SDK 的图像编辑器。您可以在 /client/pre-build/home/ 中找到此代码。

    DOM

    图像编辑器包含在 id 为 avpw_holder 的 div 中。

    以下是您将在 Chrome Devtools 中看到的关于此 repo 的 home 状态的内容:

    <html lang="en">
    <head></head>
    
    <body ng-app="Meaniscule" class="ng-scope">
        <navbar>...</navbar> 
        <!-- uiView:  -->
        <div ui-view="" class="container ng-scope">...</div>
        <div id="avpw_holder">...</div>
    </body>
    </html>
    

    启动和关闭图像编辑器将切换一些处理图像编辑器可见性的类,但不会在 DOM 中创建图像编辑器的新实例。

    即使你切换状态也是如此:

    【讨论】:

    • 奇怪,当我们使用 UI-router 时,它会完全删除视图的所有元素,因此我们每次都需要重新启动。我们实际上已经移除了 Angular 并实现了我们自己的轻量级状态/页面控制,它似乎已经解决了问题,同时减少了加载时间。感谢您的回复!
    • 很高兴听到您找到了解决方案!
    猜你喜欢
    • 2016-09-08
    • 1970-01-01
    • 1970-01-01
    • 2018-01-20
    • 2015-11-05
    • 1970-01-01
    • 1970-01-01
    • 2017-04-30
    • 2015-03-31
    相关资源
    最近更新 更多