技术控

    今日:8| 主题:49136
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Quick Tip: Use Bootstrap Components without jQuery

[复制链接]
女王范 发表于 前天 16:50
36 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
This article was peer reviewed by Joan Yin . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!
     More from this author

   
       
  • Native Infinite Scrolling with the IntersectionObserver API   
  • How to Implement Smooth Scrolling in Vanilla JavaScript   
     Do you use Bootstrap’s JavaScript components ? Do you like Vanilla JavaScript ? Then you might be interested in the Native JavaScript for Bootstrap project, which aims to remove the jQuery dependency required by the components by porting them to plain JavaScript.
  Why?

  The motivations of such a port are mostly related to performance.
   One benefit is the potential performance gain that can come from the superior execution speed of plain JavaScript over jQuery, as reported in many benchmarks .
   Another performance advantage is the reduced page weight. Let’s make a quick comparison. All the numbers below refers to minified gzipped files and are expressed in KBs. bootstrap.js refers to the original Bootstrap scripts, bsn.js to the Bootstrap Native scripts, and jq to jQuery. Here we are looking at the bundled files that gather together all the components, but it should be noted that both libraries have a modular structure that allows the loading of only the needed components and their dependencies.
  Bootstrap.js:

  
       
  • jq 3.1.0 + bootstrap.js = 34.5 + 11.2 = 45.7   
  • jq 3.1.0 slim + bootstrap.js = 27.2 + 11.2 = 38.4   
  • jq 2.2.4 + bootstrap.js = 34.3 + 11.2 = 45.5   
  • jq 1.12.4 + bootstrap.js = 38.8 + 11.2 = 50.0  
  Native JavaScript for Bootstrap:

  
       
  • minifill + bsn.js = 2.4 + 7.8 = 10.2   
  • polyfill.io(on chrome 54) + bsn.js = 1.1 + 7.8 = 8.9   
  • polyfill.io(on IE 8) + bsn.js = 12.1 + 7.8 = 19.9  
   ( The polyfill.io size for IE8 was taken from here . These polyfills are discussed in the next sections )
   
Quick Tip: Use Bootstrap Components without jQuery-1 (interested,comparison,advantage,potential,execution)

  So, with the Bootstrap components the size varies over the range [38.4, 50.0] KB, while with Bootstrap Native the range shrinks to [8.9, 19.9] KB.
  Browser Support

   Regarding browser support, it is comparable to the original Bootstrap jQuery-based script , that is, it supports the latest browsers on the major mobile and desktop platforms and IE8+ . This is accomplished by means of two polyfill strategies.
   The first revolves around the use of the Polyfill.io service. All you have to do is insert the relative script tag in the document to get a set of polyfills tailored to each browser:
  [code][/code]   The service can be configured to customize its response based on the features really used on the site. See the Pollyfill.io documentation for details.
   Alternatively, it is possible to use minifill , a potentially lighter custom polyfill supplied by the project author itself.
  Usage

  The usage is similar to the original Bootstrap scripts, except we’ll remove jQuery, replace the Bootstrap scripts with the ones supplied by the project, and, if necessary, include the polyfills.
   So, before the end tag we include the script for the components:
  [code][/code]   Other CDN URLs are available and listed on the documentation page . Alternatively, the file can be downloaded and served locally.
   If the polyfills are needed, they should be included in the tag:
  [code]
