Konvence kódování JavaScriptu. základy javascriptu

Když program potřebuje uložit hodnotu, aby ji mohl později použít, je tato hodnota přiřazena proměnné. Proměnná je jednoduše symbolický název pro hodnotu, který poskytuje možnost získat hodnotu jménem, ​​to znamená, že když je v programu zadán název proměnné, je hodnota nahrazena.

Proměnná má svůj název podle skutečnosti, že její hodnotu lze během provádění programu změnit.

Konstanty

Konstanta je pouze symbolický název pro hodnotu. Konstanta umožňuje odkazovat na hodnotu jménem, ​​což znamená, že když je název konstanty zadán v programu, je hodnota nahrazena. Konstanty slouží k ukládání dat, která by se během provádění programu neměla měnit.

Před použitím konstanty je nutné ji deklarovat. Konstanty jsou deklarovány klíčovým slovem const následovaným názvem konstanty. Aby bylo možné odlišit konstanty od proměnných v kódu programu, bylo dohodnuto, že názvy konstant budou psány velkými písmeny:

Const MAX = 10;

Jakmile byla konstanta vytvořena, pokus o její předefinování na proměnnou nebo pokus o přiřazení hodnoty existující konstantě způsobí chybu.

Proč jsou potřebné proměnné a konstanty

Proměnné a konstanty usnadňují pochopení kódu. Zvažte malý příklad:

Celková cena = 2,42 + 4,33; // Celková cena

Čísla zde mohou znamenat cokoliv. Aby bylo jasné, co je zde shrnuto, lze hodnotu 2,42 přiřadit proměnné (nebo konstantní) candyPrice (cena cukroví) a 4,33 proměnné (neboli konstantní) oilPrice (cena másla):

Celková cena = cena bonbónů + cena oleje;

Nyní, místo abyste si pamatovali, co tyto hodnoty znamenají, můžete vidět, že ve scénáři se k ceně másla připočítává cena sladkostí.

Proměnné a konstanty také pomáhají šetřit čas při ladění skriptu. Místo toho, abyste všude používali stejný literál, můžete jej přiřadit proměnné (nebo konstantě) na začátku skriptu a poté použít proměnnou (nebo konstantu) místo literálu ve zbytku kódu skriptu. Pokud se později rozhodne změnit hodnotu, pak změny v kódu nebudou muset být provedeny na několika místech, ale pouze na jednom místě - tam, kde byla proměnné (nebo konstantě) přiřazena hodnota.

Rozsah konstant

Pro konstanty platí stejná pravidla jako pro proměnné deklarované pomocí klíčového slova let:

Const MAX = 5; // Globální konstanta ( const MAX = 10; // Bloková konstanta console.log(MAX); // 10 ) console.log(MAX); // 5 foo(); // 15 console.log(MAX); // 5 funkcí foo() ( const MAX = 15; // Místní konstanta console.log(MAX); )

Konstanty a referenční typy

Když je ke konstantě přiřazena hodnota typu reference, odkaz na hodnotu se stane neměnným a samotná hodnota zůstane dostupná pro změnu:

Const obj = (a: 5); obj.a = 10; console.log(obj.a); // 10

Od autora: Možná to bude překvapivé, ale JavaScriptu dlouho chybí podpora konstant, tzn. registrované hodnoty, které se během provádění celého skriptu nemění. Při absenci jakýchkoliv alternativ byla většina konstant deklarována pomocí proměnných.

Příklad deklarace konstanty pomocí proměnné:

var DAYSINWEEK = 7;

To je nebezpečné a nepraktické, protože vám to umožňuje kdykoli změnit hodnotu proměnné DAYSINWEEK ve vašem skriptu. Vývojáři přišli s různými způsoby, jak odlišit proměnné, které jsou jakoby konstantami, od běžných proměnných v JavaScriptu, od pojmenování proměnných POUZE VELKÝMI PÍSMENY (nejlepší tradice) až po řešení, o kterých budu mluvit později. Naštěstí nejnovější verze ECMAScript (standardní specifikace) zavedla skutečnou konstantu:

JavaScript. Rychlý start

const DAYSINWEEK = 7;

A nyní je DAYSINWEEK přístupný jako proměnná, ale nikdy nemůžete změnit její hodnotu:

log konzole(DAYSINWEEK); > 7 DAYSINWEEK = 8; > chyba

Jakmile byla konstanta deklarována (konstanty musí být inicializovány klíčovým slovem const a následným názvem konstanty, který se řídí pravidly pro pojmenování proměnných), bude její název rezervován: již nemůžete pojmenovat proměnnou DAYSINWEEK a mít konstantu s tímto stejného jména nebo naopak.

