动态配置dom的顺序

对于页面上的dom元素，如果想要通过一个数组来确定一组dom元素的顺序，如果vue element 都是很简单可以实现的

<ul>
 			<li  v-if="item in lidata" :id="item.id">{{item.name}}</li>
 	</ul>

js:

...


data：function(){
	return{
			lidata:[{"id":"1","name":"刘明"},
			{"id":"2","name":"张飞"},
			{"id":"3","name":"关羽"}]
	} 

}

...

但是如果是jquery 怎么弄呢？一个一个比较之后重新插入效率是有点低的

所以我做了个简单优化

farraysort: function (keyarray) {
          //数组排序 e1,e2对应div 的id
          /**
           * [e1:  
           *,e2,  
           * e3,
           * e4];
           */
          // keyarray = ["e1, "e2", "e3", "e4",];//默认值
          var oldKeyarray = JSON.parse(localStorage.getItem("sortKey"));
          var issame = true;//判断数组是否有变化
          if (oldKeyarray) {
              console.log(oldKeyarray.construct);
              oldKeyarray.forEach(function (item, index) {
                  if (item !== keyarray[index]) {
                      issame = false;
                      return;
                  }
              });
              if (issame) {//如果顺序一致就不用排序了。针对刷新页面
                  return;
              } else {
                  localStorage.setItem("sortKey", JSON.stringify(keyarray));
              }
          } else {//顺序存在本地，便于比较
              localStorage.setItem("sortKey", JSON.stringify(keyarray));
          }
  					
  					
  					//将对应dom元素获取到放到一个对象中
          var array =
          {
              "e1": document.getElementById("e1"),
              "e2": document.getElementById("e2"),
              "e3": document.getElementById("e3"),
              "e4": document.getElementById("e4")
          };
  					//创建Fragment
  					
          var elementfrag = document.createDocumentFragment();
          keyarray.forEach(function (item) {//创建dom片段
              elementfrag.appendChild(array[item]);
          });
  					//一次性插入
          document.getElementById("sortContainer").appendChild(elementfrag);

      }

			这个diff应该还有很多改进的空间，有时间再研究