偏离轨道的前端自动化尝试

最新推荐文章于 2022-12-13 11:10:40 发布

mlg539

最新推荐文章于 2022-12-13 11:10:40 发布

阅读量120

点赞数

文章标签：前端自动化

本文链接：https://blog.csdn.net/mlg539/article/details/103444418

版权

没有使用动态表单，单纯使用cv的代码思维，却想提高效率的考虑
1.例如：封装一个转化的函数，进行获取配置好的代码片段

function getStr(a){

    var str1=`
<search-input class="vux-1px-r  select_top_content" @on-confirm="search${a.name}" text="${a.text}" @on-clear="del${a.name}"  ></search-input>`
var str2=`
<search-search class="vux-1px-r select_top_content"  @on-confirm="search${a.name}"  @on-clear="del${a.name}" condition="${a.condition}" text="${a.text}"></search-search>`
var str3=`
<search-selector  class="vux-1px-r select_top_content" text="${a.text}" @on-change="change${a.name}" :type-list="${a.name}List"></search-selector>`
if(a.type=='input'){
    return str1;
}else if(a.type=='search'){
    return str2
}else{
    return str3
}

    
}

大致的思想在上面的例子中都已经得到了体现。但是具体实现的过程中，确实存在着不同的曲折，这个也是很有意思的一件事情。
有意思的事情？？？？？？？？？？？
2.例如：把上述思想的解决方法，改用原生domAPI进行操作的时候，利用dom树
进行操作，相信没有几个人会蠢到我这个样子，下面是代码片段

<body>
        <cell
        title="保证金说明"
        is-link
        :border-intent="false"
        :arrow-direction="show ? 'up' : 'down'"
        @click.native="show=!show">
        <i slot="icon" class="fa fa-bell-o todo_info_i fa_i_lan1"></i>
      </cell>

      <cell-collapse   @click.native="changeShow(detailTable.data,i)" :show="data.cellShow"  icon='fa-bell-o'  ></cell-collapse>
    <div id='d1'></div>
</body>
<script>
    var d1=document.getElementById('d1')
    var str=document.getElementsByTagName('cell-collapse')[0]
    var cellC=document.getElementsByTagName('cell')[0];
    var children=cellC.children;

    //innerHtml 如果不为空   判断是否有 slot=“title”   slot="icon"   
    //arrtibute 如果不为空   

    console.log(document.getElementsByTagName('cell'))
    // 如果cellc 有这个属性  就执行这个动作  没有的话  就移除这个属性
    if(cellC.getAttribute(":arrow-direction")){
        str.setAttribute(":show",cellC.getAttribute(":arrow-direction").split('?')[0])
    }else{
        str.removeAttribute(":show")
    }

    //对于点击事件的处理
    if(cellC.getAttribute("@click.native")){
        var event=cellC.getAttribute("@click.native")
    }

    // 对于title的处理
    if(cellC.getAttribute("title")){
        str.setAttribute("title",cellC.getAttribute("title"))
    }
    if(cellC.getAttribute(":title")){
        str.setAttribute(":title",cellC.getAttribute(":title"))
    }
    if(children && children.length>0){
        for(var i=0;i<children.length;i++){
            if(children[i].getAttribute('slot')=='title'){
                if(children[i].innerText.indexOf('{{')!=-1){
                    str.setAttribute(":title",children[i].innerText.slice(2,-2))
                }else{
                    str.setAttribute("title",children[i].innerText) 
                }
            }
            if(children[i].getAttribute('slot')=='icon'){

            }
        }

    }





    
 d1.innerHTML=str

    console.log(str)
    




</script>

这个例子：就是将

        <cell
        title="保证金说明"
        is-link
        :border-intent="false"
        :arrow-direction="show ? 'up' : 'down'"
        @click.native="show=!show">
        <i slot="icon" class="fa fa-bell-o todo_info_i fa_i_lan1"></i>
      </cell>

转换为下面这种格式

      <cell-collapse   @click.native="changeShow(detailTable.data,i)" :show="data.cellShow"  icon='fa-bell-o'  ></cell-collapse>

3.svn代码管理，要在svn快速的查找的某一个文件，就是需要对本地复制的url进行格式转换，如下图：
input框中为复制的url
下面是代码片段

    function getUrl(){
        var url=document.getElementById('text1').value;
        var d1=document.getElementById('d1')
        d1.innerText=url.replace(/\\/g,'/')
    }