Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Syvällinen JavaScript-kirjastojen tutkiminen: toiminnot, kokoonpanot ja sovellusskenaariot

Esipuhe

Nykyaikaisessa verkkokehityksessä JavaScript-kirjastoilla on tärkeä rooli, ja ne auttavat kehittäjiä yksinkertaistamaan koodia, parantamaan tehokkuutta ja saavuttamaan paremman käyttökokemuksen. Tässä artikkelissa käsitellään useita yleisesti käytettyjä JavaScript-kirjastoja, mukaan lukien moduulien latauskirjastot, tiedon sitovat kirjastot ja käyttöliittymäkehykset, ja esitellään lukijat niiden ydintoimintoihin, käyttöskenaarioihin, asennukseen ja määritykseen sekä API-yleiskatsaus.

Tervetuloa tilaamaan kolumni:JavaScript Script Universe

1. Knockout: Työkalu, jonka avulla voit käyttää yksinkertaista mutta tehokasta kaksisuuntaista tiedonsidontaa

1.1 Johdanto

Knockout on kevyt JavaScript-kirjasto, joka auttaa toteuttamaan tyylikkäitä MVVM (Model-View-ViewModel) -malleja. Se tarjoaa tehokkaat kaksisuuntaiset tiedonsidontaominaisuudet, mikä helpottaa tietojen ja käyttöliittymän välistä synkronointia.

1.1.1 Perustoiminnot

• Tarjoaa kaksisuuntaisen tiedonsidon, joka päivittää käyttöliittymän automaattisesti tietojen muuttuessa ja päinvastoin.
• Tukee riippuvuusseurantaa varmistaakseen, että tietojen muutokset voidaan siirtää oikein liittyviin käyttöliittymäelementteihin.
• Tarjoaa havaittavia objekteja ja laskettuja ominaisuuksia helpottaakseen monimutkaisten tietosuhteiden käsittelyä.

1.1.2 Käyttöskenaariot

Knockout soveltuu erittäin hyvin paljon tiedon sitomista ja vuorovaikutusta vaativien web-sovellusten rakentamiseen, erityisesti skenaarioissa, kuten lomakkeiden, luetteloiden ja dataesitysten käsittelyssä.

1.2 Asennus ja konfigurointi

1.2.1 Asennusopas

Voit esitellä Knockoutin seuraavilla tavoilla:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/output/knockout-latest.js"></script>
1

1.2.2 Peruskokoonpano

Knockoutin käyttöönoton jälkeen HTML:ssä voit lisätädata-bindOminaisuudet tiedon sitomisen toteuttamiseksi.

1.3 API yleiskatsaus

1.3.1 Tiedonsidonta-asetukset

<div data-bind="text: message"></div>

<script>
    var viewModel = {
        message: ko.observable('Hello, Knockout!')
    };

    ko.applyBindings(viewModel);
</script>
1
2
3
4
5
6
7
8
9

1.3.2 Tapahtuman käsittely

Knockout tukee myös tapahtumasidontaa, kuten napsautustapahtumia:

<button data-bind="click: handleClick">Click Me</button>

<script>
    var viewModel = {
        handleClick: function() {
            alert('Button clicked!');
        }
    };

    ko.applyBindings(viewModel);
</script>
1
2
3
4
5
6
7
8
9
10
11

Virallinen nettisivu:Tyrmäys

2. SystemJS

SystemJS on toinen suosittu dynaaminen moduulilataaja, jonka teemana on moduulien latauskirjasto. Se tukee erilaisia ​​moduulimuotoja, kuten ES-moduuleja, AMD:tä ja CommonJS:ää, ja voi ladata moduuleja dynaamisesti ja ratkaista moduulien väliset riippuvuudet automaattisesti.

2.1 MobX

MobX on tilanhallintaan perustuva JavaScript-kirjasto, jonka teema on tiedonsidontakirjasto. Se keskittyy sovelluksen tilan ja käyttöliittymän tehokkaaseen yhdistämiseen ja toteuttaa reagoivan tiedonsidontamekanismin, jotta tilan muutokset voidaan automaattisesti heijastaa niihin liittyviin komponentteihin.

