您可以在10分钟内创建自己的任务管理器：Yandex的实践

最新推荐文章于 2024-08-28 07:36:57 发布

dfsgwe1231

最新推荐文章于 2024-08-28 07:36:57 发布

阅读量307

点赞数

文章标签： javascript ViewUI

那里有许多任务管理应用程序，但是制作自己的应用程序总是令人兴奋的。在本演练中，我将向您展示如何编写一个可在浏览器中运行的简单任务管理应用程序。在以后的情节中，我将向您展示如何升级此任务管理器以包括更多功能。

这是针对初学者的非常基本的演练。如果您有HTML和JavaScript的经验，不要期望太多。但是，嘿，一次学习是最好的方法。

工具类

为此，我需要一个基本的文本编辑器和一个浏览器。现在几乎每台机器上都有浏览器；我将使用Chrome。至于我们的文本编辑器，我喜欢Sublime Text来完成这些简单的任务。

主要思想

在文本编辑器中，我将创建一个包含脚本的网页。该脚本将负责管理我的任务。

任务管理器本身将是一个简单的文本列表。这些工作将是我的任务。在此列表的下方（或上方，取决于您的决定），我将放置一个用于新任务的输入框。

有关我的任务的数据将存储在Localstorage中，这是驻留在浏览器中的内存区域，可帮助存储与特定网页相关的数据。如果重新加载页面或重新启动计算机，我的本地存储将保留我的任务，因此，下次我打开页面时，我的任务将在那里。

基本页面布局

我将从页面的最低要求开始。下面的代码告诉浏览器这是一个HTML文档。该页面需要HEAD和BODY标签才能运行，但是此页面目前不执行任何操作-它只是存在。

<!DOCTYPE html> 

< html > 

    < head > 

    </ head > 

    < body > 

    </ body > 

</ html >

我将其另存为文件，例如task-manager.html。我们需要在文件名中包含“ HTML”，以便浏览器可以识别该页面并正确打开它。该页面可以放在我的计算机上的任何位置。

填充头部

在HTML文档中，标头包含有关该页面的服务信息：其语言是什么，该页面如何与其他浏览器一起使用，等等。坦率地说，我们不需要太深究：我只是从经过验证的代码中复制代码资源。

因此，在<head>和</head>标记之间需要进行以下操作：

< title > My Task Manager </ title > 

< meta charset = "utf-8" > 

< meta http-equiv = "X-UA-Compatible" content = "IE=edge" > 

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

填充身体

现在，让我们在页面的“正文”部分添加清晰的内容。正文部分保存了文档的实际内容。所以我放在这里的东西都会被渲染。

目前，我想创建一个标题和一个输入框。在代码内部，我将放置符号之间写东西时，这些是我对代码的注释；它们不是由浏览器呈现的。阅读这些注释，以了解每一行代码代表什么：

< div class = "container" style = "width: 400px; margin: auto;" > 

<!-- Invisible boundaries for our app. The width is 440 pixels. Our app should sit in the center of the screen. --> 

   < h2 class = "todo__caption" > My Tasks </ h2 > 

   <!-- That was the header. --> 

   <!-- Next will come the input field where we can type our tasks. --> 

   < div id = "tdlApp" > 

     < input type = "text" class = "form-control" placeholder = "Add a task here" > 

     < !—Now let ’ s create a list of tasks , a list that ’ s currently empty. -- > 

    < div class = "tdlDiv" > 

       < ul class = "tdList list-unstyled" > 

         <!-- Our tasks will appear here later. --> d 

       </ ul > 

     </ div > 

   </ div > 

</ div >

如果您现在保存该页面，然后在浏览器中打开它，则会看到标题和输入框。暂时还没有任何工作，但是我们已经有了一个良好的开端。

使它变得美丽

我更喜欢先使应用程序看起来不错，然后再创建使之运行的代码。这是因为一旦编写了该代码，该应用程序便开始工作，而我再也没有耐心使其变得美观。

