-
PROHARDVER!
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
Jim-Y
veterán
válasz
PumpkinSeed #5059 üzenetére
User error sajnos
document.getElementsByClassName('shipsIndex2')[0].innerHTML;
A getElementsByClassName egy array-like objecttel ter vissza.
Ez utobbit vagy atalakitod true array-re, vagy call-al hivod az Array.prototype.* metodusokat rajta.
-
Jim-Y
veterán
válasz
PumpkinSeed #5050 üzenetére
function test(local) {
global = local;
} -
Jim-Y
veterán
válasz
Sk8erPeter #5045 üzenetére
Hát igen.. jó dolog (volt) a jQuery, ezt szerintem senki nem is vitatja, csak azóta, hogy az IE6/7 kezd tényleg kimenni a divatból, és azóta, hogy a WebAPI is sokat fejlődött, pl querySelector(All) egyre kevesebb szerep jut a jQuerynek. Ugye a jQ pont amiatt volt jó, hogy elmosta a böngészők közti különbségeket, de a modern böngészők már sokat fejlődtek ebben. Nem tudom, hogy tudjátok-e, de a jQuery kb 90%-át 3 dolog teszi ki. Az egyik, és legnagyobb rész, az a Sizzle, utána az ajax XHR, majd a jQ animations. Ebből az elsőre már pár éve van jó alternatíva, az előbb említett querySelector személyében viszonylag jó támogatottsággal. A másodikra majd talán most lesz jó alternatíva a fetch API személyében, utóbbira pedig vannak sokkal jobb stanalone libek, meg ugye ott a HTML5 + CSS3. Ezen dolgok miatt jósolom amúgy, hogy az elkövetkezendő években durván tovább fog csökkenni a jQuery népszerűsége. Ami már most is tart amúgy...
-
Jim-Y
veterán
válasz
martonx #5038 üzenetére
Én nem voltam még ilyen jellegű konferencián, csak Hacktivity-n, de szerintem nem rosszak. Max annyi van, hogy nem érik meg a pénzt, azt aláírom
Érdekes amúgy amit írsz a programról. Én eléggé szkeptikus voltam a programot illetően (háttérinfó, egészen mostanáig még nem volt kint a program, csak az előadók listája), arra számítottam, hogy nem lesznek túl érdekesek az előadások, de most, hogy este elolvastam a programot.. hát basszus nem nagyon van olyan ami ne érdekelne. Bőven jobb, mint amire számítottam
"unidirectional dataflow, reactive and functional programming" \o/
"three.js and WebGL" o/
"Functional UIs and Unidirectional Dataflow" o/
"Enforcing coding standards in a JS library" \o/
"Transform your codebase without breaking a sweat" o/
"Diving into io.js C++ internal" \o/
"Dependency Injection for Future Generations" o/ -
Jim-Y
veterán
DevTools new features. Ez utóbbi, wow. De tényleg, wow...
-
Jim-Y
veterán
Nekem volt anno egy projektem ahol Angular-Dart-ot használtam, tehát nem nulláról indulok, hanem mondjuk 1-ről
Érdekesség, hogy az AngularDart nagyban hasonlít (így első ránézésre) az Angular 2.0-ra, ami amúgy NEM MEGLEPŐ. Az egyik podcastban úgy emlékszem említette is valaki, hogy az AngularDart team célja a googlenél pont ez volt, hogy az angularos újdonságokat ott próbálják ki. Tehát arra számítok, hogy ami az AngularDartban 1 évvel ezelőtt benne volt az most bekerül majd a 2.0-ba
-
Jim-Y
veterán
Btw, jön erre (még) valaki a topikból? http://jsconfbp.com/
Ha minden jól megy (lekopogom), akkor lehet a szeptemberi berlinire is eljutok -
Jim-Y
veterán
Üdv,
Tudtok igazán jó resource-ot Angular tanuláshoz? Dunát lehet rekeszteni Angularos oktató videókkal/cikkekkel/howtokkal stb.. nehéz lenne átnyálazni magam rajtuk, és lehet másnak már van tapasztalata, hogy honnan érdemes elkezdeni. üdv
-
Jim-Y
veterán
Elég durva a JetBrains support. Tegnap éjjel nyitottam egy ticketet, ma d.e 10-kor jött rá a válasz. Jó válasz volt, megoldotta a problémát, de csak este tudtam kipróbálni, válaszként leírtam nekik, hogy működik a workaround, köszönöm szépen. Ez volt ma este 9-kor, és egy órán belül jött a válasz
Vagy nincs életük, vagy ennyire jó a support :-O Akárhogy is, nagy +1 a JetBrains teamnek.
-
Jim-Y
veterán
válasz
Speeedfire #5024 üzenetére
Ez nem projekt/feladat specifikus kerdeskor, hanem altalanos szoftverfejlesztesi. Ha mindig csak specifikus megoldasokat csinalunk akkor nem lesz robosztus a kod. Bar a masik oldalra sem szabad atesni, hogy olyankor is altalanosabb megoldasban gondolkozunk, amikor egyedi megoldas kene
Vekony a mezsgye a ket dolog kozott
-
Jim-Y
veterán
válasz
Tibcsi55555 #5012 üzenetére
window.onload = incCounterOnServer();
-
Jim-Y
veterán
válasz
Sk8erPeter #4980 üzenetére
Huu pedig amugy errol meg olvastam is egy cikket, ami pont errol a kifejezesrol szolt -> steep learning curve. Sajnos tenyleg rossz beidegzodes, mert sajnos ez jut eszembe eloszor ha azt akarom kifejezni, hogy X dolgot talan nehezebb vagy tobb ido elsajatitani mint Y-t :/
Ez amugy szerintem pont olyan fogalom, mint a "easier to reason about". Aminek oszinten szolva sosem ertettem meg pontosan a jelenteset
Szv ja.. evvan'
-
Jim-Y
veterán
Nekem igazabol pont ezert szimpatikusabb a React+Flux mint egy monolitikus fw, mert mig az utobbi mindenre tesz ajanlast, sot inkabb mindenre megmondja, hogy te ehhez ezt hasznald, es azt igy csinaldd, addig az utobbi esetben
react -> view layer. component based -> nagyon tetszik a komponenselvusege
flux -> single way dataflow. Ez nagzjabol az architektura kiepiteseben segit, es abban, hogy a komponenseim hogyan kommunikaljanakes ennyi.. semmi masra nem tesz megkotest sem javaslatot sem semmit. Valahogy fetchelni kene az adatokat a szerverrol? A felhasznalon mulik hogy mit hasznal hozza, XHR? vagy egy direkt erre specializalodott modult? Rajtad all. Kell valami data layernek? megint csak rajtad all, hogy ImmutableJS-t vagy Backbone-t vagy barmi mast hasznalsz. Ennek azert jo sok elonyei vannak a monolitikus frameworkokkel szemben mint az Angular vagy az Ember.
Hatrany, hogy a tanulasi gorbe talan meredekebb.
-
Jim-Y
veterán
Ehhez annyi kiegeszites, hogy a ReactJS (es tudom, hogy ezt te is tudod, csak felreertheto a dolog) nem egy kompetitiv framework, hanem csak egy lib. Pl vannak akik Angularral hasznalnak Reactot, de Reactot lehet Backbone-al is stb.. A lenyeg, hogy a React onmagaban csak egy V, A React+Flux igy egyutt ad ki egy majdnem frameworkot...
-
Jim-Y
veterán
Btw, nem tud nekem valaki ebben segíteni? SO: JSDoc + AMD?
-
Jim-Y
veterán
válasz
martonx #4951 üzenetére
Nem tudom emlékeztek-e, nemrég volt téma itt a topikban, a JavaScript the Weird Parts. Nem tudom, hogy ez ugyanaz-e vagy sem, de már az első bekezdésben kiverte a biztosítékot nálam: [link]
< x=[0]
> [0]
< x===x
> true
< x===!x
> false
< Array(3)===",,"
> falseNafene, akkor lehet mégiscsak user error?
js> typeof null
"object"Ez mondjuk tényleg egy tervezési bug. Ez jogos. Illetve az is jogos, hogy a typeof és instanceof operator kicsit máshogy működik, mint ahogy azt az ember elvárná. De ez sem a nyelv hibája, csak max nem intuitív.
js> 0.1+0.2==0.3
falseMegint csak... ez nem a nyelv hibája, hanem max a tervezőjéé aki rossz ábrázolási metodikát választott, merthogy ez más nyelvekben is így van:
class NumberTest {
public static void main(String[] args) {
double a = 0.1;
double b = 0.2;
double res = 0.3;
System.out.println(a+b); // 0.30000000000000004
System.out.println(a+b == res); // false
}
}--------
js> Math.max()>Math.min()
falseEz megint mi, mintha az nézném, hogy console.log() > console.debug() ami mondjuk adna valami eredményt, én meg. Hűűűűű, na ez deszar.. -.-
---------
js> true+true===2
true
js> true-true===0
trueNa.. mégiscsak ismeri a === operátort? Meg amúgy is, ki az a hülye aki explicit össze akar adni két boolean értéket?! Mert mi legyen az eredmény? Gondolom true+true legyen true. De akkor mi legyen true+false? Most akkor ilyen helyzetben a '+' legyen egy bináris és, vagy egy bináris vagy?! .. mekkora hírhajhász az ilyen..
-
Jim-Y
veterán
-
Jim-Y
veterán
Ezer ilyen van a neten, de ha mar szorakoztam vele egy kicsit, akkor leirom
function Animal(breed) {
this.breed = breed;
}
function Monkey(name) {
Animal.call(this, 'mammal');
this.name = name;
}
Monkey.prototype = new Animal();
Monkey.prototype.constructor = Monkey;
var charlie = new Monkey('Charlie');
console.log(charlie.name, charlie.breed); //"Charlie" "mammal"
console.log(charlie instanceof Animal); // true
console.log(charlie instanceof Monkey); // trueEloszor csinalunk egy Animal constructor function-t (hivjuk osztalynak). Az animal osztaly nem csinal mast, csak letrehozhatunk belole a new kulcsszoval olyan objektumokat amiknek beallithatjuk a breed propertijet valamire.
Utana letrehozunk egy Monkey osztalyt amivel szinten uj objektumokat tudunk gyartani majd, amiknek nevet adhatunk. Mivel elore tudjuk, hogy minden Monkey objektum egyben egy Animal is, vagyis minden majom egy allat, ezert tudjuk, hogy a Majom osztalyt az Allat osztalybol kell majd orokoltetni. Azt is tudjuk, hogy minden majom fajtaja emlos lesz, ezert ezt mixin inheritance-el allitjuk be. Animal.call(this, 'mammal')
Monkey.prototype = new Animal();
Monkey.prototype.constructor = Monkey;A fenti ket sor szolgal arra, hogy egy is-a relaciot tudjunk felallitani a Monkey es az Animal osztaly kozott.
A mixin iheritance es a sima kozott az a kulonbseg, hogy az elobbi esetben lemasoljuk a szulo osztaly mezoit es azokat mint sajatokat hasznaljuk. Elobbi esetben explicit nem masoljuk at a propertiket, hanem referenciaval valo ramutataskor visszakeressuk oket a prototype chainben.
klasszikus eset:
============function Animal(breed) { this.breed = breed; }
function Monkey(name) { this.name = name; }
Monkey.prototype = new Animal('mammal');
Monkey.prototype.constructor = Monkey;
< var george = new Monkey('George');
> undefined
< george.breed
> "mammal"
< george
> Object { name: "George" }Ekkor azt varjuk, hogy a george objektum protipusa a Monkey prototipusara fog mutatni, aminek a prototipusa az Animal prototipusara, aminek a belso prototipusa az Object prototipusara aminek a prototipusa viszont mar nem fog masra mutatni. Ez az ugynevezett prototype chain.
< george.__proto__.__proto__.__proto__ === new Object().__proto__
> trueAz oroklodes itt JavaScriptben ugy mukodik, hogy ha leirsz egy olyat, hogy george.breed akkor eloszor megnezi a runtime, hogy a george objektumban van-e breed nevu mezo, ha van akkor visszaadja az erteket, ha nincs akkor megnezi hogy a george prototipusa mire mutat es ott is elkezd keresni. Egeszen addig visszamegy a prototype chainben amig null-hoz nem er. Ha nem talalja meg, akkor undefined-al ter vissza.
< george.gender
> undefinedUgyanigy mukodik a metoduskra valo "kereses".
< Object.prototype.dummyMethod = function() { return 'dummy'; };
> function Object.prototype.dummyMethod()
< Object.dummyMethod()
> "dummy" -
Jim-Y
veterán
válasz
PumpkinSeed #4935 üzenetére
W3schools-rol szerintem meg tovabbra sem erdemes tanulni. Korabban meg ennyire sem volt erdemes mint most -> http://www.w3fools.com/
De ezek szerint azota sem lett sokkal jobb. Lehet azota nem tanitanak hulyeseget, de azt legalabb jol sem
Egyreszt a ezeket constructor function-oknek szokas nevezni, masreszt pont a megkulonboztetes vegett nagybetuvel szokas irni, mint mas nyelveknel az osztalyokat. Ugye-ugye w3schools a function person -nal
Szoval azt ajanlom, hogy gyorsan felejtsd el ezt az oldalt mivel vannak nala sokkal jobb oldalak ahonnan tanulni lehetne.
megj: mar csak azert sem jo szerintem a constructor function-t prototype-nak nevezni, mert igy siman osszekeverheto az object inner prototype fieldjevel, amin az egesz prototipusos oroklodes alapszik :/
-
Jim-Y
veterán
válasz
PumpkinSeed #4930 üzenetére
Nem lehet, hogy te kevered a fogalmakat? Nem a constructor function vs. object literal-ra gondolsz inkabb?
Constructor function:
function Animal(name) {
this.name = name;
}
var monkey = new Animal('Charlie');vs.
var monkey = {
name: 'Charlie'
};A prototype az mas. A javascript prototipusos oroklodesen alapulo nyelv. [link] [link]
-
Jim-Y
veterán
if (item) helyett if (item !== void 0) inkabb. Sorry
Illetve, ha ES5 a target, akkor
function take(arr) {
var indices = [].slice.call(arguments, 1);
return indices.reduce(function (accumulator, curr) {
var item = arr[curr];
if (item !== void 0) {
accumulator.push(item);
}
return accumulator;
}, []);
} -
Jim-Y
veterán
Ezt igy tombokkel nem tudod megcsinalni, de irhatsz ra egy fuggvenyt.
function take(arr, ...indices) {
return indices.reduce(function(accumulator, curr) {
var item = arr[curr];
if (item) {
accumulator.push(item);
}
return accumulator;
}, []);
}
console.log(take(['alma', 'korte', 'szilva'], 0, 2, 4).join()); "alma,szilva"Vagy jatszhatsz az ES6 destructuring args-al -> http://www.2ality.com/2015/01/es6-destructuring.html
-
Jim-Y
veterán
Szia.
En ezt hallottam mar sokszor, de meg nem hasznaltam, igy nem tudom, hogy milyen :/ http://passportjs.org/
-
Jim-Y
veterán
válasz
Sk8erPeter #4878 üzenetére
+1
Nem is értem -őszintén-, hogy mi visz rá valakit, hogy ne angolul programozzon. Attól még a termék/oldal nyílván lehet német, olasz, vagy akármi. Aki így tesz annak nem tűnik fel, hogy a
function
for
switch
new
..stb
sem németül, olaszul, egyéb nyelven van? -
Jim-Y
veterán
válasz
fordfairlane #4861 üzenetére
Akkor jo, bocs
-
Jim-Y
veterán
válasz
fordfairlane #4858 üzenetére
Hat, ha most ez csak egy beszolas akart lenni a typo miatt, akkor arra nem tudok mit valaszolni
De tenyleg, akkor csak -.-
Ha nem, hanem egy kerdes, akkor: http://jscoercion.qfox.nl/. Implicit type coercion-nek nevezik azokat a helyzeteket ahol a nyelv szemantikaja hatarozza meg a kiertekelendo kifejezes tipusat. Ilyen tipus kikovetkeztetes tortenik amikor valaki az == operatort hasznalja a === operator helyett. Ilyenkor a nyelv szabalyainak megfeleloen az egyik argumentumot mas tipusra konvertalja amit mar ossze tud majd hasonlitani a masik argumentummal. Ezek a szabalyok eleg bonyolultak, vagy nem is bonyolultak, de nehez megjegyezni oket, ezert nem szabad az implicit type coercion-re tamaszkodni, hanem mindenhol explicit megmondani, hogy mit szeretnenk.
Pl az x == null, nem csak azt ellenorzi, hogy az x az null-e, hanem egyben azt is ellenorzi, hogy undefined-e. Megsem ajanlott ezt irni, hanem explicit kiirni, hogy
if (x === null || x === void 0)
Mashol is elojon type coercion -> http://speakingjs.com/es5/ch08.html#type_coercion
-
Jim-Y
veterán
válasz
martonx #4856 üzenetére
Nem is kifejezetten neked cimeztem a valaszt, hanem ugy altalanossagban a temahoz. Legtobbszor en is olyanoktol olvastam az ilyen jellegu "cikkeket", akik egy kicsit sem konyitottak a temahoz, frissen talalkoztak a JS-el, majd szornyulkodve kezdtek azonnali posztolasba az ilyen frucsa viselkedesekrol. Onnan veszem, hogy akik ilyeneket irnak sokszor (nyilvan nem mindig) nem ertenek hozza, hogy altalaban el szoktam olvasni a hozzaszolasokat is, ahol mindig be szoktak nekik linkelni a referenciabol a coersion szabalyokat, es mindig az a valasz, hogy azt se tudtak, hogy van ilyen referencia
Meg hogy az X nyelvben amiben ok programoznak ez mennyivel logikusabb, es hogy pfuj.. na szoval az ilyenekre ezert nem adok sokat, sot egy kicsit engem is duhit, mert aki kezdo, az azt hiszi, hogy a nyelv egesz egyszeruen szarul mukodik, pedig nem igy van, csak furcsa konverzios szabalyai vannak.
-
Jim-Y
veterán
válasz
martonx #4851 üzenetére
Mennyi ilyet lattam mar.. ilyenkor mindig az az erzesem, hogy ha valaki nem erti a nyelvet, akkor ne hasznalja, ha pedig ugy latja, hogy az implicit coersion-ok fuck logiccal mukodnek, akkor ne hasznaljon implicit coersion-t. Ezek a posztok egy az egyben polgarpukkasztasra mennek.
-
Jim-Y
veterán
Ajánlott olvasmány.
Nekem is egyébként a komponens alapú megközelítés tetszik legjobban a Reactban. Főleg nagy cég szintjén előbb utóbb előjön az az igény, hogy ugyanazt a technológiát használó projektek között jó lenne kódot megosztani.
-
Jim-Y
veterán
De, a sima return-nek bőven van haszna, ugyanis a segítségével lehet idő előtt megszakítani a metódus interpretálását.
Ezek mind-mind ugyanazt eredményezik> (function(){ return void 0; })();
undefined
> (function(){ return; })();
undefined
> (function(){ return undefined; })();
undefined
> (function(){ return console.log('returned'); })();
returned
undefinedAnnyi, hogy az utolsó esetben egy kis "trükkhöz" folyamodunk, ezt általában node esetén használják, ugyanis ott van egy "error first"-nek nevezett stílus, így lettek a core modulok megírva. Ezt azt jelenti, hogy:
ORM.find({}, function successCallback(err, datas) {
if (err) {
console.error('Error happened, returning', err);
}
response.send(200, datas);
});Ez a példa hibás, ugyanis nem sikerült az adatbázisból való lekérdezés, hiba történt, így vissza kéne térni a függvényből, hogy a response.send ne futhasson le, ugyanis a datas adatoknak nincs értékük. Ezt kéne írni:
ORM.find({}, function successCallback(err, datas) {
if (err) {
console.error('Error happened, returning', err);
return;
}
response.send(200, datas);
});De az emberek sűrűn elfelejtik kiírni a return;-t így inkább ezt szokták javasolni:
ORM.find({}, function successCallback(err, datas) {
if (err) {
return console.error('Error happened, returning', err);
}
response.send(200, datas);
});==================================================
Amit a konzolban kaptál az pedig szerintem csakis annyiról szól, hogy az emberek ne a return false;-t használják az e.preventDefault() helyett.
-
Jim-Y
veterán
Szia, belinkeled légyszi, ahol ezt írták, hogy "elveszik a támogatottságát"? Furcsa lenne.. ez nem olyan amit ki lehet védeni.
Az event.preventDefault () és return false- ról egy csomó stackoverflow thread szól: pl, pl2
A return; így simán visszatér a hívóhoz egy undefined értékkel. JavaScriptben return-t írni a függvény végére azért nincs értelme, mert lexikálisan a záró kapcsos zárójel után amúgy is visszatér a vezérlés a hívóhoz, és JavaScriptben ha nincs explicit visszatérési érték megadva, akkor undefined lesz a visszatérési érték.
Egyébként ezzel a résszel nincs gond:
handleSubmit: function(e) {
e.preventDefault();
var author = this.refs.author.getDOMNode().value.trim();
var text = this.refs.text.getDOMNode().value.trim();
if (!text || !author) {
return;
}Egy eseménykezelőben sűrűn hívunk először egy prevDef-et, hogy a kilőtt event alapértelmezését felül tudjuk írni. A függvényből való vezérlésvisszaadás nem megfelelő értékek esetén is egy bevált gyakorlat.
-
Jim-Y
veterán
Na hat akkor en el is kezdenem rogton egy kerdessel.
Bevezetes: A Dart (dart2js) compiler automatikusan csinal tree shakinget, amit azert tud megtenni, mert a kod nem valtozik dinamikusan compile utan. Tehat pl classokhoz letrehozas utan nem lehet nyulni. Ezt egy nagyon jo dolognak tartom, marmint a tree shakinget, es azon gondolkoztam, hogy vajon van e mar ilyen javascripthez is.
Innen jutottam el a Google Closure Compilerhez. Kerdeznem, hogy van-e valakinek ezzel tapasztalata? Peldaul mennyire jo otlet a production build-be egy olyan lepest tenni, ami lefuttatja a bundle fajlt a g.c.c-en?! Production build alatt most nem munkahelyi kornyezetben levo prod buildet kell erteni, hanem mondjuk a sajat kis applikaciodnal, amikor csinalsz egy full dist-et, akkor mennyire lehet ennek letjogosultsaga? Ugy tudom, hogy egyreszt nem lehet akarmennyiszer hasznalni a g.c.c-t, illetve nem is a sajat gepeden fut, hanem talan a Cloudon?!
TreeShaking ~dead code elimination: Kiszuri a kododbol azokat a reszeket amikre nincs referencia, ezaltal optimalizaltabb kodot kapsz eredmenyul.
Udv,
Koszimegj: van egy standalone java alkalmazas is ra, ezt megtalatam kozben
-
Jim-Y
veterán
válasz
Sk8erPeter #4813 üzenetére
Amúgy egyetértek, mit sem ér a sok új syntactic sugar, ha még nem érti valaki az alapokat, vagy nem kódolt eleget ahhoz, hogy értékelni tudja például a spread operátort. Nekem például ez már többször is előjött, hogy de jó is lenne, ha egy tömböt szét lehetne robbantani pozícionális argumentumokra még mielőtt megjelent volna az ES6-ban. Persze ott volt erre az apply, de akkor is
Zedz: "Nagy kár hogy mondhatni halott ez a topik, nem "pörög" annyira." Egyik haverom mondta tegnap, hogy majd nézzem meg a JS topikot, mert valami hülye mindig linkelgeti a fass***it, és, hogy tök jól elbeszélget magában.
Nekem inkább az a bánatom, hogy legtöbbször a betévedők kérdései kimerülnek a frontendes kérdésekben, minthogy hogyan lehet 10pixellel lejjeb mozgatni valamit javascripttel és hasonlók, és ritkábban jönnek elő olyan témák, amire még ezen kívül használják a JS-t.
Pl:
* szerver oldal
* IoT
* Canvas -> játékok, animációk
* Desktop appok és widgetek
* ilyesmikEzért szoktam néha ilyen témákból is linkelgetni ^^ Bár az utolsó 2-3 ponthoz eddig még nem sok közöm volt :/
-
Jim-Y
veterán
Lejárt...
Amúgy még én sem ástam bele az ES.next-be magam, mert azért jelenleg az ES5 még sokkal, sokkal elterjedtebb, de az a véleményem, hogy lassan már itt lenne az ideje, megismerkedni az újdonságokkal. Én kezdésnek ezeket fogom majd megismerni, mert az iojs ezeket támogatja alapból. Eddig ha pl csináltam egy szerber-api-t, akkor ahhoz node-ot használtam, de most már nem szól mellette semmi, tehát iojs-t fogok használni, amiben ezek támogatottak:
Which ES6 features ship with io.js by default (no runtime flag required)?
Block scoping (let, const, and function-in-blocks) (strict mode only)
Collections
Generators
Binary and octal literals
Promises
New String methods
Symbols
Template literals -
Jim-Y
veterán
Igen, bár azt nem tudom sajnos, hogy akkor attól kezdve, hogy a modulok támogatottak lesznek minden olyan böngészőn, amire fejleszteni szeretnénk, azok a toolok, amiket ma használunk modulokra bontásra, teljesen feleslegessé válnak-e vagy sem. Szerintem az igény akkor is meglesz arra, hogy összecsomagoljuk a fájlokat, de nyílván arra egy sima concat tool is elég lesz. Szóval
1: igen, ES6-ban lesz "natív" modul támogatás
2: nem, sajnos nem tudom, hogy ez a browserify, webpack, UMD, AMD toolokra milyen hatással lesz :/Annyi biztos, hogy nem most lesz, amikor ezeket biztonságosan el lehet majd hagyni
-
Jim-Y
veterán
Gondoltam megmutatom, hogy hogy működik a browserify, mert viszonylag egyszerűen be lehet mutatni:
Vannak a forrás fájlok:
.
├── app.js
├── index.html
├── module1.js
├── module2.js
└── node_modules
└── browserifymodule1
======='use strict';
module.exports.hello = function(world) {
return 'hello, ' + world();
};module2
======='use strict';
module.exports.world = function() {
return 'world!';
};app
==='use strict';
var module1 = require('./module1.js'),
module2 = require('./module2.js');
document.querySelector('body > div > p').innerText = module1.hello(module2.world);Majd itt használjuk fel a browserify-t egy bundle készítésre, terminálban a gyökér könyvtárban ki kell adni ezt a parancsot:
browserify app.js > bundle.js
index.html
========<!DOCTYPE html>
<head>
<title>Browserify</title>
</head>
<body>
<div>
<p></p>
</div>
<script src="bundle.js"></script>
</body>
</html>Tehát a html-be már csak a bundle-t húzzuk be, illetve a webszerverre/CDN-re is már csak a bundle-t kell feltenni.
A bundle pedig ezt tartalmazza:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var module1 = require('./module1.js'),
module2 = require('./module2.js');
document.querySelector('body > div > p').innerText = module1.hello(module2.world);
},{"./module1.js":2,"./module2.js":3}],2:[function(require,module,exports){
'use strict';
module.exports.hello = function(world) {
return 'hello, ' + world();
};
},{}],3:[function(require,module,exports){
'use strict';
module.exports.world = function() {
return 'world!';
};
},{}]},{},[1]);Sok-sok olvashatatlan dolog, de látszik, hogy végső soron a te fájlaidat rakja össze.
Üdv -
-
Jim-Y
veterán
Például ha Reactos projekte van az embernek, és használ JSX-et és reactify-al buildeli, akkor ezeket a harmony feature-öket használhatja:
reactify transform also can compile a limited set of es6 syntax constructs into es5. Supported features are arrow functions, rest params, templates, object short notation and classes. You can activate this via --es6 or --harmony boolean option:
Mozillában tesztelve, próbáldd ki őket, scratchpadben mindegyik megy
arrow functions
============document.body.addEventListener('click', event => console.log(event.target));
rest params
=========function sum(a, b, ...rest) {
return Math.max(...[a,b].concat(rest));
}
console.log(sum(1,2)); // 2
console.log(sum(1,2,4,1,5,6,12,2,3)); // 12templates
========console.log(
`The max out of 1 and 2 is ${sum(1,2)}`
);
// "The max out of 1 and 2 is 2"object shorthand notation
===================var myModule = function() {
var newMax = function(a, b, ...rest) {
return Math.max(...[a,b].concat(rest));
};
var oldMax = function() {
return Math.max.apply(Math.max, [].slice.call(arguments));
};
// old syntax
// return {
// oldMax: oldMax,
// newMax: newMax
// };
return {
oldMax,
newMax
};
};
console.log(
myModule().oldMax(1,2,3,4,9,3,4,5)
); // 9classes
======// In iojs/node
class Topic extends EventEmitter {
constructor() {
super();
}
publish() {
this.emit('article');
}
subscribe(subscriber) {
// subscribe
}
}És nincs felsorolva, de a destructuring is műküdik:
destructuring
==========var React = require('react'),
{ Route, DefaultRoute } = require('react-router'),
{ AppComponent, Contact, Content } = require('./components/Screens'),
baseUrl = require('../appConfig.json').app.baseUrl;
module.exports = (
<Route name="home" path={baseUrl} handler={AppComponent}>
<Route name="contact" path="contact" handler={Contact} />
<DefaultRoute handler={Content} />
</Route>
); -
Jim-Y
veterán
Ha az ES6-ra gondolsz, akkor úgy vélem, hogy az elterjedése folyamatos, és csak a projekt karakterisztikái határozzák meg, hogy már ma is használhatod-e, vagy sem. Például ha olyan a projekt, hogy folyamatos buildelést kíván, mert például browserify-t, vagy webpacket használsz, akkor akár már most is használhatsz olyan eszközöket, mint a 6to5, vagy a Traceur, és szerintem ilyen esetben ajánlott is használni valamit. Én például mostanában React-os projeketeket csinálok, browserify-t használok, kifejezetten ES6 to ES5 transpilerem nincs, de a reactify miatt van 1-2 ES6-os feature amit "ingyen" megkapok. Ezeket előszeretettel használom már most is.
Szóval, 100%-os támogatottságra még biztos várni kell, szerintem minimum egy évet, de a migráció folyamatos a vendorok részéről, így az idő előre haladtával mind több és több ES6-os feature-t lehet használni.
megj: illetve mivel az iojs ilyen jó ES6 támogatottsággal rendelkezik, ezért szerver oldalon már ma is lehet használni az újdonságokat.
-
Jim-Y
veterán
válasz
Sk8erPeter #4798 üzenetére
Ja jol van akkor, my bad, bocsi
-
Jim-Y
veterán
Hat, szerintem meg nem igy kell hasznalni ahogy o probalta. En nem ismerem ezt a libet, es epphogycsak megnyitottam a github repot, de szerintem ez nem egy jQuery widget, hanem egy kulon fajl egy konstruktorral.
http://imakewebthings.com/waypoints/guides/getting-started/
var waypoint = new Waypoint({
element: document.getElementById('element-waypoint'),
handler: function(direction) {
notify(this.element.id + ' triggers at ' + this.triggerPoint)
},
offset: '75%'
}) -
Jim-Y
veterán
Hat nezd, en nem jelentenem ki, igy egyertelmuen, hogy az egyik jobb, mint a masik, szerintem nem is lehet. Ez csak egy alternativ fejlesztesi modszer az imperativ programozas mellett. Mig az imperativ modszertanoknal a kozponti szerep az adatokon van. Az adatoknak objektumokat feleltetunk meg, az objektumok letrehozasara osztalyokat definialunk, az objektumokon muveleteket is definialunk, addig a funkcionalis programozasnal a kozponti szerep a fuggvenyeken van, es az adatok es a fuggvenyek kozott laza csatolas van. Hogy a fenti mondat, es a leirt kulonbseg miert jo, az talan nem is olyan egyertelmu. Hozza kell meg venni a kephez, hogy FP-ben az adatok nem valtoztathatok, tehat immutable adatokkal dolgozunk. Az OOP pedig arra epul, hogy az adat allapotat (state) valtoztatjuk. Pl egy objektum belso allapotan az egyik peldanymetodussal valtoztatunk. Ezek a kulonbsegek itt is fel vannak sorolva [link] bar elhiszem, hogy meg ennyitol nem lesz vilagos, hogy miert kene kis FP-t is tanulni. Nezzuk tovabb
En sajat reszrol ezeket a szempontokat tartom fontosnak, hogy miert erdemes kicsit (tenyleg csak picit) megnezni az FP-t.
* JavaScriptben mar alapbol vannak olyan paradigmak, amik az FP alapjat kepezik.
-> functions first class citizens
-> higher order functions
-> anonymous functions + closures* Amikre mar vannak lehetosegeink
-> Immutability, pl Immutable vagy Mori
-> Pure functions
-> ES5 array methods (immutability)* JavaScriptben, foleg webes kornyezetben erdemes rovid, tomor fuggvenyeket irni, hogy tehermentesitsuk az event loopot/egyetlen stacket. Tehat ez amugy is egy olyan stilust eredmenyez amiben sok kis fuggvenyunk lesz, amit sokszor adunk at parameterben, sokszor hivjuk meg oket, stb..
Nagyjabol ezek adjak ki, hogy erdemes ismerni az FP-ben rejlo lehetosegeket. Ejj, sajnos en sem vagyok penge a temaban, igy nem tudom jol leirni, sem azt amit akarok, sem azt, hogy miert lenne jo igy programozni, ezert most csak par kosza gondolatot irok meg igy a vegere vitainditonak
immutability -> konkurrens problemak megoldasara
immutability -> easy undo/redo es state management
curryzes -> tomorebb, rovidebb, bizonyos esetekben olvashatobb kodot eredmenyezTehat, az FP sem jobb, mint az OOP, csak mas. Ha megnezed a tisztan objektum orientalt nyelvek is nyitnak az FP-s paradigmak fele, mint a Java is a 8-as verziojaval, ahol pedig mar az FP-s cuccok eddig is megvoltak, pl JS, ott pedig az OOP-s paradigmak fele, lasd ES6 class syntax, ami egyebkent meg mindig prototipusos, csak OOP-s kontosben.
Szerintem ezert nem szabad megrekedni az OOP-nel es ismerni kell az alternativakat is. Illetve nekem tetszik, ha a ket stilust otvozzuk.
Plusz egy link: Ramda
-
Jim-Y
veterán
Üdv,
Nem tudom, hogy hallottatok-e róla, de forkolták a node.js-t io.js néven. Ennek hátterében az áll, hogy a nodejs-en dolgozó (alapító?) fejlesztők elégedetlenek voltak a node fejlődésének ütemével és/vagy irányával. Ugye a node nem teljesen opensource, hanem a joyent cég gondozásában áll. Ez annyit jelent, hogy a node fejlődésének irányára erős befolyással vannak. Na ez többeknek nem tetszett, például az npm-et létrehozó izs-nek sem, többedmagával.
Az io.js teljesen opensource, és az 1.0.0 kiadás tegnapra volt tervezve -> [link]
Elmondható, hogy frissebb V8 motor van alatta, így egyes ES6-os fícsörök by default be vannak kapcsolva rajta, illetve különbözik a TC39-es megjelölésük is. Erről itt lehet bővebben olvasni: [link]
==========================================================
Node.js is Enterprise-Ready Ezt azért linkelem, mert a magyar meetupos srácok írták, és érdekes olvasmány.Csináltak egy nodejs style guide-ot is, ha esetleg valaki pont ilyet keresne
==========================================================
Illetve még itt van két ajánlott olvasmány, kitekintés a 2015-ös évre:
@AddyOsmani JavaScript Application Architecture On The Road To 2015
Functional Programming should be your #1 priority for 2015Ha valaki utóbbihoz kapna kedvet, akkor érdemes lehet ránézni a ClojureScript-re
Üdv
-
Jim-Y
veterán
válasz
Devecherry #4758 üzenetére
a substringben a 0 es 3 kozott nem ; van, hanem , . Ez igy szintaktikai hiba. Ajanlom fgyelmedbe a JSHint linter minden lehetseges formajat. Neked igy az elejen a legegyszerubb ha bemasolod az oldalukra a kodod: http://jshint.com/ Nyilvan a linteles nem mondja meg, hogy a ; vesszo helyett sima vesszot hasznalj, de azt irja, hogy hol a hiba, onnantol pedig mar ki lehet talalni.
-
Jim-Y
veterán
Ha tudsz angolul, akkor ezt a podcast ajánlom
Én már nem emlékszem, hogy pontosan miket említettek benne, de emlékszem, hogy volt szó a kettő különbségeiről. http://devchat.tv/js-jabber/130-jsj-browser-tools-and-extentions
De amugy szerintem a FF-ban nincs olyan ami a DevTools-ban ne lenne, inkább fordítva van, de ha így is van, akkor sem olyanokkal rendelkezik a D.T amire neked most szükséged lenne, ebben biztos vagyok
Szerintem ne emiatt válassz browsert, mert mindkét tool bőven elég lesz neked.
-
Jim-Y
veterán
Igen igy nez ki, de szerintem ne ird le elsore, mert a lenyeg a reszletekben lakozik
De szinte minden fontos dolgot mindkettoben meg lehet csinalni. Nekem pl a kedvenc DevTools feature-om az inline style modification, meg a framework blackboxing.
Sk8erPeter: mert erdekel, illetve ha legkozelebb beszelni szeretnek rola valakivel, akkor tudjak hogy hivatkozni ra
-
Jim-Y
veterán
válasz
Sk8erPeter #4708 üzenetére
Ja, tenyleg, jol van akkor
Nincs tobb kerdesem
Amugy amit linkeltem stack thread-et arra nincs otleted?
-
Jim-Y
veterán
válasz
Sk8erPeter #4706 üzenetére
Egyebkent tudom, nem is irtam volna vissza, csak mivel direkt kerted ezert...
De nem kell amugz ennyire feketen-feheren venni az ajanlasokat sem. Azok csak irany mutatasok, hogy ha megoldhato akkor alkalmazzuk oket, mert jobb lesz tole a kod. Nyilvan ilyen esetekben, amikor nem oldhato meg, vagy csak rosszabb lenne tole a kod, akkor nem tesszuk. Story over
De ha soha senki nem irja le az ilyeneket, akkor nem tanulunk belole. Igy legalabb -remelhetoleg- ott lesz az ember fejeben ez is, es bizonyos esetekben, amikor erdemes igy megirni a fuggvenyt, akkor lehet ennek hatasara ir majd valaki jobb kodot.
-
Jim-Y
veterán
Annyit hozzatennek, hogy en ugy latom, hogy konzisztens tipussal kell/kene visszaterni. Tehat megsem latjuk ugyanugy, csak hasonloan.
Szoval figyelni kene arra (egy idealis vilagban), hogy ha a fuggveny alap esetben egy integer ertekkel ter vissza, akkor mondjuk hiba eseten is azzal terjen vissza csak mondjuk egy beszedes ertekkel. Pl -1. Vagy exception-t dobjon. De mondjuk ne legyen az, hogy a caller szamot var es a csillagok rossz egyuttallasa eseten meg stringgel ter vissza. Persze... sokszor ezt nem lehet betartani, de ha lehet, akkor azert jo erre is figyelni
Undefined-al explicit visszaterni tovabbra sincs ertelme
Bar a fene se tudja, jobban at kene gondolnom, mint amennyire most idom engedi.
-
Jim-Y
veterán
válasz
Sk8erPeter #4703 üzenetére
"Így csinálni, ahogy Te javasolnád, sokkal inkább antipattern, úgyhogy ezt a részt buktad."
Nem javasoltam, sot, abszolute veled ertek egyet, annyira, hogy mar egy ideje azon torom a fejem, hogy mi lehet ennek a principle-nek a neve
Egyszer hallottam, azota nem emlekszem
Meg stack-es kerdest is csinaltam belole
[link] Ha esetleg te tudod a nevet, megoszthatnad velem, mert tenyleg erdekel.
udv
-
Jim-Y
veterán
válasz
Sk8erPeter #4699 üzenetére
Ha mar igy direkt kerted, akkor
1: nem lenne szerencsesebb valami ilyesmit irni? http://jsfiddle.net/ssdptwtb/3/
2: egyreszt igy meg lehet? sporolni egy felesleges ciklust a tombon ami muveletigeny szempontjabol sem mindegy.
3: masreszt egy fuggveny aminek nincs explicit visszateresi erteke by default undefine-al ter vissza, tehat a 2. return nem egyszeruen csak antipattern (haha), hanem felesleges is (fuckyeah
)
De csak mert kerted
-
Jim-Y
veterán
Pedig sok helyen használják őket, csak lehet te még nem találkoztál velük, magadtól írni pedig valószínűleg még annyira sem.
A JavaScriptet nem csak honlapfejlesztésre használják. A tapasztalaton szerint ha valaki eddig csak a webfejlesztéssel került kapcsolatba akkor elképzelhető, bár érdekes, hogy nem látott még ilyenre példát. De más területeken, ahol JS-t használnak sűrűn elő szokott fordulni. Mondok pár példát:
- Grafika/Játékok: canvas, például kell csinálnod egy Pont osztályt. Vagy egy lövedék osztályt, vagy bármit. Sűrűn előfordul.
- IoT/Nodebots: Johnny-Five | Led class
- jQuery: maga a jQuery is csak egy osztály egy objektuma https://github.com/jquery/jquery/blob/master/src/core.js#L23
- A Promis libek is használják, stb.. QEnnél jobb példák, amik nem az ilyen alap tutorial szintű példák most nem jutnak eszembe
-
Jim-Y
veterán
hits.join('')
szerk:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
string.match, string.substr, string.indexOf, string.search, RegExp..stb -
Jim-Y
veterán
Így kód nélkül ezt elég nehéz megmondani. Egyébként tippre az első dblclick esemény kezelője megállítja a propagation-t.
Event bubbling, Event delegation, Event capturing. Ezek mondanak valamit? Csak mert ezekkel kéne tisztában lenned ahhoz, hogy megoldd a feladatot.
Úgy is megoldhatod, hogy ugyanabban a handlerben kezeled le mindkét funkciót.
megj: és hidd el, ahhoz, hogy segíteni tudjunk, ebben az esetben egy jó leírásnál több kell.
Például egy jsfiddle példa jól jönne. Valószínűleg onnantól sima liba lenne segíteni.
-
Jim-Y
veterán
válasz
Sk8erPeter #4669 üzenetére
A szekesztésedre: kicsit szerencsétlen a példád, mert ez így stilisztikailag sem szerencsés, de csak a boolean-ek miatt. Belémverték, hogy ha ilyet írnék le, hogy
if (smtg) {
return true;
} else {
return false;
}Az szentségtörés
Helyette:
return smtg;
vagy
return !!smtg;
vagy
return Boolean(smtg);
vagy bármi, csak ne a felső
DRY ugyebár..
Egy jobb példa, amire te is gondoltál, lehetne a node style programming. Ahol a callbackek mindig function(err, result) alakúak.
Például egy mongodb query method nagyszerű példa erre (pszeudo):
function queryUsers(res, req, next) {
Users.findAll({}, function(err, users) {
if (err) {
return next(new InternalError('..'));
}
res.send(users);
});
}Amúgy szerintem ugyanúgy gondoljuk a dolgokat, szóval ez inkább chit-chat, mint veszekedés.
-
Jim-Y
veterán
válasz
Sk8erPeter #4669 üzenetére
Nem, igazából ennek van értelme, bár, ja, kérdéses, hogy mennyi. Leginkább az lenne az értelme annak, hogy egy függvénynek csak egy kilépési pontja legyen, hogy jobban átlátható lesz tőle a függvény. A fejlesztő kognitív terheltsége csökken tőle. http://en.wikipedia.org/wiki/Cognitive_load
Én hiszek abban, hogy az ilyen apró dolgok tesznek egy fejlesztőt jó fejlesztővé. Most nem azt mondom, hogy pont ez. De ha valaki figyel arra, hogy a kódja egyszerű legyen, egyszerűen olvasható legyen, az tesz valakit igazán jóvá.
De amúgy igen, sokszor bullshit áll mögöttük, vagy csak vallási kérdésLehet simán olyan függvény, amiben tök szépen lerövidíti a kódot, hogy egy bizonyos feltétel teljesülése esetén azonnal visszatérsz
Így van, pont ezért írtam, hogy nem mindig lehetséges egy visszatérési pontot írni. Node környezetben ez elég gyakran előfordul. Az IDE mindig szól is érte btw
.. nem mintha EZ számítana ^^ ..
-
Jim-Y
veterán
Szerintem csak elírtad a visszatérő üzenetet, ezt már én is megcsináltam még korábban, és vissza tudtam keresni a kódot:
// Write your function below.
// Don't forget to call your function!
function sleepCheck( numHours ) {
if ( numHours >= 8 ) {
return "You're getting plenty of sleep! Maybe even too much!";
}
else {
return "Get some more shut eye!";
}
}
sleepCheck(10);
sleepCheck(5);
sleepCheck(8);FYI: ez egy kisebb anti pattern, ha minél jobb stílusban akarnánk megcsinálni a feladatot akkor csak egy darab return statement lenne a függvényben. http://jsfiddle.net/fgexxnjo/2/ Megjegyzem, ez nem mindig lehetséges, de törekedni kell rá.
-
Jim-Y
veterán
Szia, kevéssé világos ennyiből, hogy pontosan mit szeretnél elérni, de használhatsz egy modulra/függvényre globális jelölőt (flaget) amit akkor billentesz át, ha minden betöltődött.
Egy másik megközelítés, vagy a fenti megközelítés kiterjesztése, ha reaktívan gondolkozol. Ez nagyjából azt jelentené, hogy akik/amik érdekeltek az összes kép betöltődésében, azok beregisztrálnak egy callbacket például az "összes kép betöltődött" eseményre. Ebben az a jó, hogy az a modul amelyik a betöltést végzi csak gyengén lesz csatolva azokhoz amelyek a betöltődést figyelik.
Vagy használhatod az "alap" megoldást, és callbackeket hívsz meg ha az összes kép betöltődött.
Ezeket itt szemléltetem. http://jsfiddle.net/ygvvs0sm/
Egyiket sem próbáltam ki, így kezeld őket pseudokódokként. üdv
-
Jim-Y
veterán
válasz
superboyka #4652 üzenetére
Ez egy félkész alternatív megoldás, ha valaki egy kicsit tovább csinálja, akkor egyszerűbb, átláthatóbb, és könnyebben módosítható lesz mint a tiéd. Sok időm nem volt vele foglalkozni, meg hát befejezni sem.
megj: azt azért el kell mondanom, hogy itt senkinek sem kötelező segítenie neked. Mindenki a saját szabadidejéből áldoz a témának, tehát ha te egy kész megoldást szeretnél kapni, magyarázattal, és a te megoldásodat kiegészítve, úgy, hogy te nem mutatsz hajlandóságot a próbálkozásokra ... akkor csodálkoznék ha valaki megcsinálná :/
-
Jim-Y
veterán
válasz
superboyka #4649 üzenetére
Sziasztok,
Én szórakoztam kicsit vele, hogy könnyebb legyen bővíteni, aki akarja, folytassa. Ja igen, a te verziódhoz nem nyúltam, mert.. hát mert csak, a többiek értik
-
Jim-Y
veterán
Sziasztok.
Egy kis segítséget szeretnék kérni.
Arra szeretnék ötleteket kérni, hogy az aszinkron wait műveleteket hogyan tudnám pomiszokkal? úgy kezelni mintha szinkron műveletek lennének. A promise-okat egy ciklusban gyártom, és minden szubszekvens promisznak meg kéne várnia az előző promise fulfilljét mielőtt ő is rezolválná magát.
Tudom ez egy kicsit túl hunglish lett, ne haragudjatok miatta, de még mindig így tudtam a legértelmesebben leírni, hogy mit szeretnék
Magyarul ezt szeretném dinamikussá és promiszolhatóvá tenni:
39 led.on();
40 self.wait(300, function() {
41 led.off();
42 self.wait(100, function() {
43 led.on();
44 self.wait(300, function() {
45 led.off();
46 self.wait(100, function() {
47 led.on();
48 self.wait(300, function() {
49 led.off(); // stb..
50 });
51 });
52 });
53 });
54 });Az majdnem olyan mint egy strobe effekt, de nekem most nem az kell. Az kell, hogy az egymás után keletkező timeoutokat be tudjam várni..
szerk: esetleg ha magát a wait-et denodify-olnám?
-
Jim-Y
veterán
-
Jim-Y
veterán
Diák: #FP in #JavaScript
-
Jim-Y
veterán
Egyebkent, csak ilyen FYI jelleggel, itt egy alternativa a closure-re.
-
Jim-Y
veterán
Hát, egy nagyobb nem koca projekten, szinte minden esetben előjönnek olyan repetitív folyamatok, amit a programozóknak időről időre meg kell tenniük.
Egy projekt életciklusát alapul véve:* dependenciák letöltése, architektúrába integrálása stb..
* az elkészült modul lintelése, hibák felderítése
* tesztek futtatása
* modulok összecsomagolása (bundling)
* transpiling, például a következő nem stabil javascript verzióban megírt modulok stabil javascriptre buildelése
* különböző transpile to js modulok js-re buildelése
* az elkészült js csomag minifikálása
* az elkészült html fájlok minifikálása
* az elkészült css fájlok minifikálása
* a css preprocesszorokban megírt stílusfájlok css-re konvertálása
* fájlok másolása egyik helyről egy másik helyre, például production build másolása X helyre
* satöbbi satöbbi satöbbiA lényeg, hogy ami repetitív könnyen automatizálható folyamat, azt nem kell kézzel megcsinálni hanem a build toolok megteszik helyettünk.
Miért jó? Például nem mindegy, hogy a mobilról netezőknek mekkora méretű forrásfájl-t, forrásfájlokat kell letölteniük, mivel rendszerint a mobilról netezők mobilnettel rendelkeznek, ott meg nagyon nem mindegy, hogy 1mb az oldalad, vagy 100kb. -hasraütöttem-. Ezért célszerű minifikálni az elkészül applikációt amivel a méretet lehet csökkenteni. Ezt rendszerint nem egyszer fogod megcsinálni, hanem több ször, lehet, hogy sokszor.
1. első esetben kézzel csinálod mindig, nem nehéz a parancs, kb vmi ilyen "uglify /lib/**/*.js" vagy "uglify build/bundle.js -o build/bundle.min.js" Nem nehéz ugye? De mi van ha már nem csak ezt szeretnéd csinálni, hanem még 5-6 hasonló parancsot futtatni. Olyankor ez már teher.
2. második esetben használsz valamilyen build toolt, ahol taskokat definiálsz, és az előzőleg 5-6 különböző buildelési lépést egy paranccsal tudod kiadni, például "grunt dist" -
Jim-Y
veterán
Multkor írtam az egyik topikba, hogy elég sok task runner van ma már a JavaScriptes világban, Grunt, Gulp, Broccoli, stb.. és egy lapon említettem ezeket az npm-el. A legutóbbi itthoni kis projektemnél már én sem használtam Grunt-ot, hanem egy az egyben az npm-re támaszkodtam, és, hogy őszinte legyek tényleg elég bíztató. Örvendetes, hogy egy csomó felesleges dependency-t és boilerplatet meg tudok vele spórolni. Kérdés, hogy meddig tartható fent ez az állapot, ha egy bizonyos méretet meghalad a projekt, akkor lehet, hogy már ez is átláthatatlan lesz, és valami más megoldást kell keresni. Illetve, amire nem sikerült megoldást találnom, hogy hogyan tudnék task streameket felállítani ezzel a módszerrel? Nevén nevezve, ha elindítok egy watchify taskot akkor hogyan tudok erre szubszekvens eseményeket definiálni?
Ebben a témában most olvastam egy jó cikket és ez ösztönzött, hogy írjak, csak meg akarom osztani a linket
Why we should stop using Grunt & Gulp
A szerző ezt írja a cikk végén:
In my next post, I'll be detailing the ins and outs of npm and how to use it effectively, showing how you can have an extendable config, multiple tasks, streaming tasks, and more.
Úgyhogy én nagyon várom a folytatást.
Üdv
-
Jim-Y
veterán
válasz
Sk8erPeter #4593 üzenetére
Hmm, igen, akkor lehet, hogy abszolút félre értettem, .. rollback... :/
"Amúgy ha már új megközelítésről beszélünk, akkor a kliensoldali JavaScript-kód nem tudom, hogy jön az autentikációhoz (szerk.: értsd: ha már újonnan elkészítjük, ne tudják már megnézni a jelszót a forráskód böngészésével... írta, hogy ha már valaki ilyet is tud, akkor megérdemli azon a tanfolyamon az 5-öst, de azértmárna)."
Ezt nem értem.. még a szerkesztéssel együtt sem
Mármint... honnan szedted a kliens oldali JavaScript <--> autentikáció párhuzamot ?Jaaa, oké..nem vagyok a topon mostanában
Amit írtam úgy értettem, hogy ha már kell autentikáció, akkor nyílván van mögötte valami szerver oldal (adatbázis, fájl, akármi), ha ez így van, akkor vagy kell egy szerver oldali nyelv amivel generáljuk az oldalt ~ tesztet. PHP, JSF, egyéb... vagy JS+AJAX(REST). Ez utóbbit értettem a kliens oldali javascript alatt.
-
Jim-Y
veterán
Nekem minimális tapasztalatom van vele. Pont egy hasonlóan bagatell feladat miatt, ahol nem akartam saját REST-et felhúzni a backend fölé.
Szerintem tanulási céllal, vagy ha nem a backenden van a hangsúly, akkor nagyon jó. Van egy online könnyen kezelhető backended, és hozzá egy csomó REST endpointod, így megúszol egy csomó melót. BaaS.
Saját interfésszel rendelkezik, de az is elég egyszerű. Az erőforrásokat egy url azonosítja. Pl nálam
var Firebase = require('firebase');
module.exports.REFS = {
ROOT: new Firebase('https://***.firebaseio.com'),
BOOKS: new Firebase('https://***.firebaseio.com/books'),
USERS: new Firebase('https://***.firebaseio.com/users'),
CATEGORIES: new Firebase('https://***.firebaseio.com/categories')
};Majd ezeket queryzni is egyszerű:
function _loadBooks(dfd) {
REFS.BOOKS.once('value',
_processBookResults.bind(null, dfd),
_handleError.bind(null, dfd)
);
}Itt a books az egy JSON tömb, ha ezen belül akarsz módosítani valamit, akkor nem kell ahhoz külön még egy referencia (url), hanem
var bookRef = REFS.BOOKS.child(bookIndex)
Ezzel a kóddal megszereztünk egy referenciát a JSON tömb x. elemére ami egy book lesz, és például ezt updatelni is egyszerű:
bookRef.update({
borrower: userModel.get('id')
});Szóval, nem sokat foglalkoztam vele eddig, de hallottam róla egy podcastban és ott pont kezdőknek és otthoni projekteknek ajánlották, így gondoltam kipróbálom és tényleg nem rossz, HA az ember helyén tudja kezelni, hogy mire való
-
Jim-Y
veterán
Húha, ezek szerint sokkal rosszabb hangvételúre sikerült a hozzászólás, mint ahogy terveztem, sorry. Lehet kevés volt a smiley, vagy csak jobban kellett volna fogalmazni. No a lényeg, hogy szerintem sokkal gyorsabban elértétek volna az eredményt ha máshogy közelítitek meg a problémát. Ha a wordben írt teszt, emailben való elküldése után, azt a diákok simán kitöltve visszaküldik, a tanár értékeli, akkor minden rendben van. A word helytálló eszköz a feladathoz. Ha most közben kitalálja, hogy jelszóval védeni kéne, meg még a diákoknak bejelentkezni, meg még azt is kivédeni, hogy ne tudjanak 'brute force'-olni, akkor már nem a word-ös témát kéne erőltetni, hanem túl kéne nézni az addig rendesen helytálló eszközön és oly módon megoldani a problémát, amivel azt gyorsan, és hajtépésmentesen meg lehet oldani. És ezt most sem kioktató szándékkal, vagy máshogy rosszallóan írom, hanem csak úgy F.Y.I
Egy ilyen online tesztet HTML-ben kéne megírni. Az autentikáció miatt pedig kell(ene) majd
* vagy valami szerver oldali dolog
* vagy kliens oldali javascript
* vagy mindkettőEz egy tapasztaltabb embernek (akitől segítséget tudtok kérni) pár órás feladat.
Lehet, hogy jelenleg úgy tűnik, hogy ágyúval verébre, mivel a Word doksi már megvan... de ki tudja, hogy egyáltaláb abban az igényeket meg lehet-e oldani vagy sem.
Üdv
-
Jim-Y
veterán
Mi akadályoz meg benne hogy arra használd a JavaScriptet amire való? Weboldal pimpelesere - kezdetben - mostanában pedig gazdag web appok írására? Erre amit el akarsz érni lehet írni egy minimal web alkalmazást loginnal és online adatbázissal (firebase) ami garantáltan nem tartana 2 hétig mint amennyi ideje a takolmanyt próbálod megcsinálni?! Szerintem...
-
Jim-Y
veterán
Vannak online elerheto konyvek, probalom ugy linkelni, amilyen sorrendben en olvasnam oket:
http://speakingjs.com/
https://github.com/getify/You-Dont-Know-JS
http://eloquentjavascript.net/
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
https://leanpub.com/understandinges6/read
http://read.humanjavascript.com/
---
http://www.javascriptenlightenment.com/
https://leanpub.com/javascript-spessore/read
https://leanpub.com/javascript-allonge/readhttps://github.com/vhf/free-programming-books/blob/master/free-programming-books.md#javascript
De vannak hasznos netes oktatoanyagok is, amiket most nem fogok belinkelni ugyse nezi meg senki
-
Jim-Y
veterán
válasz
fordfairlane #4551 üzenetére
De ezt miert nekem irod?
-
Jim-Y
veterán
válasz
Cathfaern #4546 üzenetére
Errol tudnal bovebb infot adni? Mert szerintem: http://jsfiddle.net/Jim_Y/4ykbmdL3/1/
-
Jim-Y
veterán
válasz
gergo5991 #4545 üzenetére
Hat pedig nem kene neki mukodnie...http://jsfiddle.net/Jim_Y/4ykbmdL3/
-
Jim-Y
veterán
válasz
Sk8erPeter #4539 üzenetére
Nahát nahát, hondán felbuzdulva vagy sem, de nagyon verszemes vagy ma este. A csshez kevéssé érték, de ezt felvallalom, szerintem amúgy sem szégyen nem tudni valamit. A jó pap is holtig tanul :-)
-
Jim-Y
veterán
válasz
Sk8erPeter #4537 üzenetére
Hát, nem túlságosan vagyok oda a jqueryert, csak az ajaxot szoktam sűrűn használni belőle, de való igaz, hogy selectorokban nem vagyok otthon:-( meg amúgy is, mondtam én valaha is hogy sikerült már működő kódot írnom? :-P
-
Jim-Y
veterán
válasz
Speeedfire #4535 üzenetére
Attól függ, hogy mit akarsz elérni, legalábbis én úgy értelmezem, hogy..hmm, ja látom már, ebben mi a logika? Rosszul értelmeztem... én azt hittem, hogy
'#content.inner' ->
<div id="content">
content
<div class="inner">inner</div>
</div>'#content, .inner' -> felsorolás
'#content .inner' -> invalid
De látom, hogy nem így van.. fene, bocs.
-
Jim-Y
veterán
válasz
Speeedfire #4532 üzenetére
1: TIL, jsfiddle-ön működik az emmet
Nem tudom, hogy ez e a problémád, de én pont tegnap futottam bele event delegation-nél:
Meg kell jegyeznem, hogy nekem sem volt intuitív a vessző
megj: kipróbáltam FF-on is, nincs semmi warning, csak simán nem mükszik, szóval más lesz a probléma, ezen felül..
Új hozzászólás Aktív témák
Hirdetés
- Intel Core i7 6700K / GTX 1660TI / 16GB DDR4 RAM / 500 GB SSD konfig eladó
- Samsung Galaxy S23 128GB, Kártyafüggetlen, 1 Év Garanciával
- Samsung Galaxy A53 5G 128GB, Kártyafüggetlen, 1 Év Garanciával
- Megkímélt állapotú Xbox Series X 1TB eladó. Kitisztítva és újrapasztázva!
- Gamer PC - i5 13400F, GTX 1080ti és 16gb DDR5
- BESZÁMÍTÁS! Sony PlayStation 4 PRO 1TB SSD fekete játékkonzol extra játékokkal garanciával hibátlan
- Beszámítás! Sony PlayStation 5 825GB SSD lemezeskonzol extra játékokkal garanciával hibátlan működés
- Csere-Beszámítás! Asus Rog Strix G731GU Gamer Noti! I7 9750H / GTX 1660TI / 16GB D4 / 512 SSD
- Hp USB-C/Thunderbolt 3 dokkolók: USB-C Universal, G2, G4, G5, Hp Elite/Zbook- Thunderbolt 4 G4
- Konica Bizhub C220 - A3 fénymásoló
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: Promenade Publishing House Kft.
Város: Budapest