文章大纲
- 文章背景
- 问题描述
- 解决方案
- 知识链接
- 心得体会
文章背景
近期在实习,在还未熟悉JS编程的情况,被指派了一个关于项目功能完善的任务,这篇文章主要记载了任务出现的问题以及相应的解决方案。
问题描述
任务:当前任务中有一列表,列表中有几个项,每一项中都有三个按钮,分别为:设置(已添加)、上移(待添加)、下移(待添加)。现今,要求在后两个按钮中实现项的上下移功能。
拆解任务:
1.在每一个列表项中添加上移与下移按钮;
2.实现上移与下移功能;
3.当某一项为最初项或最末项时,相应地隐藏上移或下移按钮。
解决方案
任务1——添加上移与下移按钮:
思维路线图:
- 关于dojo:Dojo是一个非常强大的面向对象的JavaScript工具箱,此处可以用来操作DOM树。若要在JS中使用dojo,先要引入dojo该模块,该模块定义了核心dojo DOM构造API。 该模块的返回变量的惯例是domConstruct.
关于核心方法:
- dojo.place()是一个有用的DOM节点放置实用功能。 它可以用于将现有节点放置在HTML文档中的某个位置以及创建新节点并立即将其放置在文档中。 它封装了正确 放置节点所需的所有必需样板代码,并在创建和放置节点时考虑特殊的跨浏览器;
- 2.函数原型:dojo.place ( node , refNode , pos ),其中第一个参数为欲放置的节点,第二个参数为参考节点,第三个参数为欲放置的位置,该参数为可选参数,分别有六个取值:“before”,“after”,“replace”,“only”,“first”或“last”;
- 注意事项:在构建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——实现上移与下移功能:(下移功能类似)
- 思维路线图:
- 关于核心方法:
- 该方法属于ul对象,因此先要根据该节点找到其父节点ul,而后调用该方法;
- .函数原型:ulObject.insertBefore(newnode,refnode);第一个参数为目标节点,第二个参数为参考节点(即目标节点想要放置哪个节点之前);
- 实现代码:
- 思维路线图:
//图层项上移
_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();
}
}
}
知识链接
- https://dojotoolkit.org/reference-guide/1.7/dojo/place.html——dojo.place()方法
- http://le0zh.github.io/2016/06/04/event-delegate-in-javascript/——事件
心得体会
- 在处理这个任务时,需要对项目的代码有个了解,因此要有代码阅读能力。代码阅读时,应先找准入口,根据入口追根溯源,在Sublime Text里,点住某一变量,按Ctrl+F即可进行追踪。
- 虽然自己并不了解JS,仅凭个人之前对C#的了解,结合对问题的定位,加之对基本JS编程语法的熟悉,其实是可以解决问题的。这给我很大的感触就是:遇到问题千万不可畏惧,而是应该静下心来,尝试先定位问题,而后利用Google,查找解决方案,具体实施时,利用控制台出错信息查找自己出错的原因。
- 多阅读官方文档。