Klíčové slovo const má dobrou podporu v moderních prohlížečích: IE11 a Spartan, Firefox 31+, Opera 12+, Safari 5.1.7+, iOS 7 a vyšší, spolu s Chrome 36+. Existuje však několik důležitých upozornění:

Chrome nepodporuje výstup chyby při pokusu o přepsání konstanty. Hodnota konstanty se stejně nezmění, ale nezkušený vývojář si může myslet, že nová hodnota byla použita, protože nebyla vyvolána žádná chyba.

JavaScript. Rychlý start

Naučte se základy JavaScriptu s praktickou ukázkou tvorby webové aplikace

Konstanty nevytvářejí nový rozsah ve Webkitu. Tito. konstanty mohou být viditelné mimo aktuální rozsah.

Firefox 35 a nižší vám umožňuje měnit hodnotu const za chodu. To bylo opraveno ve Firefoxu 36+.

Je třeba také poznamenat, že problémy s Webkit nastávají pouze v případě, že není použit přísný režim (o čemž bude řeč v některém z následujících článků).

Je nyní možné použít klíčové slovo const v reálných projektech?

Volba, zda v kódu použít klíčové slovo const či nikoli, bude záviset na několika faktorech: nejdůležitější je, jaké verze prohlížečů návštěvníci vašeho webu používají, protože použití klíčového slova const by bylo v prohlížečích jako IE10 považováno za chybu. Pokud chcete během vývoje použít klíčové slovo const, ale nejste připraveni jej použít ve skutečných projektech, máte několik možností:

Možnost 1: použijte transpiler ("transpiler")

Transpilers, jak název napovídá, transformují váš kód v době kompilace do jiného jazyka: v tomto případě z verze specifikace ES6 (která zavedla klíčové slovo const) do jazyka ES5. To vám umožní psát kód v novější verzi jazyka, ale skutečný projekt bude používat verzi, která je kompatibilní s širším spektrem prohlížečů. Addy Osmani Kompilováno

V tomto článku se dozvíte, jak to určit konstanty v JavaScriptu pomocí klíčového slova const.

ES6 poskytuje nový způsob, jak deklarovat konstanty pomocí klíčového slova konst. Klíčové slovo konst vytvoří odkaz na hodnotu pouze pro čtení.

Const NÁZEV PROMĚNNÉ = hodnota;

Podle dohody konstantní identifikátory v JavaScriptu jsou velká písmena.

Klíčové slovo konst vypadá jako klíč nechat slovo v tom, že vytváří proměnné s rozsahem bloků, ale hodnoty deklarované pomocí const, nelze změnit.

Proměnné deklarované pomocí klíčového slova nechat jsou měnitelný. To znamená, že jejich hodnoty můžete kdykoli změnit, jak ukazuje následující příklad.

nechť v = 10;
v = 20;
v = v + 5;
konzolový log(v); // 35

Proměnné však vytvořené pomocí klíčového slova konst, jsou neměnné. Jinými slovy, nemůžete jim přiřadit jiné hodnoty. Pokus o opětovné přiřazení konstantní proměnné povede k chybě typu TypeError .

Const TAX = 0,1;
DAŇ = 0,2 ; // TypeError

Také proměnná, která je deklarována pomocí klíčového slova konst, musí být okamžitě inicializována hodnotou. Následující příklad volá Chyba syntaxe(syntaktická chyba) kvůli chybějícímu inicializátoru v deklaraci konstantní proměnné.

Const RED; // Chyba syntaxe

Jak již bylo zmíněno dříve, jako proměnné deklarované pomocí klíčového slova nechat, proměnné deklarované pomocí klíčového slova konst, mají blokový rozsah.

To je vše a v příštím článku si povíme něco o používání klíčového slova konst s objektovými literály v JavaScript.

Taky jsem s tím měl problém. A po dlouhé době hledání odpovědi a prohlížení všech odpovědí od všech si myslím, že jsem na to přišel s životaschopným řešením.

Zdá se, že většina odpovědí, se kterými jsem se setkal, používá funkce k udržení konstant. Jak píše mnoho uživatelů MNOHA fór, funkce mohou být snadno přepsány uživateli na straně klienta. Zaujalo mě Keith Evetts“ odpovídá, že k objektu konstant nelze přistupovat zvenčí, ale pouze z funkcí uvnitř.

Tak mě napadlo toto řešení:

Vložte vše do anonymní funkce, takže proměnné, objekty atd. nelze změnit na straně klienta. Také skryjte "skutečné" funkce tím, že ostatní funkce volají "skutečné" funkce zevnitř. Také mě napadlo použít funkce ke kontrole, zda byla funkce změněna uživatelem na straně klienta. Pokud byly funkce změněny, změňte je zpět pomocí proměnných, které jsou uvnitř "chráněné" a nelze je změnit.

