【思维导图】[编程书籍]-编写高质量代码：Web前端开发修炼之道

Web思维导图实现的技术点分析（附完整源码）简介思维导图是⼀种常见的表达发散性思维的有效⼯具，市⾯上有⾮常多的⼯具可以⽤来画思维导图，有免费的也有收费的，此外也有⼀些可以⽤来帮助快速实现的JavaScript类库，如：、。

技术选型这种图形类的绘制⼀般有两种选择：svg和canvas，因为思维导图主要是节点与线的连接，使⽤与html⽐较接近的svg⽐较容易操作，svg的类库在试⽤了和后，有些需求在snap⾥没有找到对应的⽅法，所以笔者最终选择了svgjs。

为了能跨框架使⽤，所以思维导图的主体部分作为⼀个单独的npm包来开发及发布，通过类的⽅式来组织代码，⽰例页⾯的开发使⽤的是vue2.x全家桶。

整体思路笔者最初的思路是先写⼀个渲染器，根据输⼊的思维导图数据，渲染成svg节点，计算好各个节点的位置，然后显⽰到画布，最后给节点连上线即可，接下来对思维导图的操作都只需要维护这份数据，数据变化了就清空画布，然后重新渲染，这种数据驱动的思想很简单，在最初的开发中也没有任何问题，⼀切都很顺利，因为模拟数据就写了四五个节点，然⽽后来当我把节点数量增加到⼏⼗个的时候，发现凉了，太卡了，点击节点激活或者展开收缩节点的时候⼀秒左右才有反应，就算只是个demo也⽆法让⼈接受。

卡的原因⼀⽅⾯是因为计算节点位置，每种布局结构最少都需要三次遍历节点树，加上⼀些计算逻辑，会⽐较耗时，另⼀⽅⾯是因为渲染节点内容，因为⼀个思维导图节点除了⽂本，还要⽀持图⽚、图标、标签等信息、svg不像html会⾃动按流式布局来帮你排版，所以每种信息节点都需要⼿动计算它们的位置，所以也是很耗时的⼀个操作，并且因为svg元素也算是dom节点，所以数量多了⼜要频繁操作，当然就卡了。

卡顿的原因找到了，怎么解决呢？⼀种⽅法是不⽤svg，改⽤canvas，但是笔者发现该问题的时候已经写了较多代码，⽽且就算⽤canvas树的遍历也⽆法避免，所以笔者最后采⽤的⽅法的是不再每次都完全重新渲染，⽽是按需进⾏渲染，⽐如点击节点激活该节点的时候，不需要重新渲染其他节点，只需要重新渲染被点击的节点就可以了，⼜⽐如某个节点收缩或展开时，其他节点只是位置需要变化，节点内容并不需要重新渲染，所以只需要重新计算其他节点的位置并把它们移动过去即可，这样额外的好处是还可以让它们通过动画的⽅式移动过去，其他相关的操作也是如此，尽量只更新必要的节点和进⾏必要的操作，改造完后虽然还是会存在⼀定卡顿的现象，但是相⽐之前已经好了很多。

编写高质量代码——Web前端开发修炼之道曹刘阳　著ISBN：978-7-111-30595-8本书纸版由机械工业出版社于2010年出版，电子版由华章分社（北京华章图文信息有限公司）全球范围内制作与发行。

版权所有，侵权必究客服热线：+ 86-10-68995265客服信箱：service@官方网址：新浪微博 @研发书局腾讯微博 @yanfabookWeb前端开发是从网页制作演变而来的，名称上有很明显的时代特征。

在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。

网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。

无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。

Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。

简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

如何才能做得更好呢？第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。

第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。

第三，必须学会运用各种工具进行辅助开发。

《Web前端开发》课程标准一、课程基本信息表 1课程信息表表 2课程标准开发团队名单1注1：指参与课程标准制定的主要成员，包括校外专家二、课程定位和课程设计（一）课程性质与作用本课程是计算机应用技术专业的职业核心技术模块课程之一，是基于工作过程系统化的课程，是一门实践性和应用性都很强的课程。

为计算机应用技术专业学生将来从事职场的web前端开发岗位的发展打下良好基础，并为该专业后续网站开发与管理的学习打下网页前端设计基础。

