Yhden sivun Application Development Framework itsenäisesti

Yhden sivun Application Development Framework itsenäisestisisältö
  1. Yhden sivun Application Development Framework itsenäisesti
  2. jäsentäminen
  3. tietovirta
  4. tulkinta
  5. johtopäätös
  6. lukea toisella puolella

Kehitettäessä yhden sivun sovelluksen (SPA) on ohjelmoijat ovat runsaudenpula, kun se tulee sopiva vaihtoehto. Ei aina kehys on välttämätöntä.

Eroa perinteisen palvelinpuolen sulatettu verkkosivuja ja yhden sivun sovellukset on lähinnä muuttunut rooli palvelimen. Vaikka hän alun perin otti koko tekee lisäksi toimituksen resursseja (HTML, CSS, JS), nykyään se on ensisijaisesti toimittaja tietojen (muodossa JSON) ja se edustaa vain ensimmäinen sivu on saatavilla. Se, yhden sivun sovelluksen aloittaa toimintansa. Navigoi käyttäjän päällä, sovellus pyytää tietoja palvelimelta ja tekee sen jälkeen dynaamisesti asiakkaan. Tavanomainen edestakainen palvelimelle ei ole välttämätöntä. Mutta se, mitä jää on sen rooli autentikoinnin aikana.

Kulmakivi SPA

Jokainen kehittäjä varmasti tietää seuraava tilanne: uusi SPA Kehykset seisoo siivet ja siellä on yhteisössä vaikutelman, että se on heti hypätä junaan. Jotta voidaan määrittää, onko kytkimen kannattaa, on välttämätöntä ottaa tarkemmin käsitteiden takana Yksisivuiset sovellukset. Sen ytimessä, nämä voidaan katsoa seuraavat pilarit, joihin seuraavissa kohdissa:

Pilarit (Fig. 1) Pilarit (Fig. 1)

Asiakas pyytää web-sivun kautta HTTP-pyynnön ja vastaanottamaan palvelimelta ensimmäinen esimerkki sivun seuraava rakenne:





...

SPA
href ="src / sovellus /index.min.css"/>





  • koti

  • ...







Sen lisäksi, että staattinen markup suunnistusvaihtoehdoksi on erinomainen DOM-elementin kanssa ID-sovelluksen (jäljempänä "tulokohdan" nimeltään). Siellä, selain tekee myöhemmin JavaScript enemmän DOM elementtejä. Kehittäjät uskovat ja kaikki JavaScript, joka on osa sovelluksen yhteen tiedostoon - ns nippu. Se edustaa JavaScript sivuasennusta piste.

reititys

Ensimmäinen SPA, kukin tärkein aloituskohta, verrattavissa päätehtävä, jossa toteuttaa kaikki JavaScript logiikka alkaa. Integroimalla asiakaspuolen reititin lisää lähtökohtia ja siten osien sovelluksen sisällä syntyy. Nämä otetun kuten JavaScript toimintoja. Ennen jako, on hyödyllistä saada yleiskuvan ammattimaisuutta sovelluksen. Erittely perusteella, joka on osoittautunut.

Jokainen osio toimii itsenäisesti ja on oma markup ja JavaScript. Paremman selkeyden yksi tällainen toiminta antaa valita teknologioita kunkin osa-alueen vapaa ja yhdistää joustavasti. Tämä on erityisen tärkeää, koska vaatimukset voivat vaihdella suuresti aluetta kohti sovelluksen.

Toiminta reititin voi johtua tehtävän asiakkaan URL-osoitteiden pääsy pistettä. Tehtävät tunnetaan reiteillä, joilla voidaan ohjata ns reititin. Jälkimmäinen kuuntelee muutoksia URL ja välittää pyynnön sopivalle merkintä pisteeseen. Single-sivu Sovellukset ei kiertomatkan palvelimelle tapahtuu navigoinnin aikana sivulla. voidaan toteuttaa muun muassa käyttämällä # -merkillä (), klassisen HTML etiketti. Se on osa URL.

Esimerkinomaista toteutusta asiakaspuolen ECMAScriptiin reitittimen 2015 on seuraava:

const luoda reititin = domEntryPoint => {
const reitit = uusi kartta ();

const addRoute = (hashUrl, reitti handler) => {
routes.set (hashUrl, reitti handler);
}

const = navigateToHashUrl hashUrl => {
location.hash = hashUrl;
}

const kahva reititys = () => {
const Oletusreitin tunniste = '*';
const currentHash = location.hash.slice (1);
const reitti käsittelijä = routes.has (currentHash)? ↵
routes.get (currentHash): routes.get (oletusreititysmetriikkaa tunnisteen);

jos (reitti käsittelijä) {
reitti käsittelijä (domEntryPoint);
}
};

jos (ikkuna) {
window.addEventListener (hashchange ', kahva Routing);
window.addEventListener ( 'kuorma', kahva reititys);
}

{Palata addRoute, navigateToHashUrl};
};

Create reititintoimintoa luo uuden reitittimen objekti menetelmiä addRoute ja navigateToHashUrl. Kanssa addRoute voi olla reititin uusia reittejä, jonka muodostavat URL-hash ja reitti käsittelijä toiminto, lisätä. NavigateToHashUrl menetelmä mahdollistaa dynaamisen muutoksen reittejä koodin todetaan URL hash.

Ydin reititin on funktio-reititystä. Sitä kutsutaan aikana sivun latauksen (kuorma tapahtuma), ja vaihdettaessa URL hash (hashchange tapahtuma). Kädensijan reititys määrittää toteuttamisesta, onko yhdessä pisteen merkintä (reitti käsittelijä) nykyisen hash. Jos näin on, sopiva reitti käsittelijä kutsutaan. Asteriskilla (*) ennen oletusreitin, jolla myös voidaan toteuttaa, esimerkiksi, 404 sivua toimii varmistuksena.

Käyttö reititin on esitetty alla:

const domEntryPoint = document.getElementById ( 'sovellus');
const = luoda reitittimen reitittimen (domEntryPoint);

router.addRoute ( 'kotiin', domEntryPoint => {
domEntryPoint.textContent = 'Home Reitti';
});

router.addRoute (katsauksen ', domEntryPoint => {
domEntryPoint.textContent = 'Yhteenveto Reitti';
});

router.addRoute ( '*' = domEntryPoint> {
domEntryPoint.textContent = 'Default Reitti';
});

Muodostamisen aikana reitittimen täytäntöönpanon valitsee DOM tulokohdan alkuperäisen merkintöjä ja välittää sen reitittimeen. Näin voidaan määritellä ulkopuolelta, jossa sisältö reittiä kohden ovat dynaamisia hineinzurendern. Kukin reitti saa viittaus määritetyn DOM-elementin. Via domEntryPoint.textContent = '...' on esimerkkinä aktiivinen reitti muodossa tekstin pinnalle.