企业官网建设流程全解析

兰州做网站价格,开远市新农村数字建设网站,泰安华航网络有限公司,一个网站如何创建多个页面别再用var了#xff01;前端新人搞懂let和const少踩80%的坑别再用var了#xff01;前端新人搞懂let和const少踩80%的坑先甩结论#xff1a;var 就是前任#xff0c;早分早超生作用域#xff1a;var 的“老好人” VS let/const 的“边界感”变量提升#xff1a;var 先上车…别再用var了前端新人搞懂let和const少踩80%的坑别再用var了前端新人搞懂let和const少踩80%的坑先甩结论var 就是前任早分早超生作用域var 的“老好人” VS let/const 的“边界感”变量提升var 先上车后补票let/const 直接拒载暂时性死区TDZ别提前偷看美女洗澡重复声明var 的“海王”属性const 不是“常量”锁的是引用地址for 循环 闭包var 留下的史诗级天坑实战口诀一把梭 const不行再 letvar 留给考古队Cannot assign to const 三步排查不抓瞎骚操作解构 const代码又短又安全真实项目踩坑合集写在最后的土味鸡汤别再用var了前端新人搞懂let和const少踩80%的坑友情提示本文全程碎碎念代码片段多到像不要钱建议收藏边嗑瓜子边看。——来自一个曾被var坑到凌晨四点的老前端先甩结论var 就是前任早分早超生我第一次把var换成let的那一刻感觉像是把用了十年的塑料拖鞋扔了换上带气垫的新鞋——脚感瞬间不一样。别急着翻文档先给你整一段“血泪史”// 1. 循环里埋雷炸得你亲妈都不认识for(vari0;i5;i){setTimeout(()console.log(i),1000);// 55555全是5}// 我当时盯着控制台怀疑人生i 不是 0 1 2 3 4 吗怎么全变 5 了// 2. 变量提升代码还没写就先“被声明”console.log(hero);// undefined不报错但逻辑鬼畜varheroironMan;// 等价于// var hero;// console.log(hero);// hero ironMan;// 这感觉就像女神先答应你约会再告诉你她其实有男朋友看完这两行你要是还能淡定地说“var 挺好”那我敬你是条汉子。作用域var 的“老好人” VS let/const 的“边界感”先别整什么“词法作用域”这种高端词咱用菜市场比喻var就像广场舞大妈音乐一响整个广场她都能溜达谁也拦不住。let/const像戴口罩的社恐青年只在自家楼道晃悠出楼道就自动消失。代码说话functionoldLadyDance(){if(true){varvegetables大白菜;}console.log(vegetables);// 大白菜 ✅ 大妈跳完整条街}oldLadyDance();functionyoungGuyWalk(){if(true){letvegetables西兰花;}console.log(vegetables);// ReferenceError ❌ 小伙只在楼道里出现}youngGuyWalk();看到报错别慌这就是let给你立规矩变量只在最近的一层{}里活出来就暴毙。写if/for/while时顺手把var换成letbug 直接少一半亲测有效。变量提升var 先上车后补票let/const 直接拒载变量提升hoist这词听着像吊车其实就一句话js 在编译阶段把声明提前但赋值不提前。// 1. var 的“老赖”操作console.log(a);// undefinedvara1;// 2. let 的“零容忍”console.log(b);// ReferenceError: Cannot access b before initializationletb2;// 3. const 同理console.log(c);// ReferenceErrorconstc3;想更直观把内存当酒店var订房时先把钥匙挂门上不住也挂导致你推门一看“undefined 垃圾房”。let/const必须人到前台才给钥匙提前偷看直接保安TDZ给你叉出去。暂时性死区TDZ别提前偷看美女洗澡TDZ 全称 Temporal Dead Zone翻译过来就是“时间死区”听着像科幻片其实就是在代码真正跑到声明那一行之前你碰都别想碰变量碰就炸。functiontdzDemo(){console.log(typeofhero);// ReferenceErrorletheroBatman;}tdzDemo();很多人用typeof判断有没有全局变量结果在块级作用域里翻车了TDZ 内 typeof 也不管用记住只要你在let/const声明之前访问统统死啦死啦地。重复声明var 的“海王”属性varnameTony;varnameStark;// 完全 OK后者覆盖前者console.log(name);// Starkletname2Tony;letname2Stark;// SyntaxError: Identifier name2 has already been declared看到报错别骂编译器它是你亲哥团队协作时别人如果顺手声明了同名变量let 直接掀桌子避免把 bug 藏到线上。用eslint:prefer-constno-var双剑合璧谁写var直接 CI 红屏比 code review 还快。const 不是“常量”锁的是引用地址刚学const时我天真地以为写const age 18就能永远 18结果对象属性说改就改当场裂开constperson{name:Lucy,age:18};person.age19;// 完全 OKconsole.log(person);// { name: Lucy, age: 19 }// 但你想换人门都没有person{};// TypeError: Assignment to constant variable.原理一句话const 保证的是“绑定的内存地址”不变不保证地址里的内容不变。数组同理constnums[1,2,3];nums.push(4);// ✅ 可以改内部nums[];// ❌ 不能改引用真想深度冻结上Object.freeze()constfrozenHeroObject.freeze({name:Thor,level:99});frozenHero.level100;// 静默失败严格模式会抛 TypeErrorconsole.log(frozenHero.level);// 还是 99注意freeze只是浅冻结嵌套对象还得递归冻俗称“东北大板”functiondeepFreeze(obj){Object.freeze(obj);Object.getOwnPropertyNames(obj).forEach(prop{if(obj[prop]!nulltypeofobj[prop]object){deepFreeze(obj[prop]);}});returnobj;}for 循环 闭包var 留下的史诗级天坑老代码里要是看到下面这种别犹豫直接 refactorvarbtnListdocument.querySelectorAll(button);for(vari0;ibtnList.length;i){btnList[i].onclickfunction(){console.log(当前是第i个按钮);// 全是最后一个 i};}为啥var只有函数作用域没有块级作用域回调执行时i早已飙到btnList.length。三种解法任君 pick// 1. 立即执行函数IIFE老派但稳for(vari0;ibtnList.length;i){(function(index){btnList[index].onclick()console.log(当前是第index个按钮);})(i);}// 2. let 块级作用域最优雅for(leti0;ibtnList.length;i){btnList[i].onclick()console.log(当前是第i个按钮);}// 3. forEach 直接消灭索引烦恼btnList.forEach((btn,index){btn.onclick()console.log(当前是第index个按钮);});实战口诀一把梭 const不行再 letvar 留给考古队总结成一句人话默认全写const后面发现要重新赋值就地改成let如果lint报警告说明你变量设计得有问题先思考再改而不是退回到var。.eslintrc 推荐组合拳{rules:{no-var:error,prefer-const:[error,{destructuring:all}]}}配合 vscode 的eslint --fix保存自动格式化写var直接飘红强迫症患者极度舒适。Cannot assign to const 三步排查不抓瞎看是不是手残重新赋值constapihttps://api.xxx.com;apihttps://new.xxx.com;// ❌ 直接 TypeError看是不是想改 const 对象属性但操作失误constconfig{baseURL:};config.baseURLhttps://new.xxx.com;// ✅ 这是 OK 的看是不是在严格模式 eval 里花式作死严格模式对var的提升也会更苛刻但一般项目都上 babel eslint这条很少踩。骚操作解构 const代码又短又安全// 1. 数组解构const[first,second][10,20];console.log(first,second);// 10 20// 2. 对象解构重命名const{data:userData,error}awaitfetchUser();if(error)throwerror;console.log(userData);// 3. 函数默认参数 解构functioncreateButton({text确定,typeprimary}{}){console.log(text,type);}createButton();// 确定 primarycreateButton({text:取消});// 取消 primary解构虽好可不要贪杯嵌套层级太深时要么用lodash/fp的get要么上TypeScript给类型解构到第五层还不用类型后期维护就是大型考古现场。真实项目踩坑合集webpack 插件里忘记用 let 导致循环变量泄漏插件钩子函数里写for (var i)结果多个 chunk 共用同一个i编译到一半直接串台输出文件名全乱。把var改let后世界瞬间安静。在 node 脚本里用const声明 logger误重新赋值constloggercreateLogger();loggercreateLogger({level:debug});// 脚本直接崩线上 cron 任务挂了一夜早上老板问我为什么报表没跑。从此 cron 脚本也加 eslint 检查别问问就是血泪。老项目 jQuery 插件全局 var 污染维护 2014 年的项目里面全是var $btn、var index各种$btn冲突点击一个按钮三个插件一起响应。用IIFElet重构后bundle 体积还小了 10%鬼知道当年那么多全局变量是怎么跑起来的。写在最后的土味鸡汤写变量就像谈恋爱var是海王见一个爱一个谁都能覆盖头顶一片青青草原let是老实人一次只能一个分手离开作用域就彻底断const是死心眼一旦认定终身不改对象属性可以一起长大但想换人门都没有。别把“小细节”不当回事工程化就是靠这些看似琐碎的约束帮你把 80% 的 bug 掐死在娘胎里。等你哪天在凌晨两点安心睡觉而不用盯着 Sentry 报错时你会回来点赞这篇文章的。好了瓜子嗑完代码抄完把var全删掉吧下一篇文章见。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进