文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

能把队友气死的8种屎山代码(React版)

硬编码 硬编码，即一些数据信息或配置信息直接写死在逻辑代码中，例如 这两行代码本意是从url上拿到指定的参数的值，如果没有，会用一个固定的配置做兜底。...解决此类问题，要么将这些内容配置化，即写到一个config文件中，使用清晰的语义化命名变量；要么，至少在硬编码的地方写上注释，交代清楚这里需要硬编码的前因后果。...沐洒： 关于硬编码问题，我在之前的一篇关于“配置管理”的文章里有详细阐述和应对方案，感兴趣的朋友可以看看《小白也能做出满分前端工程：01 配置管理》 4...."; return {data.text}; }; 这样下来，Comp组件就变得身份清爽了。...技术交流群 我建了个前端技术交流群，整体氛围非常好，每天大家都会在群里真诚的交流技术问题，从前端到全栈，从尚未毕业的小年轻，到不惑之年的老大哥，大家都在拼命的汲取知识 。

26030

开发 h5| Hybrid | 微信小程序 ｜ 实践踩坑总结十六条

这篇文章主要是针对 h5| Hybrid | 微信小程序 三个方向来讲述我遇到的坑，以及详细讲解我是如何解决问题的。 一直以来，移动端适配就是一个令人头疼的问题。...如果想要吃透移动端，还需要不少的实践经验，有的时候在pc端调试没有问题，但是在m端就会出现问题。以下这16个问题是我在实际工作中遇到的，亲自奉上给大家。希望大家收藏一波，以备不时之需。...如果圆比较大可能不是很明显，但是如果圆比较小的时候，会出现明显的不圆，圆被拉伸的情况。 大致效果如下所示。 ? ?...④ 如果只有安卓手机被拦截 如果只有安卓手机被拦截的情况，请按照上面的方法，编码带汉字的url。...我们的跳转逻辑是写在一个小程序过渡页面的生命周期中的。具体流程图如下所示： ?

2.3K30
您找到你想要的搜索结果了吗？
是的
没有找到

微前端x重构实践落地总结

前言 大家好，我是海怪。最近换到了新部门，在做智能平台相关的内容。我接到的第一个任务就是把以前前端的项目重构一次。 说是重构，不如说是重写一遍。...所以，我想了一个办法：我在 旁边放了一个组件 Container。进入主应用后，这个组件先直接把微应用整个都加载了。 <!...因为 CSS 的隔离是不能无脑做去做的，下面来讲讲这方面的问题。 qiankun 一共提供了两种 CSS 隔离方法（沙箱）：严格沙箱 以及 实验性沙箱。...这种沙箱的优点也成为了它自己的缺点：除了样式的硬隔离，DOM 元素也直接硬隔离了，导致子应用的一些 Modal、Popover、Drawer 组件会因为找不到主应用的 body 而丢失，甚至跑到整个屏幕之外...那么如果 在主应用里 从 /micro-app/home 切换到 /micro-app/user，会发现子应用的路由并没有改变。但如果你 在主应用的子应用里 去切换，那么就能切换成功。

99420

前段：可能是最全的 “文本溢出截断省略” 方案合集

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？...他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。...；（文本溢出限定的宽度就隐藏内容） line-height: 20px；（结合元素高度，高度固定的情况下，设定行高， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题...如果 B 盒子文本过多，高度超过了 A 盒子，则 C 盒子不会停留在右下方，而是掉到了 A 盒子下。...市面上很多 UI 组件库，都提供了同类组件的封装，如基于 Vue 的 ViewUI Pro，或面向小程序提供组件化解决能力的 MinUI 。

2.1K00

前段：可能是最全的 “文本溢出截断省略” 方案合集

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？...他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。...；（文本溢出限定的宽度就隐藏内容） line-height: 20px；（结合元素高度，高度固定的情况下，设定行高， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题...如果 B 盒子文本过多，高度超过了 A 盒子，则 C 盒子不会停留在右下方，而是掉到了 A 盒子下。...市面上很多 UI 组件库，都提供了同类组件的封装，如基于 Vue 的 ViewUI Pro，或面向小程序提供组件化解决能力的 MinUI 。

2.3K40

iframe的高度自适应_div自适应高度

大家好，又见面了，我是你们的朋友全栈君。...我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。...另外，在兼容性方面，也研究的不彻底。 这篇文章，希望在这两个方面再做一些深入。 可能有人还没接触到这个问题过，先说明一下，什么是自适应高度吧。...如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。...如果读者有更好的方法，请告诉我。

