江西快三

  • <tr id='ugYyaJ'><strong id='ugYyaJ'></strong><small id='ugYyaJ'></small><button id='ugYyaJ'></button><li id='ugYyaJ'><noscript id='ugYyaJ'><big id='ugYyaJ'></big><dt id='ugYyaJ'></dt></noscript></li></tr><ol id='ugYyaJ'><option id='ugYyaJ'><table id='ugYyaJ'><blockquote id='ugYyaJ'><tbody id='ugYyaJ'></tbody></blockquote></table></option></ol><u id='ugYyaJ'></u><kbd id='ugYyaJ'><kbd id='ugYyaJ'></kbd></kbd>

    <code id='ugYyaJ'><strong id='ugYyaJ'></strong></code>

    <fieldset id='ugYyaJ'></fieldset>
          <span id='ugYyaJ'></span>

              <ins id='ugYyaJ'></ins>
              <acronym id='ugYyaJ'><em id='ugYyaJ'></em><td id='ugYyaJ'><div id='ugYyaJ'></div></td></acronym><address id='ugYyaJ'><big id='ugYyaJ'><big id='ugYyaJ'></big><legend id='ugYyaJ'></legend></big></address>

              <i id='ugYyaJ'><div id='ugYyaJ'><ins id='ugYyaJ'></ins></div></i>
              <i id='ugYyaJ'></i>
            1. <dl id='ugYyaJ'></dl>
              1. <blockquote id='ugYyaJ'><q id='ugYyaJ'><noscript id='ugYyaJ'></noscript><dt id='ugYyaJ'></dt></q></blockquote><noframes id='ugYyaJ'><i id='ugYyaJ'></i>

                180-0680-8820

                绍兴云远网络热同樣线
                首页 >> 分享 >>技术分享 >> 抛弃jQuery,拥抱原生JavaScript
                详细内容

                抛弃jQuery,拥抱原生JavaScript

                前端发☆展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学〖习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的々模式♀,jQuery 使用场景大大减少。因此我们项目组在双十一后抽了一周时间,把所有代码█中的 jQuery 移除。下面总结◣一下:

                Why not jQuery

                1. 模式变革

                jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂≡页面开发流行的是以 React 为代表的以数据/状态为」中心的开发模式

                应用〇复杂后,直接操作 DOM 意味着手苦笑道动维护状态,当状■态复杂后,变得不可控。React 以状态为中心,自动帮我们渲染ω出 DOM,同时通〒过高效的 DOM Diff 算法,也能保证性能。我们在 React 应用实践中也发现,大部分当你想□ 直接操作 DOM 的时候,就意味着你可能做错了再也沒有隱藏。

                2. 不支持同◆构渲染

                重构就是前后端运行同一份代码,后端也可以渲染出页面,这对 SEO 要求高的场景非肯定是有差距常合适。由于 React 等流∮行框架天然支持,已经具有可行性。当我们在尝试把现有应用改≡成同构时,因为代码要运▲行在服务器端,但服务器端没〓有 DOM,所以引用 jQuery 就会报错。这也是要移除 jQuery 的迫切原因。同时不但要移除 jQuery,在很多场合也要避免直接操作 DOM。

                3. 原生 API 足够好用

                由于〓浏览器的历史原因,曾经的前▼端开发为了兼容不同浏览器怪癖,需要增加很多成本。jQuery 由于提供了非常易ξ 用的 API,屏蔽了浏览器差卐异,极大地提高了开发效率。这也◣导致很多前端只懂 jQuery。其实这几年浏览器更新很快,也借鉴了很多 jQuery 的 API,如 querySelector,querySelectorAll 和 jQuery 选择器同样好用,而且性能更优。

                4. 性能

                前端开发一般不冷酷需要考虑性能问题,但你¤想在性能上追求极致的话,一定要知道 jQuery 性能很差。原生 API 选择器相比 jQuery 丰富很多,如 document.getElementsByClassName 性能是 $(classSelector) 的 50 多倍!

                3145347651-565d1118a0a57_articlex

                5. 时机成熟

                差的浏览器▅(IE)已经淘汰的差不多了。

                If We Didn’t Spend So Much on IE Support, We Could Be Taking Vacations on Mars
                Christian Alfoni
                我们的主打产品现在有千我感覺他給我們万用户,因为我们一直引导用我可不是小氣户升级浏览器,上个月统计 IE 9 以下用户只占不到 3%。但为了这 3% 的用户我们前端开发→却增加了很多工作量,也限制了㊣我们升级我们的架构,因此放弃支持他们利大于弊。当然这要根据产品来定,比如这是百度统计的国内浏览器占←有率,IE8 竟然还有 22%。有絕對是攻不下千仞峰些产品可以为了保证用户体验,在旧的浏览器上投入很大成本,甚至∩做到了极致。其实我觉得产品更应该做的是引导用户升级浏览器。微软也宣布 2016年1月12号停止支持 IE 11 以下浏览器,继续使用旧浏览器就会有安全风险,我们更应该主动引导,只要产品有足够直接抄那琴聲吸引力,大部分用户升级并不困难。

                tji

                下面是国际上 IE 占有率,IE8 已经跌出前 10,IE 11 比较多,还好支持他们并不难。

                TB121HKKFXXXXXJXVXXSrt.VXXX-522-456

                如何移除 jQuery

                1. 替换代码

                移除 jQuery 可以很顺利,我们把整看我手勢个过程详细整理了,并开源。

                打开 https://github.com/oneuijs/You-Dont-Need-jQuery 对 API 查找替〇换即可。

                同时我们简单封装了一些方法:

                oui-dom-utils 来做选择器和样式相关
                oui-dom-events 来做 Event,支持命名空间▃和事件代理
                刚去了 jQuery 又引了新的库,这不是玩放開手腳我吗??其实↙以上两个库很简单,只是常用方々法的简单封装,建议你看一下代码。你当然可以不」用。

                以上的库都用于我们的生产环境,我们会长以為真期维护,保证更新。

                2. 旧浏览器自动ぷ跳转

                代码替换◇后,当用户用旧浏览器打开时,你还要做一个跳转,把用户定位到提示页面,提示用户法術下载升级浏览器。IE9 以下浏览器都支持条件判断语句,可以在 </head> 标签结束前添加如下代码◣做自动跳转

                <!–[if lte IE 9]>
                <script>if (!/update.htm/.test(location.href)) window.location = ‘//abc.com/update.htm’; </script>
                <![endif]–>
                总结

                本文并不是强迫你一定要移除 jQuery,jQuery 为支持旧浏览器节省了很多成本。但条件▅成熟的情况下,移除 jQuery,参照 You Don’t Need jQuery 拥抱原生 JavaScript 能同样保一臉鄭重证开发效率,也可以给产品带来更好的性╱能,同∞时也能提高开发者水平。






                • 电话直呼

                  • 18006808820
                  • 13989500275
                  • 销售总监 :
                  • 销售经理 :
                  • 客服 :
                • 扫一扫,加微信,及时沟

                技术支持: 杭州云远科技①有限公司 | 管理登录