ホームページ > 記事 > ウェブフロントエンド > Avalonjsはシンプルなショッピングカート機能を実装します
Avalonjsはシンプルなショッピングカート機能を実装します
- 不言オリジナル
- 2018-05-05 16:08:041434ブラウズ
この記事では、Avalonjs を使用した簡単なショッピング カート機能の実現について紹介します。これを必要とする友人に参考にしてください。
中国で最も強力な MVVM フレームワークです。エディターがそれに取り組んでいます。ショッピング カート プロジェクトでは、いくつかのモジュールの実装に avalon を使用したため、ショッピング カートの実装にも当然 avalon を使用しました。次に、この記事を通して、簡単なショッピングカート機能を実装するための Avalonjs のサンプルコードを共有しますので、必要な方は参考にしてください
まず、avalon の概念について簡単に説明します。
avalon は中国で最も強力な MVVM フレームワークです。まず、Taobao KISSY チームも 2 つの MVVM フレームワークを開発しましたが、それらはすべて無駄になりました。他に MVVM フレームワークはいくつかあります。こんなことを勉強する時間があるのは、外国人か私のような暇な建築家だけだ。私はずっと前に、MVVM が究極のフロントエンド ソリューションであると予測しました。私は Shanda Wireless で働いていたときに、Shanda Pass について深く理解しました。1 つのビジネス ロジックが 10 を超える異なるインターフェイスに対応しており、階層化されたアーキテクチャが不可欠です。したがって、双方向バインディングは、長い間普及してきた MVC フレームワークと組み合わせて、MVVM の成果物を派生させる解毒剤として機能します。
最近ショッピング カートに取り組んでおり、いくつかのモジュールの実装に avalon を使用しているため、ショッピング カートの実装には当然 avalon を使用しています。現時点では、avalon は非常に強力で、コードの量が大幅に節約されることがわかりました。 。
ショッピングカートの一般的な機能は、数量の追加と減算、商品の選択、商品の削除、金額の計算です。 avalon には双方向バインディング機能があるため、dom 操作が不要になり、関数のロジックを完了するだけで済みます。以下のステップに分けて実装します。
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>ここには、すべて選択、追加、減算、削除などのいくつかの機能イベントがあります。金額にはフィルター通貨が使用されます。
2. avalon.jsの導入とモデルの定義
jsの導入が必要で、avalon.jsを導入した後に定義することができます
var vm
= avalon.define({
$id:
"test"
});このようにして、簡単なモデルが定義され、$idがこの記事の例のコントローラーの値は本文に書いてありますが、分からない場合は公式サイトを確認してください。
3. ショッピング カート内の商品を定義します
実際のプロジェクトでは、これはデモンストレーション用に直接定義されています。ショッピングカートはこちら 製品は 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>ここではテスト用に 2 つを定義し、選択した製品 ID を保存するための値が必要です。 selected 属性をモデルに付与、型は Array
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=[];
}
}checkAllbool 属性は、「すべて選択」が選択されているかどうかを実装および決定するために使用されます。実際には、モデル内の選択された属性を変更するために使用されます。 selected が空の配列の場合は、何も選択されていません。HTML のチェックボックスは ms-duplex を使用してバインドされているため、選択する必要がある場合は、対応する値を選択するだけです。選択された属性。
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();
}も 1 つありますは、入力ボックスが変更されたときに実行されるメソッドです。ここでは、オブジェクトの入力と終了によって操作が実行されます。最初のステップの HTML コードを見ると、変更、追加、削除であることがわかります。 .cal、vm. Cal は、後述する合計金額の計算に使用されます。
加算と減算の方法は非常に簡単で、num 属性を変更するだけで、入力が数値かどうかを判断するための通常の判定が追加されます。
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();
});通过上面的步骤分析，可以了解了大概的实现流程，下面是完整的代码。
购物车 <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> <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>
用avalon时间还不久，一步步来，希望能更深入了解mvvm框架，在后面的日子里应用更多的场景。
以上がAvalonjsはシンプルなショッピングカート機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。