6.7K40

可能是最全的 “文本溢出截断省略” 方案合集

看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？...本文试图通过编码实践，给出一些答案。...，高度固定的情况下，设定行高， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题 响应式截断 短板 单纯截断文字, 不展示省略号，观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号的情况...如果 B 盒子文本过多，高度超过了 A 盒子，则 C 盒子不会停留在右下方，而是掉到了 A 盒子下。...市面上很多 UI 组件库，都提供了同类组件的封装，如基于 Vue 的 ViewUI Pro，或面向小程序提供组件化解决能力的 MinUI。 ? ?

3.1K11

前端 Code Review 指北

前端常见的硬编码场景有： 请求参数和返回对象 比如之前就遇到过，开发同学把 mock 的请求参数 id，放到了线上的情况。...（因为该接口是根据医生 id，拉取评论，评论也是后端灌的假数据，所以在测试阶段都没发现） // 请求参数硬编码 getCommentsApi({ doctorId: 1 }).then((res) =>...如果项目里存在大量注释掉的代码，会降低可读性。...以 1-9、a-z 命名 在项目里我曾经见过不知道怎么命名，就 type1、type2、type3 直接上了，也不写注释。非常让人抓狂。...4.4 尽量使用 CDN 地址的图片 如果代码里引用的是本地图片，构建打包会有耗时。可以在引用之前就把图片传到 cdn 上，代码里直接使用 cdn 地址。 以上就是 CR 的细则了。 手都写麻了。

1.3K20

可能是最全的 “文本溢出截断省略” 方案合集

看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？...本文试图通过编码实践，给出一些答案。...，高度固定的情况下，设定行高， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题 响应式截断 短板 单纯截断文字, 不展示省略号，观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号的情况...如果 B 盒子文本过多，高度超过了 A 盒子，则 C 盒子不会停留在右下方，而是掉到了 A 盒子下。...市面上很多 UI 组件库，都提供了同类组件的封装，如基于 Vue 的 ViewUI Pro，或面向小程序提供组件化解决能力的 MinUI。 ? ?

3.4K20

overflow:hidden属性

nei这个id加了一个浮动，我们常规的理解是，我们允许nei这个id的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。...如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右侧。 这些在ie6里面是正确的。...打个形象的比喻就是当JJ脱离BB的时候，JJ的大小对于BB是没有撑开的作用的（有点少儿不宜的感觉-_-|||） OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释...当我们没有给wai这个div设置高度的时候，nei这个div的高度，就会撑开wai这个div，而在另一个方面，我们要注意到的是，当我们给wai这个div加上一个高度值，那么无论nei这个div的高度是多少...而当nei的高度超过wai的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！ 我相信，通过我的这些文字，大家对overflow:hidden这个属性有了全新的认识。

1.6K10

vue上拉加载更多组件

容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离，当接近0的时候就是到达底部的时候。 明白了这个原理上拉加载就很好实现了。...标签： 这边使用了vue的slot插槽。...Props： props: ['up', 'bottomDistance'], up对应的就是父组件传递的到达底部是触发的方法，'bottomDistance'是可以设置到达底部距离多少的时候触发加载更多的方法...还有就是要移除监听滚动，我试了，跟定时间计时器一样，没有在组件销毁的时候移除，会一直存在。...要说的是，这边没有写加载更多的动画效果，使用的时候可以自定义一个然后隐藏，在触发加载更多的时候显示，加载完之后隐藏，包括已经到底部，都可以自定义。

2K10

如何在 vuePress中添加博客导流公众号-即输入验证码解锁全站文章

那博客里有很多文章,每篇md文件末尾都引入该组件,挺麻烦的 在vuepress中提供了全局注入组件,这里介绍两种方式全局注入组件的,一种是以插件的形式注入,另一种是在enhanceApp.js中全局注入...)全局注册使用混入,Vue.mixin 的介绍 以上同样能够全局注入,实现全站文章的隐藏 03 怎么实现某单篇文章不隐藏 其实上面第一种方式,实现单篇文章的隐藏,那实现指定某一篇文章的不隐藏,同样也很简单.../DOM 中的 API,它就会报错 如果你按照以上的步骤无论是通过import的方式还是通过Vue.mixin的方式,在打包过程中就不会此类问题 之所以介绍两种方式,那是我踩坑之后,才发现的,本地运行好好的...,一打包就出错.算是一个小坑,我的itclanCoder 博客里使用的是Vue.mixin()这种方式全局注入组件实现全站文章隐藏的 你也可以查看如何解决 vuepress 编译打包失败即 window...,这并非真正的隐藏,对于前端同学,实现元素的隐藏并不陌生 不用插件,没有后端服务,也同样可以做到导流到公众号,可以在公众号后台自动回复里添加设置一个固定的值 在vuepress中同样编写全局组件的方式,