（二）课程基本理念本课程的设计“以能力为本位、以职业实践为主线、以项目引导，以就业为导向”，打破了传统的按照知识体系教授课程的模式，以学生日后在从事Web前端开发行业中所需的实际技能为目标，进行基于工作项目和工作任务的课程开发与设计，既保证满足从事网站前端开发所必须的专业知识、专业技能，又保持原有知识体系的完整性，既培养了学生的职业能力，同时也为学生的可持续发展奠定了基础。

（三）课程设计思路本课程是以“基于工作过程”为指导，通过对Web前端开发所涉及到的岗位群进行工作任务和职业能力分析，以项目引导，以就业为导向，以培养学生的职业技能为目标、以学生为主体、以项目为载体，将知识、理论和实践一体化的课程设计思路。

在宏观教学设计上突破以知识点的层次递进为体系的传统模式，而是将职业工作过程系统化，以工作过程为参照系，按照工作过程来序化知识，培养学生规范、高效率、高质量地应用能力，使学生既学习岗位知识又培养学生职业素质，锻炼学生的方法能力与社会能力。

每个项目的学习以“做”为中心，教和学都围绕着做，在做中学，在学中做，做到“教、学、做”一体化，达到理论与实践的统一，同时注重培养学生的自主学习能力和职业素养的提升。

本课程思政内容及单元的知识、技能按照相应的专项能力在实际职业工作中出现的频度、内容的难度和要求掌握的程度进行排序，如下所示：课程思政内容：1.信息社会责任；2. 树立正确的技能观；3. 软件工匠精神培养。

《Web前端开发技术》课程标准一、课程定位《Web前端开发技术》本课程是计算机软件技术专业、计算机网络技术专业的一门专业必修课，本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，通过多个项目的练习操作，熟练地掌握岗位所需知识和技能，并不断强化，项目体现操作能力和解决问题能力的培养。

充分体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。

二、课程目标通过本课程学习掌握VUE的知识体系，模板语法、组件、过渡动画、生命周期等基础内容。

掌握VUE基本概念、VUE实例、VUE模板语法、VUE生命周期、VUE组件及组件间通信、VUE过渡与动画；掌握VUE-CLI脚手架、脚手架配置、APP路由、单页面APP创建、APP组件开发、VUE-CLI组件间传参、VUE-CLI插槽、组件切换过渡动画、编译打包处理。

培养学生web前端开发能力。

同时，通过本课程的学习，提高学生的操作技能，培养学生踏实认真、精益求精、创新的精神，培养良好的职业道德，为学生学习动态网站开发相关课程提供知识和技术支持。

通过项目的实现，让学生具备良好的综合素质和职业道德，能够吃苦耐劳、爱岗敬业、团结合作。

1．知识目标（1）理解Vue编程理念与直接操作Dom的差异（2）Vue常用的基础语法（3）理解MVVM设计模式（4）掌握Vue的组件和实例（5）掌握前端组件化，全局样式与局部样式（6）掌握父子组件传值与组件参数校验（7）熟悉Vue 中的动画特效（8）理解Vue中的CSS动画原理2．能力目标（1）具备Vue常用的基础语法应用能力（2）具备使用Vue编写TodoList功能的能力（3）具备插槽的使用，动态组件的应用能力（4）具备Vue-cli脚手架工具的使用的能力（5）具备组件化思维修改TodoList的能力（6）具备Vue中使用animate.css库的能力（7）具备Vue中同时使用过渡与动画效果能力（8）具备Vue中使用Velocity.js库的能力（9）具备Vue中动画的封装能力3．素质目标具有社会主义和共产主义的理想信念具有改革开放的意识和强烈的竞争意识具有良好的行为规范和社会公德以及较强的法制观念具有良好的职业道德和质量服务意识具有不断学习、不断创新的进取精神具有团队协作精神和较强的协调能力及独立工作的能力具有健康的体魄和良好的心理素质能吃苦耐劳、爱岗敬业三、课程设计1．设计思想以校企合作为切入点，以培养职业能力为核心，以项目教学为主要手段，积极探索教学方法与成绩评价方法的创新，保证课程目标的实现。

《Web前端技术基础》课程标准一、课程基本信息二、课程性质与任务（一）课程性质《Web前端技术基础》课程是为大数据技术专业开设的一门专业基础课。

