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

如何优雅地在 React 中处理事件响应；使用浏览器开发者工具检查 CSS 动画性能；JavaScript 函数式编程到底是个啥；[vue全家桶]每个人都能做的网易云音乐；js数组操作–使用迭代方法替代for循环；web 前端图片懒加载实现原理；可能是东半球最详解的web前端安全相关知识；TypeScript 简介

如何优雅地在 React 中处理事件响应 React中定义一个组件，可以通过React.createClass或者ES6的class。本文讨论的React组件是基于class定义的组件。采用class的方式，代码结构更加清晰，可读性强，而且React官方也推荐使用这种方式定义组件。处理事件响应是Web应用中非常重要的一部分。React中，处理事件响应的方式有多种。 1.使用箭头函数先上代码：当…
使用浏览器开发者工具检查 CSS 动画性能本文是我们和SiteGround一起合作的系列之一。感谢我们的合作伙伴，有了你们，SitePoint才成为可能。 CSS动画的性能可以非常好。虽然对简单动画和少部分元素来说这是事实，但是如果你不注意编写高性能的动画代码，额外增加了很多复杂性，网站用户很快就会注意到（动画性能很差），并产生厌恶。本文里，我会…
JavaScript 函数式编程到底是个啥随着大前端时代的到来，在产品开发过程中，前端所占业务比重越来越大、交互越来越重。传统的老夫拿起JQuery就是一把梭应付当下重交互页面已经十分乏力。于是乎有了Angular，React，Vue这些现代框架。但随之而来…
[vue全家桶]每个人都能做的网易云音乐仿网易云音乐(webapp) 项目地址 (project address) api来源感谢binaryify让我能用喜欢的东西做一个属于自己的播放器! 源码地址不要脸的求star 哈哈哈!!! 项目预览 1mhere.cn (pc端按F12切换手机调试模式效果更…
js数组操作–使用迭代方法替代for循环前言数组的迭代方法，这个想必大家都不陌生了，可能刚入门的人暂时还没接触到这个。但是以后的开发中，肯定会用得上的。我自身的一个使用经历就是，如果迭代方法用的适当，不但可以减少代码量，也能使代码可读性…
web 前端图片懒加载实现原理 web 前端图片懒加载实现原理 —— 由zoom1480063633000分享
可能是东半球最详解的web前端安全相关知识XSS XSS全称是跨站脚本攻击(Cross Site Scripting)，所以我们可以缩写成CSS，下面我们开始介绍CSS，先讲选择器。听着是不是很奇怪，为了与层叠样式表区分开来，我们选择XSS做为其缩写。 XSS攻击能获取页面数据、c…
TypeScript 简介建了个群有兴趣的朋友可以加一下 QQ 群：Angular 修仙之路 – 153742079 (群名称规则：城市 + 昵称)。 TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且…
C++ 调用 Web Services首先，gSoap 肯定是个不错的选择，但是如果你的程序要调用多个 Web Services（即有多个 WSDL），gSoap 会比较麻烦。还有一个问题就是，gSoap 从 WSDL 自动生成的代码实在是太难用了。当然，这些都不是什么问题，…
再造一个有赞微商城也不在话下，有赞 React 组件库（Zent）的开源与展望Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现版本，提供了一整套基础的 UI 组件。目前我们有 35+ 组件，这些组件都已经在有赞的各类 PC 业务中使用。我们会在此基础上，持续开发一些新组件。我们的目标…
Golang 的 JSON 使用小技巧有的时候上游传过来的字段是string类型的，但是我们却想用变成数字来使用。本来用一个json:”,string”就可以支持了，如果不知道golang的这些小技巧，就要大费周章了。参考文章：http://attilaolah.eu/2014/09/10/json-and-struct-composition-in-go/ 临时忽略struct字段 type User struct { Email…
Node.js 垃圾回收与内存泄露的排查原文地址：https://blog.codeship.com/understanding-garbage-collection-in-node-js/ 阅读时间： 8 分钟尽管总有一些Node.js（通常）性能方面的负面报道，这并不是说Node.js比其他技术更容易出现问题。我们需要清楚知道Node.js是怎么玩的。虽然这项技术的学习曲线相当平坦，但是其内部的…
vue mixins组件复用的几种方式最近在做项目的时候，研究了mixins，此功能有妙处。用的时候有这样一个场景，页面的风格不同，但是执行的方法，和需要的数据非常的相似。我们是否要写两种组件呢？还是保留一个并且然后另个一并兼容另一个呢？不…
在gitlab 中使用webhook 实现php 自动部署git 代码在技术团队讨论中，我们决定从svn 迁移到 git ,于是使用了gitlab，代码自动部署使用了webhook 在服务器上 1.开启PHP需要的环境支持服务器环境必须先安装git 环境，webhook 依赖php运行环境，同时需要使用shell_e…
前端知识 – 收藏集 – 掘金一道 JS 面试题所引发的 “血案”，透过现象寻本质，再从本质看现象 – 前端 – 掘金觉得本人写的不算很烂的话，可以登录关注一下我的GitHub博客，新手写东西写的不好之处，还望见谅，毕竟水平有限，写东西只为交流提…
React Native Android白屏优化终极方案本方案适用于Android原生项目集成React Native框架。问题描述我们公司的APP部分模块使用了react native进行开发，使用react native开发确实很爽，一次编写到处运行，前端的开发体验，高效的开发效率，但是我们…
【你真的了解HTTP缓存吗】这里总结的实用并速记的规则，希望对大家有所帮助。全文=> 　　有时，HTTP中的缓存可能会非常让人头疼。按照文档正确地使用 HTTP 并不是那么困难，但事实上，不同的浏览器和 HTTP版本常常困扰着我们。而我们自己或是不必或是没有时间去钻研所有的边缘的情况。　　这里总结的实用并速记的规则，希望对大家有所帮助　　静态资源　　永远不会修改的内容：JS 和 …
JavaScript 异常的防范与监控一套完善的前端体系应少不了异常统计与监控，即使有足够的质量保证体系，难免会出现一些意料之外的事，尤其是在复杂的网路环境和运行环境之下。为了保证代码的健壮性以及页面的稳定性，我们从多个方面来做异常的…
Node.js Color 模块实现入门浅析 Node.js 中有不少常用的 Color 模块，例如 chalk、colors.js、cli-color 等，通过这些模块我们输出各种带颜色、方面区分或者更酷的日志以及 CLI 工具提示。那么今天带大家简单了解一下 Color 模块的实现。本文会与你一一叙述 —— 由XaYvier分享
【英】现代 Web 开发魔法书一本关于现代 Web 开发涉及的知识分类与概览，旨在帮助开发者们获取最新、常用的 API、库、工具、最佳实践以及学习资源。目前已经涵盖了 2000+ 的相关资源链接，供大家参考与学习。 —— 由IT程序狮分享
JavaScript专题之数组去重前言数组去重方法老生常谈，既然是常谈，我也来谈谈。双层循环也许我们首先想到的是使用 indexOf 来循环判断一遍，但在这个方法之前，让我们先看看最原始的方法： {代码…} 在这个方法中，我们使用循环嵌套，…
React Native 路由理解和 react-navigation 库封装学习 react native 等移动端 app 路由控制常见理解和 react-navigation 库的集中封装展示 —— 由Custom_DOM分享
CSS 使图片高度等于自身宽度的倍数现在有一个组件，我们想随意给它个宽度，都能使它的高度与宽度成比例。你可以在组件外部添加容器，但请不要给组件添加 class 和 id 。请写出该场景的解决方案，要求其样式可复用。代码见下方。 —— 由freeedit分享
CSS 实现左边定宽右边自适应效果现在有一个容器，其中放有两个 div，HTML 和 CSS 代码如下所示。我们需要这两个 div 并排在一行，并使左边的 div 宽度确定，右边的 div 宽度能够自适应剩余的容器宽度。请写出你能想到的所有可能。 —— 由freeedit分享
webpack 之 loader 实践 webpack 支持通过 loader 的方式转换应用程序的资源文件，通过 raw-loader 和 ejs-loader 加载 underscore 的模板文件的不同来理解 webpack 的 loader 概念 —— 由大河89分享
Dropdown.js 前言在SPA(Single Page Application)盛行的时代，jQuery插件的轮子正在减少，由于我厂有需求而开发了这个插件。如果觉得本文对您有帮助，请给个赞,以表对我的鼓励和支持。(๑•ᴗ•๑)如果觉得有什么问题，可以到 Github 提Iss
基于 webpack2 实现的多入口项目脚手架主要使用 extract-text-webpack-plugin 实现 js 、css 公共代码提取，html-webpack-plugin 实现 html 多入口，less-loader 实现 less 编译，postcss-loader 配置 autoprefixer 实现自动添加浏览器兼容前缀，html-withimg-loader 实现 html 内引入图片版本号添加和模板功能，babel-loader 实现 ES6 转码功能， happypack …
Vue SSR 官方文档实践 · 一：从零到粗暴混合前后端 Vue 2.3 发布很久了，距离第一次打开 ssr.vuejs 也很久了。终于把其中的代码片段运行起来了。按照个人理解，成功使用了下服务端渲染的结果。过程虽然很粗糙，也是使出了浑身解数。 —— 由songlairui分享
JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 —— 由她们都叫我剑侠分享