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

饿了么出品 Node.js 实践教程；CSS3热身实战–过渡与动画（实现炫酷下拉，手风琴，无缝滚动）；HTML5 Canvas制作雷达图实战；《深入理解ES6》笔记—— Promise与异步编程（11）；2017-08-01 前端日报；重复造轮子：从0开始实现Vue数据绑定；node学习之路（二）—— Node.js 连接 MongoDB；模块化JavaScript组件开发指南

饿了么出品 Node.js 实践教程本教程的初衷是做一个 Node.js 进阶的视频教程, 在撰写 node-interview 之后, 觉得按照概念依次讲下来不好组织, 于是决定按照以一些有名的模块/功能为基础, 在实现的过程中讲解各项知识点. 其中的各项实践, 由于篇幅和时间的原因只有简单
CSS3热身实战–过渡与动画（实现炫酷下拉，手风琴，无缝滚动）1.前言在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用…
HTML5 Canvas制作雷达图实战雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。下面，用HTML5的Cavas来实现雷达图。
《深入理解ES6》笔记—— Promise与异步编程（11）为什么要异步编程我们在写前端代码时，经常会对dom做事件处理操作，比如点击、激活焦点、失去焦点等；再比如我们用ajax请求数据，使用回调函数获取返回值。这些都属于异步编程。也许你已经大概知道JavaScript引…
2017-08-01 前端日报2017-08-01 前端日报精选掌握Chrome开发工具：新一代前端开发技术exports、module.exports和export、export default到底是咋回事【第1013期】深入浅出React高阶组件基于vue的移动web app页面缓存解决方案[译] …
重复造轮子：从0开始实现Vue数据绑定 Vue, React, Angular这类MVC（MVVM）框架将开发者从繁琐的dom操作中解放出来，推动了开发者了解和使用抽象程度更高的领域。那么这类框架是如何实现数据驱动的呢？以Vue为例。
node学习之路（二）—— Node.js 连接 MongoDB文章来源：小青年原创发布时间：2017-4-12关键词：node，mongodb转载需标注本文原始地址: http://zhaomenghuan.github.io… 前言之前对于node的学习，一直只是停留在一种帮前端打辅助的层面，没有深入去研究，…
模块化JavaScript组件开发指南现如今，虽然多数的web应用都使用了大量的JavaScript，但如何保持客户端功能的专注性、健壮性和可维护性依然是一个很大的挑战。尽管其它编程语言和系统都已经将关注分离和DRY这样的基本原则视为理所当然的宗旨，但往往在进行浏览器端应用开发的时候，这些原则就被忽视了。造成这一现象的部分原因是JavaScript语言本…
js中的作用域与预解释 js中的作用域与预解释
#Git技巧#【图解 4 种 Git 合并分支方法】详见：图文学习 Git 合并分支常用的 4 种方式，并了解它们之间的区别。
p5.js新手入门
webpack之loader和plugin简介作者介绍：赵鹏，美团点评点餐团队成员 webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。webpack本身结构精巧，基于tapable的插件架构，扩展性强，众多的loader或者plugin让webpack显得很复杂。 webpack常用配置包括：devtool、entry…
前端测试简述及使用Karma/Mocha实现的集成测试栗子（Travis CI/Coverage）前端测试开发类型 TDD (Test Driven Development)，测试驱动开发 BDD (Behavior Driven Development)，行为驱动开发 // add.js function add(x, y) { return x + y; } module.exports = add; // test.js let add = require(‘./add.js’); // TDD assert.equal(add…
JavaScript数据结构——栈栈是一种先进后出的结构，新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端叫做栈底。示意图如下：
Vue2+VueRouter2+webpack 构建项目实战（三）：配置路由，运行页面制作.vue模板文件通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有…
js入门笔记整理给入门的同学整理的笔记，不对的地方欢迎指出。长期更新~ javascript的组成首先需要明白的是，一个完整的javascript实现应该由下列三个不同的部分组成核心（ECMAScript,ECMAScript是一种语言的标准）文档对象…
JS 获取屏幕、浏览器、页面的高度宽度（草稿）屏幕信息 screen.height ：屏幕高度。 screen.width ：屏幕宽度。 screen.availHeight ：屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。 screen.availWidth ：屏幕可用…
Angular有哪些地方比Vue更优秀？大家都知道，Vue一直紧跟Angular（含AngularJS 1.x）的脚步，借鉴了大量的特性。但是，借鉴毕竟是借鉴，复制品不太可能比正品行货做得更精致。最近一个月仔细研究了Vue的所有文档和常见的Demo项目，本文将会进行非常细致全面的对比。
前后端分离之JWT（JSON Web Token）的使用前言由于自己开发的项目中用到了 JWT 技术，前端采用了 Vue.js 框架，后端采用了 CodeIgniter 框架，故作此文帮助使用相同技术栈的朋友们。具体思路如下：把后端生成的 JWT token 存入 localStorage，然后前端…
CSS 核心概念归纳之定位和 BFC 定位流定位普通流定位的元素不能通过left/top属性来指定其x/y坐标，流定位的元素上下排布的区块元素的纵向边距会被合并，左右排布的内联元素的横向边距不会合并，需要各自独立计算。浮动定位浮动模型是一种可视化格式模型，浮动的框可以左右移动，直到它的外边
在大型应用中使用 Redux 的五个技巧原文地址：Five Tips for Working with Redux in Large Applications 原文作者：AppNexus Engineering 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译
如何实现前端微服务化？译者按: 微服务在后端开发中大行其道，其实对于越来越复杂的前端应用来说，微服务也是一种不错的选择。原文: Micro frontends—a microservice approach to front-end web development 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 …
《深入理解ES6》笔记——用模块封装代码（13）模块的定义模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问。 {代码…} 模块的导出给数据、函数、类添加一个export…
用JS实现链表的数据结构链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，而是在每一个节点里存到下一个节点的指针(Pointer) — 维基百科上面是维基百科对链表的解读。下面我们用 JavaScript 代码对链表的数据结构进行实现实现Node类表示节点 /** * Node 类用来…
高性能JavaScript阅读简记（一）早前阅读高性能JavaScript一书所做笔记。一、Loading and Execution 加载和运行从加载和运行角度优化，源于JavaScript运行会阻塞UI更新，JavaScript脚本的下载、解析、运行过程中，页面的下载和解析过程都会停…
[譯] sphinx-js 介紹 – Javascript 專案的文件工具很長一段時間在 javascript 專案，文件的部分並沒有什麼好用的工具。 JSDoc 大概是這個領域中唯一的競爭者，並且其設計中有些非常不錯的地方： jsdoc 本質上是程式碼中的註解，通過特定格式的註解搭配指令工具協助我們產生文件，另外也有許多 IDE 使用它來支援提示說明的功能。明確定義用於描述的結構像是 @c…
原生js之千位分隔符（包括小数情况）同学前端面试遇到这么一个题目：给数字添加千分位分隔符一拿到他给的面试题，感觉挺容易的，不过等自己写后发现非常考虑逻辑，以及思维能力（我是小白）上网百度了一波全是用正则表达式来解决的，正则这块我只…
浅尝初试 React 技术栈本文最早发布于 GitChat .GitChat 是一种全新的阅读/写作互动体验产品。一场 Chat 包含一篇专享文章和一场为该文章的读者和作者定制的专属线上交流活动。感兴趣的同学可以在微信搜索 gitchat 关注。现在文章已经免费开放，转发到知乎上来，希望
设置和使用地图的范围—ArcGIS API for JavaScript 设置地图的范围或获得地图范围是使用地图时常见操作。在地图上设置新范围的一个简单的替代方法是在地图上调用 centerAndZoom()方法，该方法基于给定的中心点和缩放级别设置新的范围。默认范围如果在初始化地图时不包含范围信息，则默认范围是地图服务初始范围，就是上次保存在地图文档中的地图范围。如果你使…
Angular 开发者常犯的错误本文基于 Top Common Mistakes of Angular Developers 这篇文章的内容进行整理和扩展，建议有兴趣的读者直接阅读原文。如果你刚接触 Angular，也可以参考一下 Angular 常见问题汇总这篇文章。 Angular vs Angular 2 vs Angular 4 Angular 1.x 版本统称为 AngularJS，Angular 2+ (4/5) 统称为 Angular。 …