变化侦测就是侦测数据的变化,当数据发生变化的时候,所依赖这个数据的地方需要执行对应的动作,可能是执行一个函数,也可能是更新视图(也是执行render函数)。
什么是变化侦测
变化侦测在前端三个框架中均有所涉及。变化侦测可以分为两种类型:一种是推,一种是拉。
在Angular和React中的变化侦测属于拉,但某个状态发生变化后,程序不知道具体是哪个状态发生了变化,只知道存在变化,然后会发送一个信号给框架,框架收到信号后,会采用暴力比对的方式找出那些DOM节点需要更新。这在Angular是脏值检查,在React中使用虚拟DOM。
在Vue中,采用的是推。当状态发送变化时,能知道是那个状态发生了变化,并推送给对应的依赖于这个状态的地方
如何跟踪变化
Vue2中采用的是Object.defineProperty, Vue3中采用的是Proxy。本文主要对前者进行介绍。
Object的变化侦测
Array的变化侦测
变化侦测相关的API实现原理
设计模式
未读设计模式介绍
设计模式是软件开发的基本组成部分,因为它们为软件设计中经常出现的问题提供了典型的解决方案。设计模式并不提供具体的软件部分,而是作为概念存在,用以优化处理反复出现的主题。
在过去几年中,Web开发生态系统迅速变化。一些众所周知的设计模式可能不再像以前那样有价值,而其他模式已经发展,以解决最新技术中的现代问题。
Facebook的JavaScript库React在过去5年中获得了巨大的关注,并且目前是NPM上下载频率最高的框架,相比于Angular、Vue、Ember和Svelte等其他JavaScript库。由于React的流行,设计模式已经被修改、优化,并且创造了新的模式,以在当前的现代Web开发生态系统中提供价值。React的最新版本引入了一个名为Hooks的新功能,这在您的应用程序设计中起着非常重要的作用,并且可以替代许多传统设计模式。
现代Web开发涉及许多不同种类的模式。这个项目涵盖了使用ES2015+、React特定设计模式及其可能的修改和使用React Hooks实现的常见设计模式的实现、优点和缺陷,以及许多其他模式和优化,这些都可以帮助改进您的现代Web应用 ...
Echart多Geo缩放拖曳。有两层地图,一层用于作为背景,一层用于显示,实现阴影的效果。实现鼠标同步缩放拖动两层地图
Echart多Geo下实现缩放拖曳
需求
有两层地图,一层用于作为背景,一层用于显示,实现阴影的效果。
实现鼠标缩放拖动地图
分析
Echarts geo 具有roam属性,设置为true可以实现geo的缩放及拖曳。
但因为两个geo重叠,在上层地图上进行操作的时候,只影响上层,下层的背景层不动,会造成错位。
可以考虑监听上层的缩放及位置属性,将其赋值给下层,从而实现下层跟随运动
方案
多个GEO
12345678910111213141516171819202122232425262728293031323334353637383940414243geo: [{ zlevel:2, //geo显示级别,默认是0 map: 'china',//地图名 type: 'map', roam: true,//设置为false,不启动roam就无所谓缩放拖曳同步了 zoom: 1.2,//缩放 ...
前端跨域方案 待完善
9种跨域解决方案
1. JSONP跨域
jsonp的原理就是利用标签没有跨域限制,通过标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。
123456789 <script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数 script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback'; document.head.appendChild(script); // 回调执行函数 ...
一、什么是跨域?
首先声明一点,跨域是浏览器拦截的行为,请求已经发送到后端,后端返回的响应数据被浏览器拦截住了,这就是跨域的流程。
在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。
什么是同源策略?
同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送
二、常见的跨域场景
URL
说明
是否允许通信
http://www.domain.com/a.js http://www.domain.com/b.js
同一域名,不同文件或路径
允许
http://www.domain.com:8000/a.js http://www.domain.com/b.js
同一域名, ...
git rebase 和 git merge 的区别
Description
git rebase 和 git merge 一样都是用于从一个分支获取并且合并到当前分支,但是他们采取不同的工作方式,以下面的一个工作场景说明其区别
场景:
如图所示:你在一个feature分支进行新特性的开发,与此同时,master 分支的也有新的提交。
为了将master 上新的提交合并到你的feature分支上,你有两种选择:merging or rebasing
merge
执行以下命令:
12git checkout featuregit merge master
或者执行更简单的:
1git merge master feature
那么此时在feature上git 自动会产生一个新的commit(merge commit)
look like this:
marge 特点:自动创建一个新的commit
如果合并的时候遇到冲突,仅需要修改后重新commit
优点:记录了真实的commit情况,包括每个分支的详情
缺点:因为每次merge会自动产生一个merge commit,所以在使用一 ...
默认路由(IndexRoute)与 IndexLink
默认路由(IndexRoute)
在解释 默认路由(IndexRoute) 的用例之前,我们来设想一下,一个不使用默认路由的路由配置是什么样的:
123456<Router> <Route path="/" component={App}> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route></Router>
当用户访问 / 时, App 组件被渲染,但组件内的子元素却没有, App 内部的 this.props.children 为 undefined 。 你可以简单地使用 {this.props.children ||} 来渲染一些默认的 UI 组 ...
W3C 标准中有如下规定:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单
Form表单 回车(Enter)提交表单问题
W3C 标准中有如下规定:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单
在Form表单中input会自动响应回车事件。这是表单的默认提交动作。
表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单 ...