贯彻国家“立德树人”的教育方针，创新实践学校“理实一体虚实结合工匠工坊”的人才培养模式，依托学校双高专业群建设和职业教育提质培优行动计划任务，本课程基于OBE理念设计，聚焦HTML网页技术、CSS样式应用、JavaScript动态行为典型工作任务，培养具有爱岗、敬业优秀品质和工匠精神的“会设计、善管理、懂技术、知新规，通实施”的高素质技术技能型人才。

本课程是依据专业人才培养目标和相关职业岗位（群）的能力要求而设置的。

本课程的后续课程有《数据采集技术》、《数据可视化技术与应用》等。

（二）课程任务本课程主要讲授HTML网页技术、CSS样式应用、JavaScript动态行为等内容，培养面向软件与信息服务领域从事Web前端开发的高素质技术技能人才，对本专业岗位所需要的知识、技能和素质目标的达成起支撑作用。

课程将思政元素有机融入课程教学，培养学生的综合素质。

（三）课程设计思路本课程是以大数据技术专业所涵盖的岗位群进行任务与职业能力分析，对接“1+X”职业技能等级证书以及全国职业院校技能大赛，以任务驱动、就业为导向，根据本专业学生的认知特点，以学生职业能力、素质培养为目标，选取课程教学内容，并为学生可持续发展奠定良好的基础。

三、课程目标与要求（一）课程目标1.素质目标（1）培养诚实、守信、坚韧不拔的性格；（2）培养善于沟通表达、善于自我学习、具备团队协作的能力；（3）养成规范的编码、按时交付软件等良好的工作态度；（4）培养学生分析问题、解决问题及创造思维能力。

2.知识目标（1）掌握站点和网页的管理；（2）掌握HTML基础知识和常用文本元素、图像元素、多媒体元素、超链接元素、列表元素、表格元素和表单元素；（3）掌握CSS基础知识，包括基础选择器、字体文本样式属性、高级特性等；（4）掌握CSS盒子模型及相关属性；（5）掌握CSS布局，重点是相对定位和绝对定位；（6）掌握JavaScript 基础知识、程序控制结构、常用对象、事件编程3.能力目标（1）能使用HTML制作包含基本内容的网页；（2）能使用HTML及CSS等技术来设计网页布局；（3）学会使用JavaScript技术来提高网页交互性、体验性；（4）学会综合使用HTML、CSS与JavaScript的相关知识，来丰富、渲染网页；（5）能根据具体应用需求，创新性地设计网页（二）课程要求四、课程结构与内容（一）课程结构与学时分配（二）课程内容与要求（可自定义表格）（三）课程思政实施要求本课程立足于Web前端开发角度，从网页设计与制作方面规范和指导网站开发的全过程。

Java⼯程师学习之路思维导图前⾯看Hollis的微信公众号更新了Java⼯程师成神之路的⽂档，感觉⾥⾯的内容清晰、齐全，可以⽤来审视⾃⼰，也能够知道⾃⼰在那些⽅⾯可以继续前⾏，想着有时间分享出来。

⼀、基础篇JVMJVM内存结构堆、栈、⽅法区、直接内存、堆和栈区别Ja va内存模型内存可见性、重排序、顺序⼀致性、volatile、锁、final垃圾回收内存分配策略、垃圾收集器（G1）、GC算法、GC参数、对象存活的判定JVM参数及调优Ja va对象模型oop-klass、对象头H o tSpo t即时编译器、编译优化类加载机制classLoader、类加载过程、双亲委派（破坏双亲委派）、模块化（jboss modules、osgi、jigsaw）虚拟机性能监控与故障处理⼯具jps, jstack, jmap、jstat, jconsole, jinfo, jhat, javap, btrace、TProfiler编译与反编译javac 、javap 、jad 、CRFJava基础知识阅读源代码String、Integer、Long、Enum、BigDecimal、ThreadLocal、ClassLoader & URLClassLoader、ArrayList & LinkedList、 HashMap & LinkedHashMap & TreeMap & CouncurrentHashMap、HashSet & LinkedHashSet & TreeSetJa va中各种变量类型熟悉Ja va Str ing的使⽤，熟悉String的各种函数JDK 6和JDK 7中substring的原理及区别、replaceFirst、replaceAll、replace区别、String对“+”的重载、String.valueOf和Integer.toString的区别、字符串的不可变性⾃动拆装箱Integer的缓存机制熟悉Ja va中各种关键字transient、instanceof、volatile、synchronized、final、static、const 原理及⽤法。