이 글은 주로 Avalonjs로 구현한 간단한 장바구니 기능을 소개합니다. 이제는 도움이 필요한 친구들이 참고할 수 있습니다.
avalon은 최근 중국에서 가장 강력한 MVVM 프레임워크입니다. 에디터가 작업 중입니다. 장바구니 프로젝트의 경우 일부 모듈을 구현하기 위해 avalon을 사용했기 때문에 자연스럽게 avalon을 사용하여 장바구니를 구현했습니다. 다음으로 이번 글을 통해 간단한 장바구니 기능을 구현하기 위한 Avalonjs의 예제 코드를 공유하겠습니다. 필요하신 분들은 참고하시면 됩니다
먼저 avalon의 개념을 간단히 소개하겠습니다
Avalon은 중국에서 가장 강력한 MVVM 프레임워크입니다. Taobao KISSY 팀도 두 개의 MVVM 프레임워크를 개발했지만 모두 실패했습니다. 다른 MVVM 프레임워크는 거의 없습니다. 나 같은 외국인이나 게으른 건축가들만이 이런 것들을 공부할 시간이 있다. 나는 오래 전에 MVVM이 최고의 프런트 엔드 솔루션이라고 예측했습니다. 저는 Shanda Wireless에서 일할 때 Shanda Pass에 대해 깊은 이해를 갖고 있습니다. 하나의 비즈니스 로직은 10개 이상의 서로 다른 인터페이스에 대응하며 계층화된 아키텍처는 필수적입니다. 따라서 MVVM의 아티팩트를 파생시키기 위해 오랫동안 인기를 끌었던 MVC 프레임워크와 결합된 양방향 바인딩을 해독제로 사용합니다.
최근 장바구니 작업을 진행하고 있는데 일부 모듈을 구현하기 위해 avalon을 사용하고 있기 때문에 자연스럽게 avalon을 사용하여 장바구니를 구현하고 있습니다. 현재 avalon은 매우 강력하여 코드 양을 크게 절약할 수 있습니다. .
장바구니의 일반적인 기능은 수량 추가 및 삭제, 제품 선택, 제품 삭제 및 금액 계산입니다. Avalon에는 양방향 바인딩 기능이 있으므로 돔 작업이 필요 없으며 기능의 논리만 완료하면 됩니다. 단계별로 구현하면 다음과 같이 나눌 수 있습니다.
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. 장바구니에 담긴 상품을 정의하세요
실제 프로젝트에서는 배경을 통해 얻어야 합니다. 여기서는 첫 번째 항목의 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 속성을 모델에 적용하면 유형은 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=[];
}
}By checkAllbool 속성은 "모두 선택"이 선택되었는지 구현하고 결정하는 데 사용됩니다. 실제로는 모델에서 선택한 속성을 수정하는 데 사용됩니다. 선택된 배열이 비어 있으면 아무 것도 선택되지 않습니다. 해당 항목을 선택해야 하는 경우 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();
}한 가지도 있습니다. 는 입력 상자가 변경될 때 실행되는 메소드입니다. 여기서는 개체를 입력하고 종료하여 작업이 수행됩니다. 첫 번째 단계의 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();
});通过上面的步骤分析，可以了解了大概的实现流程，下面是完整的代码。
购物车 <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