因此，我将花一些时间使我们的新应用看起来更好，稍后再创建工作代码。

该应用程序将在我的浏览器中作为网页运行。为了使页面看起来更好，开发人员使用了一种称为CSS的语言，它是一种标记语言，可以告诉浏览器有关页面外观和设计的所有信息。因此，名称为“层叠样式表”。一切都与风格有关。

我们可以将不同的样式应用于页面上的内容。我们可以使样式描述某个HTML标记-例如，我们可以为所有Inputs样式。由于我仅创建了一个输入，因此该样式只会影响页面上的一个对象。但是，如果我有很多输入，这种风格会影响到所有人。

CSS还支持称为“类”的东西。类是一种样式标签。例如，我们可以创建一个名为“ .importantTask ”的类，并将其应用于列表中的特定任务。

我们可以指定.importantTask必须为红色。这样，所有标记为' .importantTask '的任务都将显示为红色。

然后，我们可以改变主意，使'.importantTask'不是红色的，而是闪烁并加粗。然后，所有带有.importantTask类的任务将变为粗体并开始闪烁。

将所有样式都写在页面的“标题”部分是个好主意，因此在向屏幕显示任何内容之前，我们先向浏览器提供了所有设计说明。但是，从技术上讲，可以在文档中的任何位置放置样式-当今的浏览器是如此之快，他们可以很好地处理它。但是我会保留旧的风格，并将样式放在<head> ... </head> 。遵守此代码和注释。（注意：在CSS中，我们在/*和*/之间写注释。）

< style type =" text / css "> 

   /* These next instructions will apply to BODY—that is, to the whole page. These instructions should be self-explanatory: how the text is aligned, what the page margins are, what the font is, etc. In CSS, most things turn out to be exactly what they say on the box.* / 

   body{ 

     text-align: center; 

     margin: 10; 

     font-family: Verdana, Arial, sans-serif; 

     font-size: 16px; 

   } 

    /* This next set of instructions relates to the INPUT tag, which is where we input text when using the app. */ 

   input { 

     display : inline-block; 

     margin : 20px auto; 

     border : 2px solid #eee ; 

     padding : 10px 20px ; 

     font-family : Verdana, Arial, sans-serif; 

     font-size : 16px ; 

   } 

   /* The next set of styles will apply to a class. We’ll call this class ‘.task’ and use it for all our tasks. */ 

   .task { 

     text-align : left; 

     padding : 10px ; 

     cursor : default; 

     border-radius : 7px ; 

   } 

   /* What happens if we hover the mouse over a task? */ 

   .task :hover { 

     background-color : lightblue; 

   } 

 </ style >

准备脚本

我现在需要一些应用程序代码，这些代码将负责接受新任务，存储它们，从内存中检索它们，并在必要时将其删除。我将使用JavaScript（任何现代浏览器都可以支持的一种简单脚本语言）来进行此操作。

要在JavaScript（JS）中运行脚本，我需要在页面中添加标签<script> ... </script> 。在执行JS脚本时，浏览器应该已经在页面上加载了所有内容。因此，将脚本放置在“正文”部分的末尾而不是开头是个好主意。如果我将JS脚本放在开头，并告诉该脚本操纵页面中尚未加载的部分，则我的脚本将无法工作。

我还将使用一个名为jQuery的预制JavaScript库。我将使用JQuery的功能来处理页面上的内容。 jQuery对于此任务不是必需的：我可以使用JS进行操作。但是jQuery代码使事情变得容易一些，并且我确信将来在升级该项目时会更多地使用它。

为了包含jQuery，我将在Head或Body使用以下代码：

<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" > </ script >

在编写脚本之前，我需要确保已加载jQuery，以便可以使用jQuery中的功能。如果我在jQuery加载之前编写脚本，那么我将引用尚未加载的jQuery部分，这将引发错误。

