20171129 前端开发日报-前端开发博客

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

如何使用ES6箭头函数使JavaScript代码更易读原文： https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077 箭头函数是搭建现代 Web 应用程序中一种新的基础构件。在本文中，你将会学习箭头函数如何使代码更简洁、使“this”关键字更易于管理；还将学习隐式返回、使用箭头函数记录日志以及隐式返回结合对象一起使用的方法。如果你…
css实现图片背景填充的正六边形最近有个需求需要实现带有图片背景的正六边形，这里记录一下我自己实现的方法。我项目里的最终效果大概是这样子的，这里我们只演示实现一个正六边形。六边形的实现原理其实就是通过旋转三个重叠的矩形得到的，如下图所示：这里为了得到一个正的六边
一个行为标准Popup组件(vue), 强大的过度动画支持, 和定位支持前言之前看过很多的组件库, 但是它们的Popup行为和原生的界面差别不大, 但是行为上面却各种小细节不足, 所以有了这个强调行为标准的popup组件特点支持返回键, 可以按浏览器返回按钮关闭popup 可以写出小复杂的过度动画, 比如磁贴按压效果[在pop
10个有趣的Javascript和CSS库-2017年11月 Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架。每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。 Pretty Checkbox 这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。它提供了不同的形状（正方形，曲…
【20171128 前端开发日报】js中的正则表达式(1)；iOS开发者的大前端感悟：向前端说对不起；GitHub 上 82% 的代码是重复代码；使用 ClojureScript 开发浏览器插件的过程与收获；Node.js 应用的可视化调试与性能分析；用 Jest 测试 JavaScript 应…详情→
JS中动态添加元素并绑定事件，造成程序重复执行歇了两周没写点什么了，感觉最近有点知识慌，分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件，类似于$(‘#point’).on(‘click’,’.read-more’,function () {})这样的代码造成的程序重复执行，很多人在文章里写到了，也说了用off方法来解绑，但都未能点出问题的本质，几乎都忽略了问题的本质其实是事件…
《网页适配 iPhoneX，就是这么简单》对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。（by 凹凸实验室）
妈妈再也不用担心我不会webpack了2 之前写了一篇妈妈再也不用担心我不会webpack了，这次继续对其进行补充。本文依旧是遵循直观易懂的规则进行书写。希望对大家有帮助。如果不太熟悉webpack可以先看看之前的文章妈妈再也不用担心我不会webpack了。下面我们由浅入深来介绍webpack的使用一些你不知道是什么意思的东西（题外话） import path = requir…
vue 踩坑小记 – 如何正确的使用 debounce 我们经常会在页面 resize 的时候做些操作，比如重新渲染一个图表组件，使其自适应当前页面大小，但是 window.resize 事件触发的很频繁，所以我们一般都会加 debounce 做个「去抖」操作，代码如下： import debounce from ‘lodahs/debounce’ export default { methods: { resize: debounce(function () { …
gulp自动化构建工具学习分享 Gulp与Grunt差不多,也是一款构建工具,它能够自动执行我们前端常见的任务, 如编译Sass、Less,压缩js和刷新浏览器等等,以此来改进前端的工作方式,提高生产力. 使用需用安装Node.js 由于Gulp是基于Node.js构建的, 所以在使用Gulp之前,首先安装Node.js(自行搜索node.js安装), 安装Node.js方式非常简单,下…
vue实战中遇到的`坑` 现在的工作项目在用 vue ,前两个有朋友在问我在使用 vue 中有没有遇到一些很难解决的问题，一下我也只能说出一两个，所以索性就抽时间总结一下我在项目中遇到的 vue 的问题，有写的不对的地方，在您时间还允许的情况下，还劳烦大家告诉我哦，我也好尽早修改，以免给看文章的其他同仁带来不必要的麻烦！ —–…
编写一个简单，优雅，可扩展的JS数据校验库Struct 在开发中，经常遇到数据校验，需要一个简单的，精准的优雅校验数据库对一些数据进行校验。场景如下: 配置文件校验与他人对接的数据校验接口参数的校验 and so on… 社区找了一遍，好像并没有我想要的，索性就自己写一个，撸起袖子就是干。本文主要讲解如何使用，以及实现原理。 API…
基于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…
处理 JavaScript 异常的正确姿势译者按：错误是无法避免的，妥善处理它才是最重要的！原文: A Guide to Proper Error Handling in JavaScript Related Topics: 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。如果你相信墨菲定律的话，任何事情如果会出…
JavaScript Promise 学习记录(一) 本文首先介绍了promise的三种状态及生成不同状态promise方法，然后介绍了promise的回调处理方法then,分析了不同情况下then函数返回的promise状态。最后通过promise链，将以上知识点进行串联。希望能够对大家有所帮助。由于作者的能力有限，也正在处于学习阶段，文中不免会有错误，欢迎读者指正。 Promise的三种状态 …
webpack构建下换肤功能的实现思路因为项目是使用webpack构建的，要想生成多份css文件，就要在入口中配置多个入口文件，每个入口文件会提取出一个css文件 config.entry={ app: , defaultTheme: , orangeTheme: , blueTheme:[‘./src/theme.blue….
webpack稳定moduleid和chunkid以实现持久化缓存的梳理如何基于webpack做持久化缓存目前感觉是一直没有一个非常好的方案来实践。网上的文章非常多，但是真的有用的非常少，并没有一些真正深入研究和总结的文章。现在依托于于早教宝线上项目和自己的实践，有了一个完整的方案。正文 1、webpack的hash的两种计算方式想要做持久化缓存那么就要依赖 webpack 自身提供的…
前端js脚本与防止js脚本身为一名前端开发工程师，有时候业务场景是无法用手速模拟的，老司机也有翻车的时候【你懂得】。因此我特意写这一篇文章，希望能够对大家有所帮助。涉及到的内容： 1.chrome浏览器 2.js代码 3.函数节流第一步打开chrome浏览器，使用组合键Ctrl+shift+i打开开发者工具，接下来如图所示。点击snip…
【Swipe-移动前端端触摸滑动插件swipe.js】swipe.js是一个比较有名的前端触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。 #前端开发博客#