3.5K10

动态监听DOM元素高度变化

他需要在内容不超过一个最大高度的时候完全显示所有内容，超过最大内容后仅展示最大高度范围内的内容，超出部分隐藏，并通过一个按钮 “展示更多” 来给用户展示更多的选择。...}} ref={contentRef} /> } 经过上面的一番操作之后，发现根本达不到效果，因为我们的 css 属性根本没有发生变化（我们是通过 maxHeight 来约束容器的高度的）, 但是资源加载完毕之后...经过处理之后，确实在容器高度小于指定高度的时候，“展示更多” 按钮不会展示，超过最大值之后，会将该按钮展示出来， 但是也遇到了一个问题，操作按钮是有高度的，如果我们的内容高度介于最大高度 - 按钮高度...如图所示： 显然这种效果是不符合要求的，我们的 “展示更多” 按钮，只有两种状态，要么全部展示，要么不展示，没有这种部分展示的效果 因此我查阅了相关资料，了解到了 IntersectionObserver...，只是名字不一样而已 它监听的值里面有一个比较重要的属性：intersectionRatio 借助这个 API，我的设计思路是这样的： 当用户滚动网页的时候（或者不滚动，此时目标区域已经出现在屏幕中）

4.9K30

Element scrollbar 使用封装

前言 最近进行 Element UI 组件封装，在之前的项目中经常用到 el-scrollbar 这个内置组件，这次单独封装时遇到点写法上的小问题，做个记录和分享，希望能帮到相关的开发者。.../scrollbar scrollbar.png 在 Vue 页面中直接引入 el-scrollbar 标签，定义对应的高度就可以实现 element 官方的滚动条效果 这时候，默认效果的纵向滚动条有了，但是横向会出现浏览器默认的滚动条占位，如下效果 scrollbar2.png 默认的横向滚动条隐藏可以设置 el-scrollbar...important; } 有的项目里 标签里如果使用了 scss 并且使用了 scoped 属性的话，需要使用 deep 操作符....tag 页签功能区使用了横向滚动条，隐藏了纵向滚动条，由于自定义的需求，在实际使用时需要根据情况设置对应的边距问题，这里调整的时候还需要隐藏原生滚动条，这时候需要耐心一点才能调出想要的页面效果。

89510

如何编写高质量的 JS 函数（4） --函数式编程

技巧点如下： 1、注意函数中变量的类型和变量的作用域 （1）如果是值类型 -- 组合函数/高阶性 这可能是一个硬编码，不够灵活性，你可能需要进行处理了，如何处理呢？...代码如下： document.querySelector('#msg').innerHTML = 'Hello World'' 我们来欣赏一下上面的代码： 第一：硬编码味道很重，代码都是写死的...和前端的组件进行对比来深刻的理解组合函数 函数的组合思想是面向过程的一种封装，而前端的组件思想是面对对象的一种封装。...所以如果按照上面的代码，我们会发现，每次都要写 is.object(res.data) 这是不能容忍的一件事。我们能不能做到不写这个判断呢？...底层本质上还是用 for 实现的，只不过是把 for 循环隐藏了，如果按照业界内的说话逼格，就是把 for 循环干掉了。这就是声明式编程在前端中的应用之一。

1.9K41

详细设计一个文章页目录插件

基于此，就可以很好的利用该生成的页面实现一个目录，便于更直观方便的的浏览文章内容，而这就是最初我想为博客里的文章页实现一个目录功能的理由。...所以需要做的就是在一个划定的区域内滚动目录，超出该区域的目录子项将会自动隐藏。通过滚动目录，我们可以实现目录列表的头尾两个目录子项都能很好的在划定区域里显示出来。...，如上面的图 ③ 到图 ④ 的变化过程； 如果这个高度差过于大，使得滚动后最后一个子元素不能贴着滚动区域底部的时候，则不按照这个高度差进行滚动，而真实需要滚动的距离是最后一个子目录到滚动区域底部的距离，...并没有，由于浏览器可视区域是不固定的，所以我们需要计算出目录所在滚动区域的高度。...浏览器视口高度变了怎么办 因为我们的滚动高度是根据浏览器视口高度计算出来的，如果浏览器视口高度变化了，那这个时候再去滚动页面，那肯定会出问题的。