2.1.1 Perustoiminnot

MobX:n ydintoimintoja ovat havaittava tila, lasketut arvot, toiminnot ja reaktiot. Näiden ominaisuuksien avulla kehittäjät voivat helposti rakentaa erittäin reagoivia sovelluksia.

2.1.2 Käyttöskenaariot

MobX sopii kaikentyyppisille JavaScript-sovelluksille ja on erityisen hyvä käsittelemään monimutkaisia ​​tietotilanhallintaongelmia. Olipa kyseessä React, Angular tai Vue kaltainen kehys, sitä voidaan käyttää yhdessä MobX:n kanssa parantamaan kehitystehokkuutta ja käyttökokemusta.

2.2 Asennus ja konfigurointi

2.2.1 Asennusopas

Asenna MobX npm:n kautta:

npm install mobx
1

2.2.2 Peruskokoonpano

Esittele MobX projektiin:

import { observable, action, computed, reaction } from 'mobx';
1

2.3 API yleiskatsaus

2.3.1 Tilanhallinnan asetukset

MobX läpäissytobservableHavaittavan tilan määrittämiseksi esimerkkikoodi on seuraava:

import { observable } from 'mobx';

const store = observable({
    count: 0,
});
1
2
3
4
5

2.3.2 Responsiivisen suunnittelun tuki

MobX tarjoaacomputedfunktio laskettujen arvojen luomiseen, esimerkkikoodi on seuraava:

import { observable, computed } from 'mobx';

const store = observable({
    count: 0,
    get doubledCount() {
        return this.count * 2;
    },
});

console.log(store.doubledCount); // 输出结果为 0
store.count = 5;
console.log(store.doubledCount); // 输出结果为 10
1
2
3
4
5
6
7
8
9
10
11
12

Yllä olevien esimerkkien avulla esitellään MobX-tiedonsidontakirjaston käyttöönotto, asennus ja konfigurointi sekä API-katsaus. MobX:n tehokkaat toiminnot tekevät etupään kehittämisestä mukavampaa ja tehokkaampaa, samalla kun ne tarjoavat hyvän tilanhallintamekanismin, joka sopii erilaisten JavaScript-sovellusten kehittämiseen.

3. Vue.js: Progressiivinen kehys käyttöliittymien rakentamiseen

3.1 Johdanto

Vue.js on suosittu käyttöliittymän JavaScript-kehys interaktiivisten ja reagoivien käyttöliittymien rakentamiseen. Se käyttää yksinkertaista ja helposti ymmärrettävää mallisyntaksia ja tietopohjaista komponenttijärjestelmää.

3.1.1 Perustoiminnot

• tietojen sitominen
• Komponenttien kehitys
• Virtuaalinen DOM
• Lasketut ominaisuudet
• ohje
• Elinkaarikoukut jne.

3.1.2 Käyttöskenaariot

Vue.js:n avulla voidaan rakentaa yksisivuisia sovelluksia (SPA), monimutkaisia ​​verkkosovelluksia, mobiilisovelluksia ja muita skenaarioita.

3.2 Asennus ja konfigurointi

3.2.1 Asennustapa

Esittele Vue.js CDN:n kautta:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1

3.2.2 Perusasetukset

Luo säilö HTML:ssä:

<div id="app">
  {{ message }}
</div>
1
2
3

Kirjoita Vue-esimerkkikoodi:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
1
2
3
4
5
6

3.3 API yleiskatsaus

3.3.1 Komponenttien kehittäminen

Vue.js tukee käyttöliittymien rakentamista komponenttipohjaisesti. Jokainen komponentti sisältää oman mallinsa, tyylinsä ja logiikkansa, joilla voidaan saavuttaa parempi koodin uudelleenkäyttö ja ylläpidettävyys.

Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data: function () {
    return {
      msg: 'This is my component.'
    };
  }
});
1
2
3
4
5
6
7
8

