- SSD kibeszélő
- Milyen belső merevlemezt vegyek?
- AMD Ryzen 9 / 7 / 5 / 3 5***(X) "Zen 3" (AM4)
- Sugárhajtómű ihlette a Zalman CPU-hűtőjét, de nem az üzemzaj tekintetében
- Gaming notebook topik
- NTFS, exFAT, FAT32 – Melyiket válaszd és miért?
- Vélemény: nem úgy tűnik, de Lip-Bu Tan most menti meg az Intelt
- Bambu Lab 3D nyomtatók
- Forrmell.enn
- OLED TV topic
-
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
Szia.
Sajnos még mindig nem értek a canvas-hoz, így megint csak a kódodról fogok beszélni.
> Remélem, nem "csúnya" nagyon a kódom.
Nem fogok kertelni, szerintem nem fogod magadra venni, nem is azért írom, de... igen az, sajnos elég csúnya
Na persze ez nem gond! Tényleg nem. Egyrészt mert mindenki kezdi valahol, másrészt meg az látszik, hogy más múltad van. Szépen nem így irunk JavaScript kódot.Ezekkel van probléma benne:
var betolt = function(i,b,a)
{
imageObj[i].onload = function ()
{
ctx.drawImage(imageObj[i], b, 0, d, a);
};
};i, b, a -> ezek a formális változónevek egész egyszerűen rosszak, sosem adunk egybetűs váltzóneveket!
Nem tudni, hogy mit jelölnek. i az vajon index, a b meg a, na erre még tippe sincs az embernek. Nincs overhead akkor sem, ha 1 betű helyett 20 hosszú változó neveket használsz, cserébe értelmes lesz a kód. Ennek azért van jelentősége, mert
1: egy cégnél nem csak te fogod a kódodat olvasni, hanem előbb utóbb más is. És kontextus nélkül ezek a nevek konkrétan hátráltatják más munkáját, az idő pénz, tehát az ilyen nevek használatával pénz deficit keletkezik (lol![;]](//cdn.rios.hu/dl/s/v1.gif)
). Komolyra fordítva a szót, tényleg más is akarja még olvasni a kódod, ne adj isten módosítani, olyankor jól jön ha "self-descriptive" a kódod.
2: JS-ben gyakran végzünk minifikálást, ami az egyik állomása a buildelésnek, így nem kell figyelni arra, hogy minél tömörebb legyen a kód, a végtermék úgyis tömör lesz.
Példa: még ennél a minimalista példánál is látszik, bár mondanom sem kell, hogy értelmesebb kódnál jobban kijön a minifikálás "előnye"Before (tordeltem):
var myOwnImageObject = [];
function imageLoading(indexVar, someOtherVarWhichHasADescriptiveName, anotherFormalParam) {
myOwnImageObject[indexVar].onload = function() {
context.drawImage(
myOwnImageObject[indexVar],
someOtherVarWhichHasADescriptiveName,
0,
wut,
anotherFormalParam
);
};
}After:
function imageLoading(n,a,e){myOwnImageObject[n].onload=function(){context.drawImage(myOwnImageObject[n],a,0,wut,e)}}var myOwnImageObject=[];Tehát nincs igazán érv az egybetűs változónevek mellett.
3:
Nem túl jó kódod stílusa. Gondolom C++-ból jöttél át, legalábbis én úgy tudom, hogy ott szoktak K&R style -t használni. Ez az automatikus pontosvessző , áhh inkább írom angolul úgyis úgy tudsz rákeresni: automatic semicolon insertion miatt nem ajánlott így kódolni JavaScriptben. Nagyon sok verzió létezik, én leginkább az airbnb-hez tartom magam. Számomra ez eredményezi a leginkább olvasható, karbantartható kódot. Tehát ha az airbnb szerint írjuk a kódodat, akkor valahogy így nézne ki (ha én írnám akkor is):var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d"),
files = document.getElementById("files-upload").files,
imageObj = [],
a = (1920 - (files.length - 1)) / (files.length);
function betolt(i, b, a) {
imageObj[i].onload = function() {
ctx.drawImage(imageObj[i], b, 0, d, a);
};
}
for (var i = 0, len = files.length; i < len; ++i) {
b = (a + 1) * i;
imageObj[i] = new Image();
imageObj[i].src = "útvonal" + files[i].name;
betolt(i, b, a);
}4:
Az a változót tudatosan, vagy sem, de globális scope-ba helyezted, ez rossz szokás, abszolút kerülendő.5:
ez inkább jó tanács: JSHint vagy egyéb linter toolok használata javallott. Szinte minden Editorhoz, IDE-hez létezik már plugin.Üdv
-
Jim-Y
veterán
Szia
1: ... = Array; Ehelyett inkabb ... = [] az ajanlott. [link]
2: ne tegyel semmit kulon fuggvenybe, ahogy fordfairlane is irta, a closure nem tartalmazza az i valtozodat, itt egy (ROSSZ) pelda, ez tortenik most a kododban.
http://jsfiddle.net/Jim_Y/6vy2x7Lo/1/
Latszik, hogy 10x "10" irodik ki a kepernyore, tehat ha lebontjuk, akkor
ctx.drawImage(imageObj[10], b, 0, a, 1080);
ctx.drawImage(imageObj[10], b, 0, a, 1080);
ctx.drawImage(imageObj[10], b, 0, a, 1080);
ctx.drawImage(imageObj[10], b, 0, a, 1080);
...stb tortenikEz azert van, mert az onload fuggveny egy closure-t kepez az ot korulolelo fuggvennyel, ami azt jelenti, hogy amikor az onload fv. lefut, akkor mindig megnezni a runtime, hogy az aktualis kontextusban mi az i valtozo erteke. Mivel az onload aszinkron, ezert amikor azok lefutnak, addigra a ciklus mar vegzett, es az i ciklusvaltozo erteket 10-re novelte. Abban a pillanatban ahogy az onload lookup-olja az i-t, az mar 10-es ertekkel szerepel a kontextusban. Ezert lesz 10x"10" kiirva a konzolra.
Ennek megoldasa, egy uj Execution Context (~ uj variable environment, ~closure) letrehozasaval orvosolhato, amiben az i valtozo mindig az eppen aktualis ertekre lesz beallitva, igy amikor az onload (lookup i) tortenik, akkor az aktualis environment context-ben az i jo ertekkel fog szerepelni.
KetHarom pelda:1: http://jsfiddle.net/Jim_Y/6vy2x7Lo/2/ reading Function.prototype.bind
2: http://jsfiddle.net/Jim_Y/6vy2x7Lo/3/ reading closures
3: http://jsfiddle.net/Jim_Y/6vy2x7Lo/4/ reading IIFE3: Az onload aszinkron muvelet, ami a ciklus lefutasa utan fog csak meghivodni.
Itt egy szemlelteto pelda http://jsfiddle.net/Jim_Y/LsuLL7dg/1/
A kodban a setTimeout az onload-ot szemlelteti. Latszik, hogy amit azon kivul csinalsz, az elobb fut le, mint amit azon belul.
Udv
-
Jim-Y
veterán
Mostanaban az Angular + Ember megy nagyon. Szemely szerint csak kicsit ismerem oket, de nem igazan tetszik egyik sem, jelenleg a React+Flux -al foglalkozom ami szerintem, vag legalabbis nekem, jobb
Ja igen, csak azt nem irtam le, hogy ezt miert irtam le, szv ha ezek kozul valamelyikkel probalkozol akkor mar nem jarsz rosszul ugyanis mindharomra van kereslet. Ugy erzem, hogy a harom kozul az Angular a legkiforrottabb, az Ember az uj Angular, a ReactFlux pedig egy teljesen mas megkozelites, gyerekcipoben jar, de elegge igeretes
-
Jim-Y
veterán
Csináltam egy Flux templatet ha esetleg valakit érdekel
-
#4444
Jim-Y
veterán
Speeedfire
#4443
Jim-Y
veterán
válasz
Speeedfire
#4443
üzenetére
Szia. Ha mindenképp by-hand akarod csinálni a dolgot, és nem akarsz használni MVC framework-öt, akkor -és itt most meg kell sajnos jegyeznem, hogy magamtól még nem csináltam MVC-t itthon- én kb így állnék neki.
https://github.com/jim-y/js-mvc
Annyi, hogy a view szerintem ebben a példámban eléggé sántít, ha ilyet csinálnék, akkor például a view az MVC-ben React lenne, vagy minimum Handlebars, a controller maradna VanillaJS, a model-t pedig a backendről szedném mondjuk egy NoSQL datastore-ból. Persze ha nem használnék mondjuk ember-t
"Én úgy tudom, hogy "funkció alapú osztályt", csak prototype-al tudom bővíteni, de lehet én tudom rosszul."
Hát megmondom őszintén ezt én sem értem, nem csak martonx.
A prototypeal egy JS típushoz tudsz példánymetódusokat adni.
-
#4431
Jim-Y
veterán
Speeedfire
#4430
Jim-Y
veterán
válasz
Speeedfire
#4430
üzenetére
Példa1: azt szemlélteti, hogy felesleges a return ha így használod.
Példa2: Ahogy én csinálnám. Nem azért mutatom, mert, hogy ez a követendő, csak szerintem ez átláthatóbb
Példa3: ez kb így nézne ki CommonJS-ben (node, browserify, webpack), nem kipróbált példa!
Példa4: és így require-el. Ezt sem próbáltam ki. -
#4429
Jim-Y
veterán
Speeedfire
#4428
Jim-Y
veterán
válasz
Speeedfire
#4428
üzenetére
Szerintem nem kell ennyire túlbonyolítani a dolgokat, ha kicsi az alkalmazás, egy revealing module pattern, azon belül meg valahogy strukturálni a dolgokat. Ha nagyobb az alkalmazás akkor pedig úgyis
CommonJS (pl browserify, webpack), AMD (requirejs), vagy ES6 lesz a befutó.
De ha írok egy funciót, ami egy másik funckióban van és vissza kell térnem valamivel, hogy publikus legyen az a metódus. Vagy nem?
Ezt sajnos nem tudtam értelmezni
-
#4427
Jim-Y
veterán
Speeedfire
#4426
Jim-Y
veterán
válasz
Speeedfire
#4426
üzenetére
Szia!
//namespace
(function(){
store.models = {};
store.routes = {};
store.utils = {};
store.viewModels = {};
})();Ennek semmi értelmét nem látom. El tudnád magyarázni, hogy miért kellett az iffy?
Lehet, hogy itt ezt láttad, hogy a this-t milyen jó is használni, és tényleg jó, ha valaki 100%-osan tudja, hogy mikor mit jelent, de az én személyes véleményem a témában, hogy amikor meg lehet kerülni az explicit this használatát, akkor érdemes mást használni helyette. Megjegyzem ezzel a szemlélettel nem vagyok egyedül. Rendkívül error-prone lesz tőle a kód.
-
Jim-Y
veterán
TL;DR
A lényeg, hogy ezek nem számítanak must-have tudásnak, de mindenképp érdemes őket elolvasni, tanulmányozni.Amiket a könyvben láttál, azokat nem kell mind készség szintjén tudni, a legtöbb amúgy is csak elméleti pattern, production kódban ritkán látsz olyanokat. De van pár amiket érdemes ismerni, mert azokat igenis használják élesben, és sok framework, library azokra épít.
A module pattern talán a legismertebb pattern, a revealing module pattern szintúgy, szerintem ismerni érdemes még a singleton pattern-t, a factory patternt, és egyszer már használtam a prototype pattern final változatának egyik változatát is
var beget = (function () {
function F() {}
return function ( proto ) {
F.prototype = proto;
return new F();
};
})();Tudtam, hogy nagyjából mit szeretnék csinálni (egy jQuery szerű libet létrehozni, nyílván minimal-t, de úgy hogy myLib(selector) adjon adja vissza a könyvtáramat.), és megnyitottam a pattern könyvet és kerestem valamit amire rá tudtam húzniaz elképzelésemet. Ez nálam a factory pattern volt, legalábbis az adta az ötletet,
Kb így kell elképzelni, hogy mi lett belőle
-
#4412
Jim-Y
veterán
Sk8erPeter
#4409
Jim-Y
veterán
válasz
Sk8erPeter
#4409
üzenetére
Hehe, érdekes, hogy ami neked kaotikus, az nekem átlátható, és ami neked megfelelő, az számomra kaotikus. Wtf
Amúgy tényleg, ha legjobban körül szeretném írni, hogy számomra miért szimpatikusabb a "kódismétléses" verzió, akkor egész egyszerűen csak a tapasztalataimra tudnék hivatkozni. Ha van egy modulod amiben mondjuk van 40-50 függvény, ebből mondjuk 30 publikus, akkor azt a 30 publikusat a visszaadott objekt literalba tenniNem tudok fogalmazni basszus..
Na a lényeg, hogy sok függvény esetén az általad javasolt megoldás átláthatatlan kódot eredményez. Ha én mint fellow co-worker megnyitok egy új modult akkor nem akarok 1000 sort átscrollozni és úgy átnézni, hogy mik a modul publikus függvényei (publikus alatt a visszaadottakat értem). Helyette sokkal jobb, ha a modul végén van egy
return = {
egy: egy,
ketto: ketto,
stb: stb
};Egész egyszerűen átláthatóbb.
Require-ben is, ez a de-facto skeleton (ha jól tudom)
define('moduleName', ['deps'], function(dep) {
var module;
module = {
....
};
return module;
});Én nap-mint találkozom olyan modulokkal, na jó, pár modullal, ahol ha az össze method-body a return-be lenne behányva akkor a hajamat tépném.
Persze ha a modul csak pár függvényt tartalmaz, és azok is ilyen rövidek, akkor nyílván sokkal jobb az általad felvázolt verzió, ezt belátom én is. De egy 1500-2000 soros modulnál.. na ott szerintem ez már nem jó.
-
#4405
Jim-Y
veterán
Speeedfire
#4404
Jim-Y
veterán
válasz
Speeedfire
#4404
üzenetére
Szia, csak siman rosszul hasznaltad.
Itt egy javitott verzio. [link]
Es mindjart linkelek megegyet, addig is, hasznos olvasmany. Addy Osmani - JavaScript Design Patterns
Egyebkent amit te is hasznalni probaltal, es amit en is linkeltem, az a Self Revealing Module Pattern ez egy eleg surun hasznalt pattern a tobbihez kepest.
Igy lehet levedni a kulso scope-bol jovo valtozokat. [link]
-
#4398
Jim-Y
veterán
Sk8erPeter
#4397
Jim-Y
veterán
válasz
Sk8erPeter
#4397
üzenetére
Hat, elotted a lehetoseg, tudom, hogy neked is vannak olyan kodjaid/eseteid amik megernenek egy fuggvenyt
En folyamatosan bovitgetem, de ugye ez lassan megy, mivel egyedul csinalom. Ellenben biztos vagyok benne, hogy hasznos dolog (legalabbis nekem).
Pl ma is
[link]
function easyToUseBadLogicalAND(arr) {
return arr && arr.length;
}Az egesz abbol indult ki, hogy review-oltam, es volt egy ilyen a kodban (egyszerusitve persze szv pl a valtozok miatt ne szoljatok be
)var y = x && x.length ? true : false;
Ami nyilvanvaloan egy antipattern, lenne, de megsem az. Akkor lenne igazan antipattern, ha
var y = x && x.length > 0 ? true : false;
De mivel az && nem biztos, hogy mindenki szamara egyertelmuen mukodik, ezert megert egy kis kodot szerintem
-
#4380
Jim-Y
veterán
Sk8erPeter
#4379
Jim-Y
veterán
válasz
Sk8erPeter
#4379
üzenetére
Igazad van ez igy tenyleg jobb magyarazat
-
#4378
Jim-Y
veterán
PumpkinSeed
#4375
Jim-Y
veterán
válasz
PumpkinSeed
#4375
üzenetére
Te tudod..
Mukodik:
<html>
<head>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.min.js'></script>
</head>
<body>
<h1>Test</h1>
<script>
console.log($('h1').text());
</script>
</body>
</html>Nem mukodik:
<html>
<head>
<script src='//code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='//code.jquery.com/jquery-migrate-1.2.1.min.js'></script>
</head>
<body>
<h1>Test</h1>
<script>
console.log($('h1').text());
</script>
</body>
</html> -
#4374
Jim-Y
veterán
PumpkinSeed
#4373
Jim-Y
veterán
válasz
PumpkinSeed
#4373
üzenetére
En atneznem a helyedben a link protokolokat, mert azokkal lesz a gond
A kepen file:// es utana egy webcim
A szerveren is
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>Normalisan kene megadni az src attributomot.
-
Jim-Y
veterán
Ha valaki érdekelt az ilyenben, csináltam egy GitHub repot, ahova kollaboránsokat keresek. Valahol el kell kezdeni a netes jelenlétet, és hát, kezdjük kicsiben, az is több mint a semmi
A Smarty egy olyan repo amiben a hasznos, ötletes, mások számára is érdekes JavaScriptes megoldásokat gyüjtöm (folyamatosan). Ha neked is van hasonló, akkor esetleg összedobhatnánk amink van
-
#4364
Jim-Y
veterán
Sk8erPeter
#4363
Jim-Y
veterán
válasz
Sk8erPeter
#4363
üzenetére
Hát ja, csak beszélnünk kellett róla, hogy drága erre akciózzák, ugye a kapcsolatok...
Én is most aktiváltam a lejárt verziómat, bár érdekes, de egy augusztus elején lejárt verziót simán tudtam használni..no mindegy, így a tisztaEgész komoly időbe telik míg beállítom a JsHintet és a JS Inspection-öket a saját szájízem szerintire
De azért megéri, így legalább be tudok állítani egy olyan lintelést ami követi a saját stílusomat. -
-
Jim-Y
veterán
Szia
Ami repetitív munka arra nagy valószínűséggel van grunt plugin. Könnyű konfigurálni, és jó pár fejlesztőkörnyezet is támogatja.
Mire használatos?
Amire szinte mindig:
* Lintelés, például jshint.
* Minifikálás, például uglify
* Unit tesztek automatikus futtatására, pl Jasmine, vagy Mocha, vagy QUnit
* LiveReload, pl grunt-watch. Ez utóbbi azt jelenti, hogy ha előre beállított fájlokat szerkesztesz, és elmented őket, akkor előre beállított taskok automatikusan lefutnak. Például ha a core *.js fájlaidat szerkeszted, akkor automatikusan lefut a lintelés, vagy ha browserify-t használasz akkor a bundling stb...
* KonkatenálásÉs akkor van még ami ritkábban:
* https://github.com/gruntjs/grunt-contrib
A JavaScriptes munka már rég nem csak annyiból áll, hogy megnyitsz szerkesztővel egy js fájlt és írsz pár függvényt ami csinál valamit a dommal, esetleg behúzod a jQuery-t.. Nagyon jó ökoszisztéma alakult ki az évek alatt, nagyon hasznos eszközökkel amik megkönnyítik a munkát.
Egyrészt ami régen nem volt, és most van, jó IDE-k. Jó build toolok, szerver oldali js környezet, npm, bower, browserify...
-
Jim-Y
veterán
Kozben rajottem, hogy ebbe beleszamoltam a dependenciakat is, igy azert jocskan lecsokkent a sorszam, de meg igy is 100K folott van. Amugy nem tudom, hogy ez JS-ben mennyinek szamit, szerintem kozepesnek. Atlatni, hasznalunk RequireJS-t, igy azert konnyebb. Hogy erted, hogy "miben dolgozik egy kód"?
-
#4333
Jim-Y
veterán
Speeedfire
#4331
Jim-Y
veterán
válasz
Speeedfire
#4331
üzenetére
Nekem nincs nagy js-lib tapasztalatom, inkább csak vanilla js, de annyi biztos, hogy ennek a kérdésnek nincs értelme. Azért nincs, mert feladattól függ, hogy melyiket kell használni. Van amilyen feladatra ez a jó, más feladatra meg a másik. Itt max annyit tudsz kérdezni, hogy kinek mi jött be, és milyen feladatra használta. Legalábbis szerintem, és a 'zinternet szerint is
-
-
#4316
Jim-Y
veterán
Sk8erPeter
#4315
Jim-Y
veterán
válasz
Sk8erPeter
#4315
üzenetére
Ez egy olyan oldal, ahol a kozosseg kitalal feladvanyokat, es azt masok megoldhatjak, ha sikeresen megoldjak, akkor kapnak erte pontot es mennek elore a rangletran, kozben meg tanulnak/gyakorolnak. Aki feltesz egy feladvanyt, az teszteseteket is megad, es csak azok a megoldasok mennek at a rostan, amik megfelelnek a teszteseteknek.
Tobb nyelv is tamogatott az oldalon. Van JS, Python, Ruby, Haskell, Clojure meg meg talan par. Bar en eddig csak a JavaScriptes feladvanyokat neztem. Igazan szorakoztato igy elutni a feles idot (sorozes, edzes meg asszony utan persze
). Szerintem mindenkepp regelj Ha megoldasz egy feladvanyt, akkor meg tudod nezni masok megoldasait, es ertekelni is tudod azokat, mint
* Best Practice
* Clever
Itt santit amugy az oldal, mert sosem az a best practice amit epp arra szavaztak, helyen kell kezelni es akkor nem zavaro.Ja igen, amit pedig linkeltem az az elso "feladvanyom" amit csinaltam, mikor csinalsz egyet az nem lesz rogton eles, hanem csak beta, es a kozosseg tagjai tudjak megszavazni a nehezseget, meg jelezni a hibakat stb..
-
Jim-Y
veterán
Ha esetleg valakinek lenne kedve tesztelni http://www.codewars.com/kata/typer-dot-js Thx
-
#4309
Jim-Y
veterán
Sk8erPeter
#4307
Jim-Y
veterán
válasz
Sk8erPeter
#4307
üzenetére
Egyébként, te is tehetnél vele egy próbát, van 30 napos free licensz, nálam ezen tesztidőszak eredménye -> [link]
Én meg igérem, hogy megnézem a közeljövőben a Netbeans ilyen téren is
Btw Dracula theme ftw. Sajnos ST2-höz nem találtam, nincs is olyan color-scheme ami ne zavarna -
#4308
Jim-Y
veterán
Sk8erPeter
#4307
Jim-Y
veterán
válasz
Sk8erPeter
#4307
üzenetére
Hát nézd, az egyik Java-ra íródott, de fel lehet okosítani pluginekkel, hogy valahogy működjön js fejlesztésre, a másik meg direkt erre készül, ha az összefoglalóból az jön le, hogy a Netbeans is tudja ugyanazt akkor lehet úgy is van. Én egyetemen végig Netbeanst használtam, utána pedig Eclipse-t Java fejlesztésre, most meg Webstormot JS-re, a három közül egyértelműen a WS a legjobb IDE ha személyes véleményemet kérdezed. Eclipse nekem logikátlan, lassú, és nem is tetszik a kezelőfelülete, Netbeanst már jobban szeretem, az jobban bejött mint IDE, de ott meg picit sem foglalkoztam a konfigurálhatóságával. A WS-nek tényleg az a legnagyobb gondja, hogy fizetős, de cserébe van rendes support is
-
Jim-Y
veterán
válasz
martonx
#4305
üzenetére
Koszonom szepen, biztos hasznos lesz masoknak is, en pusztan azert kerdeztem, mert irtad, hogy van nem fizetos valtozata ami erdekes lehet sokak szamara.
En is teszek valamit a kozosbe, hatha ez is segit valakinek. En cca 3,4 honapja hasznalok egy JetBrains termeket javascript fejlesztesre, foleg js fajlokban matatok, css-ben es html-ben kevesebbet.
Webstorm
=======Amit szeretek benne:
- szoros integraltsag svn-el. Rogton az elejen megadod a mar letezo projektet, o felismeri, hogy version kontrol alatt vagy, es ezt jelzi is a fajloknal. Uj fajl letrehozasanal megkerdezi, hogy hozza szeretned-e adni a projekthez, ha igen zold lesz a fajl (neve a projekt strukturaban, es a taboknal is), amugy meg piros, ha egy under version control fajlt modositasz akkor pedig kek. Ugyanez kodszinten is megvan, Jelzi a valtoztatasokat kekkel (update), zolddel (added). Hasznos tud lenni.
Ugyancsak svn, van egy csillivilli osszehasonlito ablak, ahol a current copy-t tudod osszehasonlitani (es mergelni) a head-el. Nagyon egyszeru a mergeles, nyilacskakkal at tudod huzni a merged fajlba a valtoztatast. Eleg tuti- Amit surun szoktam hasznalni, navigacio a fajlok kozott, fajlhoz ugras, sorhoz ugras, usage search (ez nem tudom, hogy mi magyarul
), find in path, illetve a Refactoros Rename. Ez is nagyon hasznos. Bar ez tuti masban is igy van, de pl az egyszeru szerkesztokhoz kepest, Sublime, Brackets, Atom ez tobbet tud, es kenyelmesebb.- Live templates: Ez olyan mint ST2-nel a Snippets. Itt is tudsz elore definialni kodreszleteket, amiket utana be tudsz illeszteni es konfiguralni. Pl us -> TAB -> 'use strict', vagy
for -> TAB -> es beilleszt egy kesz for ciklust stb...- Jok a code quality beallitasok. JSHint + JSLint + configuralhato Javascript inspections.
Ez utobbi peldaul olyan hogy beallithatod hogy milyen merteku nestingnel szoljon, avgy ha tul sok parameteres a fuggvenyed akkor is szoljon, meg meg ezer ilyen code quality beallitas.- A potencialis hibakat is jelzi az editor. Lehet inspection-t vegezni. Pl jelzi a unused valtozokat.
- Van beepitett Grunt consol. Ezt is hasznosnak talaltam.
Talan ezek a fontosabbak, vagyis amik nekem eddig jol jottek.
CSS
====Itt talan azt erdemes kiemelni, hogy a hexa kodokat megjeleniti az ide egy kis negyzetben a sorszamozas mellett.
Kb ennyi
-
#4301
Jim-Y
veterán
Sk8erPeter
#4300
Jim-Y
veterán
válasz
Sk8erPeter
#4300
üzenetére
Finoman fogalmaztál.. én már írtam egy min 50 soros hsz-t arról, hogy nekünk mennyire nem célunk őt bántanbi, meg, hogy ilyen hozzáállással milyen rossz lesz neki majd a nagybetűsben, stb.. aztán 60 sornál CTR+A + DEL.. egész egyszerűen van akinek lenne értelme 50 sornyi segítséget írni, meg van akinek nincs. Gondolj bele ha már itt a fórumon ilyen szociális gondjai vannak, akkor milyen lehet az életben, nem mi fogjuk a helyes útra sodorni, meg nem mi fogunk tudni neki segíteni abban, hogy önállóbb legyen, szóval ja.. kitöröltem a cuccost, és szerintem finoman fogalmaztál
-
#4295
Jim-Y
veterán
honda 1993
#4294
Jim-Y
veterán
válasz
honda 1993
#4294
üzenetére
A fórumok nem erre valók hogy valakit -1 -ről felhozzon a közösség. Az alapokat vagy neked kell netrol / könyvből megtanulni vagy szerzel valakit aki face2face tanít. A fórum arra van, hogy ha elakadsz a munka során akkor kérdezni tudj. Egyébként az első hsz tele van kezdőknek szóló tutorialokkal, ha azokon vegigragva sem sikerül mukodesre birnod egy sor kódot sem. Akkor a helyedben már most feladnam ezt a hobbit. Udv
-
Jim-Y
veterán
Figyeled az input field onchange (change) eventjet és valtozaskor az addig bevitt karaktersorozatot hasonlitod össze a kívánt szóval. Ha egyezés van, akkor vegrehajtod a parancsot. Pl azt ami kékre színezi a karaktereket. Ha ez nem kielégítő válasz akkor javaslom kérdezz jobban mert nem egyértelmű a kérdésed. Nagyon hiányos. Üdv
-
Jim-Y
veterán
A this használatát én ahol lehet elkerülöm, és másoknak is ezt javaslom. Már itt is írtam róla többször, aki nem tudja pontosan, hogy mikor mi a this az bele fog futni hibákba! Ezt ki lehet kerülni azzal, hogy pl event.target-et hívunk. A példában pont nem ez kellett, hanem az event.currentTarget, de ez most lényegtelen
Majd beállítom a feed-et akkor, köszi
Tervezek még írni, sőt, igazából csak most kezdtem, csak nincs sok időm mostanában :/ -
#4282
Jim-Y
veterán
kemkriszt98
#4281
Jim-Y
veterán
válasz
kemkriszt98
#4281
üzenetére
http://jsfiddle.net/jkx6jcvL/1/
Biztos lehet jobban is.
-
#4278
Jim-Y
veterán
kemkriszt98
#4277
Jim-Y
veterán
válasz
kemkriszt98
#4277
üzenetére
Szerintem nem ártana működő példát feltenni
Egyébként: jQuery.closest() -
#4249
Jim-Y
veterán
kemkriszt98
#4248
Jim-Y
veterán
válasz
kemkriszt98
#4248
üzenetére
Szia. Én nem értek túlságosan a jQuery-hez, de még a tanulásod elején megemlíteném, hogy érdemes 1-2 good-practice-t betartani.
Az egyik ilyen, hogy kerüljük a this használatát. Amikor csak lehet használjunk mást. A példádban is lehetett volna mást használni, és ennek nem csak az az előnye, hogy olvashatóbb, és érthetőbb lesz a kód, vannak olyan helyzetek, amikor rossz működésre vezet a this használata.
Demo (rossz eset, amikor a példád hibázna, nem várt eredményre jutna):
http://jsfiddle.net/Jim_Y/tsucL8je/18/
Mi történt?
- két divet ágyaztunk egymásba. jQuery-vel egy eseménykezelőt állítunk a div-re, és azt várnánk, hogy amelyik kockára kattintunk, az majd 100px-el lejjebb kerül. Nem ez történik!
- ad1: propagation, a selector nem egy, hanem 2 elemet is "matchel", először azon fut le az eseménykezelő amire ténylegesen kattintottál, tehát a .inner, majd propagál és a .outer div-en is le fog futni az eseménykezelő.
- ad2: a this mindig az aktuálisan "propagált" elemre mutat. Tehát az első loop-ban a this a .inner, majd a következőben a this a .outerEmiatt mindkét div lejjebb fog kerülni, talán 100px-nél nem is olyan feltűnő, de egy kattintásra az a div amin eredetileg kattintottunk (.inner) összesen 200px-el csúszott lejjebb.
Megoldás vol1:
Cseréljük le a this-t, ahogy eredetileg is javasoltam event.target-re.
http://jsfiddle.net/Jim_Y/tsucL8je/19/
Mi történt?
- még mindig furcsán működik, még mindig nem azt tapasztaljuk amit szerettünk volna, most egy kattintásra a .inner kocka 2x100px-el lejjebb került.
Ez azért van, mert az event.target minden loopban ugyanaz, arra mutat amelyik elemre kattintottunk az egérrel. (megjegyzés: az event.currentTarget minden esetben === this)
Első ciklusban event.target -et eltoltuk 100px-el, majd jön a második ciklus (propagation ugyebár, vagy bubbling effect, ki hogy ismeri) ahol ugyancsak event-targetet toltuk el 100px-el.
Megoldás vol2:
http://jsfiddle.net/Jim_Y/tsucL8je/20/
Mi történt?
- itt már szinte az történik amire számítottunk, amire kattintunk az 100px-el lejjebb kerül és nincs propagation. Persze ha a .outer div-re kattintunk akkor az inner is lejjebb kerül, ez annak a következménye, hogy az inner az outeren belül van foglalva. Ezen nem tudunk segíteni, csak ha máshogy írjuk meg a html-t.
Összefoglalva:
* event.target statikus, mindig arra mutat amire ténylegesen kattintottunk (vagy általánosabban fogalmazva, amelyik node-on az esemény létrejött)
* this az változik, illetve sok esetben nem lehet megmondani, hogy most éppen mire is mutat a this, jobb ezt elkerülni.
* event propagation. Ezt is figyelembe kell venni bizonyos esetekben.Üdv
-
Jim-Y
veterán
http://jsperf.com/comparison-of-getelementby-and-queryselector
Nem tudjátok véletlenül, hogy a querySelectorAll miért teljesít ilyen rosszul?
-
Jim-Y
veterán
-
Jim-Y
veterán
Na, akkor legalább volt értelme a példának.
Ezt írja a konzolra:
Vagyis
10
10
10
10
10Magyarázat: (ha esetleg valamit rosszul írnék, akkor javítsatok ki többiek, nem szeretném ha valamit az én hibámból jegyezne meg rosszul
1:
for (var i = 1; i < 6; ++i) {
//...
}Ezt az interpreter így értelmezi:
var i = undefined;
for(i = 1; i < 6; ++i) {
//...
}Tehát az i ciklusváltozót felemeli a függvény törzsének elejére, majd undefined-ként deklarálja.
2:
cont.addEventListener('click', function () {
console.log(i);
});Minden click eseményre a cont objektumon/elementen regisztrál egy névtelen függvényt. A lényeges momentum, hogy minden függvény javascriptben látja/tartalmazza az őt körülvevő függvények kontextusát.
function a() {
var i = 10;
function b() {
var j = function() { return 11; };
function c() {
console.log(i); // 10
console.log(j()); //11
}
c();
}
b();
}
a();Az eredeti példánál maradva az anonim függvény látja az őt körülvevő test függvény kontextusát, így az i változót is. Az addEventListener függvényel olyan működést definiálunk, ami valamikor a jövőben fog lezajlani (amikor klikkelünk az elemre), ezért a ciklus már rég végez mire mi az elemre klikkelünk.
3:
amikor végül rányomunk a div-re, az i már a ciklus végén 6, majd egy újabb értékadással i = 10. Ne felejtsük, hogy az összes anonim függvény "cipeli" magával a test függvény kontextusát amiben az i változóhoz már a 10 érték van rendelve, ezért fog 5 x 10-et kiírni a program a konzolra.A megoldás az lehet, ha minden anonim függvénynek/hez egy új kontextus-t rendelünk, amiben az i változó a ciklusban éppen aktuális értéken fog szerepelni.
Példa és megoldás:
var cont = document.querySelector('#container');
function test() {
for (var i = 1; i < 6; ++i) {
(function (i) {
cont.addEventListener('click', function () {
console.log(i);
});
}(i));
}
i = 10;
}
test();A (function() { .. }()); egy új kontextust generál amibe elmentjük az i ciklusváltozó aktuális értékét így az mindig fix marad.
üdv
-
Jim-Y
veterán
Élő példa, hogy mire jó még:
Találós kérdés, mit ír ki ez a program, anélkül, hogy kipróbálnád?!
<div id="container">Katt ide</div>
########################################
var cont = document.querySelector('#container');
function test() {
for (var i = 1; i < 6; ++i) {
cont.addEventListener('click', function () {
console.log(i);
});
}
i = 10;
}
test(); -
Jim-Y
veterán
Ez egy IIFE (immediately invoked function expression). Bővebben erről itt olvashatsz. Ben Alman - IIFE
Azért jó, mert
1: csinálsz egy függvényt, ezzel ugye egyből egy új variable environmentet
2: rögtön meg is hívodAmi az iffy-n belül van az nem "szennyezi" a globális névteret. A pattern segítségével le is tudjuk védeni az egyes könyvtárakat. Például a következő kódban a jQuery object-re $-ként tudunk hivatkozni anélkül, hogy félnünk kéne, hogy egy másik 3rd party library közben "felüldefiniálná" a "$" jelet.
Például:
(function($) {
}(jQuery));Az pedig, hogy miért jobb nem szennyezni a globális névteret, elsőszámű good-habit. Ennek utána tudsz olvasni neten.
Egyébként erre épül nem egy pattern, például a self revealing module pattern is. Erről itt olvashatsz bővebben: Addy Osmani - Design Patterns #revealingmodulepattern
-
Jim-Y
veterán
válasz
martonx
#4204
üzenetére
Szerintem túlreagálod
Én úgy érzem, hogy ebben az esetben ez nem félrevezető, vagy nehezen olvasható. De amúgy természetesen az alapproblémával egyetértek. Sokszor ki is lett már tárgyalva itt a topikban. Egyébként már csak az api-val való "konzisztencia" miatt is ezeket használtam -> restifyMeg amúgy is készítek dokumentációt..
(persze..attól, hogy valaki hülyeséget ír, még nem kell nekem is úgy csinálni, de a req, res, err szerintem elég beszédes. Azért ez nem olyan mint az a, b, e stb..)
-
Jim-Y
veterán
FYI
Amúgy végül tényleg az első megoldás lett a nyerő, vagyis ezt alkalmaztam a többi függvénynél is. Már csak azért is, mert ezzel az olyan függvényeknél is analóg módon tudom megoldani a hibák lekezelését amik alapból nem promissal térnének vissza.
Kis magyarázat:
- a mongoose api-nak vannak Query tipusú függvényei, amiken lehet hívni exec()-et, ami miatt Promissal térnek vissza. Ilyen például a find(), vagy a findById(). Ezeknél elég volt (lett volna) ennyit írni az ArticleProviderbeArticleProvider.prototype.findAll = function() {
return this.Article.find().exec();
}majd a hívó oldalon már le tudom kezelni a Promise-t.
function getArticles( req, res, next ) {
var promise = articleProvider.findAll();
promise.onResolve(function( err, articles ) {
if( err ) { .. }
// handle
});
}Ez mind szép, és jó, de vannak olyan mongoose függvények amik nem promissal térnek vissza. De az előző posztban mutatott módszerrel ezeket is sikerült promisokkal megoldani, ezért választottam végül ezt a megoldást.
-
Jim-Y
veterán
válasz
martonx
#4201
üzenetére
Szerinted ebben hol van elcsépelt rövidítés? Gondolom nem a res, req, err - re gondolsz mert azokkal nincs baj, eléggé konvencionalisak. De ezek szerint arra gondolsz amiket én deklaraltam valtozokat. De ebből meg csak három van.
promise, self, articles. Ezek közül melyik ami rossz? -
Jim-Y
veterán
Sziasztok.
Promise-os kérdésem lenne. Arra lennék kváncsi, hogy hogyan lenne szerintetek érdemes használni, vagy hogy elegáns használni a promise-okat. Adott a következő szituáció:
- van egy REST service:
server.get( '/get/articles', getArticles );
- van azt ezt feldolgozó getArticles függvény
- illetve van egy articleProvider osztály/modul amit a getArticles függvényből hívok meg. Ponstosabban annak findAll metódusát. Ez felelős az adatbázisból való kiolvasásértA kérdés, hogy a getArticles / findAll függvényt hogy kéne megrni, több (működő) verzió is született már, de nem tudom eldönteni, hogy melyik a szép/jó/használható megoldás.
Megoldás 1, ez született legkésőbb, szerintem ez a legjobb:
function getArticles( req, res, next ) {
var promise = new mongoose.Promise;
promise.onResolve(function( err, articles ) {
if( err ) {
console.error( err );
res.send("Could not read articles");
}
res.send( articles );
});
articleProvider.findAll( promise );
}ArticleProvider.prototype.findAll = function( promise ) {
this.Article.find({}, function ( err, articles ) {
if( err ) {
promise.reject(new Error( err ));
}
promise.fulfill( articles );
});
}Megoldás 2:
function getArticles( req, res, next ) {
articleProvider.findAll().fulfill(res);
//articleProvider.findAll()
.reject(new Error("Valamiért rejecteljük"));
}ArticleProvider.prototype.findAll = function() {
var promise = new Promise,
self = this;
promise.onResolve(function( err, res ) {
if( err ) {
console.error( err );
}
self.Article.find({}, function( err, articles ) {
if( err ) {
promise.reject(new Error( err ));
}
res.send( articles );
});
});
return promise;
};Ez a reject-re amúgy sem működik jól, mert a res-t nem tudjuk átadni.
Megoldás 3:
Ez jó, illetve kompakt, de igy meg nem tudjuk rejectelni ha kéne.
function getArticles( req, res, next ) {
var promise = articleProvider.findAll();
promise.onResolve(function( err, articles ) {
if( err ) {
res.send(new Error( err ));
}
res.send( articles );
});
}ArticleProvider.prototype.findAll = function() {
return this.Article.find().exec();
};stb, még tudnék pár verziót összerni
Vélemények?
Üdv, és köszi. Remélem érthető a példakód ^^
megj: mindhárom megoldás működik egyébként.
-
Jim-Y
veterán
Rich JavaScript Resources:
https://github.com/dypsilon/frontend-dev-bookmarks -
#4187
Jim-Y
veterán
kemkriszt98
#4186
Jim-Y
veterán
válasz
kemkriszt98
#4186
üzenetére
Legyszi oszd meg a teljes kododat, mert elkepzelheto, hogy te a javascript kodot a body vegen adtad hozza, es az onClick nem letezik meg akkor, mikor rakotod az onclick esemenyre.
Masik hiba, hogy ha igy hivsz meg egy metodust, akkor nincs hidden event metodus, azt az addEventListener teszi hozza a hatterben.
Harmadik hiba, hogy nehezen modosithatova teszed a kodot azzal, hogy az esemenyt a html-ben definialod es nem a js-ben, ahogy azt kene, illetve ahogy erre mar kaptal peldakodot is tolem, es Sk8erPeter-tol is.
Peldaul csereld ki a kododban:
<img id="1" class="small" alt="Small img" src="imgs/1.jpg" onclick="onClick(this.id)"></img>
function onClick(id) {
console.log(id);
}Es egybol meglesz az id.. de ha ezt ugy csinalnad, ahogy kene (nem biztos, hogy ez lenne a legjobb modszer, de a jelenlegidnel jobb):
Gondolj bele, ez mar csak azert is jobb, mert ha onclick eseten tobbe mar nem az onClick()-et akarod futtatni, akkor nem kell annyi helyen belenyulni a html kodba, ahany keped van
<img id="1" class="small" alt="Small img" src="imgs/1.jpg" onclick="onClick(this.id)"></img>
<img id="2" class="small" alt="Small img" src="imgs/1.jpg" onclick="onClick(this.id)"></img>
<img id="3" class="small" alt="Small img" src="imgs/1.jpg" onclick="onClick(this.id)"></img>
<img id="N" class="small" alt="Small img" src="imgs/1.jpg" onclick="onClick(this.id)"></img>Itt most N-szer kene atirni, mig az en verziomban egy helyen atirod a kodot, es kesz.
Nem veletlenul best-practise az, hogy HTML-be NEM irunk javascriptet, ha ez megoldato, es JS-be NEM irunk CSS-t ha ez megoldhato.
-
#4185
Jim-Y
veterán
kemkriszt98
#4184
Jim-Y
veterán
válasz
kemkriszt98
#4184
üzenetére
Tippre azert, mert vagy rossz az ev.target nem az amire gondolnal, vagy mert az ev.target-nek nincs id-je, vagy az nem 1.
-
#4183
Jim-Y
veterán
kemkriszt98
#4182
Jim-Y
veterán
válasz
kemkriszt98
#4182
üzenetére
Szia. En eleg nagy eselyt latok ra, hogy inkabb a feladatot kene mashogy megoldanod, mert szerintem rosszul kozelited meg a problemat.
A gombokra kulon listenert szokas aggatni, igy nem szokas az id-t igy lekerni. De ha megosztod a kodod tobbi reszet is, peldaul jsfiddle-on, akkor tobbet tudunk majd segiteni.
Egy gombra kattintas pszeudokodja valami ilyesmi kene hogy legyen:
myButton = leker DOM element id (vagy mas) alapjan
myButton addClickListener mitcsinaljon
mitcsinaljon() {}Arrol nem is beszelve, hogy == helyett === javasolt, mert elobbi bizonyos helyzetekben erdekes eredmenyekre tud vezetni. [link]
-
#4175
Jim-Y
veterán
[pod]Diablo
#4174
Jim-Y
veterán
válasz
[pod]Diablo
#4174
üzenetére
Kezdjük ott, hogy rosszul linkelted a példát
-
#4161
Jim-Y
veterán
kemkriszt98
#4159
Jim-Y
veterán
válasz
kemkriszt98
#4159
üzenetére
changeImageSrc(largeImage, sourceUrl); hellyett
changeImageSrc(large, sourceUrl);
-
#4157
Jim-Y
veterán
kemkriszt98
#4156
Jim-Y
veterán
válasz
kemkriszt98
#4156
üzenetére
Mert a script elemet nem lehet igy irni.
Ird igy <script src=""></script> -
#4153
Jim-Y
veterán
Sk8erPeter
#4152
Jim-Y
veterán
válasz
Sk8erPeter
#4152
üzenetére
Ez sajnos nem ugyanaz, mintha a body elé tetted volna, mivel nem használtam sem jquery ready()-t, sem body.onload-ot, így a js előbb töltődik be, mitnhogy a DOM-ot felparszolta volna a böngésző. Az én verziómban a külső javascript fájlt, vagy a <script></script> tageket a </body> elé kell rakni.
kemkriszt98: szerintem a könyv előtt/vagy mellett lesd meg a topik összefoglalóját. Sok hasznos infót fogsz benne találni, arra vonatkozóan is, hogy egy kezdőnek mivel érdemes kezdenie. üdv
-
#4150
Jim-Y
veterán
kemkriszt98
#4149
Jim-Y
veterán
válasz
kemkriszt98
#4149
üzenetére
Hú-ha, hogy te ezért mit fogsz itt kapni
Nem írunk így javascript kódot!Itt van egy alap cucc kiindulásnak, hogy hogyan kellett volna inkább:
http://jsbin.com/tusunami/1/edit?html,js,outputNincs időm utánajárni, de biztos van jobb megoldás mint a képek url-jét cserélgetni.
-
Jim-Y
veterán
Szia. Most sikerült erre visszatérnem.
Leszedtem a példád, írtam hozzá egy klienst, de az a gond, hogy a szerverre eljut az információ
{ name: "akarmi" } , tehát az akarmi eljut a szerverig, sikerül meghívni a wsdl alapján a metódust, de kliens oldalra már nem jut vissza a válasz, ott mindig undefined-ot olvasok :/Most pont ezen vagyok, hogy ezt kijavítsam. Szerintem a wsdl-ben kéne mókolni.
-
#4135
Jim-Y
veterán
Sk8erPeter
#4134
Jim-Y
veterán
válasz
Sk8erPeter
#4134
üzenetére
Hónapokkal ezelőtt már én is néztem, de akkor csak OSX-re lehetett feltenni...
-
Jim-Y
veterán
Aki szokta használni a Sublime-ot, az esetleg lesse meg ezt is, a héten lett elérhető.
https://github.com/atom/atom -
-
#4089
Jim-Y
veterán
Sk8erPeter
#4087
Jim-Y
veterán
válasz
Sk8erPeter
#4087
üzenetére
Story mode on
Adott a feladat, vannak egy generált oldalon gombok, a fajta gombból is >= 0 darab, b fajta gombból is >=0 de általában több darab. Ezen kívül még van pár elem amire listenert kell kötni mert azok is csinálnak valamit. Maga az action nagyon egyszerű, a és b gombok esetén is csak el kell navigálni egy adott url-re, de az url-ben változnak a query paraméterek. Ugye ebben semmi nehéz sincs, meg is csináltam gyorsan, kb ilyeneket írtam:
var aButtons = document.getElementsByClassName('a'),
bButtons = document.getElementsByClassName('b'),
cButton = document.getElementById('c'),
dDropdown = document.getElementById('d');
for(var i = 0; i < aButtons.length; ++i){
aButtons[i].addEventListener('click', function(){
var queryParam = this.getAttribute("data-myImportantValue");
window.document.location.href = 'localhost:myport/myservice/..stb/myFun&query=' + queryParam;
return false;
});
}
.. bButtons-re is..
...cButton-re is stb..Mivel gyorsan megvolt, gondoltam akkor megpróbálom szebben megírni, arra gondoltam, hogy például az szebb lenne, meg memória (bár itt annyira mindegy...) szempontjából is jobb lenne, ha a function() { ... } helyett lenne egy eventHandler függvényem amit az összesben tudnék használni. És az lenne még jó, gondoltam, ha a 'localhost:myport/myservice/..stb/myFun' részt, mivel myFun minden esetben más aButton-ök esetén myFunc, bButton-ok esetén myFunc2 stb... ha ezt megadhatnám a handler paraméterében, valamint arra gondoltam, hogy a queryParamétereket &query= is egy paraméterben adnám át a handler függvénynek.
Azt nem tudtam, hogy ezt így nem lehet, sőt, igazából lehet.
Megnéztem az addActionListener Chrome beli implementációját, máshol is tuti így van, ott van egy listeners tömb, amibe a listener függvény objektumokat teszik. Ezáltal később lehet mondani removeListenert amikor csak simán kiveszik a listener függvényobj-ot a tömbből. Ezért ha ezt írom, az nem jó.
addEventListener('click', eventHandler(param1, param2));
Mert ebben az esetben a () miatt rögtön meg is hívom a függvényt ami ugye nem jó, a tömbbe se tudja a böngésző így betenni stb...
Mentem tovább, mi lenne, ha a paramétereket bindolnám az objekthez, így nem kéne a függvényt rögtön meghívni, a böngésző el tudná tárolni a listeners tömbben:
addEventListener('click', eventHandler.bind(thisArg, param1, param2));
Ez jobb, itt a két paraméter a függvényhez lett bindolva, ezeket elérem egy ilyen fügvénnyel utána:
function eventHandler(param1, param2) { }
De ezzel meg az a gond, hogy a thisArg-nak nem tudtam átadni se az event-et, se a this-t. Tehát az eventListener-ben utána nem érem el a aButtons objektet, szóval ez se jó így.
Na és valahol itt írtam be a topikba, hogy hátha valahogy meg lehet úgy csinálni, hogy az eventHandler függvénynek átadom a aButtons(i) referenciát mint thisArg, valamint a saját paramétereimet, és akkor írhattam volna ilyeneket:
for(var i = 0; i < aButtons.length; ++i){
aButtons[i].addEventListener('click', eventHandler(this, 'localhost:myport/myservice/..stb/myFun', {
someId: "data-myImportantValue",
somOtherId: "data-otherImportantId"
}));
}
for(var i = 0; i < bButtons.length; ++i){
bButtons[i].addEventListener('click', eventHandler(this, 'localhost:myport/myservice/..stb/myFun2', {
someStuff: "akarmi"
}));
}
function eventHandler(baseUrl, queryParams) {
var queryString = processParams(queryParams);
// queryString:
// &someId=<this.getAttribute("data-myImportantValue")>&someOtherId=<this.getAttribute("data-otherImportantId")>
window.document.location.href = baseUrl + queryString;
}Szóval semmi komoly, csak szebben/jobban/máshogy akartam megcsinálni, ennyi
Megj: PH random italic tageket tesz a hsz-be, wtf? Nem győzöm törölni őket
Hát de ez mi? Nem tudom kitörölni a hsz-ből a dőlt bekezdéseket, mert visszteszi őket :/ Itt van amit nem sikerül szépen formáznom: pastebin
Karma: de, pont ezt, de a sokBtns eszembe se jutott ^^
-
Jim-Y
veterán
válasz
martonx
#4085
üzenetére
De ez még mindig nem az amit szeretnék :/
[link] Lehet, hogy nem is lehet azt megcsinálni ...
Csak mert ez az utóbbi sem egy szép megoldás.. annyival jobb, hogy nem halmozom az anonim függvényeket.Minden esetre, már ez is jobb mintha helyben kezelném le az eseményt, szóval half-win, de azért érdekelne, hogy az alpfeltevést meg lehet-e valósítani
-
#4084
Jim-Y
veterán
Sk8erPeter
#4083
Jim-Y
veterán
válasz
Sk8erPeter
#4083
üzenetére
Na igen ez így tiszta, pont ezt akarom ezért született meg a kérdés, mert egy bizonyos class összes elemére akarok handlert rakni, tehát cikluson belül vagyok, csak az olvashatóság miatt hagytam ki. És pont azért ez a kérdés, mert nem akarom anonim függvényeket használni, mert az mindig létrehozna egy új függvény objektumot. Amit mivel ciklusban vagyok, szeretnék elkerülni.
Az lenne a lényeg, hogy a handlernek, amit a click eseményre kötök, tudjak saját paramétereket átadni.
item.addEventListener('clck', csodalatosEventHandler -> na ennek akarok paramétert megadni. Ugyanis ezt a függvényt újrahasznosítanám később is.
Készítettem egy példát:
Vagy akkor úgy lehet csak, ahogy írtad is? : [link] Ez azért nem tetszik, mert ha más paraméterrel akarnám meghívni az evHandlert akkor annyiszor kéne egy új forwarder :/
-
Jim-Y
veterán
Sziasztok. Hogy tudok olyan addEventListener-t írni, ahol a handler függvénybe paraméterben meg tudom adni a this-t, illetve még a saját paramétereimet?
Így próbálkoztam:
buttons[i].addEventListener('click', goTo.bind( this, myOtherParams), false );
Ugye ha így írtam volna:
buttons[i].addEventListener('click',function() {
this.akarmi; // ez itt jó, itt a this az éppen aktuális button obj.
});A fentivel az a gond, hogy a goTo fv-ben kiiratva a this-t, undefined-ot kapok :/
-
#4069
Jim-Y
veterán
Sk8erPeter
#4068
Jim-Y
veterán
válasz
Sk8erPeter
#4068
üzenetére
Na asszem megvan a bibi, én egy IIFE-ben írtam ezeket, ami ugye egy új environment-et (scope) deklarált aminek már nem volt hasClass-a, ezért is jött az error
Amúgy azért jött elő, mert kellett a hasClass, addClass, removeClass, de nyílván csak ezek miatt nem szedek egy jquery-t, azt pedig tudtam, hogy ide már többször is be lett linkelve.
Még mélyebb menve, pedig azért kellettek, mert egy elementet kellett eltüntetni, js-be pedig nem írunk css-t mint az az összefoglalóban is le vagyon írva, úgyhogy marad a class bővítés ^^
-
#4067
Jim-Y
veterán
Sk8erPeter
#3566
Jim-Y
veterán
válasz
Sk8erPeter
#3566
üzenetére
Napi régész
Ezt itt elrontottad szerintem:
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}A this az nem jó..
function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += " " + cls;
} -
Jim-Y
veterán
Erről esetleg tudnál írni 1-2 sort, hogy hogy kell elképzelni? Van egy böngészőben futó alkalmazás, mint most a 2048, és az én C#/Java/akármi kódom közbe tud szólni, meg tudja hívni az alkalmazás egyes függvényeit?
Én eddig sajnos csak egy !JS nyelvben csináltam olyat, hogy natív javascript kódot futtattam, így nincs ebben nagy tapasztalatom :/
-
#4031
Jim-Y
veterán
leximester
#4028
Jim-Y
veterán
válasz
leximester
#4028
üzenetére
És miért szórakozol C#-al ahelyett, hogy ki-chekcoutolnád a projektet, és amennyiben szabad, továbbfejlesztenéd magadnak az eddigi kódot? Főleg, hogy annyival nem tudod megoldani a fejlesztést, hogy meghívogatsz pár függvényt és kész. Vannak belső állapotai a függvényeknek amin az egész alkalmazás áll, vagy bukik. Azzal is törődni kell.
trisztan: nem az ő kódjában van az preventDefault.
-
#4026
Jim-Y
veterán
leximester
#4025
Jim-Y
veterán
válasz
leximester
#4025
üzenetére
az event az egy click event lesz a restart gombon. Nálad azért undefined ,mert nyílván nem adtál meg a restart függvénynek egy click event objektumot mint bemenő paramétert.
Próbáld ki, hogy ott ahol restartot hívnál, ott írj egy
<keyboardInputManager>.emit("restart"); -ot. -
#4022
Jim-Y
veterán
leximester
#4021
Jim-Y
veterán
válasz
leximester
#4021
üzenetére
Igazabol egyszerubb lenne ha bemasolnad az eredeti kodot. Meg ha leirnad hogy mit szeretnel elerni es hogyan, az sem lenne utolso szempont :-)
-
#4020
Jim-Y
veterán
leximester
#4019
Jim-Y
veterán
válasz
leximester
#4019
üzenetére
Ha van egy InputManager objektumod, akkor azon a restart metódust meghívva tudod elérni ezt a függvényt.
Magyarázat:
Tehát javascriptben ha egy tömbön meghívsz egy pl indexOf() metódust ( [1,2,3].indexOf(3); ), az így lett implementálva:Array.prototype.indexOf = function(elem) { ... }
megj: a [] egy shorthand a var arr = new Array(); -re.
Megoldás:
Kell egy InputManager objektum:var inputManagerObject = new InputManager();
majd
inputManagerObject.restart(); // alert teszt
Hogy hogyan delegálj egy ilyen objektumot C#-ba abban nem tudok segíteni, nézz utána
-
Jim-Y
veterán
-
Jim-Y
veterán
Az elsőre egy félkész megoldás lehet például:
String.prototype.sameUntil = function(other) {
var cvar = (this.length < other.length ? this.length : other.length);
for(var i=0; i < cvar; ++i) {
if(this.charAt(i) != other.charAt(i)) {
return i;
}
}
return cvar;
}Azért félkész, mert a lehetséges buktatókat nem teszteltem ki, a példa adataidra jól működik, ha egyáltalán nem egyezik, akkor 0-t ad vissza. Illetve feltételezi, hogy az első karaktertől vett egyezést keresünk.
A második kérdést én sem értem igazán. Itt valahogy mindenképp csoportosítanod kéne az ugyanolyan str1-hez tartozó adatokat. Ha pl egy tömbbe tudod valahogy tenni az alma stringhez tartozó str2-ket, akkor
var almaArray = ["aluljáró", "almárium", "alváz"];
console.log(almaArray.map(function(elem) {
return "alma".sameUntil(elem);
}).reduce(function(prev, curr) {
return (prev < curr ? prev : curr);
}));// 2
De ha objektumba teszed, úgy is meg lehet oldani.
-
Jim-Y
veterán
Koszi. Igen ezt megtalaltam en is. Generaltattam is vele. Csak nalam nem sikerult osszeloni a javascriptes service strukturat a generalt wsdl-el:/ Este megnezem a megoldasod. Meg egyszer koszi
megj: nekem is hasonloak az erzeseim a soap kapcsan mint neked. De az lenne a lenyeg, hogy lassak ilyet is:-) Csinaltam restes web servicet is, de azzal nem voltak problemak. Igazan egyszeru volt osszehozni.
![;]](http://cdn.rios.hu/dl/s/v1.gif)
). Komolyra fordítva a szót, tényleg más is akarja még olvasni a kódod, ne adj isten módosítani, olyankor jól jön ha "self-descriptive" a kódod.
Rosszul irtam no ^^
De azért megéri, így legalább be tudok állítani egy olyan lintelést ami követi a saját stílusomat.
), find in path, illetve a Refactoros Rename. Ez is nagyon hasznos. Bar ez tuti masban is igy van, de pl az egyszeru szerkesztokhoz kepest, Sublime, Brackets, Atom ez tobbet tud, es kenyelmesebb.
Új hozzászólás Aktív témák
Hirdetés
- Milyen routert?
- sziku69: Szólánc.
- Telekom otthoni szolgáltatások (TV, internet, telefon)
- SSD kibeszélő
- Google Pixel topik
- Megjelent a Poco F7, eurós ára is van már
- Kerékpárosok, bringások ide!
- E-roller topik
- One mobilszolgáltatások
- CURVE - "All your cards in one." Minden bankkártyád egyben.
- További aktív témák...
- 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
- ÁRGARANCIA!Épített KomPhone Ryzen 7 7700X 32/64GB RAM RTX 4070Ti Super GAMER PC termékbeszámítással
- BESZÁMÍTÁS! Samsung Odyssey G9 OLED 240Hz Dual QHD 0,03ms monitor garanciával hibátlan működéssel
- DELL PowerEdge R630 rack szerver barebone - 2xSocket 2011v4 , 24x DDR4 DIMM, H330 RAID, 39369Ft+ÁFA
- Új Apple iPhone 16 Pro 128GB, Kártyafüggetlen, 3 Év Garanciával
- BESZÁMÍTÁS! Gigabyte A620M R5 7500F 32GB DDR5 500GB SSD RX 6700XT 12GB Cooler Master CMP 520L 750W
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: CAMERA-PRO Hungary Kft
Város: Budapest