国家战略忽悠局

国家战略忽悠局 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

国家战略忽悠局 关注了专栏 · 1月16日

终身学习者

我要先坚持分享20年,大家来一起见证吧。

关注 41321

国家战略忽悠局 赞了回答 · 1月11日

解决Sequelize的实例没必要共用吗?

其实你这个问题和会不会重复建立连接池无关,而是和CommonJS模块加载相关的问题;

如果你了解koa,你可以像我这样写一个demo,去体会commonJs的加载过程

// config.js
const date = (() => {
    console.log('init');
    return  new  Date();
})();

module.exports = {
   date,
}
// 404.js
const { date, } = require('../configs');

module.exports = async (ctx, next)=> {  
    ctx.body = '404 page!';
    console.log('date', date.getTime());
    await next();
}
// hello.js
const { date, } = require('../configs');

module.exports = async (ctx, next)=> {  
    ctx.body = 'hello page!';
    console.log('date', date.getTime());
    await next();
}

然后在router中去引用上面两个处理函数:

const page = new Router()
page.get('/404', notFount)
  .get('/helloworld', helloworld)

最后你去访问,然后发现,date的只会声明一次,而且404和hello两个文件,指向的是同一个date,发现他们打印的时间戳完全一样;所以,并不会出现你想的那种情况;

结论是:commonJs不同文件加载同一个模块,这个模块只会被声明一次,下一次加载时,其实加载的是这个文件的缓存;done!!!

关注 3 回答 3

国家战略忽悠局 提出了问题 · 1月10日

解决Sequelize的实例没必要共用吗?

小白初学者,不要见笑~
看到很多文章,在使用sequelize的时候,一般新建一个连接数据库的文件,例如db.js,里面new Sequelize()并导出sequelize实例。每个model都是一个单独的文件,每个文件都需要导入db.js
请问,这样是不是会反复建立新的连接?谢谢!

关注 3 回答 3

国家战略忽悠局 赞了回答 · 2019-11-08

解决Promise.resolve有什么用处?

用来创建微任务,更新视图的时候非常有用

Promise.resolve().then(() => console.log('456'));
console.log('123');

关注 5 回答 4

国家战略忽悠局 赞了回答 · 2019-11-08

解决Promise.resolve有什么用处?

当你的数据不是promise实例,或者你不知道他是不是promise,而你又想把他当做promise实例来使用的时候

比如如果本地有数据data返回data,没有则请求

Promise.resolve(data ? data : getData()).then(...)

关注 5 回答 4

国家战略忽悠局 赞了回答 · 2019-11-08

解决Promise.resolve有什么用处?

跟楼上的差不多,不过我喜欢这么用:

// 如果本地有数据就不请求,没有就请求
const p = data ? Promise.resolve(data) : getData();
p
  .then(result => {
    // 数据处理
  });

关注 5 回答 4

国家战略忽悠局 提出了问题 · 2019-11-07

解决Promise.resolve有什么用处?

Promise.resolve()

有时需要将现有对象转为 Promise 对象,Promise.resolve()方法就起到这个作用。

如题,什么情况下需要将现有对象转换成Promise对象?谢谢!

关注 5 回答 4

国家战略忽悠局 赞了回答 · 2019-11-07

解决微信小程序navigationStyle设置为custom后,如何解决适配问题?

适配思路是对的。

wx.getMenuButtonBoundingClientRect 这个方法需要基础库大于等于 2.1.0 才可以支持。

如果你没在后台设置允许的最低版本,用户可能使用的比这个版本低的导致不能正确取值。

另外官方在开发者社区中曾建议在组件的 ready、页面的 onShow 等生命周期中调用此方法,防止因时序问题带来的影响。

另外建议设个最小值而不要用 0 做兜底,像状态栏最小高度应该是 16px,胶囊按钮的 bottom 最小值应该是 58px(即标题栏最小高度是 58-16=42px)。这些都是非异形屏的最小值了,各种刘海屏挖孔屏的取值只会比这个大。

关注 1 回答 1

国家战略忽悠局 提出了问题 · 2019-11-07

解决微信小程序navigationStyle设置为custom后,如何解决适配问题?

在不同的手机中,胶囊到屏幕顶端的距离是不同的,为了让自定义的搜索框和胶囊对齐,我在header组件attached事件中获取了胶囊的位置:

