草庐IT

vue虚拟dom和diff算法

全部标签

javascript - 是否可以在不将视频文件添加到 DOM 的情况下预加载和缓存视频文件?

我正在开发一款游戏,该游戏涉及根据您获得的结果触发30个小视频文件中的一个。由于视频需要在用户交互后立即播放,理想情况下我希望预加载视频并准备就绪。我已经添加了PreloadJS,排队了我需要的所有Assets。查看检查器中的“网络”选项卡,我可以看到加载屏幕上正在传输所有20mb的视频。但是,当需要播放剪辑时,似乎是重新下载它们而不是从内存中播放它们......我认为一旦文件被下载,它们就会留在浏览器缓存中,一旦我尝试加载具有相同src的文件,它就会从下载资源池中提取它,但这不是'好像不是这样的……知道如何在不向页面添加30个视频播放器的情况下将下载的文件保存在内存中吗?谢谢!蒙古包

javascript - 从 Vue.js 中的父组件执行子方法

目前,我有一个Vue.js组件,其中包含其他组件的列表。我知道使用vue的常见方式是将数据传递给child,并从child向parent发送事件。但是,在这种情况下,我想在单击父中的按钮时在子组件中执行一个方法。哪种方法最好? 最佳答案 一个建议的方法是使用globaleventhub.这允许有权访问集线器的任何组件之间进行通信。这是一个示例,展示了如何使用事件中心来触发子组件上的方法。vareventHub=newVue();Vue.component('child-component',{template:"The'clicke

JavaScript : Fastest way to insert DOM element in sort order

所以我有几个(~30)个返回数据的异步调用(每个调用~25条记录),我想按特定顺序显示这些数据。目前,页面等待所有内容加载,对单个内部数组进行排序,然后添加DOM元素(每个数据项都应用于HTML模板/字符串,该模板/字符串被有效地连接并添加一次到父元素的innerHTML).我希望将数据插入每个数据集(当它返回时)...但这意味着我需要一种不同的方式来处理排序/排序。我考虑过的方法:理想情况下,将DOM镜像到某种B树中,这样INSERT操作就可以遍历树,寻找正确的元素插入之前/插入之后...因为我还没有看到任何库来解决这种需要,看来我最终会写一些代码。相对而言,手动迭代DOM以寻找要插

javascript - 使用 AVA 和 Avoriaz 在 Vue.js 中测试计算属性

我正在尝试使用AVA和Avoriaz测试Vue.js组件的计算属性。我可以挂载组件并正常访问数据属性。当我尝试访问计算属性时,该函数似乎没有该组件上数据的作用域。computed:{canAdd(){returnthis.crew.firstName!==''&&this.crew.lastName!=='';}我得到的错误是Error:Cannotreadproperty'firstName'ofundefined测试文件:importVuefrom'vue';import{mount}from'avoriaz';importtestfrom'ava';importnextTickf

javascript - Vue - webpack vue-loader 配置

每当我想构建一个文件时,我总是收到错误。这是什么原因呢?似乎.vue文件无法被webpack识别,但webpack配置文件看起来正常。网络包错误bundle-app.js189kB1[emitted]app+12hiddenmodulesERRORinUnexpectedtoken>@./app/application.js7:11-31webpack.config.jsvarpath=require("path");module.exports={context:path.join(__dirname,'src'),entry:{app:'./app/application.js'}

Javascript DOM 对象图

我一直在寻找一个好的DOM对象图供javascript使用。我知道搜索javascriptDOMobjectdiagram会给出很多这样的图,比如这个看起来很清楚的图:你们中有人有更完整的DOM和javascript关系吗? 最佳答案 给定DOM树的一小部分:|+--|||+...|+--#text|+--|+...即使您只保留属性(没有方法)并且只保留那些指向Node的属性(没有属性、样式、没有文本或数字属性),排除特定于HTML的API(例如那些在你的图表上的)并省略一些属性,你仍然会得到一个复杂的图表(请原谅我糟糕的graph

javascript - 获取 touchmove 或 touchend 结束的当前 DOM 对象

正如Mozilla在TouchEvent上所说的那样页:Theevent'stargetisthesameelementthatreceivedthetouchstarteventcorrespondingtothetouchpoint,evenifthetouchpointhasmovedoutsidethatelement.这与mousemove和mouseup不同,后者的目标实际上是鼠标悬停的DOM元素。在不使用任何库的情况下获取发生我的touchmove或touchend事件的元素的最佳方法是什么? 最佳答案 从事件对象中读

javascript - 如何使用 DOM 方法可靠地对数组进行子排序?

预先注意:我在这里没有使用jQuery或其他库,因为我想了解我写的内容以及它为什么有效(或无效),所以请不要用库或库插件来回答这个问题。我并不反对库,但对于这个项目而言,它们不利于我的编程目标。也就是说……在http://meyerweb.com/eric/css/colors/我使用自己编写的DOM函数添加了一些列排序。问题是,虽然它非常适合按字母顺序排列字符串的简单情况,但当我尝试对多个数字项进行排序时,浏览器之间的结果不一致——实际上,当我尝试对两个子排序进行排序时。例如,如果您在OSX上的Safari或Firefox中单击“DecimalRGB”几次,您将获得我想要的结果。在C

javascript - 防止 DOM XSS

我们最近加入了其他人的代码,该代码已经针对DOMXSS攻击进行了测试但未通过。基本上url片段被直接传递到jQuery选择器并使JavaScript能够被注入(inject),就像这样:"http://website.com/#%3Cimg%20src=x%20onerror=alert%28/XSSed/%29%3E)"$(".selector[thing="+window.location.hash.substr(1)+"]");问题是这种情况在他们的整个脚本中都会发生,并且需要大量的回归测试来修复,例如如果我们对数据进行转义,if语句将不再返回true,因为数据将不匹配。有问题的

javascript - 如何使用虚拟 DOM 在 React/Javascript 中重新加载输入值?

我在重新加载输入值时遇到问题。然后我用this.props.handlingAgent.email="asd"在调试器中this.props.handlingAgent.email的值实际上是asd,但在输入中仍然是旧值。如何在没有JQuery的情况下刷新该值?它不应该自动刷新吗? 最佳答案 首先,Prop是传递给您的东西。将它们视为函数参数。child真的不应该去修改它们,因为它打破了parent的任何假设并使您的UI不一致。在这里,由于prop已传递给您,您希望从父级获取一个处理程序,您可以调用该处理程序来通知您的更改:varA