关于本地存储的几句话

每个浏览器都有Localstorage 。正如我们前面提到的，这是一块内存，它使您的浏览器可以存储与特定页面有关的数据。使用JavaScript，我可以读写Localstorage。因此，我可以使用此区域存储我的任务。

Localstorage对于我们的项目效果很好，因为Localstorage不受我们重新加载页面，重新启动浏览器，重置Internet路由器等的影响。即使页面冻结，我们关闭浏览器，并且互联网连接断开，任务仍将正确存储。

缺点是Localstorage无法在多个设备，页面或浏览器之间同步。我的页面无法从另一个页面的本地存储中读取；它仅限于自己的本地存储。因此，如果我在其他计算机上甚至在自己的手机上打开任务管理器，我将看不到任务。

如果我想跨许多设备同步任务，则需要大量基础架构：服务器，登录通过例程，密码恢复系统等等。因此，我暂时将其简化。

显示所有可用任务

页面加载后，我希望我的脚本查看Localstorage并查看是否已存储任何任务。这是带有我的评论的代码。（在JavaScript中，注释在//之后）。

function showTasks ( ) { 

     // Find out if there is anything lying around in Localstorage and waiting for us: 

     var Storage_size = localStorage.length; 

     // If there is something... 

     if (Storage_size > 0 ){ 

       // then add it into the task list 

       for ( var i = 0 ; i < Storage_size; i++){ 

         var key = localStorage.key(i); 

         if (key.indexOf(Mask) == 0 ){ 

           // and make it part of the task list. We’ll use a jQuery command for that:  

           $( '<li></li>' ).addClass( 'task' ) 

             .attr( 'data-itemid' , key) 

             .text(localStorage.getItem(key)) 

             .appendTo(List); 

         } 

       } 

     } 

   } 

// At this point, we’ve defined the function, but we haven’t run it yet. Let’s run it now: 

showTasks();

如果我们现在保存代码并在浏览器中重新加载页面，则外观不会发生任何变化，但是脚本已经可以使用：它将进入Localstorage并检查新任务。但是由于Localstorage为空，因此没有任何显示。好，继续前进。

添加新任务

每当用户在输入字段中输入内容并按Enter时，我们的程序就会添加新任务。我们可以使用JS来实现：

/ We’ll use a jQuery command that gets read like this : Start by looking at an input called ‘tdlApp’. When a key is pressed inside of that input, do the following things. 

$( '#tdlApp input' ).on( 'keydown' , function ( e ) { 

// If the Enter (code 13) key wasn’t pressed, never mind; just await the next keystroke. 

     if (e.keyCode != 13 ) return ; 

// This next line of code will only run if Enter was pressed. 

// Next line: put whatever was in the input field into temporary memory, under the name ‘str’. Str now holds our task. 

     var str = e.target.value; 

// Then we’ll make the input field blank. The task will stay stored inside the memory, although user can’t see that task in the task list yet. 

     e.target.value = "" ; 

     // If the user has indeed written something in the input field, we’ll first count up the current tasks before we add the new one to the task list. That way, we can put our new task on the list in the proper order.  

     if (str.length > 0 ){ 

       var number_Id = 0 ; 

       List.children().each( function ( index, el ) { 

         var element_Id = $(el).attr( 'data-itemid' ).slice( 4 ); 

         if (element_Id > number_Id) 

           number_Id = element_Id; 

       }) 

       number_Id++; 

        // Now we’ll send the task into Localstorage... 

       localStorage.setItem(Mask+number_Id,str); 

       // and inject the task into the task list: 

       $( '<li></li>' ).addClass( 'task' ) 

         .attr( 'data-itemid' , Mask+number_Id) 

         .text(str).appendTo(List); 

     } 

   });

通过单击删除任务

现在，我将添加一小段代码，如果您单击该任务，则该任务将从内存和列表中删除：

// The next line of code adds an event: let something happen when someone clicks on an object with a .task class.  

