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

使用vue解决复杂逻辑；CSS Flexbox详解；[翻译] 理解 CSS 布局和块级格式上下文；Parcel+vue 入门实战；vuejs 水波纹框架；three.js深入浅出；CSS3 box-shadow 内外阴影效果；Github分享：精心收集的48个JavaScript代码片段，仅需30秒就可理解

使用vue解决复杂逻辑问题后台需要提供提供怎样的的数据结构页面渲染如何实现如何拿到输入框的值解决思路每一条数据需要提供第一个select的options选项；后面的文本框需要输入类型；切换为区间输入的时候数据格式的切换，每条数据的唯一name属性。封装成组件，通过传入的optios渲染第一个select,根据传入的t…
CSS Flexbox详解 Flexbox是一个强大而灵活的布局，本篇文章主要对其进行学习了解。一、Flexbox简介 Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。简单的理解，就是
[翻译] 理解 CSS 布局和块级格式上下文注：本文首发于个人博客 www.ferecord.com/understandi…，如若转载请注明来源。前言 BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel And
Parcel+vue 入门实战parcel一个快速，零配置的 Web 应用程序打包工具,这里我介绍下如何和vue结合进行开发,强烈建议node8以上,具体代码:https://github.com/zlxbuzz/pa… 初始化项目 {代码…} 安装依赖 {代码…} 其中parcel-bundle…
vuejs 水波纹框架 Touch ripple component for Vue.js(1.x ~ 2.x). 组件component/指令directive两种方法可供使用，灵活简单，兼容Vue.js全版本。
three.js深入浅出 three.js的基本概念(渲染器,场景, 照相机, 光照) 加载3d模型控制3d模型旋转 1.首先我们生成一个渲染器 const renderer = new WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(window.devicePixelRatio) new WebGLRenderer会在body里面生成一…
CSS3 box-shadow 内外阴影效果说明 box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影，使用逗号分隔。语法 box-shadow: none | [inset? && [<offset-x> <offset-y> &
Github分享：精心收集的48个JavaScript代码片段，仅需30秒就可理解该项目来自于Github用户Chalarangelo（文末有项目完整地址，原版为英文），目前已在Github上获得了3000多Star，精心收集了多达48个有用的JavaScript代码片段，该用户的代码可以让程序员在30秒甚至更少的时间内理解这些经常用到的基础算法，来看看这些JavaScript代码都传达出了什么吧！ Anagrams of string（带有…
基于node.js的脚手架工具开发经历我们团队的前端项目是基于一套内部的后台框架进行开发的，这套框架是基于vue和ElementUI进行了一些定制化包装，并加入了一些自己团队设计的模块，可以进一步简化后台页面的开发工作。这套框架拆分为基础组件模块，用户权限模块，数据图表模块三个模块，后台业务层的开发至少要基于基础组件模块，可以根据具体需要加入…
基于手淘 flexible 的 Vue 组件：TextScroll — 文字滚动vue-flexible-components 基于手淘 flexible.js 的 Vue 组件前言：目前手头的移动端Vue项目是用手淘的 lib-flexible 作适配的，并用 px2rem 来自动转换成rem。关于lib-flexible和px2rem的配置，请移步 vue-cli …
原生js系列之无限循环轮播组件前情回顾在上一篇文章中，我们封装了一个DOM库（qnode），为了让大家直观地感受到其方便友好的自定义工厂模式，于是给大家带来了这篇文章。没有看过上一篇文章的话，可以在这里找到：原生js系列之DOM工厂模式。…
前端 ajax 请求的优雅方案本文http客户端为axios 先讲个故事类似axios这种支持Promise的API已经很友好了，请求成功后我们可以从then的Response中拿到后端返回的数据。比如： {代码…} 数据在response.data中，这意味着我们每个请求都需…
解读 JavaScript 之 V8 引擎及优化代码的 5 个技巧几个星期前，我们开始了一系列旨在深入研究 JavaScript 及其实际工作方式的系列文章：我们认为通过了解 JavaScript 的构建块以及它们如何一起协作的，你将能够编写更好的代码和应用程序。本系列的第一篇文章重点介绍了引擎，运行时和调用堆栈的概述。第二篇文章将深入到 Google V8 JavaScript 引擎的内部。我们还将…
我脑中飘来飘去的css魔幻属性最近看到一篇20 个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。在写这一篇文章之前，自己还写过一篇：我所不注意的那些CSS冷知识…
前端热力图系统实现 1. 背景今年6月开发了一个前端热力图系统，目前已经应用在公司的主要业务中，一直没时间做个总结，现在梳理一下实现思路。先说下为什么要做这样一个系统，电商网站的一种常用营销手段，就是配置眼花缭乱的活动页展现给用户，有的用来展示各种商品，有的供用户领取优惠券。但屏幕的展示空间有限，如何配置不同的模…
浏览器里的黑天鹅：不可预知的前端变革点『黑天鹅』是这样的事件：难以预测、冲击性大，并且能马后炮地事后分析。少数的黑天鹅事件几乎能解释这个世界上发生的所有事情。难道前端领域的演化也不是循序渐进，而是黑天鹅式的吗？让我们换一种角度回顾一下历史吧… 不可预知的黑天鹅审视一下你周围的环境，回顾自你出生以来周围发生的重大事件、技术变革和发…
基于ES6的Promise封装的图片资源加载通用函数（适用于vue）基于promise的图片资源一次性加载或者预加载作者：NEXT卓场景描述不是每个网页端的用户都能用得起光纤，不是每张图片都是压缩得很小，有时候我们也想要看高清大图，但是受限于网速有时候场景是这样的：（很明…
JavaScript、PHP、Python等5款主流编程语言爆安全漏洞 PHP、JS 等主流编程语言爆安全漏洞没有不漏的锅，如果底层的编程语言如果出现问题，顶层的应用程序还能幸免于难吗？这周在 Black Hat Europe 2017 安全会议上，一名安全研究员公开了几款目前非常流行的解释型编程语言中出现的漏洞。这些编程语言上存在的问题，可能让运用这些语言开发的应用程序因此也很容易遭受攻…
配置ReactNative开发环境 Homebrew是OS X的套件(包)管理器，用于安装Node.js和一些其他必须的工具软件。安装方式: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2、安装npm 和 Node.js brew install node node安装成功后npm自动也就有了，直接下载安装Node.js，网址：https…
【分享】自动销毁的vue event bus vue-happy-bus 是干嘛的 vue-happy-bus是一款基于vue实现的订阅/发布插件。我们通常在使用非父子组件间通信时，采用new Bus()的方式来做一个事件广播。但一个弊端就是，这种方式并不会自动销毁，所
Golang 中遇到的一些关于 JSON 处理的坑前言一个人不会两次掉进同一个坑里，但是如果他（她）忘记了坑的位置，那就不一定了。这篇文章记录了最近使用Golang处理JSON遇到的一些坑。坑 1号坑：omitempty的行为 C#中最常用的JSON序列化类库Newtonsoft.Json中，把一个类的实例序列化成JSON，如果我们不想让某个属性输出到JSON中…
使用VUE分分钟写一个验证码输入组件先来看波完成效果图需求输入4位或6位短信验证码，输入完成后收起键盘实现步骤第一步布局排版 <div class="security-code-wrap"> <label for="code"> <ul class="security-code-container"> <li class="field-wra…
致敬经典，Golang 版的 dsniff-webspy 相传很久以前，有一套经典的sniff工具集叫dsniff，其中有一个经典的webspy，可以在本地浏览器中实时地展示被嗅探的服务器所发送的http请求。为了致敬经典，我也从前2天写的那个恶意流量分析程序 xsec-traffic中抽离出一些代码，山寨了这个功能，以小无相功强行催动这套从天而降的掌法。用法 …
《简单的 canvas 翻角效果》右上角需要从无的状态撕开一个标记 , 且有动画过程 , 上图是实现的效果图 , 不是gif！（by 敖爽）
如何取消你的 Promise？在 JavaScript 语言的国际标准 ECMAScript 的 ES6 版本中，引入了新的异步原生对象Promise。这是一个非常强大的概念，它使我们可以避免臭名昭著的回调陷阱。例如，几个异步操作很容易写成下面这样的代码： function updateUser(cb) { fetchData(function(error, data) => { if (error) { throw error…
Angular 上用 MathJax 的一些问题
进阶 Javascript 生成器我曾一度认为没有必要去学习 Javascript 的生成器( Generator )，认为它只是解决异步行为的一种过渡解决方案，直到最近对相关工具库的深入学习，才逐渐认识到其强大之处。可能你并没有手动去写过一个生成器，但是不得不否认它已经被广泛使用，尤其是在redux-saga 和RxJS 等优秀的开源工具。可迭代对象和迭代器…
【移动前端开发调试】移动前端开发调试，我最常用的就是打开chrome的开发者里面的手机设备调试，可以调试iPhone、iPad、Samsung、nexus等。然后就是用一个自适应插件调试其它宽度等。于江水这篇文章还讲到了使用真机本地调试的方法，…详情→ #前端开发博客#
React 图片懒加载库源码解析文章同步于Pines-Cheng/blog 最近在做React 图片懒加载的，原本以为比较简单，轻轻松松就能搞定，结果碰到了一系列的问题，可谓是一波三折，不过经过这次折腾，对图片懒加载及相关的实现有了更深刻的了解，特此记…
观察者模式在 Javascript 中的应用 *观察者模式(Observer Pattern)*在 Javascript 中应用非常普遍，本文会首先明确观察者模式在 Javascript 的基本实现方式，然后着眼与当前流行的工具库 —— RxJS —— 进一步研究观察者模式在其中的实现原理。观察者模式的模式结构观察者模式定义对象间的一种一对多依赖关系，使得当每一个被依赖对象状态发生改变时…