浏览器会内置类react框架

时间: 2019-04-10阅读: 165标签: 浏览器

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发展成熟稳定,浏览器或许就直接内置了,让我们只关注业务即可。


监听浏览器刷新及关闭

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

简洁明了探索浏览器Event loop

前段时间我对于浏览器Event loop中的MacroTask和MicroTask哪个先执行有所困惑,苦于搜索也没有发现很明确的答案,于是决定深入探索浏览器Event loop,现有所愚见,想与大家分享

微软新 Edge 有时会假扮成不同浏览器

Chromium 版 Microsoft Edge 近日被发现会根据所访问的站点模拟其他浏览器。这可能是出于兼容性原因。随着新版 Edge 的发布,微软现在使用 Chromium Blink 引擎而不是原始的 EdgeHTML 引擎。

解决v-lazy-image在qq浏览器x5内核下无效

在安卓qq浏览器中,v-lazy-image始终无法显示。经调试,发现qq浏览器中IntersectionObserver缺少一个isIntersecting字段,而v-lazy-image插件是根据isIntersecting来显示图片的

js通过window.navigator获取平台信息

获取浏览器信息需要使用navigator.userAgent 对象 根据获取到的内容判断浏览器信息navigator.userAgent。IE11浏览器 已经不能用msic 来判断是否是IE11了

Google阻止我写Web浏览器?

Metastream 创始人 Samuel Maddock 在其博客中称:“过去的两年中,我一直致力于一个网页浏览器的开发,却被谷歌阻止。开源浏览器 Chrome 的创建者竟不允许将数字版权授予开源项目。

禁止(防止)浏览器自动填充密码

由于设置autocomplete属性和添加隐藏文本框,以及在初始化时阻止写入等方法都无法完全满足需求,所以只能通过js逻辑来控制。 其中提示相关的代码使用的是layui的layer模块,可以换成自己想用的东西

总结整理HTML5浏览器支持情况总结整理HTML5浏览器支持情况

HTML5浏览器支持情况:现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等,通过对这些主流web浏览器的发展策略调查,发现它们都支持HTML5上采取了措施。

js监听浏览器后退事件

如果在浏览器执行了回退操作,则会触发页面弹出“不可回退”弹框,当然这里可以进行你所需要的不同的处理; 代码如下:

浏览器将标签转成 DOM 的过程

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全