You-Dont-Need : 你不需要系列

1 You-Dont-Need-JavaScript

CSS是强大的,你可以做很多事情没有JS。 本文教你使用原生CSS做下面的事情。

内容目录

  • 手风琴/切换
  • 圆盘传送带
  • 检查复选框的计数器
  • 翻转点击
  • Textfield上的浮动标签
  • 字体(拉丁)
  • 游戏
  • 悬停/弹出信息
  • 图片廊
  • 菜单
  • 移动菜单关闭画布
  • 汉堡菜单
  • 花式菜单
  • 莫代尔/弹出
  • 鼠标跟踪
  • 视差滚动
  • 标签
  • 待办事项列表
  • 提示
  • 树视图
  • Twitter心动画
  • 动态图像着色
  • 连锁反应
  • 响应式计数器显示不适合屏幕的项目数量

可以看一下纯CSS的例子

2 You-Dont-Need-Lodash-Underscore

Lodash和Underscore是伟大的现代JavaScript实用程序库,它们被前端开发人员广泛使用。但是,如果您将目标锁定为现代浏览器,则可能会发现,许多方法已经得到ES5和ES6的原生支持。如果你想要你的项目需要更少的依赖,并且你清楚的知道你的目标浏览器,那么你可能不需要Lodash / Underscore。

来自开发者的声音

  • 在代码变臃肿之前,请使用原生JS对象和数组工具函数. —Cody Lindley, Author of jQuery Cookbook and JavaScript Enlightenment
  • 你可能不需要lodash. 有许多好用的原生方法了. —Daniel Lamb, Computer Scientist, Technical Reviewer of Secrets of the JavaScript Ninja and Functional Programming in JavaScript
  • 我想不是,但我想要它. —Tero Parviainen, Author of build-your-own-angular
  • 我承认,我曾经过度使用lodash. —@therebelrobot, Maker of web things, Facilitator for Node.js/io.js

内容目录

  • Array

    • _.compact
    • _.concat
    • _.fill
    • _.find
    • _.findIndex
    • _.first
    • _.flatten
    • _.flattenDeep
    • _.head and _.tail
    • _.indexOf
    • _.join
    • _.last
    • _.lastIndexOf
    • _.reverse
    • _.without
    • _.slice
    • _.isArray
  • Collection

    • _.each
    • _.every
    • _.filter
    • _.groupBy
    • _.includes
    • _.map
    • _.minBy and _.maxBy
    • _.pluck
    • _.range
    • _.reduce
    • _.reduceRight
    • _.size
    • _.some
  • Function

    • _.after
  • Lang

    • _.isNaN
  • Object

    • _.assign
    • _.keys
    • _.toPairs
    • _.values
  • String

    • _.repeat
    • _.template
    • _.toLower
    • _.toUpper
    • _.trim
    • _.replace

3 You-Dont-Need-jQuery

纯JavaScript的例子, 实现做jQuery与查询,样式,dom,ajax,事件等

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。

内容目录

  • Translations
  • Query Selector
  • CSS & Style
  • DOM Manipulation
  • Ajax
  • Events
  • Utilities
  • Promises
  • Animation
  • Alternatives
  • Browser Support

You-Dont-Need-GUI

图形用户界面对计算机用户非常友好。它们被引入以响应命令行界面(CLI)感知的陡峭学习曲线。

但是,他们往往需要更多的资源,功能不强,难以通过脚本自动化。

作为计算机专家,我们希望更高效,更好地完成工作。我们知道命令字可能不容易被发现或助记符,所以我们尝试列出一些您可能试图在GUI中执行的常见任务。

内容目录

  • 复制一个文件
  • 复制一个文件
  • 复制一个文件夹
  • 复制一个文件夹
  • 移动一个文件
  • 重命名一个文件
  • 移动一个文件夹
  • 重命名文件夹
  • 合并文件夹
  • 创建一个新的文件
  • 新建一个文件夹
  • 显示文件/文件夹大小
  • 用默认程序打开一个文件
  • 压缩一个文件夹
  • 解压缩文件夹
  • 删除一个文件
  • 删除一个文件夹
  • 列出文件夹内容
  • 树查看文件夹及其子文件夹
  • 找到一个陈旧的文件
  • 显示一个日历
  • 找到未来的日期
  • 使用计算器
  • 强制退出程序

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vue.js的生命周期钩子函数和原生JavaScript来实现实时显示当前时间并格式化输出。 首先,在Vue组件中,你可以使用data选项来定义一个变量来保存当前时间,例如: ``` <template> <div> {{ currentTime }} </div> </template> <script> export default { data() { return { currentTime: '' } }, mounted() { setInterval(() => { this.currentTime = this.formatDate(new Date()) }, 1000) }, methods: { formatDate(date) { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hours = date.getHours() const minutes = date.getMinutes() const seconds = date.getSeconds() return `${year}-${this.padZero(month)}-${this.padZero(day)} ${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}` }, padZero(num) { return num < 10 ? `0${num}` : num } } } </script> ``` 在上面的代码中,我们定义了一个名为currentTime的变量,然后在mounted生命周期钩子函数中使用setInterval函数每秒更新一次该变量的值。我们还定义了一个名为formatDate的方法来格式化日期,该方法接收一个Date对象作为参数,并返回格式化后的字符串。该方法使用了ES6模板字符串和JavaScript的Date对象的方法来获取年月日时分秒。我们还定义了一个名为padZero的方法来将单数的数字前面补零。 最后,在模板中,我们使用双括号绑定语法来显示currentTime变量的值。 当组件被挂载时,setInterval函数会每秒执行一次回调函数,更新currentTime变量的值。每次更新时,Vue.js会自动更新模板中双括号绑定的值,从而实现实时显示当前时间的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值