Require js
Download as PPTX, PDF1 like478 views
Il documento discute l'importanza di utilizzare RequireJS per la gestione di applicazioni JavaScript di grandi dimensioni, evidenziando i problemi di dipendenza tra i file e la complessità del codice. RequireJS offre un approccio modulare che facilita la manutenzione e aumenta la riutilizzabilità del codice, gestendo anche il caricamento degli script. Viene fornito un esempio di come definire e caricare moduli utilizzando RequireJS.
![Loading from the page
require(["pages/profile"], function(Profile) {
...do stuff...
});](https://image.slidesharecdn.com/requirejs-141109232157-conversion-gate02/85/Require-js-14-320.jpg)
![Defining a Module
define(["foo", "baz", "x"], function(Foo, Baz) {
...do stuff...
return {
init: function(data) {
container = data;
},
do_something: some_internal_method
}
});](https://image.slidesharecdn.com/requirejs-141109232157-conversion-gate02/85/Require-js-15-320.jpg)
Require js
- 1. Write a Better Java Script with RequireJS For Reference http://requirejs.org
- 3. Why use a tool like RequireJS? Large applications often require a number of JavaScript files. Generally, they are loaded one by one using <script> tags. Additionally, each file can potentially be dependent on other files.
- 4. JS sucks . ├── ckeditor │ ├── ckeditor.js │ ├── contents.css │ ├── lang │ │ ├── af.js │ │ ├── ar.js │ │ ├── bg.js │ │ ├── bn.js │ │ ├── bs.js │ │ ├── ca.js │ │ ├── cs.js │ │ ├── cy.js │ │ ├── da.js │ │ ├── de.js │ │ ├── el.js │ │ ├── en-au.js │ │ ├── en-ca.js │ │ ├── en-gb.js │ │ ├── en.js │ │ ├── eo.js │ │ ├── es.js │ │ ├── et.js │ │ ├── eu.js │ │ ├── fa.js │ │ ├── fi.js │ │ ├── fo.js │ │ ├── fr-ca.js │ │ ├── hi.js │ │ ├── hr.js │ │ ├── hu.js │ │ ├── is.js │ │ ├── it.js │ │ ├── ja.js │ │ ├── ka.js │ │ ├── km.js │ │ ├── ko.js │ │ ├── _languages.js │ │ ├── lt.js │ │ ├── lv.js │ │ ├── mn.js │ │ ├── ms.js │ │ ├── nb.js │ │ ├── nl.js │ │ ├── no.js │ │ ├── pl.js │ │ ├── pt-br.js │ │ ├── pt.js │ │ ├── ro.js │ │ ├── ru.js │ │ ├── sk.js │ │ ├── sl.js │ │ ├── sr.js │ │ ├── sr-latn.js │ │ ├── sv.js │ │ ├── th.js │ │ ├── _trans.txt │ │ ├── tr.js │ │ ├── uk.js │ │ ├── vi.js │ │ └── default.js │ ├── skins │ │ └── kama │ │ ├── dialog.css │ │ ├── editor.css │ │ ├── icons.png │ │ ├── icons_rtl.png │ │ ├── images │ │ │ ├── dialog_sides.gif │ │ │ ├── dialog_sides.png │ │ │ ├── dialog_sides_rtl.png │ │ │ ├── mini.gif │ │ │ ├── noimage.png │ │ │ ├── sprites_ie6.png │ │ │ ├── sprites.png │ │ │ └── toolbar_start.gif │ │ ├── skin.js │ │ └── templates.css │ └── SQRLY_TEAM_PLEASE_README__LICENSE ├── elevationservice_eg_google.js ├── jquery.form.js ├── jquery.history.js ├── jqueryplugins │ ├── jquery.address-1.3.js │ └── jquery.simplemodal-1.3.min.js ├── markers.js ├── pages │ ├── add-park.js │ ├── datacleaning.js │ └── park-detail.js ├── park-ratings.js ├── polylinearray_eg_google.js
- 5. JS sucks 1. code is too long 2. just a little code from somewhere else 3. copy and paste 4. goto: 1
- 7. RequireJS makes Js • Help you make your code more modular • manages script loading for you • build and compress your code (oh, and other stuff too...)
- 9. What is RequireJS? • Modular programming is used to break large applications into smaller blocks of manageable code • Module based coding eases the effort for maintenance and increases reusability. • managing dependencies between modules is a major concern developers face throughout the application development process. • RequireJS is one of the most popular frameworks around for managing dependencies between modules
- 10. What is RequireJS? • Async Script Loader • 12 k • Very actively developed • Well documented
- 11. Making code more modular
- 12. So what's the code look like?
- 13. Loading from the page <script data-main="js/main" src="scripts/require.js"></script> main.js is the entry point of the app
- 14. Loading from the page require(["pages/profile"], function(Profile) { ...do stuff... });
- 15. Defining a Module define(["foo", "baz", "x"], function(Foo, Baz) { ...do stuff... return { init: function(data) { container = data; }, do_something: some_internal_method } });
- 16. Let's look at an example
- 17. Thanks
Editor's Notes
- #4: the language sucks front end scripting will always suck. You're just deling with less predictability and more
- #5: your files external plugins where does stuff go? multiple versions of jquery / plugins
- #6: it gets monolythic
- #8: if you DO refactor, you pay the price. Also, don't move imports to bottom of page - this is a hack. It
- #12: talk about loading