├── LICENSE ├── README.md └── guides ├── add-class.md ├── after.md ├── ajax.md ├── animate.md ├── append.md ├── attr.md ├── before.md ├── bind.md ├── children.md ├── clone.md ├── closest.md ├── css.md ├── data.md ├── deferred.md ├── one.md └── text.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Ember Best Practices 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jquery-avoidance-techniques 2 | 3 | TL;DR: The goal of this repo compared to other jQuery avoidance tools is to provide a deeper knowledge base with robust examples, modern ES2016+ alternatives, Ember specific use-cases with Util functions as well as parity method coverage for jQuery. 4 | -------------------------------------------------------------------------------- /guides/add-class.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.addClass()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use classList#add instead. 7 | 8 | ```js 9 | el.classList.add(className); 10 | ``` 11 | 12 | --- 13 | -------------------------------------------------------------------------------- /guides/after.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.after()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use insertAdjacentHTML instead. 7 | 8 | ```js 9 | el.insertAdjacentHTML('afterend', str); 10 | ``` 11 | 12 | --- 13 | -------------------------------------------------------------------------------- /guides/ajax.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.ajax()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use the Fetch API instead. 7 | 8 | https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 9 | 10 | 11 | --- -------------------------------------------------------------------------------- /guides/animate.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.animate()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use CSS animations instead toggled with JS classList#add and classList#remove. 7 | 8 | ```js 9 | el.classList.add('show'); 10 | el.classList.remove('hide'); 11 | ``` 12 | 13 | ```css 14 | .show { 15 | transition: opacity 200ms; 16 | } 17 | .hide { 18 | opacity: 0; 19 | } 20 | ``` 21 | 22 | --- -------------------------------------------------------------------------------- /guides/append.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.append()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use appendChild instead. 7 | 8 | ```js 9 | parentEl.appendChild(childEl); 10 | ``` 11 | 12 | --- 13 | -------------------------------------------------------------------------------- /guides/attr.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.attr()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use getAttribute instead. 7 | 8 | ```js 9 | el.getAttribute('attribute'); 10 | ``` 11 | 12 | --- 13 | -------------------------------------------------------------------------------- /guides/before.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.before()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use insertAdjacentHTML instead. 7 | 8 | ```js 9 | el.insertAdjacentHTML('beforebegin', htmlStr); 10 | ``` 11 | 12 | --- 13 | -------------------------------------------------------------------------------- /guides/bind.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.bind()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use addEventListener instead. 7 | 8 | ```js 9 | el.addEventListener(eventName, eventHandler); 10 | ``` 11 | 12 | --- 13 | -------------------------------------------------------------------------------- /guides/children.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.children()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use children instead. 7 | 8 | ```js 9 | el.children 10 | ``` 11 | 12 | --- 13 | -------------------------------------------------------------------------------- /guides/clone.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.clone()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use cloneNode instead. !Warning this method may lead to duplicate element IDs in the DOM. 7 | 8 | ```js 9 | // clone the node WITHOUT child nodes 10 | const clonedNode = el.cloneNode(false); 11 | ``` 12 | 13 | ```js 14 | // clone the node WITH child nodes 15 | const clonedNode = el.cloneNode(true); 16 | ``` 17 | 18 | --- 19 | -------------------------------------------------------------------------------- /guides/closest.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.closest()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use closest instead. !Please note `closest` is not supported in IE11. 7 | 8 | ```js 9 | const closestEl = el.closest(selectorsStr); 10 | ``` 11 | 12 | 13 | --- 14 | -------------------------------------------------------------------------------- /guides/css.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.css()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use elem#style instead. 7 | 8 | ```js 9 | // Getting a style 10 | elem.style.color; // "blue" 11 | 12 | // Setting a style 13 | elem.style.borderWidth = '20px'; 14 | ``` 15 | 16 | --- 17 | 18 | 19 | ## Option 2: 20 | 21 | Use getComputedStyle instead. !Please note `getComputedStyle` triggers a reflow/recalc. 22 | 23 | ```js 24 | // get entire CSSStyleDeclaration Object 25 | getComputedStyle(elem); 26 | ``` 27 | 28 | ```js 29 | // get a specific style (in this example 'color') 30 | getComputedStyle(elem)['color']; 31 | ``` 32 | 33 | --- 34 | -------------------------------------------------------------------------------- /guides/data.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.data()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use WeakMap instead. 7 | 8 | ```js 9 | const wMap = new WeakMap(); 10 | let pojo = {}; 11 | 12 | // keys and values can be any objects 13 | wMap.set(pojo, 321); 14 | 15 | // 321 16 | wMap.get(pojo); 17 | wMap.get(first); 18 | 19 | // true 20 | wMap.has(pojo); 21 | 22 | // true 23 | wMap.delete(pojo); 24 | ``` 25 | 26 | --- -------------------------------------------------------------------------------- /guides/deferred.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.deferred()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use Promise instead. 7 | 8 | ```js 9 | const somePromise = new Promise((resolve, reject) => { 10 | // do something that will call either resolve() or reject() 11 | // resolve(someVal); 12 | // OR 13 | // reject('failed because of some reason...') 14 | }); 15 | 16 | 17 | somePromise.then((success) => { 18 | // if this was called then the promise was resolvd successfully 19 | }); 20 | ``` 21 | 22 | --- -------------------------------------------------------------------------------- /guides/one.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.one()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use elem#addEventListener with the `once` option instead. 7 | *NOTE:* This is not currently supported in Edge/Internet Explorer ([support](http://caniuse.com/#search=once)) 8 | 9 | ```js 10 | document.querySelector('.elem').addEventListener('click', clickHandler, { once: true }); 11 | ``` 12 | 13 | --- 14 | 15 | 16 | ## Option 2: 17 | 18 | Create an event listener that cancels itself manually. 19 | 20 | ```js 21 | const elem = document.querySelector('.elem'); 22 | 23 | const clickHandler = () => { 24 | console.log('I have been clicked only once'); 25 | elem.removeEventListener('click', clickHandler); 26 | }; 27 | 28 | elem.addEventListener('click', clickHandler); 29 | ``` 30 | 31 | --- 32 | -------------------------------------------------------------------------------- /guides/text.md: -------------------------------------------------------------------------------- 1 | # Alternatives to `$.text()` 2 | 3 | 4 | ## Option 1: 5 | 6 | Use `textContent` instead. 7 | 8 | ```html 9 |
My name is Tomster
10 | ``` 11 | 12 | ```js 13 | const elem = document.querySelector('.elem'); 14 | const text = elem.textContent; // "My name is Tomster" 15 | ``` 16 | 17 | 18 | --- 19 | --------------------------------------------------------------------------------