[代码问题解决录]li列表项动态序列

文章大纲

• 文章背景
• 问题描述
• 解决方案
• 知识链接
• 心得体会

文章背景

近期在实习，在还未熟悉JS编程的情况，被指派了一个关于项目功能完善的任务，这篇文章主要记载了任务出现的问题以及相应的解决方案。

问题描述

任务：当前任务中有一列表，列表中有几个项，每一项中都有三个按钮，分别为：设置（已添加）、上移（待添加）、下移（待添加）。现今，要求在后两个按钮中实现项的上下移功能。
拆解任务：
1.在每一个列表项中添加上移与下移按钮；
2.实现上移与下移功能；
3.当某一项为最初项或最末项时，相应地隐藏上移或下移按钮。

解决方案

• 任务1——添加上移与下移按钮：

  • 思维路线图：

    

  • 关于dojo：Dojo是一个非常强大的面向对象的JavaScript工具箱，此处可以用来操作DOM树。若要在JS中使用dojo，先要引入dojo该模块，该模块定义了核心dojo DOM构造API。 该模块的返回变量的惯例是domConstruct.

  • 关于核心方法：

    1. dojo.place()是一个有用的DOM节点放置实用功能。 它可以用于将现有节点放置在HTML文档中的某个位置以及创建新节点并立即将其放置在文档中。 它封装了正确 放置节点所需的所有必需样板代码，并在创建和放置节点时考虑特殊的跨浏览器；
    2. 2.函数原型：dojo.place （ node ， refNode ， pos ），其中第一个参数为欲放置的节点，第二个参数为参考节点，第三个参数为欲放置的位置，该参数为可选参数，分别有六个取值：“before”，“after”，“replace”，“only”，“first”或“last”；
    3. 注意事项：在构建DOM树时，需要用到“”号（双引号），如果外部使用了“”号，则内部所有的引用都只能使用”号(单引号)，且当dom树内部出现变量时，必须得用+将 变量进行连接。

  • 实现代码：

var itemHTML = "<li><div class='checkbox' style='padding:0;margin:0;'>" +"<label><input type='checkbox'><span style='margin-left:4px;'>" + labelLimit + "</span></label><div class='div-layer-operations'>" +"<img class='_moveleft' src='./widgets/LayerManager/css/images/set.png' title='设置透明度' /><img class='_MapMove' src='./widgets/LayerManager/css/images/hide.png' title='图层上移' /><img class='_MapMove' src='./widgets/LayerManager/css/images/show.png' title='图层下移' />" +"</div><div class='jimu-widget-divSetTransparency'><span class='jimu-widget-divSetTransparency-value'>100%</span>" +"<div></div></div></div></li>";var itemDiv = domConstruct.place(itemHTML, this.LayersNode, 'last');

• 任务2——实现上移与下移功能：（下移功能类似）
  
  • 思维路线图：
    
  • 关于核心方法：
    
    1. 该方法属于ul对象，因此先要根据该节点找到其父节点ul，而后调用该方法；
    2. .函数原型：ulObject.insertBefore(newnode,refnode)；第一个参数为目标节点，第二个参数为参考节点（即目标节点想要放置哪个节点之前）；
    3. 实现代码：

//图层项上移_upLayerItems:function(upLayerli){  var liPrev=upLayerli.previousElementSibling;  if (liPrev) {                 this.LayersNode.insertBefore(upLayerli,liPrev);                 this._alternativeShow();                }            },//图层项下移            _downLayerItems:function(downLayerli){ var liNext1=downLayerli.nextElementSibling; if(liNext1){             //如果当前项存在后一项       liNext1.parentNode.insertBefore(downLayerli,liNext1.nextElementSibling);                    this._alternativeShow();            }              }

• 任务3——选择性隐藏显示图标：（代码）

_alternativeShow:function() {                //获得当前HTML中的列表项                var arrayLis=$(this.LayersNode).find("li");                //遍历每一个列表项获得其索引值                for(var i=0;i<arrayLis.length;i++){                    $(arrayLis[i]).find("img").eq(1).show();                    $(arrayLis[i]).find("img").eq(2).show();                    if(i===0){                        //如果为第一项则隐藏图层上移功能                        $(arrayLis[i]).find("img").eq(1).hide();                    }                    if(i===arrayLis.length-1){                        //如果为最末项则隐藏图层下移功能                        $(arrayLis[i]).find("img").eq(2).hide();                    }                }            }

知识链接

1. https://dojotoolkit.org/reference-guide/1.7/dojo/place.html——dojo.place()方法
2. http://le0zh.github.io/2016/06/04/event-delegate-in-javascript/——事件

心得体会

1. 在处理这个任务时，需要对项目的代码有个了解，因此要有代码阅读能力。代码阅读时，应先找准入口，根据入口追根溯源，在Sublime Text里，点住某一变量，按Ctrl+F即可进行追踪。
2. 虽然自己并不了解JS，仅凭个人之前对C#的了解，结合对问题的定位，加之对基本JS编程语法的熟悉，其实是可以解决问题的。这给我很大的感触就是：遇到问题千万不可畏惧，而是应该静下心来，尝试先定位问题，而后利用Google，查找解决方案，具体实施时，利用控制台出错信息查找自己出错的原因。
3. 多阅读官方文档。