Clever Geek Handbook

カヌドゲヌムむベントキュヌ+ Angular Basics

こんにちは、初心者、今日はおもちゃを䜜り盎しお 、新しい「技術」の基本を孊びたしょう。





栌玍庫では、アプリケヌションの䞻な郚分を曞き盎しお、それが䜕で、䜕を食べおいるのかを把握しようずしたす。 したがっお、最初の郚分では、角床を探玢する方法でかなりの数に含たれる萜ずし穎に衝突しないように、コヌスをより詳现に説明しようずしたす。



さお、第2郚では、DataBoomを䜿甚しお、元のゲヌムのようにむベントの玠晎らしいキュヌを䜜成したすHeartStoneのむメヌゞず䌌おいるこずを思い出したす。 今埌、phpサヌバヌを完党に削陀し、Databoomに完党に切り替えるずは蚀いたすが、これはたったく別の蚘事です...



画像








Angularjs



角床のあるアプリケヌションを初期化するには、ラむブラリを接続しおjsファむルにモゞュヌルを䜜成するだけでは䞍十分であるずいう事実から始める䟡倀がありたす。 Angularを䜿甚するには、htmlファむルをビュヌずしお䜿甚する必芁がありたす。これは、私の意芋では、ビュヌずコントロヌラヌを分離するのに適しおいたす。



栌玍庫には、ディレクティブなどの゚ンティティがありたす-特別なhtml属性です。これらの1぀を䜿甚しお、アプリケヌションを初期化したす。 アプリケヌションはペヌゞ党䜓をカバヌするこずはできたせんが、ペヌゞ䞊の個別のブロックのみをカバヌする堎合がありたす。すべおは、初期化する堎所に䟝存したす。 初期化は、ng-appディレクティブを䜿甚しお行われたす。 



<html ng-app>


これは、この芁玠ずツリヌの䞋のすべおが角床の衚珟であるこずを瀺唆しおいたす。 これらすべおをコントロヌラヌの助けを借りお管理したすが、コントロヌラヌも同様の方法で初期化する必芁がありたす。 



 <div ng-controller="myController">


コントロヌラヌは、空䞭に垂れ䞋がるこずなく、モゞュヌルに結び付けられおいたす。 アプリケヌション自䜓もモゞュヌルアプリケヌションぞのメむン゚ントリポむントであり、モゞュヌルのいずれかの優䜍性を指定するには、ng-appディレクティブでその名前を指定する必芁がありたす。 



 <html ng-app="App">


モゞュヌルは、角床オブゞェクトのモゞュヌルメ゜ッドによっお䜜成されたす。 



 angular.module(' ', ['_1'])


しかし、モゞュヌル自䜓はコントロヌラヌなしではほずんど圹に立ちたせん。 アプリケヌションの゚ントリポむントずしお定矩したメむンモゞュヌルでコントロヌラヌを䜜成するにはたずえば、モゞュヌルオブゞェクトでコントロヌラヌメ゜ッドを呌び出す必芁がありたす。 



 myModule.controller(' ', ['$scope',function($scope){ $scope.var = 'some'; $scope.foo = function(){}; }]);


$スコヌプオブゞェクトは、コントロヌラヌスコヌプのすべおの倉数ず関数、぀たり、ビュヌで䜿甚できるものを定矩したす。 この堎合、htmlファむルでvarおよびfooを䜿甚できたす。



倉数倀は二重䞭括匧{{var}}を䜿甚しお衚瀺されたす。぀たり



html 
 <div> {{var}} </div>




「some」を出力したす。



ポむントに近い



残りの埮劙な点に぀いおは、䟋を挙げおすぐに察凊したす。 Angularに関する蚘事はいく぀かありたすが、angular.ruのドキュメントは明確ではありたせん個人的には。



アプリケヌションをモゞュヌル化するずきに最初の萜ずし穎に盎面したす䟋ずしおrequirejsを䜿甚。 すぐにng-appディレクティブをhtmlに登録しおから、角床メ゜ッドずrequireメ゜ッドを䜿甚しおラむブラリを接続するず、䜕も機胜しないこずがわかりたす。 これは、ラむブラリ接続時のDOMツリヌがすでにコンパむルされおいるためです。



このような堎合、角床オブゞェクトにはブヌトストラップメ゜ッドがありたす。 



  require(['domReady!'], function (document) { ng.bootstrap(document, ['App']); });


したがっお、Appモゞュヌルを、文曞化するアプリケヌションぞの゚ントリポむントずしおバむンドしたす。



おもちゃで最初にリメむクするのはメニュヌです。぀たり、プレむダヌのリストがある唯䞀のメニュヌです。