/*Testováno v: IE 9.0.8; Firefox 14.0.1; Chrome 20.0.1180.60m; Netestováno v Safari*/ (funkce()( /*Dvě funkce _define a _access jsou od Keitha Evetta 2009 License: LGPL (SETCONST a CONST). Jsou stejné jako on, jediné co jsem změnil, jsou názvy proměnných a text chybových zpráv.*/ //objektový literál pro uchování konstant var j = (); /*Globální funkce _define(Řetězec h, smíšené m). Nazval jsem ji definovat, abych napodobil způsob PHP " definuje" konstanty. Argument "h" je název const a musí to být řetězec, "m" je hodnota const a musí existovat. Pokud již v držiteli objektu existuje vlastnost se stejným názvem , pak vyvoláme chybu. Pokud ne, přidáme vlastnost a nastavíme jí hodnotu. Toto je "skrytá" funkce a uživatel nevidí žádnou z vašich kódovacích funkcí volajících tuto funkci. Voláte _makeDef() v */ self._define = function(h,m) ( if (typeof h !== "string") ( throw new Error("Nevím, co mám dělat."); ) if (!m) ( vyvolá novou chybu("Nevím, co mám dělat."); ) else if ((h v j)) (hodí novou chybu("Máme problém!"); ) else ( j[h] = m; return true; ) ); /*Globální funkce _makeDef(Řetězec t, smíšené y). Pojmenoval jsem ji makeDef, protože pomocí této funkce „vytváříme definici“. Argument „t“ je název const a nemusí být velká, protože jsem ho ve funkci nastavil na velká písmena, "y" je hodnota hodnoty const a musí existovat. Vytvářím různé proměnné, aby bylo pro uživatele těžší zjistit, co se děje. Poté zavoláme funkci _define se dvěma novými proměnnými. Tuto funkci zavoláte ve svém kódu pro nastavení konstanty. Chybovou zprávu můžete změnit na cokoliv, co chcete, aby říkalo. */ self._makeDef = function(t, y) ( if(!y) ( vyvolá novou chybu ("Nevím, co mám dělat."); return false; ) q = t.toUpperCase(); w = y; _define(q, w); ); /*Globální funkce _getDef(String s). Pojmenoval jsem ji getDef, protože touto funkcí „získáme definici“. Argument „s“ je název const a ne "Nemusí být celá velká, protože jsem to ve funkci nastavil na velká písmena. Vytvořím jinou proměnnou, aby bylo pro uživatele těžší zjistit, co se děje. Funkce vrátí volání funkce _access. Novou proměnnou a původní řetězec předám funkci _access. Dělám to proto, že pokud se uživatel pokouší získat hodnotu něčeho, pokud dojde k chybě, argument se v chybové zprávě nezobrazí s velkými písmeny. Tuto funkci zavoláte ve svém kódu, abyste získali konstantu. */ self._getDef = funkce(y) ( z = s.toUpperCase(); return _access(z, s); ); /*Globální funkce _access(Řetězec g, Řetězec f). Nazval jsem to přístup, protože prostřednictvím této funkce „přistupujeme“ ke konstantě. Argument "g" je název const a jeho všechna velká písmena, "f" je také název const, ale je to původní řetězec, který byl předán funkci _getDef(). Pokud dojde k chybě, zobrazí se původní řetězec „f“. To ztěžuje uživateli zjistit, jak jsou konstanty uloženy. Pokud je v držáku objektu vlastnost se stejným názvem, vrátíme konstantní hodnotu. Pokud ne, zkontrolujeme, zda proměnná "f" existuje, pokud ne, nastavíme ji na hodnotu "g" a vyhodíme chybu. Toto je "skrytá" funkce a uživatel nevidí žádnou z vašich kódovacích funkcí, abyste tuto funkci zavolali. Ve svém kódu zavoláte funkci _getDef() a tato funkce tuto funkci zavolá. Chybové zprávy můžete změnit na cokoliv chcete. */ self._access = function(g, f) ( if (typeof g !== "string") ( throw new Error("Ne\"nevím, co mám dělat."); ) if (g in j) ( return j[g]; ) else ( if(!f) ( f = g; ) hodit new Error("Nevím, co mám dělat. Nemám ponětí, co je \""+f+" \" ."); ) ); /*Čtyři proměnné níže jsou soukromé a nelze k nim přistupovat z vnějšího skriptu kromě funkcí uvnitř této anonymní funkce. Tyto proměnné jsou řetězce čtyř výše uvedených funkcí a budou používány všemi obávanými funkce eval() pro jejich nastavení zpět na původní, pokud by některý z nich měl být změněn uživatelem, který se pokouší hacknout váš kód. */ var _define_func_string = "function(h,m) ("+" if (typeof h !== "string") ( vyvolá novou chybu("Nevím, co mám dělat."); )"+" if (!m) (hodí novou chybu("Nevím, co mám dělat. "); )"+" else if ((h v j)) ( vyvolá novou chybu("Máme problém!"); )"+" else ("+" j[h] = m;"+" vrátí true;" +" )"+" )"; var _makeDef_func_string = "function(t, y) ("+" if(!y) ( vyvolá novou chybu("Nevím, co mám dělat."); return false ; )"+" q = t.toUpperCase();"+" w = y;"+" _define(q, w);"+" )"; var _getDef_func_string = "funkce(y) ("+" z = s.toUpperCase();"+" return _access(z, s);"+" )"; var _access_func_string = "function(g, f) ("+" if (typeof g !== "string") ( vyvolá novou chybu ("Nevím, co mám dělat."); )"+" pokud (g in j) ( return j[g]; )"+" else ( if(!f) ( f = g; ) hodit new Error("Nevím\\" co mám dělat. Netuším co \\""+f+"\\" je. "); )"+" )"; /*Globální funkce _doFunctionCheck(String u). Pojmenoval jsem to doFunctionCheck, protože „kontrolujeme funkce“ Argument „u“ je název kteréhokoli ze čtyř výše uvedených názvů funkcí, které chcete zkontrolovat. Tato funkce zkontroluje, zda je konkrétní řádek kódu uvnitř dané funkce. Pokud ano, pak neděláme nic, pokud ne, pak použijeme funkci eval() k nastavení funkce zpět do původního kódování pomocí proměnných funkčního řetězce výše. to true Toto je "skrytá" funkce a uživatel to neudělá. Pokud nevidíte žádné z vašich kódů, zavolejte tuto funkci. Voláte funkci doCodeCheck() a tato funkce volá tuto funkci. - Chybové zprávy můžete změnit na cokoliv, co chcete, aby říkaly. */ self._doFunctionCheck = function(u) ( var errMsg = "Máme VELKÝ problém! Změnili jste můj kód."; var doError = true; d = u; switch(d.toLowerCase()) ( case "_getdef": if(_getDef.toString().indexOf("z = s.toUpperCase();") != -1) ( /*nedělat nic*/ ) else ( eval("_getDef = "+_getDef_func_string); if(doError === true) ( ​​hodit novou Error(errMsg); ) ) break; case "_makedef": if(_makeDef.toString().indexOf("q = t.toUpperCase();") != -1 ) ( /*nedělat nic*/ ) else ( eval("_makeDef = "+_makeDef_func_string); if(doError === true) ( ​​hodit novou chybu Error(errMsg); ) ) break; case "_define": if(_define. toString().indexOf("else if((h v j)) (") != -1) ( /*nedělat nic*/ ) else ( eval("_define = "+_define_func_string); if( doError === true) ( ​​hodit novou chybu Error(errMsg); ) ) přerušení; malá a velká písmena "_access": if(_access.toString().indexOf("else ( if(!f) ( f = g; )" ) != -1) ( /*nedělat nic*/ ) else ( eval("_access = "+_access_func_string); if(doError === true) (vyhodit novou Error(errMsg); ) ) break; výchozí: if(doError === true) ( ​​throw new Error("Nevím, co mám dělat."); ))); /*Globální funkce _doCodeCheck(String v). Pojmenoval jsem to doCodeCheck, protože „provádíme kontrolu kódu“. Argument „v“ je název jedné z prvních čtyř funkcí v tomto skriptu, kterou chcete zkontrolovat. Vytvořím jinou proměnnou, aby to bylo pro uživatele obtížnější. uživatel, aby zjistil, co se děje. Tuto funkci zavoláte ve svém kódu, abyste zkontrolovali, zda uživatel nějakou z funkcí nezměnil. */ self._doCodeCheck = function(v) ( l = v; _doFunctionCheck(l); ) ;)())

Zdá se také, že bezpečnost je opravdu problém a neexistuje způsob, jak „skrýt“ vaše programování ze strany klienta. Dobrý nápad pro mě je zkomprimovat váš kód tak, aby jej bylo opravdu těžké pro kohokoli, včetně vás, programátora, přečíst a porozumět mu. Existuje stránka, na kterou můžete přejít: http://javascriptcompressor.com/ . (Toto není moje stránka, nebojte se, nedělám reklamu.) Toto je stránka, která vám umožní zdarma komprimovat a zatemňovat Javascriptový kód.

1. Zkopírujte veškerý kód ve výše uvedeném skriptu a vložte jej do horní textové oblasti na stránce javascriptcompressor.com.
2. Zaškrtněte políčko Kódování Base62, zaškrtněte políčko Shrink Variables.
3. Stiskněte tlačítko Komprimovat.
4. Vložte a uložte vše do souboru .js a přidejte jej na svou stránku v záhlaví stránky.