3.3.2 Responsiivinen tietojen sidonta

Vue.js tarjoaa reagoivan tiedonsidontamekanismin, kun tiedot muuttuvat, näkymä päivittyy automaattisesti.

var data = { message: 'Hello, Vue!' };

var vm = new Vue({
  el: '#app',
  data: data
});

data.message = 'Updated message.';
1
2
3
4
5
6
7
8

Linkki viralliseen asiakirjaan:Vue.js

4. Redux: Ennustettava tilasäiliö sovelluksen tilan hallintaan

Redux on React-ekosysteemissä laajalti käytetty tilanhallintatyökalu. Se tekee tilanmuutoksista ennustettavampia ja helpommin vianmäärityksiä hallitsemalla sovellusten tilaa.

4.1 Johdanto

4.1.1 Perustoiminnot

Reduxin ytimeen kuuluvat Store (tallennustila), Action (tilamuutoksia kuvaava objekti) ja Reducer (tilamuutoksia käsittelevä toiminto), joka hallitsee sovelluksen tilaa yksisuuntaisen tietovirran kautta.

// Redux 核心概念示例
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4.1.2 Käyttöskenaariot

Redux soveltuu suuriin ja monimutkaisiin sovelluksiin, varsinkin kun useat komponentit jakavat tilan, täytyy säilyttää tila tai suorittaa aikamatkavirheenkorjaus.

4.2 Asennus ja konfigurointi

4.2.1 Asennusohjeet

Asenna Redux npm:n kautta:

npm install redux
1

4.2.2 Peruskokoonpano

Luo Redux Store ja pistä Reducer:

import { createStore } from 'redux';

const store = createStore(counterReducer);
1
2
3

4.3 API yleiskatsaus

4.3.1 Tilanhallinnan asetukset

Redux tarjoaa getState() Menetelmää käytetään nykyisen tilan selvittämiseen,dispatch(action) menetelmiä käytetään toimien lähettämiseen jasubscribe(listener) Tapa tilamuutosten tilaamiseen.

store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // 输出：{ count: 1 }
1
2

4.3.2 Väliohjelmistolaajennus

Väliohjelmistoa käyttämällä voidaan laajentaa Reduxin toimintoja, kuten kirjaamista, asynkronisia toimintoja jne.Yleisesti käytettyjä väliohjelmistoja ovat mmredux-thunk(asynkronisten toimintojen käsittely) ja redux-logger(Tallenna toimintaloki) jne.

import thunk from 'redux-thunk';
import logger from 'redux-logger';

const middleware = [thunk, logger];
const store = createStore(counterReducer, applyMiddleware(...middleware));
1
2
3
4
5

Linkki viralliselle verkkosivustolle:Redux

5. UAParser.js

5.1 Johdanto

UAParser.js on JavaScript-kirjasto User-Agent-merkkijonojen jäsentämiseen. Jäsentämällä käyttäjäagenttimerkkijonoa saat oleellisia tietoja käyttäjälaitteesta, kuten käyttöjärjestelmästä, selaintyypistä jne.

5.1.1 Perustoiminnot

UAParser.js:n ydintoiminto on jäsentää käyttäjäagenttimerkkijonoa ja poimia laitteeseen liittyviä tietoja, mukaan lukien käyttöjärjestelmä, selaimen nimi, laitetyyppi jne.

5.1.2 Käyttöskenaariot

• Soveltuu verkkosivustojen tilastolliseen analyysiin, joka auttaa kehittäjiä ymmärtämään vierailijoiden laitetietoja
• Räätälöity sivunäyttö eri laitetyyppien mukaan

5.2 Asennus ja konfigurointi

5.2.1 Asennusohjeet

Voit asentaa tämän kirjaston npm:n kautta tai tuoda suoraan UAParser.js:n CDN-osoitteen.

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js/dist/ua-parser.min.js"></script>
1

5.2.2 Peruskokoonpano

