library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Core: Add more info about named exports

Browse Source 
Also, fix an example importing from `jquery/src/css.js` as that is supposed
to use named exports now.

Closes gh-5328
This commit is contained in:
Michał Gołębiowski-Owczarek 2023-09-20 01:29:05 +02:00 committed by GitHub
parent 93ca49e6d1
commit 5f86959092
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
build/fixtures/README.md
View File

@ -21,12 +21,30 @@ Below are some of the most common ways to include jQuery.
or, to use the jQuery ECMAScript module: or, to use the jQuery ECMAScript module:
```html
<script type="module">
import { $ } from "https://code.jquery.com/jquery-@VERSION.min.js";
</script>
```
or:
```html
<script type="module">
import { jQuery } from "https://code.jquery.com/jquery-@VERSION.min.js";
</script>
```
All jQuery modules export named `$` & `jQuery` tokens; the further examples will just show `$`. The default import also works:
```html ```html
<script type="module"> <script type="module">
import $ from "https://code.jquery.com/jquery-@VERSION.min.js"; import $ from "https://code.jquery.com/jquery-@VERSION.min.js";
</script> </script>
``` ```
However, named imports provide better interoperability across tooling and are therefore recommended.
Sometimes you don’t need AJAX, or you prefer to use one of the many standalone libraries that focus on AJAX requests. And often it is simpler to use a combination of CSS, class manipulation or the Web Animations API. Similarly, many projects opt into relying on native browser promises instead of jQuery Deferreds. Along with the regular version of jQuery that includes the `ajax`, `callbacks`, `deferred`, `effects` & `queue` modules, we’ve released a “slim” version that excludes these modules. You can load it as a regular script: Sometimes you don’t need AJAX, or you prefer to use one of the many standalone libraries that focus on AJAX requests. And often it is simpler to use a combination of CSS, class manipulation or the Web Animations API. Similarly, many projects opt into relying on native browser promises instead of jQuery Deferreds. Along with the regular version of jQuery that includes the `ajax`, `callbacks`, `deferred`, `effects` & `queue` modules, we’ve released a “slim” version that excludes these modules. You can load it as a regular script:
```html ```html
@ -37,7 +55,7 @@ or as a module:
```html ```html
<script type="module"> <script type="module">
import $ from "https://code.jquery.com/jquery-@VERSION.slim.min.js"; import { $ } from "https://code.jquery.com/jquery-@VERSION.slim.min.js";
</script> </script>
``` ```
@ -60,7 +78,7 @@ Now, the following will work to get the full version:
```html ```html
<script type="module"> <script type="module">
import $ from "jquery"; import { $ } from "jquery";
// Use $ here // Use $ here
</script> </script>
``` ```
@ -69,7 +87,7 @@ and the following to get the slim one:
```html ```html
<script type="module"> <script type="module">
import $ from "jquery/slim"; import { $ } from "jquery/slim";
// Use $ here // Use $ here
</script> </script>
``` ```
@ -93,7 +111,7 @@ npm install jquery
In the script, including jQuery will usually look like this: In the script, including jQuery will usually look like this:
```js ```js
import $ from "jquery"; import { $ } from "jquery";
``` ```
If you need to use jQuery in a file that's not an ECMAScript module, you can use the CommonJS syntax: If you need to use jQuery in a file that's not an ECMAScript module, you can use the CommonJS syntax:
@ -115,7 +133,7 @@ Remember that some modules have other dependencies (e.g. the `event` module depe
Example usage: Example usage:
```js ```js
import $ from "jquery/src/css.js"; // adds the `.css()` method import { $ } from "jquery/src/css.js"; // adds the `.css()` method
import "jquery/src/event.js"; // adds the `.on()` method; pulls "selector" as a dependency import "jquery/src/event.js"; // adds the `.on()` method; pulls "selector" as a dependency
$( ".toggle" ).on( "click", function() { $( ".toggle" ).on( "click", function() {
$( this ).css( "color", "red" ); $( this ).css( "color", "red" );