[/code]   This snippet employs the minifill polyfill.
   See the project documentation page for more detailed usage instructions.
  A Port?

  To be precise, it is not a literal port that replicates all the features of the original scripts. The author deliberately chose to leave out some slight functionality, particularly lesser used features, mainly for performance reasons and to simplify the development.
  Let’s take a look at some of these issues.
  The custom events

   These are the events triggered by many Bootstrap components during their life cycle. For example, a Modal fires two events, one when it is opened and the other when it is closed (actually, two events are fired in each case, one before ( 'show' ) and the other ( 'shown' ) after the action).
  Similar events are employed by a Tab to notify its observers when there is a tab switch: a hide event is dispatched for the current tab and a show event for the tab that have to be shown.
   Bootstrap Native, instead, provides these events only for the Carousel and the Button. The original Carousel triggers a couple of custom events when there is a transition between two slides. The first event, 'slide' , is fired just before the transition begins, while the other one, 'slid' , is fired after the transition has completed. The event object passed to the handlers has two properties that supply information about the transition, direction , and relatedTarget .
  The following jQuery snippet illustrates:
  [code]$carousel
  .on('slide.bs.carousel', function(e) {
    var caption = $(e.relatedTarget).find('.carousel-caption').text();
    console.log('About to slide to the ' + e.direction + ' to slide ' +  caption);
  })
  .on('slid.bs.carousel', function(e) {
    var caption = $(e.relatedTarget).find('.carousel-caption').text();
    console.log('Slid to the ' + e.direction + ' to slide ' + caption);
  });[/code]   Bootstrap Native supports both events, but the event object doesn’t have the direction and relatedTarget properties. We can translate the previous snippet to vanilla JS in this way:
  [code]carousel.addEventListener('slide.bs.carousel', function(e) {
  console.log('About to slide');
});

carousel.addEventListener('slid.bs.carousel', function(e) {
  console.log('Slid');
});[/code]   What about if we need the custom events for some other component? It is not too difficult to implement them ourselves. We can refer to the Bootstrap Native Carousel code and use the CustomEvent API .
  First create the event objects:
  [code]if (('CustomEvent' in window) && window.dispatchEvent) {
  slid =  new CustomEvent("slid.bs.carousel");
  slide = new CustomEvent("slide.bs.carousel");
}[/code]  When a slide transition is about to start, the ‘slide’ event is fired:
  [code]if (slide) {
  this.carousel.dispatchEvent(slide);
}[/code]  And, finally, when the transition has finished, the ‘slid’ event is triggered:
  [code]if (slid) {
  self.carousel.dispatchEvent(slid);
}[/code]  Based on this model, a similar code can be easily added to other components.
   The CustomEvent API is not readily available on every browser , but the aforementioned polyfills cover it.
  The programmatic API

   This is the API Bootstrap components expose to allow their initialization and control with JavaScript. For example, on a Modal element three methods can be invoked to control its visibility:
  [code]$('#mymodal').modal('show')
$('#mymodal').modal('hide')
$('#mymodal').modal('toggle')[/code]  Bootstrap Native instead, often doesn’t provide these programmatic control. The above methods are not available for the Modal, nor for the Dropdown, Tab, Alert, or Carousel.
  Other differences

  If we perform a side-by-side comparison of the components, it is clear how Bootstrap Native it is not a literal port, and in some cases removes functionality, while in others it adds something new.
   In the Tooltip, for instance, with Bootstrap we have to explicitly init them, because, for performance reasons, the relative data-api is opt-in . In Bootstrap Native, as long as the DATA API attributes are properly set, the initialization is automatic. Additionally, the Native version can automatically place the tooltip, without any additional options. But it doesn’t cover a template system like the one provided by Bootstrap.
   The dropdown furnishes another example of a slight difference with respect to the relative Bootstrap component due to a deliberate implementation choice . The jQuery dropdown menu closes after a click on a menu item, while the Native menu remains open.
   Keyboard input handling is also incomplete. The tab navigation works, but other operations are partially implemented .
   In the Modal, the remote option, used to specify a source for content to be loaded in the component, is not available, but there is a template system for dynamic content.
   Regarding the Carousel, the jQuery component responds to keyboard inputs by default, while in the vanilla version this behavior must be enabled using the data-keyboard attribute:
  [code]
友荐云推荐




上一篇:iOS开发过程中的小问题记录
下一篇:Slicer: Auto-sharding for datacenter applications
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

wolegeca 发表于 前天 17:18
土豪,我们做朋友吧。
回复 支持 反对

使用道具 举报

被睡袍胁迫つ 发表于 前天 20:02
楼主,你妈妈喊你回家吃饭!
回复 支持 反对

使用道具 举报

AT秋儿 发表于 昨天 04:26
鸟大了,什么林子都敢进啊!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表