wx.getMenuButtonBoundingClientRect()

然后通过一些计算,算出header组件padding-top:

9626211F-AA20-4a88-A7CE-CB2EC7A6C126.png

但是在有些手机中这样不起作用(由于没有测试机,不清楚是哪里的位置或者高度没有获取到)。

请教有什么其他的好的适配方法吗?

关注 1 回答 1

国家战略忽悠局 收藏了文章 · 2019-11-04

灵活运用CSS开发技巧

作者:JowayYoung
仓库:GithubCodePen
博客:掘金思否知乎简书头条CSDN
公众号:IQ前端
联系我:关注公众号后有我的微信
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,希望各位尊重原创的知识产权

系列

前言

何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。

每写好一篇文章,都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等,这些应该都是我们从小到大写文章而接触到的写作技巧。

作为程序猿的我们,写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解,让人舒服自然,同时也让自己成就感满满(哈哈,这个才是重点)。因此,我整理下三年来自己使用到的一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。

目录

既然写文章有这么多的写作技巧,那么我也需要对CSS开发技巧整理一下,起个易记的名字。

  • Layout Skill:布局技巧
  • Behavior Skill:行为技巧
  • Color Skill:色彩技巧
  • Figure Skill:图形技巧
  • Component Skill:组件技巧

备注

  • 代码只作演示用途,不会详细说明语法
  • 部分技巧示例代码过长,使用CodePen进行保存,点击在线演示即可查看
  • 兼容项点击链接即可查看当前属性的浏览器兼容数据,自行根据项目兼容需求考虑是否使用
  • 以下代码全部基于CSS进行书写,没有任何JS代码,没有特殊说明的情况下所有属性和方法都是CSS类型
  • 一部分技巧是自己探讨出来的,另一部分技巧是参考各位前端大神们的,都是一个互相学习的过程,大家一起进步

Layout Skill

使用vw定制rem自适应布局
  • 要点:移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制
  • 场景:rem页面布局(不兼容低版本移动端系统)
  • 兼容:vwcalc())
/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}
使用:nth-child()选择指定元素
  • 要点:通过:nth-child()筛选指定的元素设置样式
  • 场景:表格着色边界元素排版(首元素、尾元素、左右两边元素)
  • 兼容::nth-child())
  • 代码:在线演示

在线演示

使用writing-mode排版竖文
  • 要点:通过writing-mode调整文本排版方向
  • 场景:竖行文字文言文诗词
  • 兼容:writing-mode
  • 代码:在线演示

在线演示

使用text-align-last对齐两端文本
  • 要点:通过text-align-last:justify设置文本两端对齐
  • 场景:未知字数中文对齐
  • 兼容:text-align-last
  • 代码:在线演示

在线演示

使用:not()去除无用属性
  • 要点:通过:not()排除指定元素不使用设置样式
  • 场景:符号分割文字边界元素排版(首元素、尾元素、左右两边元素)
  • 兼容::not())
  • 代码:在线演示

在线演示

使用object-fit规定图像尺寸
  • 要点:通过object-fit使图像脱离background-size的约束,使用<img>来标记图像背景尺寸
  • 场景:图片尺寸自适应
  • 兼容:object-fit
  • 代码:在线演示

在线演示

使用overflow-x排版横向列表
  • 要点:通过flexboxinline-block的形式横向排列元素,对父元素设置overflow-x:auto横向滚动查看
  • 场景:横向滚动列表元素过多但位置有限的导航栏
  • 兼容:overflow-x
  • 代码:在线演示

在线演示

使用text-overflow控制文本溢出

在线演示

使用transform描绘1px边框
  • 要点:分辨率比较低的屏幕下显示1px的边框会显得模糊,通过::before::aftertransform模拟细腻的1px边框
  • 场景:容器1px边框
  • 兼容:transform
  • 代码:在线演示

在线演示

使用transform翻转内容
  • 要点:通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)
  • 场景:内容翻转
  • 兼容:transform
  • 代码:在线演示

在线演示

使用letter-spacing排版倒序文本
  • 要点:通过letter-spacing设置负值字体间距将文本倒序
  • 场景:文言文诗词
  • 兼容:letter-spacing
  • 代码:在线演示

