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前端日报 订阅精彩文章

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

原文:20171227 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20171227.html)