20171204 前端开发周报-前端开发博客

css实现图片背景填充的正六边形；网页适配 iPhoneX，就是这么简单；如何用 CSS 修出好看的照片；JS中动态添加元素并绑定事件，造成程序重复执行；前端重构之路（组件化）；如何使用ES6箭头函数使JavaScript代码更易读；【JavaScript从入门到精通】第十九课；一步步打造自己的纯CSS单标签图标库

css实现图片背景填充的正六边形最近有个需求需要实现带有图片背景的正六边形，这里记录一下我自己实现的方法。我项目里的最终效果大概是这样子的，这里我们只演示实现一个正六边形。六边形的实现原理其实就是通过旋转三个重叠的矩形得到的，如下图所示：这里为了得到一个正的六边
《网页适配 iPhoneX，就是这么简单》对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。（by 凹凸实验室）
如何用 CSS 修出好看的照片作者简介：饿了么前端工程师，擅长人机交互，半个萌妹子，半个女汉子，喜欢画画，P图。欢迎关注知乎专栏互联网产品设计，欢迎勾搭~ 我们通常会通过PS，美图秀秀等来编辑照片，制作比较符合意境的的效果图片(图骗)，但是编辑器和PS的切换是有成本的，如果能在编辑器中快捷并且批量的处理图片岂不是很好。这篇文…
JS中动态添加元素并绑定事件，造成程序重复执行歇了两周没写点什么了，感觉最近有点知识慌，分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件，类似于$(‘#point’).on(‘click’,’.read-more’,function () {})这样的代码造成的程序重复执行，很多人在文章里写到了，也说了用off方法来解绑，但都未能点出问题的本质，几乎都忽略了问题的本质其实是事件…
前端重构之路（组件化）本文解决了几个问题：组件化开发、按需且支持并行加载、数据驱动、服务端渲染、Web Component 使用方式等。
如何使用ES6箭头函数使JavaScript代码更易读原文： https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077 箭头函数是搭建现代 Web 应用程序中一种新的基础构件。在本文中，你将会学习箭头函数如何使代码更简洁、使“this”关键字更易于管理；还将学习隐式返回、使用箭头函数记录日志以及隐式返回结合对象一起使用的方法。如果你…
【JavaScript从入门到精通】第十九课第十九课-JS运动中级前面的学习已经让我们掌握了很多运动相关的知识，也构造出了自己的运动框架，当然，它离真正的完成版运动框架还有很远的距离。链式运动框架在我们讲解链式运动框架时，我们需要讲解一下什么是回调函数。在我们之前的一个运动函数startMove中，如果我们再添加一个参数，而且该参数是一个函数…
一步步打造自己的纯CSS单标签图标库图标作为网页设计中的一部分，其在凸显网页重要元素特性，视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点，在项目实践时不宜将每个图标作为单个图片元素进行加载，这会增加Http请求，影响网页的性能。因此，在实际中，我们可能见到以下一
10个有趣的Javascript和CSS库-2017年11月 Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架。每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。 Pretty Checkbox 这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。它提供了不同的形状（正方形，曲…
前端开发人员如何搭建数据库前端开发人员如何搭建数据库最近有人问我，前端开发人员要存储用户数据，最简单的方法是什么。现在仅关于这部分，我来说明下怎么做。搭建数据库首先，要实际拥有一个数据库。可以去mlab网站找一个免费的。注册好后，在MongoDB
2017 年前端开发者必学清单新的一年，前端开发者该学习一些什么呢？本文给出了一份清单。
分享7款个性化jQuery/HTML5地图插件现在我们经常会用到一些地图应用，无论是在网页上还是手机App中，地图貌似是一个不可或缺的应用。本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件，有几款地图比较实用，有些则是具有抽象的概念，很有个性化。 1、HTML5世界地图划
vue中慎用style的scoped属性本文发布在我的博客vue中慎用style的scoped属性许可协议: 署名-非商业性使用-禁止演绎4.0国际转载请保留原文链接及作者。在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实…
【CSS自适应导航菜单】本文教程旨在教你如何创建一个使用HTML5+CSS的自适应导航菜单，它不需要用到javascript，而且可以居左，居中和居右，这个菜单不是通过点击显示的，它是鼠标滑过的时候显示出来的，并且兼容各种浏览器包括手机客…详情→ #前端开发博客#
前端工程师的 CI 进阶之路女主宣言本文的作者为奇舞团前端工程师怡红公子，他是基于ThinkJS 开发的高人气开源博客平台 Firekylin (over 1.2k Stars) 的作者，今天他分享的是使用 Drone.io 取代 travis-ci 做日常开发持续集成工作的经验。本文最先发布于怡红院落，转载已获取作者授权。 PS：丰富的一线技术、多元化的表现形…
开发更好用的 JavaScript 模块不少人都曾经在 npm 上发布过自己开发的 JavaScript 模块，而在使用一些模块的过程中，我经常产生“这个模块很有用，但如果能 xxx 就更好了”的想法。所以，本文将站在模块使用者的角度总结一下，如何能让模块变得更好用。提供 ES6 模块的入
一个行为标准Popup组件(vue), 强大的过度动画支持, 和定位支持前言之前看过很多的组件库, 但是它们的Popup行为和原生的界面差别不大, 但是行为上面却各种小细节不足, 所以有了这个强调行为标准的popup组件特点支持返回键, 可以按浏览器返回按钮关闭popup 可以写出小复杂的过度动画, 比如磁贴按压效果[在pop
关于JavaScript对象，你所不知道的事（一）- 先谈对象在开始正题之前，让我们先凭直觉回忆一下我们对JavaScript对象的一般认识：对象是一个引用类型值；创建对象的方式有两种形式：“字面量形式”与“构造函数形式”；对象的属性可以随时修改，且一旦改动，所有引用对象的地方，其属性值均会被改变（这也是引用类型的特点）；对象可以通过原型链实现继承； …
vue实战中遇到的`坑` 现在的工作项目在用 vue ,前两个有朋友在问我在使用 vue 中有没有遇到一些很难解决的问题，一下我也只能说出一两个，所以索性就抽时间总结一下我在项目中遇到的 vue 的问题，有写的不对的地方，在您时间还允许的情况下，还劳烦大家告诉我哦，我也好尽早修改，以免给看文章的其他同仁带来不必要的麻烦！ —–…
妈妈再也不用担心我不会webpack了2 之前写了一篇妈妈再也不用担心我不会webpack了，这次继续对其进行补充。本文依旧是遵循直观易懂的规则进行书写。希望对大家有帮助。如果不太熟悉webpack可以先看看之前的文章妈妈再也不用担心我不会webpack了。下面我们由浅入深来介绍webpack的使用一些你不知道是什么意思的东西（题外话） import path = requir…
5个Vuex插件，给你的下个VueJS项目原文：5 Vuex Plugins For Your Next VueJS Project 作者：Anthony Gore 使用 Vuex 来管理 Vue 的状态，有很多好的理由。其中之一就是，通过 Vuex 插件可以非常容易的扩展一些很酷的功能。Vuex 社区中的开发人员…
掌握JS中this指向只需记忆5大原则完全掌握this在JavaScript中的指向，吹散笼罩在this周围的重重迷雾，理解谁决定了this的指向，看完本篇你能在代码运行之前就可以判断出this的指向。我们都曾以不同的方式在函数中看见过this，但仍然不能准确的
JavaScript 正则表达式笔记各种编程语言里都有正则，可恶的是它们提供的 API 还经常不一致，这就导致了我这种记性不好的人总会记混。目前在写前端，准备彻底整理一下 JavaScript 的正则表达式。 JavaScript 的正则来自于 Perl，据说还在 Perl 正则的基础上做了一定的改进，用起来还是挺不错的，而且语法和 API 并不复杂。正则表达式的定义 …
Vue实现一个页面缓存、左滑返回的navigator 本文将介绍如何在不使用vue-router提供的router-view的情况下，实现一个渲染路由对应组件的navigator控件，并逐步增加主副舞台区分、页面缓存、页面切换动画、左滑返回支持等功能。本组件的源码位于我的github: github.com/lqt0223/nav… 本组件的demo: navigator-demo.herokuapp.com/#/view1 （建议在移动设备上…
【20171128 前端开发日报】js中的正则表达式(1)；iOS开发者的大前端感悟：向前端说对不起；GitHub 上 82% 的代码是重复代码；使用 ClojureScript 开发浏览器插件的过程与收获；Node.js 应用的可视化调试与性能分析；用 Jest 测试 JavaScript 应…详情→
你不知道的14种常用的javascript调试技巧
gulp自动化构建工具学习分享 Gulp与Grunt差不多,也是一款构建工具,它能够自动执行我们前端常见的任务, 如编译Sass、Less,压缩js和刷新浏览器等等,以此来改进前端的工作方式,提高生产力. 使用需用安装Node.js 由于Gulp是基于Node.js构建的, 所以在使用Gulp之前,首先安装Node.js(自行搜索node.js安装), 安装Node.js方式非常简单,下…
JavaScript 与多线程本文重点在于介绍多线程相关概念，如多线程，多线程与 CPU 之间的关系，线程同步以及为什么要进行线程同步。此外，还讨论了 JS/Chrome/Node 的线程模型。
JavaScript宝座：七大框架论剑另一篇JS框架PK的文章
vue 踩坑小记 – 如何正确的使用 debounce 我们经常会在页面 resize 的时候做些操作，比如重新渲染一个图表组件，使其自适应当前页面大小，但是 window.resize 事件触发的很频繁，所以我们一般都会加 debounce 做个「去抖」操作，代码如下： import debounce from ‘lodahs/debounce’ export default { methods: { resize: debounce(function () { …
JavaScript 如何工作的: 事件循环和异步编程的崛起 + 5 个关于如何使用 async/await 编写更好的技巧原文地址：How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await 原文作者：Alexander
关于JavaScript对象，你所不知道的事（二）- 再说属性说完了对象那些不常用的冷知识，是时候来看看JavaScript中对象属性有哪些有意思的东西了。不出你所料，对象属性自然也有其相应的特征属性，但是这个话题有点复杂，让我们先从简单的说起，对象属性的分类。面对一个复杂的事物，寻找其内在共性，妥善分类往往是快速认知该事物的捷径，这与程序员“将难以解决…