- Samsung Galaxy A54 - türelemjáték
- Xiaomi Mi 11 Ultra - Circus Maximus
- Garmin Forerunner 55 - bemelegítő kör
- Samsung Galaxy Watch (Tizen és Wear OS) ingyenes számlapok, kupon kódok
- A Honor és a Huawei uralja a kínai mobilpiacot
- Ezek a OnePlus 12 és 12R európai árai
- Redmi Note 13 Pro+ - a fejlődés íve
- Amazfit GTS 4 - divatos megjelenés
- Vodafone mobilszolgáltatások
- Netfone
Hirdetés
-
VR játék lesz az Alien: Rogue Incursion
gp Az év végén érkező program PC-re, Meta Quest 3-ra és PlayStation VR2-re érkezik a tervek szerint.
-
Rossz üzlet az EV-kölcsönzés
it Küszködik az EV-kölcsönzés miatt a Hertz Global, még több EV-t adnak el.
-
Miniképernyős, VIA-s Epomaker billentyűzet jött a kábelmentes szegmensbe
ph A megfizethető, szivacsokkal jól megpakolt modell ötfajta kapcsolóval és kétféle színösszeállítással/kupakprofillal szerezhető be.
-
Mobilarena
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
-
Sk8erPeter
nagyúr
válasz norby10 #4400 üzenetére
Elkúrtad a linket, gondolom ez akart lenni:
http://jsfiddle.net/norberto1112/f3L07884/
Hogyhogy mi a gond? Talán hogy a mezőnek még nincs értéke, és pont azt is adja vissza?
(Fogadjunk, valami olyasmit szeretnél, hogy legyen egy űrlapod, benne egy szövegmezővel, és most elküldéskor szeretnél alertelni a bepötyögött értéket - de előbb tanulj meg kérdezni...)Sk8erPeter
-
Speeedfire
nagyúr
Próbálom magam kicsit felhozni js-ből.
A namespace és model az amit próbálok összehozni, de nem igazán akar működni.Próbáltam már 2 féle verzióval is, de az app minden esetben egy üres objektum. Mit rontok el? Vagy más patternt-t kellene követnem?
[link]
[link]Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
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]
[ Szerkesztve ]
-
Speeedfire
nagyúr
Na, akkor én már az elején egy rossz pattern-t néztem ki. Ahol ezt láttam ott az immediately-invoked function-al építi fel a namespace-el az objektumokat. De nálam ez nem ment.
Maradok akkor az általad linkelt verziónál.Köszi a linket, átolvasom.
Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
Sk8erPeter
nagyúr
Bevallom, számomra ez a
function getName() {
return name;
}
return {
getName: getName
};illetve
function getName() {
return name;
}
self.getName = getName;pattern még mindig kaotikus - mi van, ha 30 metódusra van szükségem, 30-szor kell kódot ismételnem (self.getName = getName, self.tokmindegy = tokmindegy, stb.)?
Amúgy jelen esetben miért nem elég ez (kódismétlés nélkül)? --> http://jsfiddle.net/4sj41ku5/6/var App = (function() {
/**
* @private
*/
var name = 'My App';
return {
/**
* @public getter
*/
getName: function() {
return name;
}
};
}());Sk8erPeter
-
Speeedfire
nagyúr
A könyv végén azért ott van, amit kerestem.
var namespace = namespace || {};
// here a namespace object is passed as a function
// parameter, where we assign public methods and
// properties to it
(function( o ){
o.foo = "foo";
o.bar = function(){
return "bar";
};
})( namespace );
console.log( namespace );;(function ( namespace, undefined ) {
// private properties
var foo = "foo",
bar = "bar";
// public methods and properties
namespace.foobar = "foobar";
namespace.say = function ( msg ) {
speak( msg );
};
namespace.sayHello = function () {
namespace.say( "hello world" );
};
// private method
function speak(msg) {
console.log( "You said: " + msg );
};
// check to evaluate whether "namespace" exists in the
// global namespace - if not, assign window.namespace an
// object literal
})( window.namespace = window.namespace || {} );Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
Zedz
addikt
És Ti mennyire használjátok ezeket a programozási technikákat? Úgy értem nap mint nap, vagy csak néha egyet-kettőt?
-
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ó.
[ Szerkesztve ]
-
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
[ Szerkesztve ]
-
martonx
veterán
válasz Sk8erPeter #4409 üzenetére
Most fejből dobom ide, én ilyesmit szoktam használni:
function model() {
var self = this;//Ez privát
var privateApple;//Ez publikus
self.publicApple = "valami";//Ez privát
function privateTest(){
};//Ez publikus
self.publicTest(){
};return self;
};Így minden, amit a self-re felfűzök az publikus lesz. Ami meg nincs a self-en az privát. Szvsz ez az egyik legletisztultabb módszer. És persze ezt lehet megfűszerezni IIFE-vel, vagy Singleton pattern-nel, mikor melyik a célszerűbb.
Én kérek elnézést!
-
norby10
csendes tag
Ismét ugyanazzal a kérdéssel jönnék csak másképp megfogalmazva!!
Tehát nekem van egy textfieldem egy űrlapon belül amiben 1 albummak fogom a nevét megadni majd alatta van egy jqueryis "Drop Here "os uploadoló rész és ennyi nincs semmi gomb amit megnyomok, hogy submit v valami...
Rövidre fogva, hogy kapom meg egy textfieldnek az értékét anélkül, hogy submitoljam a formot...
Remálem érthető voltam
[ Szerkesztve ]
-
martonx
veterán
bocsi, látszik hogy hétvégi üzemmódban hétvégén kerültem fél percre a gép elé
természetesen igazad van.Akkor egyúttal már az IIFE-s felvetésre is válaszolva, a gyakorlatban ez kb. így nézne ki IIFE-vel:
var model = (function () {
var self = this;...
return self;
})();Én kérek elnézést!
-
Jim-Y
veterán
válasz martonx #4419 üzenetére
Ez strict mode violation.
> That means, among other things, that in browsers it's no longer possible to reference the window object through this inside a strict mode function.
-
Aureal
senior tag
Portolom a kérdést a html-es topicból...
Azt hogy lehetne megoldani, hogy az előbbi kódomban [link], ha a max értéke mondjuk százas vagy ezres nagyságrendű, akkor az egyes helyiértékeket 0-val töltse fel vmi ciklus? Nem bírok rájönni sehogy sem.
Pl: 001... 010... 100 vagy 0001... 0010... 0100... Arra gondoltam kérjem le az input value hosszát a document.getElementById('max').value.length kóddal. (?)
[ Szerkesztve ]
-
dqdb
nagyúr
For ciklusban az általad használt módon nem illik az innerHTML-hez hozzáadni tartalmat, ugyanis ilyenkor minden alkalommal a böngésző változást észlelve újrarendereli az oldalt. Egy változóba gyűjtsd össze a teljes változást, és egyszer nyúlj hozzá az innerHTML-hez. Szintén nem illik for ciklusban a DOM-ból lekérdezni állandóan egy objektumot, amikor azt a ciklus előtt cache-elhetted volna egy változóba.
function f()
{
var min = parseInt(document.getElementById("min").value);
var max = parseInt(document.getElementById("max").value);
var s = "";
var paddingLength = -max.length;
var paddingString = new Array(-paddingLength).join("0");
for (; min <= max; min++)
s += (paddingString + min).slice(paddingLength) + " | ";
document.getElementById("box").innerHTML = s;
}[ Szerkesztve ]
tAm6DAHNIbRMzSEARWxtZW50ZW0gdmFka5RydIJ6bmkuDQoNClOBc4Ek
-
Speeedfire
nagyúr
Szeretném ha valaki/valakik megnéznék a kódját ennek az app-nak és véleményeznék. Próbáltam mindent átvenni amit tőletek hallottam, láttam és aszerint ko alapokon megcsinálni egy app js részét.
Maga a js fájl => [link]
Nyilván ha nagyobb lenne a projekt akkor el lenne szeparálva több fájllá.Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
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.
[ Szerkesztve ]
-
Speeedfire
nagyúr
Az n+1-edik tutoriálban láttam hasonlót, ahol a namespace-eket előre felvette. Sok értelme nem hiszem, hogy van.
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?
Lehet nézegetnem kellene még a pattern-eket. Az a baj, hogy komplett alkalmazás pattern-t nem láttam még seholsem.
Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
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
[ Szerkesztve ]
-
Speeedfire
nagyúr
De ha nagy az alkalmazás, akkor is szükség van névterekre vagy nem?
Erre gondoltam:
store.viewModels.store = function() {
var view = this;
view.products_list = ko.observableArray([]);
view.selectedProduct = ko.observable(false);
view.selectedProductsData = ko.observable(null);
view.selected_image = ko.observable(0);
view.gallery = ko.observableArray();
view.getProducts = function() {
$.ajax({
dataType: "json",
url: 'js/products.json',
success: function (data) {
//view.products_list(data);
view.products_list($.map(data, function(item){
return new store.models.product(item);
}));
}
});
};
view.goToProduct = function (product) {
$.ajax({
dataType: "json",
url: 'js/product.json',
data: {
"product_id": product.product_id
},
success: function (data) {
view.selectedProductsData(data);
view.selectedProduct(true);
view.setGallery();
}
});
};
view.setSelectedProduct = function () {
view.selectedProduct(false);
view.selectedProductsData(null);
};
view.setGallery = function () {
var gallery = [];
var product = view.selectedProductsData;
gallery = $.map(product().gallery, function(item){
return new store.models.Gallery(item);
});
view.selected_image(gallery[0]);
view.gallery(gallery);
};
view.setSelectedImage = function (image) {
view.selected_image(image);
};
return view;
};Nekem ez jobban bejött, mint pl amikor a functiók vannak a return értékben. Vagy a return-ben hivatkozok a private metódusokra.
Az require lesz a következő, aminek neki szeretnék esni. Csak ezt a pure js-t helyre kell még raknom.
Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
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.[ Szerkesztve ]
-
-
Speeedfire
nagyúr
Most még jobban belekavarodtam.
Az 1. példában ezek szerint valóban nincs szükség return értékre.
A 2. példában nem lesz átláthatatlan, ha sok osztály van a store alatt? Mert itt lényegében létrehozod a store golobális változót, majd mindent alá pakolsz. Vagy ilyenkor prototype-ot használsz?
A 4. nem tűnik rossznak, a require-t, amúgy is használni szeretném idővel.
Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
martonx
veterán
válasz Speeedfire #4434 üzenetére
Pont, hogy a 2. megoldástól lesz szépen strukturált a kliens oldal.
Knockoutról beszélünk, ahol nincs definiált controller, mint pl. angularjs-ben, de a fő modelledet fogd fel controllerként, azaz abba húzd meg a többi kis modellt, plusz az eseményeket itt mozgatod. Jim-Y szép példát tett fel jsfiddle-re.Én kérek elnézést!
-
Jim-Y
veterán
Nincs valami jo React-os tutorialotok?
-
Speeedfire
nagyúr
válasz martonx #4436 üzenetére
Mi van abban az esetben ha mondjuk nekem a single page app, több részből is áll.
Gondolok itt mondjuk a fenti store elképzelésre. Van mondjuk egy ahol látom a termékeket, egy ahol a termék adatlapja van, egy a megrendelésről. Ezeket mind egy db controller-be tegyem bele?
Külön szeretném szedni mindenképp a modelleleket és a controllereket (viewModel).Php model szemlélettel (fenti általam mutatott js kód) szeretném megoldani, ami nem biztos, hogy jó megoldás, de egyelőre ezt találom átláthatónak.
Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
martonx
veterán
válasz Speeedfire #4439 üzenetére
Ez már a te döntésed. Vagy egy nagy controllert használsz, vagy "oldalanként" használsz egyet. Én ez utóbbit javasolnám, de ha elég egyszerű a projekt, egyszerű az oldalak modellje, akkor simán mehet egy kontrollerbe is akár.
Én kérek elnézést!
-
Speeedfire
nagyúr
válasz martonx #4440 üzenetére
Mindenképp külön-külön controllerbe tenném ezeket.
De a fenti még mindig nem tiszta, hogy tudok mondjuk egy másik fájlból úgy controller-t, model-t hozzátenni.
Elvileg funkcióhoz a prototype-al tudok, de ez nálam nem akar menni. Ilyenre gondoltam, de nem akar így menni.Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
martonx
veterán
válasz Speeedfire #4441 üzenetére
Egyrészt nem értelek mit szeretnél, mi a problémád? Nem lehetne valahogy az alapoktól kezdve, mi lenne ez a program, mi a szerepe a ko-nak benne, kb. hogyan strukturálnád a ko-t, leírnod, hogy mit is szeretnél?
Másrészt kizártnak tartom, hogy e témában bármi is legyen a problémád, ahhoz prototype-ot kellene használnod.
Én kérek elnézést!
-
Speeedfire
nagyúr
válasz martonx #4442 üzenetére
Egyrészt nem értelek mit szeretnél, mi a problémád?
A 2.-dik példa bővítése a kérdés több fájlból. Van egy fő fájl, amihez behúzom a modulokat, ezt a részét nem tudom, hogy lehet megoldni.Nem lehetne valahogy az alapoktól kezdve, mi lenne ez a program, mi a szerepe a ko-nak benne, kb. hogyan strukturálnád a ko-t, leírnod, hogy mit is szeretnél?
A program egy dummy program lenne, hogy hogyan épül fel egy "nagyobb" single page app, sajnos ilyen tutoriálok nem nagyon vannak neten. Codeschool oldalon kipörgettem 4 js tanfolyamot is, de csak kis példák vannak benne.
A ko úgy kapcsolódik ide, hogy az oldal teljesen dinamikus lenne, ha valamire kattintok, módosítok, akkor az oldal többi része is módosuljon.
Jelenleg volt/van egy kisebb projektem, ahol jquery-vel több 100 sor az on(), trigger() függvény, ezeket pedig egy ko-val egyszerűbb lenne felépíteni.A ko struktúra nagyjából úgy lenne, hogy lennének a modeljeim, amiben leírom, hogy milyen attributumok vannak az adott modelben, validációk, összetett attributumok.
Illetve lennének mellette a viewModel-ek, amik a megjelenítést befolyásolják. Itt lennének a fenti példából kiindulva egy fő store modell, ami lényében az index action lenne. Ezt látja ha belép az oldalra és nem csinál semmit sem. Ezen kívül lenne mondjuk egy kosár, meg details megjelenítés is. A details alatt mondjuk hozzászólások.Másrészt kizártnak tartom, hogy e témában bármi is legyen a problémád, ahhoz prototype-ot kellene használnod.
Én úgy tudom, hogy "funkció alapú osztályt", csak prototype-al tudom bővíteni, de lehet én tudom rosszul.Bocs a sok kérdés miatt, de teljesen homály számomra ez a rész.
Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
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.
[ Szerkesztve ]
-
martonx
veterán
-
martonx
veterán
válasz Speeedfire #4443 üzenetére
A 2-dik plédát minek bővíteni? Az úgy jó, ahogy van. Fogd fel controllerként. Szvsz szerver oldalon sem bővítget az ember származtatással éjjel-nappal controllereket.
Ha meg tényleg pont erre van szükség, akkor tényleg ott a prototype lehetőség.Én kérek elnézést!
-
Speeedfire
nagyúr
Nem szándékozom saját MVC-t írni, egyszerűen csak próbálom megtalálni a megfelelő struktúrát egy js app-hoz.
Köszi a prototype példát.
Arra gondoltam, hogy a model1-et egyszerű bővíteni a mode1.megvalami-val, de a model2-t már csak prototype-al lehet.var model1 = {
valami: function() {};
};
model1.megvalami = function() {};
var model2 = (function(store) {
var view = {};
view.store = function() {};
view.getProducts = 'product';
store.viewModels = view;
return store;
}(window.store || {}));
martonx: Félreértesz. A store.viewModels csak egy konténer lenne a többi viewModels-nek.
De közben rájöttem, hogy single page app alatt valóan elég egy viewModel (ko alapokon), ami a "controller".[ Szerkesztve ]
Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com
-
Jim-Y
veterán
Csináltam egy Flux templatet ha esetleg valakit érdekel