2.4K20

Apache Tomcat CVE-2020-1938，细思极恐

比如某些隐藏API或者参数、业务逻辑漏洞等，在有源代码的情况，能够极大的缩短攻击者找到这些漏洞的时间。对了，如果你把密钥硬编码到源码里（希望你早就不这么干了），同样也会泄露。...不要把密钥硬编码到源代码里，这是人尽皆知的共识，一方面是担心密钥随着源码泄露而泄露，另一方面也是便于维护，轮换密钥可以更加容易一些。...既然密钥不硬编码到源代码，那这些密钥总要有一个地方存放吧，大多数时候密钥会被存放在一个properties文件里，并且和源代码存放于同一个代码仓库。...（把密钥放到properties文件里是非常常见的做法） 以上做法看上去似乎有助于保护密钥不泄露，但这次的Apache Tomcat 文件包含漏洞估计让不少团队吓出一身冷汗：不管你是硬编码还是费尽心思的通过划分代码仓库来管理...---- 安全原则有时候说不定能救你一命 如果你的架构设计遵循了安全原则，就算你把密钥硬编码到源代码或者放到了properties文件里，那也不意味着就一定会被攻击者获取到（排除运气成分）。

1.5K20

weex-09-组件text的用法

本节任务 学习text组件的使用 text 组件干什么的? 是Weex内置的组件，用来将文本按照指定的样式呈染出来 主要教会你什么？...1A3F1055-7706-4EF3-AF03-1642927C2064.png 第二步 在打包的入口文件app.js里修改根组件为text.vue import text from '....5E347CE4-5A6F-4183-A2B8-07AE0E9BBFB7.png 我们发现text组件的值 没有垂直居中,现在我们使用下面的样式让其居中 line-height: 100px; // 设置文字的行高和组件的高度一致...> 语法 {{变量}},使用双大括号将变量包起来即可 此时如果方法中更改了变量的值，组件显示的值会立刻被刷新 ?...B85B292C-0678-4B90-AB4D-840F2C78D850.png 13.超过指定长度隐藏文字 如果你设置了宽度,和行数,文字会自动隐藏,但是如果你使用了弹性布局方式呢？

1.5K20

如何使用纯 CSS 制作四子连珠游戏

有时候，预处理程序用于硬编码每个可能的场景，比如 :checked 的长字符串和相邻兄弟选择器。 在本文中，我将介绍使用纯CSS 制作的四子连珠游戏的关键思想。...在我的实验中，我尽量避免硬编码，并且不使用预处理器，专注于保持代码的简洁。...这些 checkbox 是直接的兄弟类，所以如果选中第一个之后，可以使用 :checked 伪类和相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢？你可以隐藏第二个，但是怎么才能影响第一个呢？...尽管如此，我认为演示的代码还是比较短的。它应该是在中间的某个地方，从硬编码一个选择器到使用 4 个神奇的选择器（列，行，两个对角线）。 ? 当有玩家获得胜利就会显示一条信息。...限制 最实质性的缺点是，由于轮流游戏的解决方案不可靠，游戏板没有响应，并且可能在小的视图窗口上出现故障。我不敢冒险重构响应式的解决方案，由于实现的本质，硬编码看起来更安全。

1.9K20

前端学习(13)~css学习(七)：浮动

也就是说： 此时这个span能够设置宽度、高度 此时这个span必须霸占一行了，别人无法和他并排 如果不设置宽度，将撑满父亲 举例如下： image.png 标准流里面的限制非常多，导致很多页面效果无法实现...iv本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩 浮动的补充（做网站时注意） ? 上图所示，将para1和para2设置为浮动，它们是div的儿子。...下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下： ? 上面这个例子很简单。可如果我们给里面的标签加浮动。效果却成了下面这个样子： ?...举例如下： （1）我们在一个div里放一个有宽高的p，效果如下：（很简单） ? （2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了： ?...（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度： ? 于是，我们采用内墙法解决前言中的问题： ?

87210
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券