20170823 前端开发日报

Vue 插件编写与实战;个人总结(css3新特性);JavaScript精进之路 — 异步的实现(上);浅谈JavaScript中的接口实现;在JavaScript中实现队列;谷歌发布超强AI去水印工具 全自动消除水印;10 个最终编译成 JavaScript 的脚本语言;基于 Vue 实现的 移动端图片轮播组件.

  1. Vue 插件编写与实战 本文立足vue开源的理念,主要为vue开发者讲解编写vue插件的方法和步骤,通过理论与实践相结合的方式来加深大家对vue插件编写的认识。
  2. 个人总结(css3新特性) css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻找一些讲得更深入的文章或者书籍了!如果大家有什么其他特性推荐的,欢迎补充!大家一起学习,进步!
  3. JavaScript精进之路 — 异步的实现(上) 程序中现在运行部分和将来运行部分的关系就是异步编程的核心。简单来讲,如果程序中出现了一部分要在现在运行(顺序同步执行),一部分要在将来运行(可能是设置了timeout也可能是一个ajax的异步调用后执行的函数),那么两者之间的关系的构建就构成了异步编程。
  4. 浅谈JavaScript中的接口实现 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一。在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概念的重要性可见一斑。但问题在于,在JavaScript的世界中,没有内置的创建或实现接口的方法,也没有可以判断一个对象是否实现了与另一个对象相同的一套方法,这使得对象之间很难互换使用,好在JavaScript拥有出色的灵活性,这使得模拟传统面向对象的接口,添加这些特性并非难事。接口提供了一种用以说明一个对象应该具有哪些方法的手段,尽管它可以表明这些方法的含义,但是却不包含具体实现。有了这个工具,就能按对象提供的特性对它们进行分组。
  5. 在JavaScript中实现队列 队列和栈非常类似,但是使用了不同的原则,而非后进先出。

    队列是遵循FIFO(First In First Out,先进先出, 也称先来先服务)原则的一组有序的项。队列在尾部添加新元素,并从顶部移除元素。最新添加的元素必须排在队列的末尾。

    在现实中,最常见的例子就是排队:
    排在第一位的人会先接受服务。

  6. 【盗图神器!谷歌发布超强AI去水印工具 全自动消除水印】相信大家日常都经常在网上找图片,不过抓图最麻烦的是水印,哪怕你是PS高手,要去掉水印也要花点时间!不过最近谷歌发布了一个全自动去图片水印的工具,这简直是PS党和抓图党的福音!详见 ​​​

    谷歌发布超强AI去水印工具 全自动消除水印
  7. 10 个最终编译成 JavaScript 的脚本语言 相比于简单的网站,现代应用具有不同的需求。但是浏览器是一个具有(几乎)固定可用技术集合的平台,而JavaScript依然是 web 应用的核心语言;需要运行在浏览器中的任何应用必须使用该语言来实现。 作者的更多文章 KeystoneJS: The Best Node.js Alternative to WordPress The Anatomy of a Modern Ja…
  8. 基于 Vue 实现的 移动端图片轮播组件.wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的….
  9. javascript与三角函数之三:眼睛跟随效果我们先看下最后的效果 实现思路 要实现眼睛随鼠标一起运动,我们必须先求出眼睛的坐标,也就是它的left和top值 为了取到left和top值,我们只要知道α角的内三角形的对边和邻边的长度即可 为了取到对边和邻边,我们…
  10. 直播协议 HTTP-FLV 详解传统的直播协议要么使用 Adobe 的基于 TCP 的 RTMP 协议,要么使用 Apple 的基于 HTTP 的 HLS 协议。今天我要向大家介绍另外一种结合了 RTMP 的低延时,以及可以复用现有 HTTP 分发资源的流式协议 HTTP-FLV。 FLV…
  11. 你知道JavaScript是一种多么奇葩的编程语言吗? 微信号:gh_ffb279ea1674 奇舞周刊 JavaScript 是一个伟大的语言。它有简单的语法,完善的生态系统,最重要的是,有一个庞大的社区。 同时,我们都知道,JavaScript 有很多有趣的“潜规则”。其中有一些经常在日常工作中给我们添麻烦,而有些可以给我们带来帮助,让我们大笑起来。 这篇文章的思想源于Brian Leroux,…
  12. #CSS3#【CSS3弹性盒模型flexbox布局基础版】最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案。另外本人还废寝忘食的翻译了国外的《CSS3弹性盒模型fl…请戳→ #前端开发博客# ​​​
  13. 关于Angular响应式表单的三种更新值的讨论 Angular响应式表单相比较模板驱动表单 更大操作性 、 更易测试性 。因此,我更推荐这类表单创造方式。 当一个用于修改用户信息的表单,数据的来源总是来自远程;而对于一个 FormGroup 的创建总在 ngOnInit 中完成。因此,这里会有一个表单更新值的问题。 而通常我们会透过 FormGroup 下的三种…
  14. GitChat · 安全 | 搭建并使用便携式 4G/LTE 伪基站研究移动安全来自 GitChat 作者:Seeker 前言 在移动互联网深入普及和物联网开始规模应用的今天,网络安全公司怎能不研究移动安全,要研究移动安全,怎能没有4G/LTE伪基站研究测试环境? 本文介绍如何利用开源项目和SDR,合…
  15. 基于 React.js 的轻便美观的拖放列表 Beautiful, accessible drag and drop for lists with React.js
  16. 从react源码看Virtual Dom到真实Dom的渲染过程 很多人都看过许多React的Virtual Dom的文章,背熟了好多生命周期函数,然而,对于一个Virtual Dom渲染成一个真实Dom的过程你是否真的研究过呢? ReactDOM.render( <h1>Hello World</
  17. 笔记:元素沿环形路径动画的实现(一)CSS 部分 使用 CSS 实现元素沿着环形路径运动动画的方法。 使用 CSS 实现元素沿着环形路径运动动画的方法。
  18. 使用 React 创建 Word 文档 | Redocx Create word documents with React Introduction redocx is a library which lets you create word documents with Re Create word documents with React Introduction redocx is a library which lets you create word documents with Re
  19. Mockjs,再也不用追着后端小伙伴要接口了 相信大家都存在这样的一个困扰,在前后端分离的大环境下, 前端需要后端的接口去完成页面的渲染, 但是大部分的情况下,前后端需要同时进行开发, 这种情况下,后端还没完成数据输出,前端只好写静态模拟数据。 那么问题就来了 数据太长了,将数据写在js文件里,完成后挨个改url。 某些逻辑复杂的代码,加入…
  20. Vue-cli 配置服务器反向代理 先来了解一下什么是正向代理、反向代理? 先来了解一下什么是正向代理、反向代理?
  21. 如何在 Webpack 2 中使用 tree-shaking 原文地址: How to do proper tree-shaking in Webpack 2 原文作者:Gábor Soós 译文出自: 掘金翻译计划 本文永久链接: github.com/xitu/gold-m… 译者: 薛定谔的猫 校对者: lsvih 、 lampui 如何在 Webpack 2 中使用 tree-shaking tree-shaking 这个术语首先源自Ro…
  22. H5 是 HTML5 吗? H5 这个词在当前存在一些争议,很多人的理解都不一样,本文做了详细的分析
  23. 12个前端开发应该知道的终端命令熟练掌握一些常见的终端命令,减少重复的输入输出,会大大提高工作效率,本文总结了12个常见的命令,有些是内置的,有些只需要不到一分钟即可安装体验。 Curl Curl是一个用于通过HTTP(s),FTP以及其他协议发出…
  24. CSS 3D变形动画属性 之逆天立方体叠加动画 上一篇,juejin.im/post/5993d9…把立方体的盒子搭出来之后,因为怕文章又臭又长(嗯,就是没有想好玩什么效果,偏不告诉你)关于动效没有做更多的处理,只做了一个绕Y轴旋转,这篇试着做几个效果,CSS3 3D变形的坑太大,一时半会的也填不满,先探探
  25. vue快速入门的三个小实例 1.前言 用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章,这是第一篇,其它几篇文章链接就不贴了)。但是关于vue入
  26. Vue.js + Brunch:替代 Webpack 的有力工具 Brunch是这样一个构建工具:编译项目比Webpack更快,生成的dist文件更小并且项目配置更加容易。 在本文中,我将展示如何开发Vue.js + Brunch项目,并且涵盖Brunch的一些优缺点。 为了激发胃口,请先对比下相同Vue.js项目的Webpack配置和Brunch配置: Webpack Webpack是构建复杂,高度优化的W…
  27. 使用Vue.js和Vuex 2.0构建一个简单的Todo应用程序 这篇文章将介绍使用最新版本的 Vue.js 和 Vuex 构建应用程序的一些基本知识。 Vue.js(读音 /vjuː/ ,类似于 view ) 是一套构建用户界面的 渐进式框架 。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与 单…
  28. 优雅的在一台vps(云主机)上面部署vue+mongodb+express项目 (vue+express篇)优雅的在一台vps(云主机)上面部署vue+mongodb+express项目 (vue+express篇) 项目: vue + express + mongodb项目前后分离部署在一台服务器上面 express端口:3000mongodb端口:27017vue端口:本地是8080 服务…
  29. Vue2.0 探索之路——组件复用重复响应的研究 前言 前段时间,同事发现一个弹窗组件被多个页面复用,然后点击按钮出现了多次响应。明明页面都会被销毁掉的呀,为啥还会出现重复调用呢。 其实以前我也碰到过一两次,不知道啥情况后来没有再复现,再加上工期紧,当时就没有引起重视。这次同事碰到了,多次试验复现了。才深知当时挖的大坑啊没有填。 所以这次就单…
  30. electron + vue 实践项目github地址 本地安装环境准备 安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限) windows配置cnpm: {代码…} 当然也可以使用yarn下载 {代码…} 依赖包安装 进入…
  31. javascript与三角函数之四:碰撞检测我们先看下实现的效果 注:本文的作用是抛砖引玉,并未实现原理一样的绿球的碰撞,也未考虑质量和能量损耗对碰撞的影响 需要先解决两个问题 第一:怎么判断是否已经碰上了? 我们先来看一下刚好碰撞的分析图: 其…
  32. webpack2 示例之:Scope Hoisting 和 Code Splitting 原文链接: https://github.com/webpack/we… 译者: @justjavac 这个示例演示了与代码拆分相结合的 Scope Hoisting。 这是示例的依赖图:(实线表示同步导入,虚线表示异步导入) 除 cjs 之外的所有模块都是 EcmaScript 模块。 cjs 是 CommonJs 模块。 有趣的是,将所有模块放在单一范围(scope… 原文链接: https://github.com/webpack/we… 译者: @justjavac 这个示例演示了与代码拆分相结合的 Scope Hoisting。 这是示例的依赖图:(实线表示同步导入,虚线表示异步导入) 除 cjs 之外的所有模块都是 EcmaScript 模块。 cjs 是 CommonJs 模块。 有趣的是,将所有模块放在单一范围(scope…
  33. Redux 有多棒? Redux 能够优雅地处理复杂且难以被 React 组件描述的状态交互。它本质上是一个消息传递系统,就像在面向对象编程中看到的那样,只是 Redux 是通过一个库而不是在语言本身中来实现的。就像在 OOP 中那样,Redux 将控制的责任从调用方转移到了接收方
  34. webpack hot-module-replacement 原理&踩坑 webpack hot-module-replacement 原理&踩坑
  35. WeFlow – 腾讯开源的基于 tmt-workflow 前端工作流的开发工具 一个基于 tmt-workflow 前端工作流的开发工具。 官网:https://weflow.io/ 目前已支持了:微信游戏、微信·朋友圈广告、微信·城市服务等项目的 第三方合作团队 的前端构建工作,如果你更习惯命令行操作,可以直接使用 一个基于 tmt-workflow 前端工作流的开发工具。 官网:https://weflow.io/ 目前已支持了:微信游戏、微信·朋友圈广告、微信·城市服务等项目的 第三方合作团队 的前端构建工作,如果你更习惯命令行操作,可以直接使用

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流