在线演示

使用margin-left排版左重右轻列表
  • 要点:使用flexbox横向布局时,最后一个元素通过margin-left:auto实现向右对齐
  • 场景:右侧带图标的导航栏
  • 兼容:margin
  • 代码:在线演示

在线演示

Behavior Skill

使用overflow-scrolling支持弹性滚动
  • 要点:iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况),通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动,增加页面滚动的流畅度
  • 场景:iOS页面滚动
  • 兼容:iOS自带-webkit-overflow-scrolling
body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}
使用transform启动GPU硬件加速
  • 要点:有时执行动画可能会导致页面卡顿,可在特定元素中使用硬件加速来避免这个问题
  • 场景:动画元素(绝对定位、同级中超过6个以上使用动画)
  • 兼容:transform
.elem {
    transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
使用attr()抓取data-*
  • 要点:在标签上自定义属性data-*,通过attr()获取其内容赋值到content
  • 场景:提示框
  • 兼容:data-*attr())
  • 代码:在线演示

在线演示

使用:valid和:invalid校验表单

在线演示

使用pointer-events禁用事件触发
  • 要点:通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于<button>disabled
  • 场景:限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)
  • 兼容:pointer-events
  • 代码:在线演示

在线演示

使用+或~美化选项框
  • 要点:<label>使用+~配合for绑定radiocheckbox的选择行为
  • 场景:选项框美化选中项增加选中样式
  • 兼容:+~
  • 代码:在线演示

在线演示

使用:focus-within分发冒泡响应

在线演示

使用:hover描绘鼠标跟随
  • 要点:将整个页面等比划分成小的单元格,每个单元格监听:hover,通过:hover触发单元格的样式变化来描绘鼠标运动轨迹
  • 场景:鼠标跟随轨迹水波纹怪圈
  • 兼容::hover
  • 代码:在线演示

在线演示

使用max-height切换自动高度
  • 要点:通过max-height定义收起的最小高度和展开的最大高度,设置两者间的过渡切换
  • 场景:隐藏式子导航栏悬浮式折叠面板
  • 兼容:max-height
  • 代码:在线演示

在线演示

使用transform模拟视差滚动

在线演示

使用animation-delay保留动画起始帧
  • 要点:通过transform-delayanimation-delay设置负值时延保留动画起始帧,让动画进入页面不用等待即可运行
  • 场景:开场动画
  • 兼容:transformanimation
  • 代码:在线演示

在线演示

使用resize拉伸分栏
  • 要点:通过resize设置横向自由拉伸来调整目标元素的宽度
  • 场景:富文本编辑器分栏阅读
  • 兼容:resize
  • 代码:在线演示

在线演示

Color Skill

使用color改变边框颜色
  • 要点:border没有定义border-color时,设置color后,border-color会被定义成color
  • 场景:边框颜色与文字颜色相同
  • 兼容:color
.elem {
    border: 1px solid;
    color: #f66;
}

在线演示

使用filter开启悼念模式
  • 要点:通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
  • 场景:网站悼念
  • 兼容:filter
  • 代码:在线演示

在线演示

使用::selection改变文本选择颜色
  • 要点:通过::selection根据主题颜色自定义文本选择颜色
  • 场景:主题化
  • 兼容:::selection
  • 代码:在线演示

在线演示

使用linear-gradient控制背景渐变
  • 要点:通过linear-gradient设置背景渐变色并放大背景尺寸,添加背景移动效果
  • 场景:主题化彩虹背景墙
  • 兼容:gradientanimation
  • 代码:在线演示

在线演示

使用linear-gradient控制文本渐变

在线演示

使用caret-color改变光标颜色
  • 要点:通过caret-color根据主题颜色自定义光标颜色
  • 场景:主题化
  • 兼容:caret-color
  • 代码:在线演示

在线演示

使用::scrollbar改变滚动条样式
  • 要点:通过scrollbarscrollbar-trackscrollbar-thumb等属性来自定义滚动条样式
  • 场景:主题化页面滚动
  • 兼容:::scrollbar
  • 代码:在线演示

在线演示

使用filter模拟Instagram滤镜
  • 要点:通过filter的滤镜组合起来模拟Instagram滤镜
  • 场景:图片滤镜
  • 兼容:filter
  • 代码:在线演示css-gram

