20171204 前端开发周报

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

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

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

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

原创文章:20171204 前端开发周报 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fe-weekly-20171204.html)

发表评论

请登录后发表评论: