yii2提供了很多帮助类，比如Html、Url、Json等，可以很方便的实现一些功能，下面简单说下这个Html。用yii2写view时时经常会用到它，今天在改写一个页面时又用到了它。它比较好用的地方就在于，它不仅仅是生成一个简单的html标签，结合yii2自己的静态资源文件yii.js可以很方便的实现一个post请求。

yii2将这些功能都做好了封装，只要在合适的地方调用它的方法就可以了，可以说yii2是个可以开箱即用的框架，你可以用它很快的实现一个需要的功能：比如在页面中放置一个删除按钮，点击按钮发送post请求，弹出确认对话框。如果没有yii\helpers\Html类和yii.js，那么你需要写大量的js/jquery来实现这个功能。如果用yii2的话，下面的代码就可以实现：

1. <?= Html::a( 
2.  
3.   '删除', 
4.  
5.   [ 
6.  
7.     'delete', 
8.  
9.     'id' => $id, 
10.  
11.   ], 
12.  
13.   [ 
14.  
15.     'data' => [ 
16.  
17.       'confirm' => '你确定要删除吗？', 
18.  
19.       'method' => 'post', 
20.  
21.     ], 
22.  
23.   ] 
24.  
25. ) 
26.  
27. ?> 

它会在页面中生成下面一段html代码：

删除:

点击这个按钮会弹出对话框，确认删除后会发送post请求。那么这个post请求是如何发送的呢？到现在为止可是一段js代码都没写呢。

yii2框架隐藏了技术实现的细节，post请求的实现在yii.js中。在yii.js中，定义了window.yii对象，并初始化了window.yii对象的initModule方法：

1. window.yii = (function($) { 
2.  
3.   varpub = { 
4.  
5.     // 定义了处理事件的方法，比如下面这个： 
6.  
7.     confirm:function(message, ok, cancel) { 
8.  
9.       if(window.confirm(message)) { 
10.  
11.         !ok || ok(); 
12.  
13.       }else{ 
14.  
15.         !cancel || cancel(); 
16.  
17.       } 
18.  
19.     }, 
20.  
21.     handleAction:function($e, event) { 
22.  
23.       var$form = $e.attr('data-form') ? $('#'+ $e.attr('data-form')) : $e.closest('form'), 
24.  
25.       method = !$e.data('method') && $form ? $form.attr('method') : $e.data('method'), 
26.  
27.       // 其他省略 
28.  
29.     }, 
30.  
31.     // 其他省略 
32.  
33.   }; 
34.  
35.   // 初始化模块 
36.  
37.   initModule:function(module) { 
38.  
39.     if(module.isActive !== undefined && !module.isActive) { 
40.  
41.       return; 
42.  
43.     } 
44.  
45.     if($.isFunction(module.init)) { 
46.  
47.       module.init(); 
48.  
49.     } 
50.  
51.     $.each(module,function() { 
52.  
53.       if($.isPlainObject(this)) { 
54.  
55.         pub.initModule(this); 
56.  
57.       } 
58.  
59.     }); 
60.  
61.   }, 
62.  
63.   // 初始化方法 
64.  
65.   init:function() { 
66.  
67.     initCsrfHandler(); 
68.  
69.     initRedirectHandler(); 
70.  
71.     initAssetFilters(); 
72.  
73.     initDataMethods(); 
74.  
75.   }, 
76.  
77.   returnpub; 
78.  
79. })(window.jQuery); 
80.  
81.    
82.  
83. window.jQuery(function() { 
84.  
85.   window.yii.initModule(window.yii); 
86.  
87. }); 

其中上面的initDataMethods()会调用pub.handleAction方法：

1. functioninitDataMethods() { 
2.  
3.   varhandler =function(event) { 
4.  
5.     var$this= $(this), 
6.  
7.       method = $this.data('method'), 
8.  
9.       message = $this.data('confirm'), 
10.  
11.       form = $this.data('form'); 
12.  
13.     if(method === undefined && message === undefined && form === undefined) { 
14.  
15.       returntrue; 
16.  
17.     } 
18.  
19.     if(message !== undefined) { 
20.  
21.       $.proxy(pub.confirm,this)(message,function() { 
22.  
23.         pub.handleAction($this, event); 
24.  
25.       }); 
26.  
27.     }else{ 
28.  
29.       pub.handleAction($this, event); 
30.  
31.     } 
32.  
33.     event.stopImmediatePropagation(); 
34.  
35.     returnfalse; 
36.  
37.   }; 
38.  
39.   // handle data-confirm and data-method for clickable and changeable elements 
40.  
41.   $(document).on('click.yii', pub.clickableSelector, handler) 
42.  
43.     .on('change.yii', pub.changeableSelector, handler); 
44.  
45. } 

可以看到这个方法会获取上面生成的a标签的data属性值，然后交给handlerAction来处理。handlerAction通过动态生成一个form来处理各种请求，最后通过触发submit事件来提交。

1. $form = $(' 
2.  
3. ', {method: method, action: action}); 
4.  
5. vartarget = $e.attr('target'); 
6.  
7. if(target) { 
8.  
9.   $form.attr('target', target); 
10.  
11. } 
12.  
13. if(!/(get|post)/i.test(method)) { 
14.  
15.   $form.append($('', {name:'_method', value: method, type:'hidden'})); 
16.  
17.   method ='post' 
18.  
19.   $form.attr('method', method); 
20.  
21. } 
22.  
23. if(/post/i.test(method)) { 
24.  
25.   varcsrfParam = pub.getCsrfParam(); 
26.  
27.   if(csrfParam) { 
28.  
29.     $form.append($('', {name: csrfParam, value: pub.getCsrfToken(), type:'hidden'})); 
30.  
31.   } 
32.  
33. } 
34.  
35. $form.hide().appendTo('body'); 

其他省略:

PS：做项目用框架很方便，但是框架用的久了，就容易把基本的技术给忘掉了。还是要打好基础呀，这样不管用什么框架都不至于用得云里雾里的。

Tags: YII2框架 yii js

分享到：