由一个计数器出发：关于vue使用独立js文件的问题

最近有个vue项目要用ztree。

然后，我想把一些逻辑提出来作为公共的方法，放到独立的js文件里。

ztreeTool.js

import $ from 'jquery'

export default class ZtreeTools {
    static beforeDrag(treeId, treeNodes) {
        console.log("beforeDrag")
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                return false;
            }
        }
        return true;
    }
    static beforeDrop(treeId, treeNodes, targetNode, moveType) {
        console.log("beforeDrop")
        return targetNode ? targetNode.drop !== false : true;
    }
    static addHoverDom(treeId, treeNode) {
        console.log(n)
        console.log(treeId, treeNode)
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='新建节点' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            zTree.addNodes(
                treeNode,
                {id:(100 + count), pId:treeNode.id, name:"新节点" + (count++)}
            );
            return false;
        });
    }
    static removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
}

main.js

...
import ZtreeTools from './data/ztreeTools'
Vue.prototype.$ZtreeTools = ZtreeTools;
...

那么问题来了：

ztree demo里有一个外部变量count，我们把ztree逻辑抽出来之后怎么处理这个变量？

我的办法是：

把count作为一个独立的计数器放到一个独立类里，在vue项目启动时实例化这个类。

---

number.js

export default class Number {
    constructor() {
        this.count = 1
    }
}

ztreeTool.js

import $ from 'jquery'
import Number from './number.js'
const n = new Number()

export default class ZtreeTools {
    static beforeDrag(treeId, treeNodes) {
        console.log("beforeDrag")
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                return false;
            }
        }
        return true;
    }
    static beforeDrop(treeId, treeNodes, targetNode, moveType) {
        console.log("beforeDrop")
        return targetNode ? targetNode.drop !== false : true;
    }
    static addHoverDom(treeId, treeNode) {
        console.log(n)
        console.log(treeId, treeNode)
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='新建节点' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            zTree.addNodes(
                treeNode,
                {id:(100 + n.count), pId:treeNode.id, name:"新节点" + (n.count++)}
            );
            return false;
        });
    }
    static removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
    static reloadNumber(){
        n.count = 1
    }
}

红色的部分就是改过的部分。这里其实就已经实例化了。

某个页面.vue

...
created(){
        ...
        this.$ZtreeTools.reloadNumber()
        ...
},
...    

每一个页面开始时把计数器重置一下。

以上。