$( document ).on( 'click' , '.task' , function ( e ) { 

     // Which task was clicked? 

     var jet = $(e.target); 

     // Remove that item from Localstorage… 

     localStorage.removeItem(jet.attr( 'data-itemid' )); 

     // and from the list, too. 

     jet.remove(); 

   })

最终产品

保存代码并在浏览器中重新加载页面后，全新的任务管理器将如下所示：

请注意，此代码有一些限制：

您最多可以添加九个任务。如果要添加更多内容，则需要一个例程来校正两位数和三位数的数字。这会使代码复杂一些，所以我现在省略了
尚未重新排序。但是，有些库允许对列表中的单元进行重新排序，因此实现起来并不是一件很困难的事情。
没有跨设备同步。如前所述，跨不同机器同步您的任务将需要更复杂的编码。因此，让我们暂时暂缓。

现在，事不宜迟，这里是最终代码：

<!DOCTYPE html> 

< html > 

< head > 

  < title > My Task Manager </ title > 

  < meta charset = "utf-8" > 

  < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > 

  < meta name = "viewport" content = "width=device-width, initial-scale=1" > 

  < style type = "text/css" >  

    body { 

      text-align : center; 

      margin : 10 ; 

      font-family : Verdana, Arial, sans-serif; 

      font-size : 16px ; 

    } 

    input { 

      display : inline-block; 

      margin : 20px auto; 

      border : 2px solid #eee ; 

      padding : 10px 20px ; 

      font-family : Verdana, Arial, sans-serif; 

      font-size : 16px ; 

    } 

    .task { 

      text-align : left; 

      padding : 10px ; 

      cursor : default; 

      border-radius : 7px ; 

    } 

    .task :hover { 

      background-color : lightblue; 

    } 

   </ style > 

</ head > 

< body > 

  < div class = "container"  style = "width: 400px; margin: auto;" > 

    < h2 class = "todo__caption" > My Task Manager </ h2 > 

    < div id = "tdlApp" > 

      < input type = "text" class = "form-control" placeholder = "Add task" > 

      < div class = "tdlDiv" > 

        < ul class = "List list-unstyled" > 

        </ ul > 

      </ div > 

    </ div > 

  </ div > 

  < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" > </ script > 

  < script >  

    var List = $( '#tdlpp ul' ); 

    var Mask = 'tdl_' ; 

    function showTasks ( ) { 

      var Storage_size = localStorage.length; 

      if (Storage_size > 0 ){ 

        for ( var i = 0 ; i < Storage_size; i++){ 

          var key = localStorage.key(i); 

          if (key.indexOf(Mask) == 0 ){ 

            $( '<li></li>' ).addClass( 'task' ) 

              .attr( 'data-itemid' , key) 

              .text(localStorage.getItem(key)) 

              .appendTo(List); 

          } 

        } 

      } 

    } 

    showTasks(); 

    $( '#tdlApp input' ).on( 'keydown' , function ( e ) { 

      if (e.keyCode != 13 ) return ; 

      var str = e.target.value; 

      e.target.value = "" ; 

      if (str.length > 0 ){ 

        var number_Id = 0 ; 

        List.children().each( function ( index, el ) { 

          var element_Id = $(el).attr( 'data-itemid' ).slice( 4 ); 

          if (element_Id > number_Id) 

            number_Id = element_Id; 

        }) 

        number_Id++; 

        localStorage.setItem(Mask+number_Id,str); 

        $( '<li></li>' ).addClass( 'task' ) 

          .attr( 'data-itemid' , Mask+number_Id) 

          .text(str).appendTo(List); 

      } 

    }); 

    $( document ).on( 'click' , '.task' , function ( e ) { 

      var jet = $(e.target); 

      localStorage.removeItem(jet.attr( 'data-itemid' )); 

      jet.remove(); 

    }) 

   </ script > 

</ body > 

</ html >