UAParser.js:n käyttöönoton jälkeen voit luoda suoraan UAParser-objektin aloittaaksesi sen käytön.

const parser = new UAParser();
const result = parser.getResult();
console.log(result);
1
2
3

5.3 API yleiskatsaus

5.3.1 User-Agent -analyysi

const parser = new UAParser();
const uaString = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36';
parser.setUA(uaString);
const result = parser.getResult();
console.log(result.browser.name); // Output: Chrome
1
2
3
4
5

5.3.2 Laitetietojen poimiminen

const parser = new UAParser();
const uaString = 'Mozilla/5.0 (Linux; Android 11; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Mobile Safari/537.36';
parser.setUA(uaString);
const result = parser.getResult();
console.log(result.os.name); // Output: Android
1
2
3
4
5

Linkki viralliselle verkkosivustolle:UAParser.js

6. Backbone.js: Kevyt JavaScript-kirjasto, joka tarjoaa puitteet MVC-rakenteelle

6.1 Johdanto

Backbone.js on kevyt JavaScript-kirjasto, joka tarjoaa tavan järjestää koodia MVC-rakenteessa (Model-View-Controller). Se auttaa kehittäjiä hallitsemaan paremmin käyttöliittymäsovellusten logiikkaa.

6.1.1 Perustoiminnot

Backbone.js:n ydintoimintoja ovat malli, näkymä, kokoelma ja reititin. Näiden toimintojen avulla kehittäjät voivat helposti rakentaa web-sovelluksia, joissa on selkeä rakenne ja helppo ylläpito.

6.1.2 Käyttöskenaariot

Backbone.js sopii projekteihin, joissa käyttöliittymäsovellukset on järjestettävä MVC-rakenteen mukaisesti. Se voi auttaa kehittäjiä hallitsemaan paremmin tietojen ja näkymien välistä suhdetta etupään kehitysprosessin aikana ja parantamaan kehityksen tehokkuutta.

6.2 Asennus ja konfigurointi

Jos haluat käyttää Backbone.js:ää, sinun on ensin lisättävä projektiin Backbone.js-tiedosto. Se voidaan ottaa käyttöön lataamalla tiedosto suoraan tai käyttämällä CDN:ää.

6.2.1 Asennustapa

Lataa Backbone.js-tiedosto suoraan:Backbone.js

<script src="path/to/backbone.js"></script>
1

6.2.2 Perusasetukset

Backbone.js:n käyttöönoton jälkeen voit alkaa käyttää Backbone.js:n tarjoamia toimintoja projektissasi.

6.3 API yleiskatsaus

Seuraavassa on lyhyt esittely Backbone.js:n yleisesti käytettyihin sovellusliittymiin:

6.3.1 Mallit ja kokoelmat

Backbone.js:ssä mallit edustavat sovelluksen tietoja ja kokoelmat ovat järjestettyjä mallikokoelmia.

var Book = Backbone.Model.extend({
    defaults: {
        title: '',
        author: ''
    }
});

var Library = Backbone.Collection.extend({
    model: Book
});
1
2
3
4
5
6
7
8
9
10

6.3.2 Näkymät ja reititys

Näkymät vastaavat mallitietojen hahmontamisesta sivulle, kun taas reititys vastaa URL-osoitteiden ja näkymien välisen kartoitussuhteen käsittelystä.

var BookView = Backbone.View.extend({
    el: '#app',
    
    initialize: function() {
        this.render();
    },
    
    render: function() {
        var template = _.template($('#book-template').html());
        this.$el.html(template(this.model.toJSON()));
    }
});

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home',
        'books/:id': 'showBook'
    },

    home: function() {
        // 渲染主页
    },

    showBook: function(id) {
        // 根据id显示书籍详情
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Yllä olevien koodiesimerkkien ja lyhyen esittelyn avulla voit saada alustavan käsityksen Backbone.js:n roolista ja käytöstä käyttöliittymäkehityksessä.Yksityiskohtaiset asiakirjat ja esimerkit ovat nähtävissäBackbone.js virallinen verkkosivusto。