コヌド 
 define(['angularControllersModule', 'User', 'Directive'],function(controllers, User, Directive){ ///////////  userList controllers.controller('userlistCtrl', ['$scope',function($scope){ $scope.userlist = []; //  ,   $scope.isMe = function(name){ //  if (name == User.login) { return 'me'; }; } $scope.letsFight = function(name){ // ,      return Directive.run('figthRequest',name); } }]); return controllers; })


ここで、各プレむダヌの暪にある察応するボタンをクリックするず、letsFight戊闘ぞの招埅が呌び出されたす。 栌玍庫では、これはng-clickディレクティブで指定されたす 



  <li class="{{isMe(user.name)}}" ng-repeat="user in userlist"> <span class="name">{{user.name}}</span> <span class="fightButton" ng-click="letsFight(user.name)"></span> </li>


さたざたな関数呌び出しに泚意しおください䞭括匧ありずなし。 違いは、䞭括匧内の匏がナヌザヌからのアクションを埅たずにすぐに蚈算されるこずです。したがっお、2番目の堎合、関数はクリックだけで呌び出される必芁があるため、䞭括匧は䜿甚したせん。



ng-repeatディレクティブは、PHPのforeachたたはES6のfor ofず同じように機胜したす-リスト内のすべおのオブゞェクトを反埩凊理したす。 ディレクティブは<li>タグで瀺されたす。぀たり、userlist配列にある芁玠ずたったく同じ回数だけ繰り返したす。



しかし、最初はプレヌダヌのリストは空であり、サヌバヌからwebsocketで取埗したす。 アプリケヌションでは、ラむブラリ、モゞュヌル、およびいく぀かの単玔な呜什セットディレクティブず呌びたすを簡単に曞き換えられるように分離しようずしたした。



さらに、これらのディレクティブDirectives.jsには別のハンドラヌがあり、Websocketsやajaxなど、どこからでも取埗した名前で必芁なディレクティブを呌び出すだけです。 最も単玔な堎合、これはただapplyですが、ディレクティブが呌び出される順序を蚘述するテヌブルをデヌタベヌスに䜜成したした。 ぀たり、myDirずいう名前のディレクティブを呌び出そうずするず、テヌブルに䞀臎するものがある堎合、そこに瀺されおいるディレクティブが呌び出されたす。これはリンクの䞀皮です。 しかし、このベヌスのポむントは、事前ディレクティブず事埌ディレクティブを䟿利に蚭定するこずです。 ぀たり、特定のディレクティブを呌び出す前埌に呌び出されるものです。



画像



そしお、これらのディレクティブはすべお別のフォルダヌに保存され、必芁なずきに接続したす



モゞュヌル/ directive.js 
 define(['DB','is'],function(DB){ var path = 'Actions/'; var Directive = { run: function(directiveName, args){ var args = args || ['']; if (!is.array(args)) { args = [args] }; DB.getDerictive(directiveName, exec); function exec(directiveName){ // Directive.preAction ? if (typeof directiveName == undefined || typeof directiveName == 'string') { action = directiveName; }else{ action = directiveName.action; } Directive._apply(action,args); } }, _apply: function(actionName,args){ require([path + actionName],function(action){ action.run.apply(action,args); }); } } return Directive; })


サヌバヌからwebsocketによっお、ディレクティブ名ず匕数を取埗し、このモゞュヌルを䜿甚しお呌び出したす。 



  socket.onmessage = function (e){ if (typeof e.data === "string"){ var request = JSON.parse(e.data); Directive.run(request.function,request.args); }; }


同様に、空のリストにプレヌダヌを远加する手順を取埗したす。



コヌド 
 define(['angularrutch'],function(angularrutch){ var action = { run: function(list){ for(key in list){ angularrutch.scopePush('userListTpl', 'userlist',{name: key}); } } } return action; })


私はあなたが既に話しおいる名前の角床のある束葉杖ずの䟝存にすでに気づいおいるず確信しおいたす。 このモゞュヌルは、倖郚から角型モゞュヌルぞのアクセスを提䟛したす。 実際、角床コントロヌラヌのデヌタを倉曎するのはそれほど簡単ではありたせん。 メ゜ッドを呌び出したり、パラメヌタヌの倀を曞き換えたりするこずはできたせん。 モゞュヌルの角床をある倉数に割り圓おたずしおも、$ scopeのスコヌプはただ盎接利甚できたせん。



これらの目的のために、この構造を䜿甚できたす 



 var el = document.querySelector( mySelector ); var scope = angular.element(el).scope(); scope.userlist.push(user);


すべおが玠晎らしく、$スコヌプにアクセスできたすが、ここではそれほど単玔ではありたせん。 $スコヌプデヌタは自由に倉曎できたすが、ビュヌでは䜕も倉曎されたせん。 Angularは単にあなたが䜕かを倉曎したこずに気づかず、$スコヌプのパラメヌタヌの倉曎を远跡したせんが、特定のナヌザヌアクション䞭に呌び出される$ digestルヌプでのみこれを行いたす。 手動で呌び出すには、スコヌプで$ applyメ゜ッドを呌び出したす。



倉曎されたコヌド 
 scope.$apply(function () { scope.userlist.push(user); });


これですべおが敎い、行った倉曎が衚瀺されたす。



プレむダヌの手ずアリヌナのカヌドのリストのコントロヌラヌに぀いおは説明したせん。ここではすべお同じですが、むベントキュヌの実装に移る方が良いでしょう。



DataBoomのキュヌ



耇数のタスクを連続しお䞎えお攻撃、想起、タヌン終了するず、すべおが同時に行われるわけではなく、画面䞊でオブゞェクトがちら぀くこずがわかっおいたす。



デヌタベヌスでは、キュヌテヌブルは次のようになりたす。 



 {"for":"user_1","motion":"opGetCard","motionId":2}, {"for":"user_2","motion":"opGetCard","motionId":1},


どのプレヌダヌが目的のアクションであるか、呜什の名前、および泚文のアクションID。



キュヌを䜜成するために、2぀の呜什を䜜成したした。1぀のプッシュメ゜ッドを䜿甚するstack.jsモゞュヌルスタックは実際にはキュヌではありたせん。私は蚀葉が奜きですずDataBoomデヌタベヌスずの察話を担圓するDBモゞュヌルのプッシュメ゜ッド



stack.js 
 define(['DB', 'User'],function(DB, User){ var module = { push: function(forWho, motion, expandObj) { var expandObj = expandObj || null; var motionObj = { 'for': forWho, 'motion': motion }; if (expandObj) { motionObj[expandObj.prop] = [{id:expandObj.id}]; }; DB.push('motionQueue',motionObj); } } return module; })




このようなむンタヌフェむスの䜿甚は簡単です。 



 stack.push(User.login,'myTimerStart');


user.loginのmyTimerStartステヌトメントを呌び出したす



2秒ごずに単玔なsetInterval関数を䜿甚しお呜什を抜出したす。 



 setInterval(function(){ Directive.run('getNextAction'); }, 2000);


順序に埓うためには、グロヌバル倉数window.motionIdが必芁です。この倉数には、既に解決されたアクションが完了しお先に進む呜什の数が含たれおいたす。 getNextActionディレクティブは、同じ名前のデヌタベヌスモゞュヌルメ゜ッドを呌び出し、コヌルバックを蚘述したす。 



 DB.getNextAction(User.login, this.actionStart); //


ク゚リク゚リ、぀たりフィルタヌ、䞊べ替え、制限付きのク゚リの可胜性があるため、テヌブルで必芁な呜什を怜玢できたす。 



 var config = { baseHost: 'https://t014.databoom.space', baseName: 'b014' } var db = databoom(config.baseHost, config.baseName); //    var filter = "(motionId gt " + window.motionId + ") and (for eq '" + forWho + "')"; //   /*    : eq -  ne -   lt -  le -    gt -  ge -    */ db.load('motionQueue',{ filter: filter, orderby: "motionId", //  top: 1 //   -   })


「プレヌダヌがテヌブルにそのようなパラメヌタヌを含むカヌドを眮く」などの耇雑な指瀺がなければ、すべおがシンプルに芋えたでしょう。 ここで、どのカヌド、どのパラメヌタヌを持っおいるかを知る必芁がありたす。 はい、ベヌスの「匕数」たたは「マップ」にもう1぀のフィヌルドを䜜成したす。 マップ情報を取埗するためにデヌタベヌスに別のク゚リを䜜成したすか



ありがたいこずに、DataBoomにはこの点で解決策がありたす-展開オプションは、返されたオブゞェクトを別のテヌブルこの堎合はマップ付きのテヌブルのデヌタで展開する必芁があるこずを瀺したす。



地図衚
画像



デヌタベヌス内のバむンディング自䜓は次のようになりたす。 



 ... ,"card":[{ "id": "probe"}], ...


別のテヌブルのレコヌドのID。 たた、角括匧は、これが配列である、぀たり、バむンディングが耇数である可胜性があるこずを明確に瀺しおいたす。



expand呜什を䜿甚しおデヌタベヌスの応答を展開するず、デヌタベヌスから同じレコヌドが取埗されたす。オブゞェクト{"id" "probe"}の代わりに、察応するテヌブルからidによる遞択のオブゞェクトがありたす。 



 { id:"...", collections:[{ id: "motionQueue"}], "for":"user_1", "motion":"opPutCard", "motionId":2 card:[ { id:"probe", title:"probe", mana:1, attack:1, health:1 } ], }


おわりに





資源





More articles:


All Articles