Flytta JavaScript från webbsidan

När du först skriver ett nytt JavaScript är det enklaste sättet att konfigurera det att bädda in JavaScript-koden direkt på webbsidan så att allt finns på en plats medan du testar den för att få den att fungera korrekt. På samma sätt, om du sätter in ett förskrivet skript på din webbplats kan instruktionerna säga att du bäddar in delar eller hela skriptet på själva webbsidan..

Detta är okej för att ställa in sidan och få den att fungera ordentligt i första hand, men när din sida fungerar som du vill ha den kommer du att kunna förbättra sidan genom att extrahera JavaScript till en extern fil så att din sida Innehåll i HTML är inte så rörigt med objekt som inte innehåller innehåll som JavaScript.

Om du bara kopierar och använder JavaScripts skriven av andra människor, kan deras instruktioner för hur du lägger till deras skript på din sida ha resulterat i att du har en eller flera stora delar av JavaScript som faktiskt är inbäddade i själva webbsidan och deras instruktioner berättar inte hur du kan flytta den här koden från din sida till en separat fil och fortfarande ha JavaScript-arbete. Oroa dig inte men för oavsett vilken kod JavaScript du använder på din sida kan du enkelt flytta JavaScript ut från din sida och ställa in den som en separat fil (eller filer om du har mer än en bit JavaScript inbyggd i sidan). Processen för att göra detta är alltid densamma och illustreras bäst med ett exempel.

Låt oss titta på hur en del av JavaScript kan se ut när den är inbäddad på din sida. Din faktiska JavaScript-kod kommer att skilja sig från den som visas i följande exempel, men processen är densamma i alla fall.

Exempel 1

  if (top.location! = self.location) top.location = self.location;  

Exempel två

Exempel tre

  / * if (top.location! = self.location) top.location = self.location; / *]]> * /  

Din inbäddade JavaScript ska se ut som något av ovanstående tre exempel. Naturligtvis kommer din faktiska JavaScript-kod att vara annorlunda än den som visas, men JavaScript kommer antagligen att inbäddas på sidan med en av ovanstående tre metoder. I vissa fall kan din kod använda den föråldrade language = "JavaScript" istället för type = "text / javascript" i vilket fall kanske du vill ta upp din kod mer uppdaterad till att börja med genom att ersätta språkattributet med typen en.

Innan du kan extrahera JavaScript till sin egen fil måste du först identifiera koden som ska extraheras. I alla tre exemplen ovan finns det två rader med faktisk JavaScript-kod som ska extraheras. Ditt skript kommer förmodligen att ha mycket fler rader men kan lätt identifieras eftersom det kommer att uppta samma plats på din sida som de två raderna i JavaScript som vi har markerat i ovanstående tre exempel (alla tre exemplen innehåller samma två rader av JavaScript, det är bara behållaren runt dem som är något annorlunda).

1. Det första du behöver göra för att faktiskt extrahera JavaScript till en separat fil är att öppna en vanlig textredigerare och få tillgång till innehållet på din webbsida. Du måste sedan hitta det inbäddade JavaScript som kommer att omges av en av varianterna av koden som visas i ovanstående exempel.
2. När du har hittat JavaScript-koden måste du välja den och kopiera den till ditt urklipp. Med exemplet ovan markeras koden som ska väljas, du behöver inte välja skripttaggar eller valfria kommentarer som kan visas runt din JavaScript-kod.
3. Öppna en annan kopia av din vanliga textredigerare (eller en annan flik om din redaktör stöder öppning av mer än en fil åt gången) och förbi JavaScript-innehåll.
4. Välj ett beskrivande filnamn som ska användas för din nya fil och spara det nya innehållet med det filnamnet. Med exempelkoden är skriptets syfte att bryta ut ramar så att ett lämpligt namn kan vara framebreak.js.
5. Så nu har vi JavaScript i en separat fil vi återvänder till redaktören där vi har det ursprungliga sidinnehållet för att göra ändringarna där för att länka till den externa kopian av skriptet.
6. Eftersom vi nu har skriptet i en separat fil kan vi ta bort allt mellan skripttaggarna i vårt ursprungliga innehåll så att
7. Det sista steget är att lägga till ett extraattribut till skriptetiketten som identifierar var den kan hitta det externa JavaScript. Vi gör detta med en src = "filnamn" attribut. Med vårt exempelskript skulle vi ange src = "framebreak.js".
8. Den enda komplikationen till detta är om vi har beslutat att lagra de externa JavaScripts i en separat mapp från webbsidorna som använder dem. Om du gör detta måste du lägga till sökvägen från webbsidesmappen till JavaScript-mappen framför filnamnet. Om till exempel JavaScripts lagras i en js mappen i mappen som innehåller våra webbsidor som vi skulle behöva src = "js / framebreak.js"

Så hur ser vår kod ut efter att vi har separerat JavaScript ut i en separat fil? För vårt exempel JavaScript (förutsatt att JavaScript och HTML finns i samma mapp) läser nu vår HTML på webbsidan:

Vi har också en separat fil som heter framebreak.js som innehåller:

if (top.location! = self.location) top.location = self.location;

Ditt filnamn och filinnehåll kommer att skilja sig mycket från det eftersom du kommer att ha extraherat vad JavaScript har inbäddats på din webbsida och gett filen ett beskrivande namn baserat på vad den gör. Den faktiska processen för att extrahera den kommer att vara densamma men oavsett vilka rader den innehåller.