在线演示

Figure Skill

使用div描绘各种图形
  • 要点:<div>配合其伪元素(::before::after)通过cliptransform等方式绘制各种图形
  • 场景:各种图形容器
  • 兼容:cliptransform
  • 代码:在线演示
使用mask雕刻镂空背景

在线演示

使用linear-gradient描绘波浪线
  • 要点:通过linear-gradient绘制波浪线
  • 场景:文字强化显示文字下划线内容分割线
  • 兼容:gradient
  • 代码:在线演示

在线演示

使用linear-gradient描绘彩带
  • 要点:通过linear-gradient绘制间断颜色的彩带
  • 场景:主题化
  • 兼容:gradient
  • 代码:在线演示

在线演示

使用conic-gradient描绘饼图
  • 要点:通过conic-gradient绘制多种色彩的饼图
  • 场景:项占比饼图
  • 兼容:gradient
  • 代码:在线演示

在线演示

使用linear-gradient描绘方格背景
  • 要点:使用linear-gradient绘制间断颜色的彩带进行交互生成方格
  • 场景:格子背景占位图
  • 兼容:gradient
  • 代码:在线演示

在线演示

使用box-shadow描绘单侧投影

在线演示

使用filter描绘头像彩色阴影
  • 要点:通过filter:blur() brightness() opacity()模拟阴影效果
  • 场景:头像阴影
  • 兼容:filter
  • 代码:在线演示

在线演示

使用box-shadow裁剪图像
  • 要点:通过box-shadow模拟蒙层实现中间镂空
  • 场景:图片裁剪新手引导背景镂空投射定位
  • 兼容:box-shadow
  • 代码:在线演示

在线演示

使用outline描绘内边框
  • 要点:通过outline设置轮廓进行描边,可设置outline-offset设置内描边
  • 场景:内描边外描边
  • 兼容:outline
  • 代码:在线演示

在线演示

Component Skill

迭代计数器

在线演示

下划线跟随导航栏
  • 要点:下划线跟随鼠标移动的导航栏
  • 场景:动态导航栏
  • 兼容:+
  • 代码:在线演示

在线演示

气泡背景墙

在线演示

滚动指示器

在线演示

故障文本

在线演示

换色器

在线演示

状态悬浮球

在线演示

粘粘球

在线演示

商城票券
  • 要点:边缘带孔和中间折痕的票劵
  • 场景:电影票代金券消费卡
  • 兼容:gradient
  • 代码:在线演示

在线演示

倒影加载条

在线演示

三维立方体

在线演示

动态边框
  • 要点:鼠标悬浮时动态渐变显示的边框
  • 场景:悬浮按钮边框动画
  • 兼容:gradient
  • 代码:在线演示

在线演示

标签页

在线演示

标签导航栏
  • 要点:可切换内容的导航栏
  • 场景:页面切换
  • 兼容:~
  • 代码:在线演示

在线演示

折叠面板
  • 要点:可折叠内容的面板
  • 场景:隐藏式子导航栏
  • 兼容:~
  • 代码:在线演示

在线演示

星级评分
  • 要点:点击星星进行评分的按钮
  • 场景:评分
  • 兼容:~
  • 代码:在线演示

在线演示

加载指示器

在线演示

自适应相册

在线演示

圆角进度条

在线演示

螺纹进度条

在线演示

立体按钮

在线演示

混沌加载圈

在线演示

蛇形边框

在线演示

自动打字
  • 要点:逐个字符自动打印出来的文字
  • 场景:代码演示文字输入动画
  • 兼容:chanimation
  • 代码:在线演示

在线演示

总结

写到最后总结得差不多了,如果后续我想起还有哪些遗漏的CSS开发技巧,会继续在这篇文章上补全。

最后送大家一个键盘!

(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

结语

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔

  • 关注后回复关键词免费领取视频教程
  • 关注后添加我微信拉你进技术交流群
  • 欢迎关注IQ前端,更多CSS/JS开发技巧只在公众号推送

查看原文

认证与成就

  • 获得 22 次点赞
  • 获得 86 枚徽章 获得 0 枚金徽章, 获得 24 枚银徽章, 获得 62 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-01-06
个人主页被 756 人浏览