代码不多,核心代码 200 行,感兴趣的可以戳这里:Github - broadcastAnimation
代码不多,核心代码 200 行,感兴趣的可以戳这里:Github - broadcastAnimation[1]
浏览器跨标签页通信是指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下,每个标签页都是一个独立的浏览器上下文,它们之间是相互隔离的,无法直接访问对方的数据或进行通信。
跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程。在传统的Web开发中,每个标签页都是相互独立的,无法直接共享数据。然而,有时候我们需要在不同的标签页之间进行数据共享或者实现一些协同操作,这就需要使用跨标签页通信来实现。
没错,还是京东一面的问题,首先问的是浏览器跨标签也通信的方式有什么,我答完浏览器通信通信的方式,后面就接着问 JavaScript 有什么方式的了。
web通信(洋名:web messaging)是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式。
近些年来,跨平台跨端一直是比较热门的话题,Write once, run anywhere一直是开发者所期望的,跨平台方案的优势十分明显。
现在随着个人设备越来越多,越来越需要多个设备之间相互感知和连接,设备和设备之间可以相互联动,形成互联互通的场景,而搭载HarmonyOS的设备恰好可以满足这一点 。下面通过开发一个HarmonyOS的多端分布式表白应用来实现设备之间的相互联动。
当我点击发送消息给标签二的时候,标签二就立刻收到了发送的消息内容,并渲染到页面上,这是现象
同源策略(same-origin policy) 最初是由 Netspace 公司在 1995 年引入浏览器的一种安全策略,现在所有的浏览器都遵守同源策略,它是浏览器安全的基石。
当产品说要把所有移动端(小程序、H5、APP)等 UI 做成一致,又不想投入更多的开发人力。那作为开发,有哪些方案可以用呢?
Vue.js是一个流行的JavaScript框架,它使得构建复杂的交互式应用程序变得更容易。Vue.js基于MVVM模式设计,采用了响应式数据绑定和组件化的架构。在Vue.js中,数据绑定是非常重要的概念,它通过使用观察者模式来追踪数据变化并自动更新DOM。
浏览器跨标签页通信、双向数据传输和实时通信是三种不同的概念和应用场景,它们之间有以下区别:
当下业内的微前端字眼出现的频率比较高,于是大致了解了一下微前端 主要内容包括:什么是微前端?微前端的好处和意义是什么?做微前端应该如何做?
在之前的文章中,我们已经深入剖析了微前端究竟是什么,可以带来什么收益,现在让我们复习一下微前端的概念:
跨端技术的本质是实现代码复用,减少开发者在多平台上的适配工作量,移动互联网发展至今,跨端技术经历了许多阶段,大体上可以分成如下四类:
在上一篇 【悟空活动中台 - 微组件状态管理(上)】中,我们一起回顾了活动页内微组件之间的状态管理和背后的设计思路。从最早的 EventBus 升级迭代到【前置脚本方案】,最终回归到 Vuex 统一状态管理模式,针对平台的特点通过技术创新,使 Vuex 无缝集成到活动页的开发中。本文我们将一起继续探索平台和跨沙箱环境下的微组件状态管理。
跨域问题是由于浏览器的同源策略(Same-Origin Policy)导致的,该策略要求浏览器只能发送同一来源(协议、域名、端口)的请求,而不能发送跨域请求。解决跨域问题的方法有多种,以下是一些常见的方法:
iframe_contentWindow.postMessage(message, targetOrigin, [transfer]);
导语:个人对于Vuex一点浅显的认识 vuex 作为 vue 生态中用于状态管理的一种模式,已被广泛应用于 vue 单页应用开发中。下面谈谈自己对 vuex 的一些个人见解以及在实际项目中的应用场景。 vuex 的几个核心概念 Store:Vuex 使用一个 Store 对象管理应用的状态,一个 Store 包括 State, Getter, Mutation, Action 四个属性。 State:State 意为“状态”,是 vuex 状态管理的数据源。 Getter:Getter 的作用与 filte
早期H5和Hybrid方案的本质是,利用客户端App的内置浏览器(也就是webview)功能,通过开发前端的H5页面满足跨平台需求。比如PhoneGap cordova ionic ……
现在的网站开发,都绕不开微信登录(毕竟微信已经成为国民工具)。虽然文档已经写得很详细,但是对于没有经验的开发者还是容易踩坑。
在这篇博客中,我们将深入探讨Vue组件通信的原理,并探索不同的应用场景。组件通信在Vue.js开发中是一个关键的概念,它涉及到组件之间的数据传递和交互。通过理解Vue组件通信的原理和灵活运用,我们可以更好地设计和组织Vue.js应用,提高开发效率和代码质量。
本文将介绍前端如何封装一款 js-sdk 以及如何快速将你的应用变成 js-sdk , 我们将总结一些封装 js-sdk 的原则和案例, 来帮大家更快的上手 sdk 开发. 其中笔者还会以H5-Dooring 为例子, 介绍如何将 H5 页面编辑器封装成一个 js-sdk 供他人使用.
在前端学习里面,很多人都是注重学习代码(html,css,js)。或者是一些框架,库(jquery,vue,react),或者是各种工具(webpack,gulp)。在以往的文章里面,或者自己和别人交谈,都有建议过别人多练,不要闷头就写代码,多深入了解当中的原理,学习其中的思想。但是除了代码方面的知识之外,还有哪一些是作为一个前端,应该扩展学习的呢?下面简单罗列和整理了一下最近学习的资源。如果大家还有其它的推荐,欢迎在评论区留言。
据相关数据显示,截至2017年底,中国手机新闻客户端用户规模达到6.36亿人,移动App已经成为新闻和内容传播的最重要途径之一。而伴随着行业的竞争和发展,App中的 内容页 在提升App品质、提升使用时长及提升用户黏性等方面,扮演着更为重要的角色,同时也面临着更大的挑战。
Tech 导读 本文主要针对常用跨端技术Flutter、ReactNative、Weex、H5,从技术特点、基本架构、编译原理、基本渲染流程等进行梳理分析;以及一些常见性能问题如何优化解决,然后如何进行技术选型或在进行业务开发时选择不同技术栈的逻辑是什么。 01 背景 在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了! 随着技术的发展,产生了越来越多的端,如Android、iOS、M
vue-router 有 3 种路由模式:hash、history、abstract,对应的源码如下所示
刚开始撸小程序的时候,觉得看看文档就可以了,导致写了很多垃圾代码坑人坑己,相信大部分初学者也不会去仔细研究文档,更别说啰里啰嗦的指南了,在通读小程序官方指南后,很有必要总结一番。清楚了生命周期和数据通信,就能对整个程序有一定的把控能力,定位问题和解决问题的能力将大幅提高。
在chrome[1]插件开发中我们知道,background.js是独立于浏览器的,在background.js中主要负责popup与content.js的交互,在某些时候,也许你需要在一个插件的设置页与content进行实时通信,此时你能想到什么样的方式吗?本文是在插件业务通信总结的一篇笔记,希望看完能在实际业务中带来思考和帮助
本篇文章探讨“基于 Webview,如何在 App 内实现带离线包能力的 H5”。在当下这个主题似乎有些过时,但 H5 技术以其良好的跨端一致性,长期来看会占据一席之地,希望整理一个较完整的方案,从基本的实现原理到业务具体应用,让不了解的同学对“离线 H5"有一个较完整的视角。
协议、域名 和 端口 都相同的两个 URL 同源,默认可以相互访问资源和操作 DOM,两个不同源之间通过安全策略制约隔离 DOM、页面数据和网络通信来保障隐私和数据安全。
在谈论数据库架构和数据库优化的时候,我们经常会听到“分库分表”、“分片”、“Sharding”…这样的关键词。让人感到高兴的是,这些朋友所服务的公司业务量正在(或者即将面临)高速增长,技术方面也面临着一些挑战。让人感到担忧的是,他们系统真的就需要“分库分表”了吗?“分库分表”有那么容易实践吗?为此,笔者整理了分库分表中可能遇到的一些问题,并结合以往经验介绍了对应的解决思路和建议。
最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用。各个子应用可以独立运行、独立开发和独立部署。
Hippy 是腾讯开源的跨端框架,在腾讯内部业务场景中有广泛应用。腾讯视频搜索业务基于 Hippy 2.0 框架开发,在使用过程中发现了一些不便利的地方:动画渲染双端不一致问题;对图片和样式的处理双端不一致现象;没有可用的横滑组件/双列流组件等等。Hippy 3.0 框架从底层实现逻辑进行重新构建,实现了 iOS 端和安卓端双端统一化,标准化和流程的一致性。升级 Hippy 3.0 框架后,开发双端不兼容问题大大减少,开发效率提升,搜索首页实现秒开。读完全文还可以参加惊喜活动抽奖哦!
这是我们比较熟悉的方式,主要是父子组件之间的传递方式,父传子使用props,子传父使用$emit.
XSS 攻击指的是跨站脚本攻击,是一种代码注入攻击。攻击者通过在网站注入恶意脚本,使之在用户的浏览器上运行,从而盗取用户的信息如 cookie 等。
在跨端技术高速演进的背景下,字节跳动自研了 Lynx 高性能跨端解决方案,它是一个在保持业务开发高效性上,利用极致的优化手段解决页面展示、交互性能问题,并拓展和满足更多跨平台框架的使用场景,期望实现真正的“跨平台”的高性能跨端框架。目前,Lynx 已经在包含抖音、头条、火山、西瓜在内的 10 多个字节内部 App,数十条产品线中落地,场景涵盖了卡片模式、半屏页等场景、页面模式、独立 App 等。
这样一来 this.title 就直接拿到从父组件中传过来的 title 的值了。注意,你不应该在子组件内部直接改变 prop,这里就不多赘述,可以直接看官网介绍。
这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。
在使用react过程中,不可避免的需要组件间的数据通信,数据通信一般情况有一下几种情况:
如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员,那你一定知道现在最火的前端框架之一Vue.js。它相比于React与Angular上手更加容易,或许这也是很多初学者选择vue的原因之一。
我们看到很多招聘上都写着掌握vue开发项目,那么面试都会问什么呢?别急,下面是我给大家整理了一份比较全面的Vue面试高频考题解析小册,看完一定收获满满。
JDFlutter 是商城共享技术部-多端融合技术部推出的新一代跨平台开发框架,可快速集成至现有 Android/iOS 工程,开发者可借助 JDFlutter 平台快速完成 Flutter 业务开发。JDFlutter 平台提供了大多数京东样式 UI 组件库以及丰富的原生 API,可满足复杂业务需求。未来 JDFlutter 会和 JDReact 一起构成京东 ARES 跨端应用开发平台的双引擎!
官方解释:Vue.extend 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
在这篇文章中,我们将挑选一些Liferay DXP的新功能,并对它们进行详细的探讨。
为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。
领取专属 10元无门槛券
手把手带您无忧上云