第二层内功 - App的运行周期 ¶

运行流程图
了解这些的好处

作者：KK
发表日期：2017.7.18

本文章主要以Web应用为例子，介绍Yii2框架从入口文件初始化到运行控制器方法的简要流程，注意只是简要，让作为普通开发者的我们对这些流程有个基本的印象是应该的

运行流程图 ¶

下面请见我画的流程图（建议在新窗口打开图片单独查看）

上图的描述与代码是相对比较贴切的，说简单但内容也不少，说复杂其实相较真实的代码还差一大截（Module部分、beforeAction这些都没讲）

其中橙色部分是我们通常开始写业务逻辑代码的地方（一般都是控制器方法，少有使用Action的）

但是我希望读者们通过阅读几次这张图，以达到对Yii2的应用运行周期有个大致了解，最好也对一对代码

了解这些的好处 ¶

了解运行流程的好处就是

对这个框架有更宏观级别的掌握
更清楚自己目前写的代码在哪个运行环节，出错的时候更容易找到排查位置
需要扩展时更有思路，很快知道要在哪里下手
便于阅读框架源代码进行学习

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });