Avalonjsは簡単な買い物車の機能を実現します（例コード）

11035 ワード

avalonjs ショッピング？カー

まず、avalon概念を簡単に紹介します。
avalonは国内の最も強大なMVMフレームで、一つもなくて、宝を洗ってKISSYチームを洗っても2つのMVMフレームをやりましたが、しかしすべて病気がなくて終わります。他のMVVMフレームはいくつもありません。外国人と私のような暇な建築士だけがこのことを研究する時間があります。MVMは前端の最終解決策であると前々から予言しています。私は前に盛大な無線で盛大な通行証をすると深く体得しました。一つの業務ロジックは十個の異なるインターフェースに対応しています。階層構造は不可欠です。そのため双方向結合は解薬として古くから流行していたMVCフレームを結合し、MVMという神器を生み出しています。
最近はショッピングカーを作っています。そして、私達はavalonでモジュールを実現しています。だから、自然にavalonで買い物車を実現します。
    ショッピングカートは普通、数量を減らし、商品を選択し、商品を削除し、金額を計算する機能を備えています。avalonは双方向の結合機能を持っていますので、domの操作を根絶しました。機能を完成するロジックだけでいいです。次のステップに分けて実現できます。
runjs：http://runjs.cn/detail/1dnkgxom
    1、ページのHtml構造
    ここでは良い効果は考えられませんので、一番簡単なhtmlで直接実現しました。主にコントローラ、リストサイクル、金額表示を含みます。簡単なコード構造は以下の通りです。


<body ms-controller="test">
 <ul ms-visible="arr.length">
  <li><input type="checkbox"
 ms-click="checkAll" ms-duplex-checked="checkAllbool"/>  </li>
  <li ms-repeat="arr"
 >
  <input type="checkbox"
 ms-attr-value="el.id" ms-duplex="selected" />
  {{el.text}}
  <input type="text"
 name="" ms-attr-value="el.num" ms-on-input="changeNum(el)">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 ms-click="plus(el)"> </a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 ms-click="minus(el)"> </a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 ms-click="del(el)">  </a>
  <p>  ：{{el.price
 | currency}}</p>
  <p>  ：{{el.num*el.price
 | currency}}</p>
  </li>
 </ul>
 <p>   ：{{total
 | currency}}</p>
 </body>

     ここには全選択、減量、いくつかの機能イベントがあります。金額はフィルタcurrencyを使いました。
    2、avalon.jsを導入し、モデルを定義する
    jsを導入する必要があります。avalon.jsを導入して定義できます。


var vm
 = avalon.define({
  $id:
"test"
});

   このように簡単なモデルを定義しました。idが入ってきたのはコントローラの値です。この例のコントローラはbodyに書いてあります。理解できないなら公式サイトを見に行ってもいいです。
    3、買い物車の中の商品を定義する
    実際のプロジェクトでは、これは間違いなくバックグラウンドで入手しました。ここではデモンストレーションのために直接定義されています。第一点のhtml構造から見れば、ここでカートの商品用はarrです。だから、次に定義されるのがarrです。このように定義できます。


