浏览器会内置类react框架

更新日期: 2019-04-10 阅读: 2.6k 标签: 浏览器

dom操作

从Prototype.js到风靡全球的jquery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的api,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了,像Github就宣布了弃用jQuery.js,直接使用浏览器提供的DOM操作更新界面。

尽管浏览器提供的DOM操作API有时候看上去比较啰嗦,但是只要所有浏览器实现一致,前端就不需再使用一层封装来间接操作DOM,只需要学习标准化的API即可


网络请求

从IE的ActiveXObject到XMLHttpRequest Level1再到XMLHttpRequest Level2,然后fetch出现一统网络请求。

在我们平常的开发中,可以直接使用fetch进行请求,无需再引入其它的网络请求库。不过目前fetch提供的API不够丰富,可能在使用时还要简单封装


模块化

从最早的对象模块命名空间,到amd,cmd等模块化工具require.js,sea.js等,再到es module,目前chrome中已经可以直接使用,并且动态的import也已经支持,从此可以告别那些第三方的模块加载器,学习并使用标准的es module即可


功能点

比如以往我们要实现平滑滚动,我们要用setTimeout或setInterval先实现一下基础的动画引擎,然后再实现一下相应的tween缓动算法,然后再应用到我们的滚动上。现在浏览器已经支持通过css给要滚动的节点添加scroll-behavior: smooth,然后再操作相应的scrollTop或scrollLeft即可实现相应的平滑滚动,省去了原来大量的代码或引用第三方类库的事情

再比如某个节点滚动到或即将滚动到可视区域做一些事情(像瀑布流等),以往像平滑滚动一样,我们要监听滚动事件,我们要计算节点的位置信息等一大堆事情要做,现在有IntersectionObserver,我们完成类似的功能只需要几行代码即可

对于图片多的网站,前端经常使用的图片懒加载,现在也有了原生支持,给图片加上<img loading="lazy"/>即可,不但省去了大量的javascript,也提升了易用性


web components

通过前面的一些基础点,我们可以看到浏览器越来越多的把一些常用功能内置进去,可以预见未来也会更多的把常用功能内置进去。

内置的功能不但方便开发人员,同时在内存管理上,性能上,资源使用上都要远远优于javascript的实现

长远看,现在前端开发的模式:界面管理+数据管理=应用。界面管理也很有可能被内置到浏览器里,简单理解就是把页面组件化的功能内置进去,比如内置一个react。开发人员只需要管理好自己的业务数据即可。

目前这个内置的界面管理浏览器提供的是web components,但是它在使用起来仍然不够方便,不过随着时间的发展,也许一年半载之后浏览器发力web compoents,把它打造的更顺手易用也说不定。


浏览器的未来

从前面的一些例子我们可以看到,浏览器也在不断的吸收好的开发思路和方式,同时开放更基础,更易用的API给到开发人员,这是一个互相辅助的过程。

一但某些库或框架成为事实上的标准,那为什么不推进它把它写进标准,然后让浏览器实现呢?比如jQuery.js就是成功的案例,比如图片懒加载也是很好的说明,也许浏览器会很快内置lodash呢?

如果浏览器没能发展好web components,如果react发展成熟稳定,浏览器或许就直接内置了,让我们只关注业务即可。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/2797

相关推荐

浏览器禁用了javascript,各种浏览器如何开启javascript的方法总汇

您的浏览器禁用了JS脚本运行,请启用该功能。怎么解除浏览器禁用js?这篇文章将总结整理各个浏览器如何开启、禁用javascript的方法总汇。

监听浏览器刷新及关闭

为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。

Js实现阻止浏览器返回的功能

无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回

window.open被拦截的解决方法总汇

介绍window.open方法被浏览器拦截的处理方式。在 Chrome 的安全机制里,非用户直接触发的 window.open 方法,是会被拦截的,这是由于浏览器为了维护用户安全和体验,下面采用几种变通方法解决:表单提交的方式、onclick事件、延迟打开等

Chrome浏览器crx格式插件安装教程

谷歌浏览器在旧版本(大概是v67版本)之前安装crx插件都非常简单,直接将crx拖放到浏览器内就可以安装了。但是之后的新版本(目前已经升级到v80版本)就只允许用户通过谷歌应用商店安装插件

如何将网站设置为浏览器首页

提示:按 Ctrl + D 即可添加网址到浏览器收藏夹中,方便下次访问fly63导航。下面是如何设置首页的方法。Google Chrome浏览器设为首页的方法;Firefox火狐浏览器设为首页的方法

完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题

h5活动页面底部有个悬浮图片按钮,使用fixed悬浮定位在底部,但是在安卓端的百度浏览器下打开,却发现该图片一闪而过,在百度浏览器中消失不见。

Fiddler无法正常抓取谷歌等浏览器的请求_解决方案

fiddler会自动给浏览器设置一个代理127.0.0.1端口8888,并且记忆浏览器的代理设置,所有的请求先走fiddler代理,再走浏览器代理。解决方案:关闭SwitchyOmega代理,或者使用其代理中的系统代理选项。即可解决问题。

js判断浏览器内核是否是safari浏览器

PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有Chrome字段。

Vue单页面应用阻止浏览器记住密码

现象1:路由切换时再次提示是否记住密码,解决办法:这其实是个代码bug,在登录页面,用form把输入框都包起来就行了。现象2:autocomplete=off无效

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!