Live extension playground
jQuery knows a concept called “live events”. Using the idea of event delegation they enabled developers to handle existing and future elements. But more flexibility is required in a lot of cases. For example, delegated events fall short when the DOM needs to be mutated in order to initialize a widget. To handle such cases I'd like to introduce live extensions and better-dom - a new library for working with the DOM.
- compact size: ~27kb minified and ~6kb gzipped version
- clean, minimalistic and standards-based (if possible) APIs
- live extensions
- animations via CSS3
- i18n support
- microtemplating using the Emmet syntax
- custom builds
- getter and setter
- improved event handling
The simplest way is to use bower:
bower install better-dom
This will clone the latest version of the better-dom with dependencies into the bower_components directory at the root of your project. Then just include scripts below on your web page:
<!DOCTYPE html>
<html>
<head>
...
<!--[if IE]>
<link href="bower_components/better-dom/dist/better-dom-legacy.htc" rel="htc"/>
<script src="bower_components/better-dom/dist/better-dom-legacy.js"></script>
<![endif]-->
</head>
<body>
...
<script src="bower_components/better-dom/dist/better-dom.js"></script>
</body>
</html>- Introduction into the better-dom library in English @smashingmagazine.com
- Introducing Live Extensions For Better-DOM: What They Are And How They Work @smashingmagazine.com
- Введение в библиотеку better-dom по-русски @habrahabr.ru
Need more?
- read FAQ
- Take a look at the better-dom wiki
- check releases tab for getting the changes log
- walk through the sorce code of existing projects that use better-dom.
- DOM.create vs jquery
- DOM.find[All] vs jQuery.find
- DOM getter/setter vs jQuery.attr/prop
- better-dom vs jquery: classes manipulation
- better-dom vs jquery: array methods
In order to create a custom build make sure that you installed grunt-cli globally:
npm install -g grunt-cli
Then you can print all available modules for customization via the task below:
grunt build
Pick modules that you want to exclude and pass them to the same task separated by comma:
grunt build:classes,offset,data
Look at the API documentation to find which functions are included into a particular module.
Your custom build will be created inside of the build folder including uglified version and source maps.
For IE8-9 support you have to incude extra files via conditional comment (see Installation section).
The better-dom-legacy.js file includes excellent html5shiv that provides fix for HTML5 tags and es5-shim is used to polyfill missed standards-based functions. These projects are bundled into signle file with other fixes.
The better-dom-legacy.htc file helps to implement live extensions support. This fact applies several important limitations that you must know in case when legacy browser support is required.
HTC behaviors have to serve up with a content-type header of “text/x-component”, otherwise IE will simply ignore the file. Many web servers are preconfigured with the correct content-type, but others are not.
AddType text/x-component .htc
IE requires that the HTC file must be in the same domain with as the HTML page which uses it. If you try to load the behavior from a different domain, you will get an “Access Denied” error.
- Chrome
- Safari 6.0+
- Firefox 16+
- Opera 12.10+
- IE8+
- iOS Safari 6+
- Android 2.3+
- Chrome for Android
Opera Mini is out of the scope because of lack of support for CSS3 Animations.