20171129 前端开发日报

如何使用ES6箭头函数使JavaScript代码更易读;css实现图片背景填充的正六边形;一个行为标准Popup组件(Vue), 强大的过度动画支持, 和定位支持;10个有趣的Javascript和CSS库-2017年11月;20171128 前端开发日报;JS中动态添加元素并绑定事件,造成程序重复执行;网页适配 iPhoneX,就是这么简单;妈妈再也不用担心我不会webpack了2

  1. 如何使用ES6箭头函数使JavaScript代码更易读 原文: https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077 箭头函数是搭建现代 web 应用程序中一种新的基础构件。在本文中,你将会学习箭头函数如何使代码更简洁、使“this”关键字更易于管理;还将学习隐式返回、使用箭头函数记录日志以及隐式返回结合对象一起使用的方法。 如果你...
  2. css实现图片背景填充的正六边形 最近有个需求需要实现带有图片背景的正六边形,这里记录一下我自己实现的方法。 我项目里的最终效果大概是这样子的,这里我们只演示实现一个正六边形。 六边形的实现原理其实就是通过旋转三个重叠的矩形得到的,如下图所示: 这里为了得到一个正的六边
  3. 一个行为标准Popup组件(vue), 强大的过度动画支持, 和定位支持 前言之前看过很多的组件库, 但是它们的Popup行为和原生的界面差别不大, 但是行为上面却各种小细节不足, 所以有了这个强调行为标准的popup组件 特点 支持返回键, 可以按浏览器返回按钮关闭popup 可以写出小复杂的过度动画, 比如磁贴按压效果[在pop
  4. 10个有趣的Javascript和CSS库-2017年11月 Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架。 每个Tailwind小应用都有多种尺寸,这使得创建响应式界面变得非常简单。 您可以自定义颜色,边框尺寸,字体,阴影等等,没有任何限制。 Pretty Checkbox 这是一个纯CSS库,用于创建漂亮的复选框和单选按钮。 它提供了不同的形状(正方形,曲...
  5. 20171128 前端开发日报】js中的正则表达式(1);ios开发者的大前端感悟:向前端说对不起;GitHub 上 82% 的代码是重复代码;使用 ClojureScript 开发浏览器插件的过程与收获;Node.js 应用的可视化调试与性能分析;用 Jest 测试 JavaScript 应...详情→ ​​​

    20171128 前端开发日报
  6. JS中动态添加元素并绑定事件,造成程序重复执行 歇了两周没写点什么了,感觉最近有点知识慌,分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行,很多人在文章里写到了,也说了用off方法来解绑,但都未能点出问题的本质,几乎都忽略了问题的本质其实是事件...
  7. 网页适配 iPhoneX,就是这么简单》对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。 (by 凹凸实验室) ​​​

    网页适配 iPhoneX,就是这么简单
  8. 妈妈再也不用担心我不会webpack了2 之前写了一篇妈妈再也不用担心我不会webpack了,这次继续对其进行补充。本文依旧是遵循直观易懂的规则进行书写。希望对大家有帮助。如果不太熟悉webpack可以先看看之前的文章 妈妈再也不用担心我不会webpack了 。下面我们由浅入深来介绍webpack的使用 一些你不知道是什么意思的东西(题外话) import path = requir...
  9. vue 踩坑小记 - 如何正确的使用 debounce 我们经常会在页面 resize 的时候做些操作,比如重新渲染一个图表组件,使其自适应当前页面大小, 但是 window.resize 事件触发的很频繁,所以我们一般都会加 debounce 做个「去抖」操作,代码如下: import debounce from 'lodahs/debounce' export default { methods: { resize: debounce(function () { ...
  10. gulp自动化构建工具学习分享 Gulp与Grunt差不多,也是一款构建工具,它能够自动执行我们前端常见的任务, 如编译Sass、Less,压缩js和刷新浏览器等等,以此来改进前端的工作方式,提高生产力. 使用需用 安装Node.js 由于Gulp是基于Node.js构建的, 所以在使用Gulp之前,首先安装Node.js(自行搜索node.js安装), 安装Node.js方式非常简单,下...
  11. vue实战中遇到的`坑` 现在的工作项目在用 vue ,前两个有朋友在问我在使用 vue 中有没有遇到一些很难解决的问题,一下我也只能说出一两个,所以索性就抽时间总结一下我在项目中遇到的 vue 的问题,有写的不对的地方,在您时间还允许的情况下,还劳烦大家告诉我哦,我也好尽早修改,以免给看文章的其他同仁带来不必要的麻烦! -----...
  12. 编写一个简单,优雅,可扩展的JS数据校验库Struct 在开发中,经常遇到数据校验,需要一个简单的,精准的优雅校验数据库对一些数据进行校验。 场景如下: 配置文件校验 与他人对接的数据校验 接口参数的校验 and so on... 社区找了一遍,好像并没有我想要的,索性就自己写一个,撸起袖子就是干。 本文主要讲解如何使用,以及实现原理。 API...
  13. 基于vue+canvas的excel-like组件 a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用Canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能。 vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your p...
  14. 处理 JavaScript 异常的正确姿势 译者按: 错误是无法避免的,妥善处理它才是最重要的! 原文: A Guide to Proper Error Handling in JavaScript Related Topics: 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 如果你相信墨菲定律的话,任何事情如果会出...
  15. JavaScript Promise 学习记录(一) 本文首先介绍了promise的三种状态及生成不同状态promise方法,然后介绍了promise的回调处理方法then,分析了不同情况下then函数返回的promise状态。最后通过promise链,将以上知识点进行串联。希望能够对大家有所帮助。由于作者的能力有限,也正在处于学习阶段,文中不免会有错误,欢迎读者指正。 Promise的三种状态 ...
  16. webpack构建下换肤功能的实现思路 因为项目是使用webpack构建的,要想生成多份css文件,就要在入口中配置多个入口文件, 每个入口文件会提取出一个css文件 config.entry={ app: , defaultTheme: , orangeTheme: , blueTheme:['./src/theme.blue....
  17. webpack稳定moduleid和chunkid以实现持久化缓存的梳理 如何基于webpack做持久化缓存目前感觉是一直没有一个非常好的方案来实践。网上的文章非常多,但是真的有用的非常少,并没有一些真正深入研究和总结的文章。现在依托于于早教宝线上项目和自己的实践,有了一个完整的方案。 正文 1、webpack的hash的两种计算方式 想要做持久化缓存那么就要依赖 webpack 自身提供的...
  18. 前端js脚本与防止js脚本 身为一名前端开发工程师,有时候业务场景是无法用手速模拟的,老司机也有翻车的时候【你懂得】。因此我特意写这一篇文章,希望能够对大家有所帮助。 涉及到的内容: 1.chrome浏览器 2.js代码 3.函数节流 第一步 打开chrome浏览器,使用组合键Ctrl+shift+i打开开发者工具,接下来如图所示。 点击snip...
  19. Swipe-移动前端端触摸滑动插件swipe.js】swipe.js是一个比较有名的前端触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常可见使用在移动前端开发中。 #前端开发博客# ​​​

    Swipe-移动前端端触摸滑动插件swipe.js

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20171129 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20171129.html)