web storm查看文件结构
菜单栏Navigate -> File Structure
https://www.jetbrains.com/help/webstorm/viewing-structure-of-a-source-file.html
You can examine the structure of the file currently opened in the editor using the Structure tool window (Alt+7) or the Structure popup (Ctrl+F12).
Alt+7是固定在左侧栏,ctrl+F12是弹窗显示
以下的示例,
<tr> <td>Avatar</td> <td><input type="hidden" name="ctl00$cphMain$ucProfile$Avatar$hffulList" id="ctl00_cphMain_ucProfile_Avatar_hffulList" value="[{"FileName":"3004057.png","Size":"1550","ContentType":"image/png","PhysicalName":"7778181a-1dad-4898-9c21-df416f812405.png","NewPhysicalName":null,"FileuploadId":"0","FilePath":null}]"> <script type="text/javascript">$(function () { function JsonToString(json) { var str = ''; for (var key in json) { if (json[key] == null) { str = str + ',"' + key + '":' + json[key]; } else { str = str + ',"' + key + '":' + '"' + json[key] + '"'; } } if (str.length > 0) { str = str.substring(1); str = '{' + str + '}'; } return str; }; function JsonArrayToString(jsonAry) { var str = ''; var strItem; for (var i = 0; i < jsonAry.length; i++) { strItem = JsonToString(jsonAry[i]); if (strItem.length > 0) { str = str + ',' + strItem; } } if (str.length > 0) { str = str.substring(1); str = '[' + str + ']'; } return str; }; $(document).on('click', '.LISA_FileuploadResultFileAction', function () { var $trDel = $(this).parent().parent(); var jsonAry = jQuery.parseJSON($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val()); var jsonItem = jsonAry[$trDel.index()]; jsonAry.splice($trDel.index(), 1); $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(JsonArrayToString(jsonAry)); $trDel.remove(); if ($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val().length = 0) $('#Avatar_Result').hide(); }); $('#Avatar').fileupload({ maxChunkSize: 1048576, paramName: '1f041c67-b5db-4599-a9ab-3f1614a651b5', url: 'http://172.31.212.20/LISA_60_Dev_BackOffice/Pages/jQueryHandler.ashx', dataType: 'json', add: function (e, data) { $('#Avatar_ProcessContent').css('width', '0%').html(''); $('#Avatar_ProcessWrap').show(); var acceptFileTypes = /(\.)(png|gif|jpeg|jpg|pdf|bmp|xls|xlsx|doc|docx|ppt|pptx|zip|rar)$/i; var ext = data.originalFiles[0]['name'].substr(data.originalFiles[0]['name'].lastIndexOf(".")).toLowerCase(); if (ext.length > 0 && acceptFileTypes.test(ext)) { data.submit(); } else { $('#Avatar_ProcessWrap').hide(); alert('Not an accepted file type'); } }, done: function (e, data) { var newItem = data.result; $('#Avatar_ProcessWrap').hide(); if ($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val().length == 0) { var newItemStr = JsonToString(newItem); newItemStr = '[' + newItemStr + ']'; $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(newItemStr); } else { var jsonAry = jQuery.parseJSON($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val()); jsonAry.push(newItem); $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(JsonArrayToString(jsonAry)); } var action = ''; action = '<td><a href="javascript:void(0);" class="LISA_FileuploadResultFileAction">Delete</a></td>'; $('#Avatar_Result').append('<tr><td><a href="/LISA_60_Dev_BackOffice/FileTemps/' + newItem.PhysicalName + '" target="_black">' + newItem.FileName + '</a></td><td>' + newItem.Size + ' Byte</td><td>' + newItem.ContentType + '</td>' + action + '</tr>'); $('#Avatar_Result').show(); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#Avatar_ProcessContent').css('width', progress + '%').html(progress + '%'); }, }); });</script> <input id="Avatar" type="file"> <div id="Avatar_ProcessWrap" class="LISA_FileuploadProcessWrap" style="display: none;"> <div id="Avatar_ProcessContent" class="LISA_FileuploadProcessContent" style="width: 100%;">100%</div> </div> <table id="Avatar_Result" class="gridview" style=""> <tr> <td><a href="/LISA_60_Dev_BackOffice/FileTemps/7778181a-1dad-4898-9c21-df416f812405.png" target="_black">3004057.png</a></td> <td>1550 Byte</td> <td>image/png</td> <td><a href="javascript:void(0);" class="LISA_FileuploadResultFileAction">Delete</a></td> </tr> </table> </td> </tr>
tr有两个td
第二个td包含5个元素,分别是
input type是hidden
script type是JavaScript
input type 是file,一个按钮,弹窗选择文件
div 显示进度条
table 显示上传过的文件
文件结构的icon含义
https://www.jetbrains.com/help/webstorm/symbols.html
Icons in tool windows and structure views #
Icon |
Description |
---|---|
|
Class |
|
Abstract class |
|
Interface |
|
Method/function |
![]() |
Function in Dart |
|
Variable |
|
Field |
|
Property |
|
Parameter |
|
Element |
|
Directory |
|
Tests |
![]() |
Resource root |
|
Excluded |
Visibility modifiers |
|
|
Private |
|
Protected |
|
Public |
Bookmarks |
|
|
Anonymous bookmark – a check sign bookmark. Bookmarks are used for quick navigation within a file or across the entire project. |
![]() |
Lettered mnemonic bookmark – a letter in the interval from A to Z. |
![]() |
Numbered mnemonic bookmark – a number in the interval from 0 to 9. |