20171227 前端开发日报

题解JavaScript作用域；vue 数独；跟着Vue-cli来'学'并'改'Webpack之 打包优化；Vuex 的应用场景；Vue组件实战；前端开发人员需要知道的JavaScript简写技巧（高级篇）；更便捷的css处理方式-PostCSS；2017 JavaScript 主流框架性能总结

1. 题解JavaScript作用域 又到一年底，大家是不是又开始蠢蠢欲动，准备开始到处吹嘘了。 不过你确定你已经准备好了吗？ 凡是参加过面试的朋友应该都有过一个相同的感受，就是面试官常常会抛出个很宏观的问题，让你有种 狗啃乌龟，不知从何下口 的赶脚。 现在让我们来一道最基本的题：能不能说说你
2. vue 数独 最近看到有朋友发了一篇类似的文章 用vue开发一个所谓的数独 想起自己几个月前学学习vue的时候也做过一个类似的，跟上篇文章中实现的思路有些不同，遂起兴拿出来分享一下 github 前言： 前段时间在学习vue框架时看到官网示例中有这么个栗子 咋样是不是很酷炫，看到这个顿时按耐不住一颗程序员的心，然…
3. 跟着Vue-cli来'学'并'改'Webpack之 打包优化 首先，我们要知道什么要用webpack来打包，这样打包有那些好处。我们可以简单的列出以下几点： 单文件组件 （.vue文件） 优化Vue构建过程 （alias等） 浏览器缓存管理 代码分离 （懒加载等） 这篇文章的重点讲的就是webpack打包之优化 浏览器缓存管理 ，vue-cli生成的脚手架的配置中，已经做了很多…
4. Vuex 的应用场景 本文在 GitHub上的链接 昨天被问了一个问题： Vuex 的应用场景有什么？什么时候适合使用 Vuex，什么时候不适合使用 Vuex？ 在当时，我的答案是一般人会回答的内容： 涉及到非父子关系的组件，例如兄弟关系、祖孙关系，甚至更远的关系； 他们之间如果有数据交互，那么应该使用Vuex来实现； …
5. Vue组件实战 最近看了下Vue组件的相关知识，除了官网也推荐这篇博客 www.cnblogs.com/keepfool/p/… ,但是这篇博客中用的是v1.0.25,我就用最新的v2.4.4来模仿下文中的例子，也一起谈一谈下面几个方面： 组件编译作用域 父子组件传递数据 非父子组件通信 过滤器 先看下最终的实现效果： 1.整体代码 …
6. 前端开发人员需要知道的JavaScript简写技巧（高级篇） 之前我们介绍JavaScript简写技巧的初级篇，下面给大家讲解JavaScript简写技巧的高级篇帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 高级篇 1. 变量赋值 当将一个变量的值赋给另一个变量时，首先需要确保原值不是 null、未定义的或空值。 可以通过编写一个包含多个条件的判断语句来实现： 或…
7. 更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么，怎么用的顺序来讲。我感觉这样很容易让大家失去兴趣，先看一下postcss能做点什么，有兴趣的话再往下看，否则可能没有耐心看下去。让我们开始吧 postcss能做什么 补全css属性浏览器前缀 手写的代码可以是这样的: .di
8. 2017 JavaScript 主流框架性能总结 update: 更新了图表 前言 作为一名JavaScript开发者，你也许已经接触到了众多框架，甚至在众多框架之中你已经熟练掌握了一两个。之前我偏爱框架，它降低了我的开发难度。但是在经历了那么多优秀的前端的概念变革，从Virtual-DOM到状态管理，我也
9. vue@2.0源码学习—组件究竟是什么 vue文档告诉我们可以使用 Vue.component(tagName, options) 注册一个组件 Vue.component(‘my-component’, { // 选项 }) 毫无疑问这是一个全局API，我们顺着代码最终可以找到 Vue.component 是这样的 Vue.component = function(id, definition) { definition.name = definition.name || id definition = Vue…
10. 将html生成图片 —— Liter 项目需求 1.前端添加管理员信息包括（姓名，年龄，头像等） 2.将管理员信息显示在具体背景图片上，将其生成图片的形式上传后台服务器（ base64格式 或者 文件的格式 ） 实现思路 1.将管理员信息使用定位将其设置在指定背景图片上。 2.使用html2canvas将指定div生成canvas 3.将生成的canvas进行base64…
11. jQuery-demos网格手风琴练习 练习用jQuery实现一个手风琴，图片可以自动循环滚动，宽高和定位同时变化，当鼠标移上时当前图片最大，同一排的图片高度一致，同一列的宽度一致，鼠标离开继续滚动。 思路：结构直接用多个div，图片使用背景图，通过定位设置每一行每一列的位置，设置鼠标当前位置为一个变化量，通过这个变化量来设置其他div的宽高和定…
12. Node.js异步漫谈本文为饥人谷讲师若愚原创文章，首发于 前端学习指南。 使用 node，异步处理是无论如何都规避不了的点，如果只是为了实现功能大可以使用层层回调(回调地狱)，但我们是有追求的程序员… 本文以一个简单的文件读写…
13. promise vs Observable（js小笔记） 1.promise 在传统的解决方案中，js实现异步编程采用的方法是回调函数和事件监听（事件发布订阅），但是当应用很复杂很庞大时，大量的回调会让调试程序变得举步维艰，成为开发者的噩梦。 promise是在es6标准中的一种用于解决异步编程的解决方案，由于在语言级别上，不同于Java、Python等多线程语言，js是单线程的，所…
14. 基于 HTML5 Canvas 的 3D 机房创建对于 3D 机房来说，监控已经不是什么难事，不同的人有不同的做法，今天试着用 HT 写了一个基于 HTML5 的机房，发现果然 HT 简单好用。本例是将灯光、雾化以及 eye 的最大最小距离等等功能在 3D 机房中进行的一个…
15. 异步的JavaScript 引子 前几天学校的交流群里面讨论JavaScript回调函数，有个同学提出了一个观点：回调函数就是异步执行的! 看到这个观点，我想了想我使用回调函数的场景，还真都是异步的，一时竟觉得他说得很有道理。 当然，这句话本身，当然是 错的 ，在JavaScript中函数作为一等公民，可以在任何地方定义，在函数内或函数外，可…
16. HTML5 录音的踩坑之旅 开篇闲扯 前一段时间的一个案子是开发一个有声课件，大致就是通过导入文档、图片等资源后，页面变为类似 PPT 的布局，然后选中一张图片，可以插入音频，有单页编辑和全局编辑两种模式。其中音频的导入方式有两种，一种是从资源库中导入，还有一种就是要提到的录音。 说实话，一开始都没接触过 HTML5 的 Audio …
17. 使用 WebSocket 构建实时性应用 WebSocket 技术已经逐渐成熟，在生产环境下也已经带给我们非常多的便利。本文首先会努力阐明 WebSocket 的基本原理，然后会结合实际叙述如何使用它。 WebSocket 不会完全取代 HTTP 首先需要明确的是 WebSocket 的定位。WebSocket 是建立在 HTTP 基础上，为客户端与服务端之间提供文本和二进制数据的全双工通信的技…
18. JS Native：覆盖阿里几乎所有产品的全新开发模式，到底有何高明之处（二） 上一文中，我们主要介绍了JS Native和其主要的应用场景，以及优缺点分析。下节我们继续深挖S Native的开发原理以及其性能表现，敬请关注！ 【JS Native的原理】 看完了JS Native的介绍是不是觉得这种开发模式非常的神奇呢，下面就试着简单的解释一下JS Native的原理。 首先要明白的一点是，即使使用…
19. 加速Webpack-缩小文件搜索范围Webpack 启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归的解析。在遇到导入语句时 Webpack 会做两件事情： 根据导入语句去寻找对应的要导入的文件。例如 require(‘react’) 导入语句对应的文件是 ….
20. 使用Javascript实现DSL解析器:揭开DSL神秘面纱 前言 这篇文章在一个比较高的抽象层次，讨论了什么是DSL，DSL的分类以及实现一个DSL所需的理论知识和一些关键的技术点。让读者对实现DSL能有一个全局的认识，在后面的文章中再深入介绍各个技术点，最终会使用Javascript实现一个DSL的编译器生成器。 DSL 是什么 DSL(Domain Specific Language)是一种用来解决特定领…
21. react+redux+async/await技术的todolist react-todolist is a react sample for react learners. This demo shows the basic technology of building a simple react project.
22. 前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教程, 2017 前端大事件前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow…
23. jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）前言 因为一些特殊的业务需求，经过一个多月的蛰伏及思考，我开发了这款 jQuery 图片查看器插件 Magnify，它实现了 Windows 照片查看器的所有功能，比如模态窗的拖拽、调整大小、最大化，图片的缩放、平移、旋转…
24. web worker和主线程的数据交换效率初探 概述 web worker是浏览器的多线程机制，多用于处理不涉及DOM操作的密集计算任务，例如算法计算，数据请求处理等，我正在开发的开源地图引擎 maptalks.js 中对地图数据的处理就很适合放到web worker中（突兀的硬广 ^_^）。 web wo
25. 点我达骑手Weex接入过程详述 一、概述 截止11月底点我达骑手APP已完整的接入了13个weex页面，效果还不错，Weex化推进也比较顺利。现特分享一下Android端点我达骑手APP接入步骤及相关核心逻辑，以此作为记录，同时也希望能给后来者带来一些帮助。 二、集成Weex Android 集成有两种方式: – 源码依赖：能够快速使用WEEX最新功能，可以根据自己…
26. Mobx —— React状态管理另一条路 阅读时间：大概在 3 分钟左右 本文章旨在介绍Mobx，不对其他状态管理工具进行比较。 Redux 开启了前端状态管理大门，但是对于一些比较小的应用，使用 Redux 反而增加了开发复杂度，这时候，我会选择使用 Mobx 来进行状态管理。 Mobx 是什么 Mobx是一个通过函数响应式编程，让状态管理更加简单和容易拓展的库。 …
27. Riot.js 框架深入解析 by. 田 光宇 1 小时前 最近整理了下团队新人文档，对团队内使用的框架 riot.js 这部分内容做了一些总结。本文主要在 riot.js 源码 方面，分析一下 riot.js 的执行原理和使用优化。 Riot.js 简介 Simple and elegant component-based UI library (Riot.js) riot.js 是一个简单优雅的 js UI框架。具有自定义标…
28. Webpack优化-缩小文件搜索范围 Webpack 启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归的解析。 在遇到导入语句时 Webpack 会做两件事情： 根据导入语句去寻找对应的要导入的文件。例如 require(‘react’) 导入语句对应的文件是 ./node_modules/react/react.js ， require(‘./util’) 对应的文件是 ./util.js 。 根据找到的…
29. vue的一个分页组件 文件page.vue为一个pc端的分页组件,基础的分页功能都有，基本的思路是，页面是用数据来展示的，那就直接操作相关数据来改变视图 Getting started import Page from ‘./page.vue’ 从目录引入该文件,在父组件注册使用 <page :total=’total’ :current-index="currentIndex" :listLen=’listLen’ @getPage…
30. 从 PostCSS 和 CSSNext 中看 CSS 新特性 今天刚好看了一下 PostCSS，看到了 postcss-cssnext 的网站，觉得用来学习一些新特性（虽然现在来看似乎不怎么新）。 先来介绍一下 PostCSS 与 Sass / Less / Stylus 相比的区别，也就是后处理器和预处理器的区

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

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