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

HTML5 图片上传解决方案；javascript防抖和节流；Vue.js的复用组件开发流程；只用 CSS 就能做到的像素画/像素动画；Proxy实现vue MVVM实践；Angular-难点；Vue调试神器之Vue.js devTools；JavaScript 完整手册

HTML5 图片上传解决方案前端做图片上传时，经常会遇到图片压缩、图片预览等需求。而这个过程中，会遇到一个个的坑。下面就来看一看 HTML5 实现图片上传的整个过程。基本结构图片上传是使用 input 标签来选择图片的： <input type="file" accept="image/*"> 这里可能遇到一个坑：可…
javascript防抖和节流函数防抖（debounce）：是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次，比如说用手指一直按住一个弹簧，它将不会弹起直到你松手为止。函数节流（thr…
Vue.js的复用组件开发流程本节我们主要要完成这样一个列表功能，每一行的列表是一个组件，列表内可能出现按钮组件或者箭头组件，点击按钮组件可以自定义事件，同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表。
只用 CSS 就能做到的像素画/像素动画这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。
Proxy实现vue MVVM实践 vueconf(2018hangzhou)大会刚刚过去，vue作者尤大大向我们展示了vue3.0的进展，并介绍vue3.0的一些改动，其中最令我期待的就是重写数据监听机制。回顾vue2.x的双向数据绑定谈起vue的双向数据绑定，我们首先能想到的就是ES5中 Object.defineProperty ，利用重写属性的 get 、 set ，我们可以完成数据劫持监听，使…
Angular-难点单向从数据源到视图 {{expression}} ="expression" bind-target="expression" 复制代码从视图到数据源的单向绑定 (target)="statement" on-target="statement" 复制代码双向 ="expression" bindon-target="expression" …
Vue调试神器之Vue.js devTools1、打开Chrome网上应用商店安装插件（自墙）,直接搜索devTools安装即可。贵宾传送阵，请戳这里→Chrome网上应用商店
JavaScript 完整手册 JavaScript 是世界上最流行的编程语言之一，现在也广泛用于浏览器之外的场景中。近几年，Node.js 的崛起解锁了长期以来被 Java, Ruby, Python, PHP 等传统服务端语言统治的后端开发领域。这本 JavaScript 完整手册遵循二八定律（the 80/20 rule）：在 20% 的时间里了解 80% 的 JavaScript 知识。快来了解所有你需…
JavaScript 的面向对象(OO) 在面向对象编程的语言中，都有类的概念，可以基于这个类创建无数个拥有相同属性和方法的对象。在js中，是没有类的概念的，所以会略有所不同。对象： {} 这就是一个对象，对，没错，就是这么简单。我们可以将对象想象成一个散列表，无非就是一些键值对，值可以是数据或函数。每一个对象都是基于引用类型创建的，可以…
关于如何使用原生HTML + JS + CSS绘制简单折线柱状图 CSS确实很重要，且有点奇技淫巧，看起来规则十分简单，但是创意更重要，如何用css构造出自己想要的效果，写的代码好看优雅十分重要。在看了不借助Echarts等图形框架原生JS快速实现折线图效果并自己重新实现了以后，实在是感慨CSS的强大之处，并作出记录。正文先上结果图：总结下自己觉得关于几点…
大侠，请留步，要不过来了解下CSS Scroll Snap？ byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8226 本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。一、CSS Scroll Snap简介 CSS Scroll Snap是CSS中一个独立的模块，可以让网页容器滚动停止的时候，自动平滑定位到指定元素…
【快应用完全入门教程】这篇关于快应用的入门教程写得太好了。官方的文档很零散，分为了快应用指南和参考，我自己读了几天，还是没有理出头绪，分享这篇文章一起来看看快应用怎么入门。
HTML编写规范 – <!– good –> <div class="sidebar"></div> <!– bad –> <div class="left"></div> 复制代码同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。 <!– good –> …
【进阶3-1期】JavaScript 5 种 this 绑定全面解析（关注福利，关注本公众号回复[]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第三期，本周的主题是 this全面解析，今天是第9天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，点击查看前端进阶的破冰之旅如果觉得本系列不错，欢迎…
5分钟快速了解下CSS4 color-adjust属性 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8219 本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。一、color-adjust属性简述 color-adjust 原本是个非标准属性，不过最近加入了CSS Color Module Level 4的工作草案，算是…
被写烂了的JS数据类型 the part that is good is not original, and the part that is original is not good.–Samual johnson JS之父曾引用英国诗人的这句话来评价其创造的JavaScript语言。信息量挺大，详见JS诞生时的历史。众所周知，JS有七种数据类型: number string null undefined object boolean symbol，其中symbol目前不很常…
你不知道的css3(上） — 用css3为你的组件添加风景写在前面:现在很多前端文章其实都是在讲js以及一些js框架的东西，但其实css3中有许多好玩的东西，可以为你的一些css组件添加一些亮色，这篇文章介绍了几个比较好玩的效果，希望有个抛砖引玉的效果一.3D风景动态骰子 1、css3D、动画基础知识预备 2、创建一个3D场景先放置一个.box的div父容器，在b…
也来谈谈CSS层叠网页最终呈现的样子是各种CSS声明最终叠加到一起的效果，我们以下面的HTML文档为例： <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> h1 { font-size: 20px; } </style> </head> <body> <h1 st…
前端技术周刊 2018-11-26：WebSocket好久不见，小编终于从双11项目室放出来啦，周刊恢复每周更新。一边写 Bug 一边买买买的时候，可别忘记了点个关注或订阅哦。
关于CSS：line-height 先上结论：如果为块级元素设置height则其拥有高度如果没有为块级元素设置height元素中有文字且为该元素设置line-height则其拥有高度在第二种情况下文字的水平中线与块级元素的line-height中线是同一条（同一高度）正文元素的高度是由什么决定对于我们解决页面显示问题和布局页面都有很大的帮助…
小览 ES6-ES2019 中正则表达式的新发展在此前的《JS正则表达式–从入门到精分》一文中，曾经较完整的介绍过 Javascript 中正则表达式的用法。而从 ES6(ES2015) 开始，借助 Babel 等标志性的工具，JS 的发展似乎也不想重蹈 Flash 时代的无所作为，走上了每年一个小版本的快车道；在此过程中，正则表达式也陆续演化出一些新的特性。本文尝试走马观…
Vue一个案例引发「动画」的使用总结
webpack系列之一总览 webpack 对于每个前端儿来说都不陌生，它将每个静态文件当成一个模块，经过一系列的处理为我们整合出最后的需要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / … （打包全世界ヾ(◍°∇°◍)ﾉﾞ）写在前面的话在阅读一个东西的源码之前，首先需要…
记一次Webpack配置文件的分离随着前端技术的发展，业务逻辑的增多及功能化的繁琐已经成为前端人员最烧脑的问题。前端自动化构建工具的出现，为前端人员带来了项目构建上的福音，成为每个前端工程师必回的技术栈，目前比较流行的Webpack以万物皆模块的思想构建我们的前端项目，同样也是笔者正在使用的一个前端自动化构建工具。 Webpack对于每个前端…
Node.js开发多端自动化步骤详解（Windows，Mobile，Web）在上一期内容中，我们介绍了Node.js 结合 Cucumber开发多端的自动化，并发布了演示视频：如何做跨平台业务流程自动化（Windows，Moible，Web）这一期我们就主要介绍一下开发的详细步骤。主要目标通过本例学习，可以掌握如何同时测试Windows，Mobile，Web应用。环境配置操作系统：Windows 10 开…
CSS题目系列（2） – 实现一个固定比例盒子在开发过程中，会有这么一个情况，需要将一个盒子的尺寸定义为固定比例，且尺寸需根据视图的尺寸来进行缩放，也就是响应式，常见的多如有矩形、圆形等。下面我将使用下面的例子为大家进行讲解：正文其实实现这个效果，有多种方法，下面逐一介绍。 1、垂直方向的padding 相信大家对 padding 都不…
如何利用Angular-Cli创建库创建一个Angular库总是一个被关注的话题,随着Angular6的发布,创建库变得更统一和容易. 这篇文章介绍基于新的Angular-Cli来创建Angular的库一.ng-packagr ng-packagr已集成到angular-cli中,不再需要手动安装配置ng-packagr 二.环境,Angular-Cli 6+ 三.创建项目并生成库的Project yarn global add @a…
Vue.js 3.0发布更新计划在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲，对 Vue 3.0 的更新计划、方向进行了详细阐述。目前该演讲的 PPT 也已上传至 Google 文档，感兴趣的可…
CSS届的绘图板CSS Paint API简介 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8204 本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。一、把Canvas图片作为CSS背景图片 CSS Paint API可以简单理解为（实际不能等同）把Canvas画布作为普通元素的背景图片。 …
css实现两栏固定中间自适应此方法的原理说将左右两侧进行定位，让其脱离文档流。中心区域自然流动到它们下面，再为其设置margin值此方法页面元素结构可以顺序可以随意变动，注意top值需要进行处理，不然可能会出现对不齐现象 HTML <div id=’container’> <div class=’left’>左侧</div> <div class=’center’&…