arr
 : [
 {
 id:1,
 num:1,
 price:45.5,
 text:'  1'
 },
 {
 id:2,
 num:1,
 price:8.8,
 text:'  2'
 }<span
 style="font-size:
 9pt; line-height: 1.5;">]</span>

    ここでは二つのテストを定義します。選択された商品IDを保存するために値が必要です。ここではモデルにselected属性を追加します。タイプは行列です。
selected:[]
    4、全選択のモデルと方法を定義する
    ショッピングカートの中には普通全選択の機能があります。ただ表現の形式が違っています。このように定義されます。


checkAllbool
 : false,
checkAll
 : function()
 {
 if (this.checked)
 {
  var _arr
 = [];
  avalon.each(vm.arr,function(index,item){
   _arr[index]
 = item.id+'';
  });
  vm.selected
 = _arr;
 }
else {
  vm.selected=[];
 }
}

    チェックボックスAllbook属性によって、「全選」が選択されているかどうかを実現し、チェックボックスAllによって選択の全部または取り消しを実現します。実はモデルの中のselected属性を修正します。selectedが空の配列であれば、選択されていません。もしそれが必要なら、対応する値をselected配列に入れてください。これは、htmlでcheckboxがms-duplexを使用して結合されているため、結合されているのはselected属性です。
     4、加、減、削除を定義する方法
      加减は主に数量の変化ですが、削除はその商品を直接arr（前に定義された属性）から削除する必要があります。


plus:
function(el){
 el.num++;
 vm.cal();
 },
minus:
function(el){
 if(el.num>1){
 el.num--;
 vm.cal();
 }
},
del:
function(el){
 vm.arr.remove(el);
},
changeNum:
function(el){
 var _value
 = this.value,
 _reg
 = /^[1-9]\d?$/
 ;
 if(!_reg.test(_value)){
 this.value
 = 1;
 el.num
 = 1;
 }else{
 el.num
 = _value;
 }
 vm.cal();
}

    ここでもう一つは入力枠が変わった時に行う方法です。ここでは出入りの対象を使って操作します。第一歩のhtmlコードを見てもいいです。変更しても、プラスしても最後にvm.calを実行します。vm.calは合計金額を計算します。以下で説明します。
    加减の方法はすべて简単で、主にnum属性を修正すればいいです。changeNumは正則を追加して、入力が数字かどうかを判断します。
    5、計算総額を定義する
    全体の金額を計算する方法は簡単で、選択した商品の数に単価を掛けて加算することです。しかし、この中にはもう一つの方法があります。それは商品のidを通じて対応する商品を探し出すことで、その商品の金額を計算することができます。


total:0,
cal:
function(){
 var _arr
 = this.arr,
 _selected
 = this.selected,
 i
 = 0,
 _obj
 = '',
 _prcie
 = 0
 ;
 if(_selected.length){
 for(;i<_selected.length;i++){
  _obj
 = this.findById(_selected[i])
 ||{};
  if(_obj.price
 && _obj.num){
   _prcie
 = _prcie + _obj.price * _obj.num;
  }
 }
 }
 this.total
 = _prcie;
 },
findById:
function(id){
 if(!id)
return '';
 var i=0,
  _arr
 = this.arr,
  _obj
 = '',
  _id
 = parseInt(id,10)
 ;
  for(;i<_arr.length;i++){
  if(_arr[i].id
 === _id){
   _obj
 = _arr[i];
  }
 }
  return _obj;
}

    この中では主に循環を使います。商品の対象を見つけてから商品の金額を計算します。コードは少し長いです。
    6、傍受属性
    二つの属性を監聴したいです。つまりselectedとarrです。selectedを監督するのはいつでも商品が全部選択されているかどうかを知るためで、主にLengthを傍受します。傍受arrは商品が削除されたかどうかを判断し、arrのlengthが変更された場合、商品が削除されたと表示し、総額を再計算する必要があります。


vm.selected.$watch("length",
function(n)
 {
 vm.checkAllbool
 = n === vm.arr.size()
 vm.cal();
});
vm.arr.$watch("length",
function(n)
 {
 vm.cal();
});

上の手順を分析することによって、大体の実現プロセスが分かります。以下は完全なコードです。


<!DOCTYPE html> <html>
 <head>
 <title>   </title>
 <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8">
 <meta http-equiv="X-UA-Compatible"
 content="IE=edge" /> 
 <script src="../avalon.js"
 ></script>
 <script>
  var
 vm = avalon.define({
  $id:
 "test",
  arr
 : [
   {
   id:1,
   num:1,
   price:45.5,
   text:'  1'
   },
   {
   id:2,
   num:1,
   price:8.8,
   text:'  2'
   }
  ],
  selected
 : ["1"],
  checkAllbool
 : false,
  checkAll
 : function() {
   if
 (this.checked) {
   var
 _arr = [];
   avalon.each(vm.arr,function(index,item){
    _arr[index]
 = item.id+'';
   });
   vm.selected
 = _arr;
   }
 else {
   vm.selected=[];
   }
  },
  plus:
 function(el){
   el.num++;
   vm.cal();
  },
  minus:
 function(el){
   if(el.num>1){
   el.num--;
   vm.cal();
   }
  },
  del:
 function(el){
   vm.arr.remove(el);
  },
  changeNum:
 function(el){
   var
 _value = this.value,
   _reg
 = /^[1-9]\d?$/
   ;
   if(!_reg.test(_value)){
   this.value
 = 1;
   el.num
 = 1;
   }else{
   el.num
 = _value;
   }
   vm.cal();
  },
  total:0,
  cal:
 function(){
   var
 _arr = this.arr,
   _selected
 = this.selected,
   i
 = 0,
   _obj
 = '',
   _prcie
 = 0
   ;
   if(_selected.length){
   for(;i<_selected.length;i++){
    _obj
 = this.findById(_selected[i]) ||{};
    if(_obj.price
 && _obj.num){
    _prcie
 = _prcie + _obj.price * _obj.num;
    }
   }
   }
   this.total
 = _prcie;
   },
  findById:
 function(id){
   if(!id)
 return '';
   var
 i=0,
   _arr
 = this.arr,
   _obj
 = '',
   _id
 = parseInt(id,10)
   ;
   for(;i<_arr.length;i++){
   if(_arr[i].id
 === _id){
    _obj
 = _arr[i];
   }
   }
   return
 _obj;
  }
  });
  vm.selected.$watch("length",
 function(n) {
  vm.checkAllbool
 = n === vm.arr.size()
  vm.cal();
  });
  vm.arr.$watch("length",
 function(n) {
  vm.cal();
  });
  vm.cal();
 </script>
 </head>
 <body ms-controller="test">
 <ul ms-visible="arr.length">
  <li><input type="checkbox"
 ms-click="checkAll" ms-duplex-checked="checkAllbool"/>  </li>
  <li ms-repeat="arr"
 >
  <input type="checkbox"
 ms-attr-value="el.id" ms-duplex="selected" />
  {{el.text}}
  <input type="text"
 name="" ms-attr-value="el.num" ms-on-input="changeNum(el)">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 ms-click="plus(el)"> </a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 ms-click="minus(el)"> </a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 ms-click="del(el)">  </a>
  <p>  ：{{el.price
 | currency}}</p>
  <p>  ：{{el.num*el.price
 | currency}}</p>
  </li>
 </ul>
 <p>   ：{{total
 | currency}}</p>
 </body>
</html>

avalonの時間を使うのはまだ間もないです。一歩ずつ来て、mvmフレームワークをもっと深く理解して、後の日にもっと多くのシーンを応用したいです。
以上は小编が绍介したAvalonjsの简単なショッピングカーの机能（例コード）を実现します。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。

C++は、乱数を発生させる実現コードです。

C++キーワードtypenameの深い理解