javascript - Hvis flere versioner af JS-filer (Bootstrap) henvises i HTML, hvilken går forud?

HTML indlæser sine biblioteker fra toppen af siden til bunden, korrekt? Hvad hvis du har en ældre version af et framework/bibliotek (f.eks. jQuery eller Bootstrap) refereret nedenfor den nyere version?

Hvordan ville to versioner af Bootstrap, der refereres i HTML, få forrang?

  1. Vil det sidste bibliotek, der indlæses, have forrang?

  2. Vil den seneste JS-version have forrang?

  3. Vil de to JS-versioner indlæses kumulativt?

Gælder det samme for andre biblioteker som CSS?

Undskyld, hvis jeg bruger de forkerte web-termer her. Jeg er stadig ret ny inden for webudvikling og hvordan de forskellige komponenter arbejder sammen. Tak!

  • Bootstrap 3.0.2
  • Bootstrap 3.3.7 ny version

Svar #1

Hvis det er forskellige filer (.js og .min.js), vil de begge blive indlæst kumulativt. Hvis de definerer de samme JavaScript-variabler i samme scope, vil/bør det bibliotek, der vises sidst, vinde. Dette sker, fordi de variabler, der er defineret i det første bibliotek, vil blive tildelt nye værdier fra det andet. I dit eksempel, ved at inkludere både den minificerede og ikke-minificerede version af bootstrap.js på din side, vinder den, der inkluderes sidst.

Dette vil også ske med CSS, hvis de to biblioteker bruger de samme eksakte selektorer/klassenavne med samme specificitetsniveau. Så igen, med dit eksempel på at inkludere begge versioner af Bootstraps CSS, vil den anden blive anvendt. Da de er to forskellige versioner, kan der være en lille overlapning fra det først refererede bibliotek til det andet, så du kan muligvis bemærke nogle mærkelige bivirkninger.

Til orientering: Du ved det sandsynligvis allerede, men en anden læser kan være fristet til at inkludere begge dele. Det er ikke god praksis at inkludere begge sæt filer, fordi det kan føre til uventede resultater, vil øge sidens vægt og antallet af forespørgsler sendt til serveren, hvilket påvirker dine indlæsningstider og i sidste ende brugerens oplevelse.

Svar #2

Flere JavaScript-versioner kan sameksistere på den samme side.

Dette kan ske på sider, der bruger forskellige frameworks, som blev understøttet med forskellige versioner af jQuery. De fleste udviklere vil forsøge at undgå flere versioner af biblioteker, men hvis man retter en kundeside, der allerede er kodet med flere versioner, har man måske ikke den luksus.

For at besvare dit spørgsmål direkte har den sidste funktion i et JavaScript-bibliotek forrang, forudsat at de er defineret præcis på samme måde, ellers ville de to biblioteker i bund og grund smelte sammen. Hvis en funktion ændrede sig fra to til tre argumenter, ville begge være aktive og opføre sig, som om de var overbelastede efter design.

Der er måder at referere til versionen af en JS-fil ved at bruge en variabel som et alias som i eksemplet nedenfor, og nogle biblioteker understøtter også flere komponenter såsom Adobe AEM via Client-side Library Folders og præfiksning af komponenter med et alias, men det er indbygget i hele løsningen.

Her er et eksempel for JQuery

<script src='jquery-1.3.2.js'></script>
<script>
var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jq142 = jQuery.noConflict();
</script>

Hvert framework kunne opføre sig forskelligt, når flere versioner er indlæst, hvilket er grunden til, at udviklere sandsynligvis prøver at undgå det, hvis det er muligt.

Med Cascading Style Sheets (CSS) har den sidste stil prioritet

Hvis du har brug for at tilsidesætte en bootstrap-stil, bør den placeres til sidst. Dette antager samme specifikationsniveau som en regel, hvor en regel med højere specificitet vil have forrang over en mere generisk, uanset hvor den indlæses.