时间回到 2016 年，彼时 996 还不算福报，比特币单价也还远远不到 1000 美元。那时的我怀着对大厂的敬畏和对前途的迷茫，拿着一纸毕业证告别了校园。这第一份名为 Web 前端开发的工作，代码写着写着就到了今天。
一晃三年过去了，从纯粹的赶需求到造轮子、做分享和带团队，许多刚毕业的自己只能仰望的事情，现在看来也并非那么遥不可及了。简单地说，我这三年中我换了三份工作，而每份工作的年终绩效都是所在部门里最高的。不过这种说法未免太功利、太乏味了。我相信这段经历并不只是周报和简历上刻板的流水账，把它在我满 25 岁之际整理下来，也许对大家来说可以是个好故事。因此也就有了这篇文章。
<<<前端是我一辈子的信仰，写代码直到50岁>>>
赶上时代的第一年
我毕业后加入的第一家公司是科大讯飞。虽然这不是家小公司，但科大讯飞对于一个科大学生来说，想入职几乎就像蓝翔学生去开挖掘机一样容易。记得面试流程大致就是和几位在讯飞身居高位的科大校友聊聊，然后就收到 offer 了。
现在的技术社区里，常常因为培训班与科班的出身之争吵个不停。但那时算是半个科班出身的我，并不觉得当时的自己除了学历，和培训班的学员有很大的区别：那时我还不清楚绝对定位和相对定位有什么差别，基本只会 jQuery 加 Bootstrap 把功能堆出来而已。不过没关系，总有不差钱的公司愿意雇 985 的同学来切图写页面，这也就是我在讯飞主要的工作内容了。
毕业的第一年里，我的工作以实现讯飞开放平台的部分 Web 前端需求为主。这期间我的精力除了实现各种业务需求，主要还是放在了对开源技术的学习和个人项目上。在我刚入职时，我所在的开发团队技术栈还是前后端不分离的 jQuery + JSP 模式，前端代码上传到静态服务器还需要靠 FTP，而团队同学还在调研 Knockout 作为下一代基础库的可能性——即便是那时，离 Knockout 诞生也有将近十年了。其实，只要能接触到社区的主流技术，许多过时的工具都是很容易被替换的。正因为如此，我很快地就应用了 Gulp 全家桶来处理一些很容易自动化的工作，并在那一年的十一假期起，开始试水现在如日中天的 Vue 2.0 和 Webpack。而后，我又搭建了内网的私有 NPM 仓库，发布了脚手架在内的十余个包来帮助大家向新的技术栈迁移。这套现在对于前端同学司空见惯的技术在那时还是颇有点新鲜的。以此为契机，我推动了团队的前后端分离实践，后来也有幸被评为了那一年的部门最佳新人。
刚毕业的那段时间，能学的和想学的东西都实在太多了。记得讯飞的内部 App 可以显示每天的打卡排名。如果你在晚上 12 点准时打卡，那么你就有机会抢到第二天的打卡第一名——这个时段的打卡截图，我的手机里存着三十多张。当然，即便讯飞确实是我呆过的公司里强制加班最多的，但其实也远远没有忙到这个量级。真相是自从那时我就发现，只要你对着一屏幕的代码又能按时交差，没人关心你到底写的是什么。借着那时候高涨的兴趣，我鼓捣出了不少现在看来基本纯属娱乐的东西。比如：
Ove Lang编程语言，可以解释执行形如(表态 (钦点 董先生 特首) (= 特首 董先生) 哦。的代码。
Merry8虚拟机，可以模拟运行用上古的 Chip8 汇编指令写出来的 PONG 游戏。
Sinomap地图库，可以用麦卡托投影算法把 GeoJSON 数据渲染到 Canvas 上。
Flylog远程调试工具，可以将其它设备页面中的 log 信息推送到 PC 端的后台上。
CSS Emoji示例，可以用两个 div 画出 Emoji 表情。
你当然可以指责那时的我只醉心技术而不管业务（这确实是某家大厂对我的面试评价），不过折腾起这些有趣的项目，让我感觉那时的生活比起在每个周末都要痛苦地赶（抄）作业的大学要自在得多。从旁观者的角度来看，我在讯飞成长得并不慢，也有许多科大校友历经多年成为了那里的技术骨干。然而事实是，我在讯飞并没有呆满一年，留下了篇《小记在讯飞的 300 天》作为纪念之后就告别了合肥。为什么离开呢？非要用一句话概括的话，应该是我感觉自己并不属于 那里吧：合肥这座城市对我这个南方人来说并没有那么多归属感，而我熟悉的前端技术对于一家并非互联网公司的科技公司来说，更偏向于锦上添花而非雪中送炭。出于对地缘和个人价值的向往，我选择了告别这家食堂至今让我十分怀念的公司。感谢劲东、芳姐和家军等不少人的关照，希望有缘能够江湖再见吧。
一张调试 2016 年会大屏 Demo 的照片。那是我在讯飞最忙的 24 个小时，也是唯一一次直接和董事长汇报工作。
参与社区的第二年
我在自我介绍的时候，常常说我呆过的地方好像都是「假的」：我在科大读书，但它不在北京；我毕业前水到了鹅厂的实习，但 base 不在深圳；我离开讯飞后去了美团点评，但部门却在厦门。直到现在，我暂时也还没有离开这座城市的打算。只要不去为了那些庸俗的同龄压力去束缚自己，厦门呆起来就是个既离我的家人很近又很容易看到海的舒适城市。2017 年，美团点评的厦门研发中心在搬家前还能看到游艇，每天骑着单车上下班都能吹到海风，有时下班还能和小伙伴们去沙滩抓螃蟹 :)
我加入美团点评的面试很顺利，最主要的流程就是我把上面的一些各色玩具和相应的博客和前端老板虎哥秀了一下吧。在那里，我的主要工作是开发一个名为学城的内部知识库系统。虽然我为这个项目提交的代码占比可能已经所剩无几，但我相信只要它还活着，就总会和我有着点微妙的关系——学城的名字就是我起的。看过《权力的游戏》的同学应该都知道容纳维斯特洛大陆七国学士的 Citadel 吧，这个听起来就很有智慧的名字是不是挺适合一个知识库的呢？
对类似 Wiki 的知识库系统来说，Web 前端的富文本编辑器就非常重要了。稍有经验的同学都知道，富文本编辑是个长期以来被认为是天坑的领域，相关主流基础库从启动到成熟的时间都是以年为单位来计算的。我们显然没有必要重新发明轮子，可以基于社区已有的成熟框架来开发。在这个背景下，我首先接触了 Slate，这是一个可以让你以编写 React 组件的形式来定制自己的富文本应用的框架，它的 API 之优雅、文档之完善与源码之整洁使我很快就决定上车了，甚至都没有太在意它还属于 Beta 状态的友情提醒。
在学城的最早的几个版本中，我们基于 Slate 编写的代码还算工整。但很快问题就来了：它还不能算一个 battle-tested 的框架，我们定制的组件在编辑时暴露出了很多状态问题，bug 数量非常高。在我之前的工作经历中，对于框架用着不顺手的问题，基本都可以在业务中变通或绕过。但这对于富文本编辑器来说不适用，因为许多 bug 本身就在框架层，即便反馈到社区，也没人有义务马上替你解决。所以该怎么办呢？下载一份源码自己改吧。
修复框架的 bug 和修复业务代码的 bug，其实并没有本质的不同。毕竟只要能稳定复现，几乎所有 bug 最终都是能被修复的，只是业务代码中更容易出现肮脏的修复代码而已。但修复 bug 之后呢？在我第一年工作的时候，我在 GitHub 上还几乎没有为其他人的项目提交过代码，但我知道只要代码合并入主干分支，你就会成为这个项目的贡献者。虽然这没有任何物质奖励，但这作为贡献过开源项目的证明仍然让我十分心动。抱着这种向往的心情，我为社区提交了第一个 PR。
到现在我还记得很清楚第一个 PR 的内容：给.npmignore文件增加了一行，来解决 Babel 默认重复编译的问题。虽然只有一行代码，但出于我对开源项目的敬畏，我还是写了相当详细的描述来表达我为什么需要增加这一行代码，以及它会通过什么方式来解决问题。作者也很快就合并了这个 PR。在发现贡献开源项目原来也就是这么回事之后，我有了很大的动力将更多我的改进提交到上游。到我离开学城项目为止，我把包括 bug 修复、测试、文档在内的近 20 个 MR 合并入了 Slate 的主干，并维护了一份 0.24 版本文档的完整中文翻译。今天 Slate 已经有接近 1.5 万个 star 和超过 200 名贡献者了，而我在它的 contributors 排行榜里仍然可以排在前十。
可惜的是，即便我尽力改进 Slate，它对于表格、列表等存在嵌套的 UI 组件，其稳定性仍然难以满足学城的需求。再加上它较为激进的更新方式，我们很快就遇到了难以继续同步上游更新的问题。在充分地向公司上层抛出问题并给出备选方案之后，我们将富文本框架迁移到了架构相似但更为稳定的 ProseMirror 上，它应该已经在学城上沿用至今了。虽然 Slate 的落地时间不长，但在对它的使用与改进过程中，让我充分地理解了开源项目的运作和参与方式，我在 GitHub 上也终于不再仅仅是自娱自乐了。
2016 年和 2017 年我在 GitHub 的贡献对比。
到了第二年，我在 GitHub 上提交的代码虽然还是有不少玩票成分，但也不再是清一色的玩具了。大致有这些：
异步的数据迁移工具Bumpover，它实现了 100% 的单元测试覆盖率。
通过提取语法树节点来比较 Vue 与 Angular 相似度的naming-style-demo示例。
HTML 字符串转虚拟 DOM 的解析器html-toy-parser。
40 行的 MVC 框架nano-mvc。
在美团点评的那段时间里，除了在 GitHub 上提交代码外，我在一些技术社区里也相当活跃。记得刚入职时需要把 Vue 切换到 React，对 Vue 的怀念促使我去 SegmentFault 上回答了许多 Vue 的问题，一度是某几周内这个话题下的第一名。并且，我还发现掘金是个很适合发（新手向）前端技术文章的地方。在 2017 年结束时，我的掘金专栏已经有了 3000 以上的关注者。不过，我可不是纯粹只贡献技术正能量的傻白甜。如果那段时间你在掘金发文章讲如何深入理解 this 的四种指向和寄生混入继承之类老掉牙的糟粕内容，那么我多半会在评论区义无反顾地站出来吐槽 :) 只是现在的我已经没有兴趣参与这些口水话题了而已。
由于遇到了更适合我的机会，我也没有在美团点评工作超过一年，不过我还是很留恋刚刚入职时的那支团队。不论是晚上饭点时小伙伴们吃遍菜单的日常聚餐，还是不定期能蹭到的虎哥牌星巴克，都是相当有趣的回忆。也还要额外感谢佳立、根龙、春雨等接手学城的同学们。多亏了你们，邹老板才没有找上门来追杀我啊。
图中多边形风格的大楼就是美团点评厦门研发中心的前所在地，我们的团队曾在照片拍摄地捕获螃蟹。
突破瓶颈的第三年
在离开美团点评前，我确实可以 hold 住一些基础框架的开发了。但富文本编辑器的性质决定了它在基本稳定后的迭代方式，更多地只是修修补补而非开疆拓土。这让我感到焦虑，感觉自己处在一个为了四处救火而疲于奔命，技术进步开始放缓的瓶颈状态。在这个时候，新的机会出现了。
2017 年底的某一天，我在掘金上灌水时发现了一篇名为《我们在海边写代码》的软文，署名糖饼，看起来出自个颇有底气的前端团队。巧的是它的 base 也在厦门，并且实际地址刚好在我的上班路上。本着聊一聊反正不亏的心态，我骑着单车拜访了这家当时名叫欢乐逛的公司。
接待我的两名面试官，一位说自己花名就是糖饼（真人和头像画风不符），另一位说自己花名叫小米。他们两个人看起来蛮朴素的，但对我的长篇大论却出奇的有耐心，中途还有一名穿着黄拖鞋的男子参与了旁听。那是我经历过的最久的一轮面试，总共和我扯了应该有两三个小时。我本来以为这就是一次初面，寻思着这公司的一线同学还蛮经得住忽悠的。但其实我已经把技术面该遇到的全部 Boss 都过了一遍，没想到说好的青铜局里来了一群王者啊。
必须说，如果糖饼没有贴出他合并到 Webpack 的并行构建支持 PR，我是不会轻易选择在毕业还不到两年的时候被他怂恿着换第三次工作的。当然，我们一般的日常也并不都是那么高大上的 Rocket Science。我在这里的工作，主要集中在当时还没有独立出来的稿定设计项目里。我负责维护这个设计站点中的平面编辑器 SDK，以及相关的 UI 组件。最开始，我还以为稿定就是个较为边缘的新业务，直到公司搬家后前台都挂着稿定设计的招牌，才发现我在这大概相当于在中国邮政分拆之前进了名叫中国移动的部门。
平面设计编辑器与富文本编辑器有许多相似之处，并且这个细分领域中当前的主流开源项目，其设计思想还达不到 Slate 那种高度可扩展的灵活性，这无疑给了我很多发挥的空间。在过去的一年多的时间里，我从细小的 bug 修复开始一步步熟悉这个编辑器，终于在上个季度上线了我最想从 Slate 中借鉴的特性：组件化的可编辑元素 。Slate 赋予了我们只要用 React 声明一个
组件，就能在富文本编辑器中编辑表格的扩展能力。我将这个思想应用到了我们基于 Vue 的编辑器上。现在我们只需要提供基于 Vue 编写的 UI 组件，就能轻松地为编辑器组装出新的可编辑元素类型支持，而无需改动框架核心源码。再加上小伙伴在前端出图上的不懈努力，我们的编辑器做到了兼取 Canvas 与 DOM 二者之所长，目前暂时还没有主流的开源编辑器能满足这一点。
我们的平面编辑器，欢迎大家访问gaoding.com体验噢。
除了在较高的层面上，将框架按照自己的设计思想重构之外，我还在较低的细节层面上做了些有意思的工作。比如，我使用坐标系变换的思想，将图形旋转后的裁切拖拽限制算法从上百行的 if else 判断简化为了十余行数学变换；基于节点序列化数据的哈希值，实现了更细粒度的历史状态结构共享，并开源了历史状态管理库StateShot；使用CodeMod自动将 ES5 代码重构为 ES6；设计实现了编辑器的特效调节机制，并作为第一发明人提交了专利申请等等。现在我是 Web 工具团队名义上的负责人（吉祥物），工作至今写了 80 篇左右的技术博客，掘金专栏的阅读量也超过了 20 万，看起来似乎还过得去吧？
但这些工作并没有让我感觉突破了瓶颈 。
很早之前我就问过小米，我们做的事情比起 Adobe，有什么特别的优势吗？小米的回答是我们需要主打内容与细分的场景，做到对普通用户更高的易用性。从商业角度来讲我很认可这个答案，但我在纯粹的技术角度上，总觉得这是更适合市场部门负责人的回答而不是属于技术部门的觉悟。并且，我也一直觉得我自己的技能体系还差了一些什么，使我虽然在一家主打商业设计而特别重视前端技术的公司里，做的事情却还不够酷。到底还差了什么呢？我的答案是渲染 。
我们前端同学们所擅长编写的 JavaScript，只是在 CPU 里执行的单线程代码而已。别忘了我们还有 WebGL 这个虽然非常繁冗，但能让我们释放 GPU 潜力的武器。这个领域常常被认为是游戏开发者所专属的。而大家对于应用 Web 上的 3D 能力，首先想到的可能也都是套用 Three 等充分封装后的成熟开源渲染引擎。因此，在这个领域就没有必要重新发明轮子了吗？恰恰相反，我发现这是一片巨大的蓝海，它在 Web 设计领域的应用几乎还是白纸一张，存在着非常大的定制、优化可能性和应用前景。限于篇幅和本文的主题，这里不再详细展开，只展示一下我们自研的渲染引擎在投入开发一个月之内所得到的一些渲染效果就足够了：
在我前一段时间选择深入 WebGL 的时候，幻神提醒过我这基本相当于删号重练了。确实，在学习曲线的初期，图形学晦涩 API 的门槛让我感到非常艰难，但在坚持不使用现成引擎来实现 Demo 的一段时间后，某个时间点上我感觉自己终于可以把那些零散的点连接起来了。而这时再加上前端框架的设计经验，我确实找到了非常适合我们应用场景的一个自研方向，具体的内容暂时没有办法在这里详述，只能说我和小伙伴们正在紧张的开发中，非常希望能让我们的新特性早日和大家见面 :)
在 25 岁的今天，我感觉终于走出了之前几年在 CPU 上编写逻辑的瓶颈。从最早的玩具编程语言和游戏模拟器，再到现在的渲染引擎，所谓「编程语言、操作系统和计算机图形学」的程序员三大浪漫，我也能吹牛说自己都略有涉猎了。对我来说，从事一份工作三年之后仍然保持高涨的热情和找到值得继续钻研的技术领域，可能不是件很容易的事，因此现在的状态对我来说已经很好了。当然，要想在未来在技术上还能够继续深入，所需要的应该就不仅仅是传统的 Web 前端的领域知识，还需要更多跨领域和学科的知识了。感谢稿定这里钻研游戏引擎和图形学的大佬们，和他们的交流让我获益匪浅。现在我实在有太多需要做的事情了，因此我的博客和专栏也可能不能再维持月更的节奏，希望日后能用更多的干货来弥补 :D
后记与致谢
从第一年编写展示页和后台业务逻辑，到第二年活跃在开源社区，再到第三年开发自研框架并尝试往图形学领域转型，毕业以来的这些经历让我觉得我确实还在成长。我虽然已经不再是团队里最年轻的成员了，但现在我还远远没有到转型完全的管理者去分配需求和任务的时候：还有这么多有趣的代码可以写，放弃了岂不可惜？
虽然这篇文章主要和技术相关，但我的生活其实也并不只有技术啦：我有微单和无人机，玩通了 Switch 上的塞尔达和马里奥，花名（雪碧）和公众号名（彩色相簿）都来自白学，毕业以来除了公费游历了北上广沪杭等大城市，也去了台湾、新加坡、捷克、法国（包括白学家的圣地斯特拉斯堡）等相当有趣的地方。只要在生活里保持开放的心态，总能认识到许多比自己更厉害的人并向他们学习。如果按照论文致谢的方式列出个名单，那么我感觉对我影响最大的是这么几位，即便其中的一些人我还未曾谋面：
我司的小米和糖饼在对技术的态度和团队管理上都给我起到了很棒的「模范带头作用」，在这个团队的成长体验是最好的。
Slate 的作者 Ian Storm Taylor 在我初入开源社区时给了我很多热情而不失严格的 Review，他的框架设计理念对我有很深的影响。
携程的工业聚向我展示了代码逻辑所能达到的优雅水平。聚聚总结的 GSP 编码风格即便在编写渲染引擎时都十分适用，扭转了我对函数式编程矫枉过正的态度。
Photopea 的作者 Ivan Kutskir 在布拉格热情地招待了我，他的作品对图形学的应用给了我巨大的信心来深入这一领域。
一位不愿透露姓名的女性在我遇到困难时给了我很大的安慰，我已经习惯在每个周末去见她的动车上安心地写代码了。
在斯特拉斯堡巡礼时拍下的照片。
我还要感谢毕业到现在遇到的很多很多人，毕竟终归是和大家因缘际会的无数选择才能成就一个人。在生活这个巨大而混沌的系统里，幸运的是我们可以作出选择来结识他人、追求理想并作出改变——We are what we choose . 最后，同样感谢你的阅读噢 :D
你可能感兴趣的:(前端,javascript,html5,css,vue.js,jquery)
element实现动态路由+面包屑
软件技术NINI
vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致
igotyback
前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用
加密社
闲侃 区块链 智能合约 区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理
dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习
小猿L
node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
springboot+vue项目实战一-创建SpringBoot简单项目
苹果酱0567
面试题汇总与解析 spring boot 后端 java 中间件 开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
跳房子的前端
前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
博客网站制作教程
2401_85194651
java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
JavaScript `Map` 和 `WeakMap`详细解释
跳房子的前端
JavaScript 原生方法 javascript 前端 开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
最简单将静态网页挂载到服务器上(不用nginx)
全能全知者
服务器 nginx 运维 前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面
Redstone Monstrosity
前端 面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项
jun778895
微信小程序 小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是
hai40587
npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
字节二面
Redstone Monstrosity
前端 面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件
余生逆风飞翔
前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
《HTML 与 CSS—— 响应式设计》
陈在天box
html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
uniapp实现动态标记效果详细步骤【前端开发】
2401_85123349
uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
高性能javascript--算法和流程控制
海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
html+css网页设计 旅游网站首页1个页面
html+css+js网页设计
html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
css设置当字数超过限制后以省略号（...）显示
周bro
css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩
马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发
红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
Vue + Express实现一个表单提交
九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
css2中的透明
琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
JavaScript中秋快乐！
Q_w7742
javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三)
听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构
张某布响丸辣
nginx 前端 架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
Java常用排序算法/程序员必须掌握的8大排序算法
cugfy
java
分类：
1）插入排序（直接插入排序、希尔排序）
2）交换排序（冒泡排序、快速排序）
3）选择排序（直接选择排序、堆排序）
4）归并排序
5）分配排序（基数排序）
所需辅助空间最多：归并排序
所需辅助空间最少：堆排序
平均速度最快：快速排序
不稳定：快速排序，希尔排序，堆排序。
先来看看8种排序之间的关系：
1.直接插入排序
（1
【Spark102】Spark存储模块BlockManager剖析
bit1129
manager
Spark围绕着BlockManager构建了存储模块，包括RDD，Shuffle，Broadcast的存储都使用了BlockManager。而BlockManager在实现上是一个针对每个应用的Master/Executor结构，即Driver上BlockManager充当了Master角色，而各个Slave上(具体到应用范围，就是Executor)的BlockManager充当了Slave角色
linux 查看端口被占用情况详解
daizj
linux 端口占用 netstat lsof
经常在启动一个程序会碰到端口被占用，这里讲一下怎么查看端口是否被占用，及哪个程序占用，怎么Kill掉已占用端口的程序
1、lsof -i:port
port为端口号
[root@slave /data/spark-1.4.0-bin-cdh4]# lsof -i:8080
COMMAND PID USER FD TY
Hosts文件使用
周凡杨
hosts locahost
一切都要从localhost说起，经常在tomcat容器起动后，访问页面时输入http://localhost:8088/index.jsp，大家都知道localhost代表本机地址，如果本机IP是10.10.134.21，那就相当于http://10.10.134.21:8088/index.jsp，有时候也会看到http: 127.0.0.1:
java excel工具
g21121
Java excel
直接上代码，一看就懂，利用的是jxl：
import java.io.File;
import java.io.IOException;
import jxl.Cell;
import jxl.Sheet;
import jxl.Workbook;
import jxl.read.biff.BiffException;
import jxl.write.Label;
import
web报表工具finereport常用函数的用法总结（数组函数）
老A不折腾
finereport web报表 函数总结
ADD2ARRAY
ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素，再返回该数组。
示例：
ADDARRAY([3,4, 1, 5, 7], [23, 43, 22], 3)返回[3, 4, 23, 43, 22, 1, 5, 7].
ADDARRAY([3,4, 1, 5, 7], "测试&q
游戏服务器网络带宽负载计算
墙头上一根草
服务器
家庭所安装的4M，8M宽带。其中M是指，Mbits/S
其中要提前说明的是：
8bits = 1Byte
即8位等于1字节。我们硬盘大小50G。意思是50*1024M字节，约为 50000多字节。但是网宽是以“位”为单位的，所以，8Mbits就是1M字节。是容积体积的单位。
8Mbits/s后面的S是秒。8Mbits/s意思是 每秒8M位，即每秒1M字节。
我是在计算我们网络流量时想到的
我的spring学习笔记2-IoC（反向控制 依赖注入）
aijuans
Spring 3 系列
IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。
IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：
如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
高性能mysql 之 选择存储引擎(一)
annan211
mysql InnoDB MySQL引擎 存储引擎
1 没有特殊情况，应尽可能使用InnoDB存储引擎。 原因：InnoDB 和 MYIsAM 是mysql 最常用、使用最普遍的存储引擎。其中InnoDB是最重要、最广泛的存储引擎。她 被设计用来处理大量的短期事务。短期事务大部分情况下是正常提交的，很少有回滚的情况。InnoDB的性能和自动崩溃 恢复特性使得她在非事务型存储的需求中也非常流行，除非有非常
UDP网络编程
百合不是茶
UDP编程 局域网组播
UDP是基于无连接的,不可靠的传输 与TCP/IP相反
UDP实现私聊,发送方式客户端,接受方式服务器
package netUDP_sc;
import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.Ine
JQuery对象的val()方法执行结果分析
bijian1013
JavaScript js jquery
JavaScript中，如果id对应的标签不存在（同理JAVA中，如果对象不存在），则调用它的方法会报错或抛异常。在实际开发中，发现JQuery在id对应的标签不存在时，调其val()方法不会报错，结果是undefined。
http请求测试实例（采用json-lib解析）
bijian1013
json http
由于fastjson只支持JDK1.5版本，因些对于JDK1.4的项目，可以采用json-lib来解析JSON数据。如下是http请求的另外一种写法，仅供参考。
package com;
import java.util.HashMap;
import java.util.Map;
import
【RPC框架Hessian四】Hessian与Spring集成
bit1129
hessian
在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中介绍了基于Hessian的RPC服务的实现步骤，在那里使用Hessian提供的API完成基于Hessian的RPC服务开发和客户端调用，本文使用Spring对Hessian的集成来实现Hessian的RPC调用。
定义模型、接口和服务器端代码
|---Model
&nb
【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析
bit1129
Mahout
1.Mahout环境搭建
1.下载Mahout
http://mirror.bit.edu.cn/apache/mahout/0.10.0/mahout-distribution-0.10.0.tar.gz
2.解压Mahout
3. 配置环境变量
vim /etc/profile
export HADOOP_HOME=/home
nginx负载tomcat遇非80时的转发问题
ronin47
nginx负载后端容器是tomcat（其它容器如WAS,JBOSS暂没发现这个问题）非８０端口，遇到跳转异常问题。解决的思路是：$host:port
详细如下：
该问题是最先发现的，由于之前对nginx不是特别的熟悉所以该问题是个入门级别的：
? 1 2 3 4 5
java-17-在一个字符串中找到第一个只出现一次的字符
bylijinnan
java
public class FirstShowOnlyOnceElement {
/**Q17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b
* 1.int[] count:count[i]表示i对应字符出现的次数
* 2.将26个英文字母映射：a-z <--> 0-25
* 3.假设全部字母都是小写
*/
pu
mongoDB 复制集
开窍的石头
mongodb
mongo的复制集就像mysql的主从数据库，当你往其中的主复制集(primary)写数据的时候，副复制集(secondary)会自动同步主复制集(Primary)的数据,当主复制集挂掉以后其中的一个副复制集会自动成为主复制集。提供服务器的可用性。和防止当机问题
mo
[宇宙与天文]宇宙时代的经济学
comsci
经济
宇宙尺度的交通工具一般都体型巨大，造价高昂。。。。。
在宇宙中进行航行，近程采用反作用力类型的发动机，需要消耗少量矿石燃料，中远程航行要采用量子或者聚变反应堆发动机，进行超空间跳跃，要消耗大量高纯度水晶体能源
以目前地球上国家的经济发展水平来讲，
Git忽略文件
Cwind
git
有很多文件不必使用git管理。例如Eclipse或其他IDE生成的项目文件，编译生成的各种目标或临时文件等。使用git status时，会在Untracked files里面看到这些文件列表，在一次需要添加的文件比较多时（使用git add . / git add -u），会把这些所有的未跟踪文件添加进索引。
==== ==== ==== 一些牢骚
MySQL连接数据库的必须配置
dashuaifu
mysql 连接数据库配置
MySQL连接数据库的必须配置
1.driverClass：com.mysql.jdbc.Driver
2.jdbcUrl：jdbc:mysql://localhost:3306/dbname
3.user：username
4.password：password
其中1是驱动名；2是url，这里的‘dbna
一生要养成的60个习惯
dcj3sjt126com
习惯
一生要养成的60个习惯
第1篇 让你更受大家欢迎的习惯
1 守时，不准时赴约,让别人等,会失去很多机会。
如何做到：
①该起床时就起床，
②养成任何事情都提前15分钟的习惯。
③带本可以随时阅读的书，如果早了就拿出来读读。
④有条理，生活没条理最容易耽误时间。
⑤提前计划：将重要和不重要的事情岔开。
⑥今天就准备好明天要穿的衣服。
⑦按时睡觉，这会让按时起床更容易。
2 注重
[介绍]Yii 是什么
dcj3sjt126com
PHP yii2
Yii 是一个高性能，基于组件的 PHP 框架，用于快速开发现代 Web 应用程序。名字 Yii （读作 易）在中文里有“极致简单与不断演变”两重含义，也可看作 Yes It Is! 的缩写。
Yii 最适合做什么？
Yii 是一个通用的 Web 编程框架，即可以用于开发各种用 PHP 构建的 Web 应用。因为基于组件的框架结构和设计精巧的缓存支持，它特别适合开发大型应
Linux SSH常用总结
eksliang
linux ssh SSHD
转载请出自出处：http://eksliang.iteye.com/blog/2186931 一、连接到远程主机
格式：
ssh name@remoteserver
例如：
ssh
[email protected]
二、连接到远程主机指定的端口
格式：
ssh name@remoteserver -p 22
例如：
ssh i
快速上传头像到服务端工具类FaceUtil
gundumw100
android
快速迭代用
import java.io.DataOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOExceptio
jQuery入门之怎么使用
ini
JavaScript html jquery Web css
jQuery的强大我何问起（个人主页：hovertree.com）就不用多说了，那么怎么使用jQuery呢？
首先，下载jquery。下载地址：http://hovertree.com/hvtart/bjae/b8627323101a4994.htm，一个是压缩版本，一个是未压缩版本，如果在开发测试阶段，可以使用未压缩版本，实际应用一般使用压缩版本(min)。然后就在页面上引用。
带filter的hbase查询优化
kane_xie
查询优化 hbase RandomRowFilter
问题描述
hbase scan数据缓慢，server端出现LeaseException。hbase写入缓慢。
问题原因
直接原因是： hbase client端每次和regionserver交互的时候，都会在服务器端生成一个Lease,Lease的有效期由参数hbase.regionserver.lease.period确定。如果hbase scan需
java设计模式-单例模式
men4661273
java 单例 枚举 反射 IOC
单例模式1，饿汉模式
//饿汉式单例类.在类初始化时，已经自行实例化
public class Singleton1 {
//私有的默认构造函数
private Singleton1() {}
//已经自行实例化
private static final Singleton1 singl
mongodb 查询某一天所有信息的3种方法，根据日期查询
qiaolevip
每天进步一点点 学习永无止境 mongodb 纵观千象
// mongodb的查询真让人难以琢磨，就查询单天信息，都需要花费一番功夫才行。
// 第一种方式：
coll.aggregate([
{$project:{sendDate: {$substr: ['$sendTime', 0, 10]}, sendTime: 1, content:1}},
{$match:{sendDate: '2015-
二维数组转换成JSON
tangqi609567707
java 二维数组 json
原文出处：http://blog.csdn.net/springsen/article/details/7833596
public class Demo {
public static void main(String[] args) { String[][] blogL
erlang supervisor
wudixiaotie
erlang
定义supervisor时，如果是监控celuesimple_one_for_one则删除children的时候就用supervisor:terminate_child (SupModuleName, ChildPid)，如果shutdown策略选择的是brutal_kill，那么supervisor会调用exit(ChildPid, kill)，这样的话如果Child的behavior是gen_
