Web前端最全mxgraph(1)，2024年最新腾讯前端开发面试记录

于 2024-05-16 19:34:35 发布
阅读量455 收藏 9
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_84447112/article/details/138972854

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

可以通过改变全局变量，控制各个组件的高宽。

	EditorUi.prototype.menubarHeight = 0;
	
	EditorUi.prototype.formatWidth = 300;
	
	EditorUi.prototype.toolbarHeight = 0;
三、自定义左侧侧边栏

1. 添加tab栏

Sidebar.prototype.addTabsPalette = function (expand) {
    var elt = document.createElement("ul");
    elt.className = "mtTabs";
    this.container.appendChild(elt);
    var li1 = document.createElement("li");
    var a1 = document.createElement("a");
    li1.className = "active";
    li1.addEventListener("click", function (e) {
        var tabContents = document.getElementsByClassName("tabContent")[0].childNodes;
        var className = this.className;
        if (className.indexOf("active") < 0) {
            var children = this.parentNode.childNodes;
            for (var i = 0; i < children.length; i++) {
                children[i].className = "";
            }
            this.className = "active";
            tabContents[0].className = "tab-pane fade active";
            tabContents[1].className = "tab-pane fade";
        }
    });
    a1.innerText = "GeoIcons";
    li1.appendChild(a1);
    var li2 = document.createElement("li");
    var a2 = document.createElement("a");
    a2.innerText = "General";
    li2.appendChild(a2);
    li2.addEventListener("click", function (e) {
        var tabContents = document.getElementsByClassName("tabContent")[0].childNodes;
        var className = this.className;
        if (className.indexOf("active") < 0) {
            var children = this.parentNode.childNodes;
            for (var i = 0; i < children.length; i++) {
                children[i].className = "";
            }
            this.className = "active";
            tabContents[1].className = "tab-pane fade active";
            tabContents[0].className = "tab-pane fade";
        }
    });

    elt.appendChild(li1);
    elt.appendChild(li2);

    this.palettes['tabs'] = elt;
};


Sidebar.prototype.addTabContent = function (expand) {
    var elt = document.createElement("div");
    elt.className = "tabContent";
    this.container.appendChild(elt);

    var panel1 = document.createElement("div");
    panel1.className = "tab-pane fade active";
    elt.appendChild(panel1);

    var panel2 = document.createElement("div");
    panel2.className = "tab-pane fade";
    elt.appendChild(panel2);

    this.palettes['tabContent'] = elt;
};

2. 添加自定义内容

Sidebar.prototype.addGeoIconPalette = function (expand) {
    var that = this;
    $.ajax({
        url: "/conceptualModel/getAllGeoIcons",
        type: "get",
        success: function (result) {
            var iconList = result;
            var tabContents = that.palettes['tabContent'].childNodes;
            var elt = document.createElement('div');
            tabContents[0].appendChild(elt);

            var div = document.createElement('div');
            div.className = 'geSidebar';
            div.id = 'geoIconContainer';
            div.style.boxSizing = 'border-box';
            div.style.overflow = 'hidden';
            div.style.width = '100%';
            div.style.padding = '8px';
            div.style.paddingTop = '14px';
            div.style.paddingBottom = '0px';
            elt.appendChild(div);
            for (var i = 0; i < iconList.length; i++) {
                var name = iconList[i].name;
                var iconId = iconList[i].geoId;
                var a = that.createGeoIconTemplate('image;html=1;labelBackgroundColor=#ffffff;image=' + iconList[i].pathUrl,
                    that.defaultImageWidth, that.defaultImageHeight, "", name, name != null, null, null, iconId);
                div.appendChild(a);
            }
        }
    });
};


//自定义创建方法，跳过 addEntry() 这一步，提高加载效率（×），搜索效率
Sidebar.prototype.createGeoIconTemplate = function (style, width, height, value, title, showLabel, showTitle, allowCellsInserted, iconId) {
    var cells = [new mxCell((value != null) ? value : '', new mxGeometry(0, 0, width, height), style)];
    cells[0].vertex = true;
    cells[0].geoId = iconId;

    return this.createVertexTemplateFromCells(cells, width, height, title, showLabel, showTitle, allowCellsInserted);
};


//地理图标tab的搜索功能
Sidebar.prototype.searchEntries = function (searchTerms, count, page, success, error) {
    // 拿着 searchTerms 去数据库里搜索
    if (this.activeTerms == '' || this.activeTerms != searchTerms){
        this.activeTerms = searchTerms;
        $.ajax({
            url:'/conceptualModel/getGeoIconsByKey',
            data:{
                searchTerms:searchTerms
            },
            success:(result)=> {
                // 填充字典
                for (var i=0; i< result.length; i++){
                    var name = result[i].name;
                    var iconId = result[i].geoId;
                    var tags = [this.activeTerms, name];
                    this.createVertexTemplateEntry('image;html=1;labelBackgroundColor=#ffffff;image=' + result[i].pathUrl,
                        this.defaultImageWidth, this.defaultImageHeight, "", name, name != null, null, tags.join(" "), iconId);
                }
                // 该方法的源码
                ...
            }
        });

    } else if (this.activeTerms == searchTerms){
        //该方法的源码
        ...
    }
};

3. 添加折叠框

//GraphEditor自带函数
Sidebar.prototype.addPaletteFunctions = function (id, title, expanded, fns) {
    this.addPalette(id, title, expanded, mxUtils.bind(this, function (content) {
        for (var i = 0; i < fns.length; i++) {
            content.appendChild(fns[i](content));
        }
    }));
};
Sidebar.prototype.addPalette = function (id, title, expanded, onInit) {
	...
}
四、自定义右侧侧边栏

1. 入口在 refresh() 函数中

Format.prototype.refresh = function () {
	...
	if(graph.isSelectionEmpty()){
		//未选中任何元素
	}
	else if(graph.isEditing()){
		//正在编辑元素
	}
	else{
		//选中要素时，再接着区分不同情景
		if(graph.getSelectionCount() > 1){}
		else if(cell.style == "group"){}
		else if(cell.isEdge()){}
		else if(ss.image || !cell.isEdge()){}
		else{}
	}
	...
}

2. 添加自定义内容

this.panels.push(new GeoElementsPanel(this,ui,div));
...
GeoElementsPanel = function (format, editorUi, container) {
    BaseFormatPanel.call(this, format, editorUi, container);
    this.init();
};

mxUtils.extend(GeoElementsPanel, BaseFormatPanel);

GeoElementsPanel.prototype.init = function () {
    this.container.appendChild(this.addGeneralElements(this.createPanel()));
    this.container.appendChild(this.addGeoElementSelect(this.createPanel()));
};
五、自定义右击弹出菜单

1. GraphEditor的方式

2. 更简单直接的方式

//可以动态添加二级菜单，以及二级菜单对应的方法
var submenu1 = menu.addItem('关联到...', null, null);
menu.addItem('几何形状', null, function(){
	relate2Shape();
}, submenu1);

var subProperty = menu.addItem('属性特征', null, null, submenu1);
for (let i = 0; i < GeoElements.properties.length; i++) {
	menu.addItem(GeoElements.properties[i].type, null, function(){
		relate2Property(GeoElements.properties[i].type);
	}, subProperty);
}

在这里插入图片描述

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值