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.
I'd recommend to read one from the articles below to understand the main ideas of the library:
- Introduction into the better-dom library in English @smashingmagazine.com
- Введение в библиотеку better-dom по-русски @habrahabr.ru
- compact size: ~27kb minified and ~6kb gzipped version (custom builds are available to reduce file size even more)
- clear, minimalistic and standards-based (where possible) APIs
- live extensions
- animations via CSS3
- i18n support
- microtemplating using the Emmet syntax
- improved event handling
- getter and setter
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>- Read the 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 default task:
grunt
To create a full build run build task without arguments:
grunt build
Your build will be created inside of the build folder including uglified version with source maps. Pick modules that you want to exclude and pass them to the same task separated by comma:
grunt build:classes,offset,traversing
Look at the API documentation to find which functions are included into a particular module (see Modules menu).
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent