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

前端开发人员如何搭建数据库；一步步打造自己的纯CSS单标签图标库；React Diff 算法 – 众成翻译；关于JavaScript对象，你所不知道的事（一）- 先谈对象；vue中慎用style的scoped属性；JavaScript 正则表达式笔记；你不知道的14种常用的javascript调试技巧；5个Vuex插件，给你的下个VueJS项目

前端开发人员如何搭建数据库前端开发人员如何搭建数据库最近有人问我，前端开发人员要存储用户数据，最简单的方法是什么。现在仅关于这部分，我来说明下怎么做。搭建数据库首先，要实际拥有一个数据库。可以去mlab网站找一个免费的。注册好后，在MongoDB
一步步打造自己的纯CSS单标签图标库图标作为网页设计中的一部分，其在凸显网页重要元素特性，视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点，在项目实践时不宜将每个图标作为单个图片元素进行加载，这会增加Http请求，影响网页的性能。因此，在实际中，我们可能见到以下一
React Diff 算法 – 众成翻译 React 是 facebook 出的一个前端框架. 设计的关键处就是性能问题。在本文中，我主要是介绍 Diff 算法以及 React 渲染，这样你可以更好的优化你的应用程序。 Diff 算法再介绍算法之前，我们先来了解一下 react 是
关于JavaScript对象，你所不知道的事（一）- 先谈对象在开始正题之前，让我们先凭直觉回忆一下我们对JavaScript对象的一般认识：对象是一个引用类型值；创建对象的方式有两种形式：“字面量形式”与“构造函数形式”；对象的属性可以随时修改，且一旦改动，所有引用对象的地方，其属性值均会被改变（这也是引用类型的特点）；对象可以通过原型链实现继承； …
vue中慎用style的scoped属性本文发布在我的博客vue中慎用style的scoped属性许可协议: 署名-非商业性使用-禁止演绎4.0国际转载请保留原文链接及作者。在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实…
JavaScript 正则表达式笔记各种编程语言里都有正则，可恶的是它们提供的 API 还经常不一致，这就导致了我这种记性不好的人总会记混。目前在写前端，准备彻底整理一下 JavaScript 的正则表达式。 JavaScript 的正则来自于 Perl，据说还在 Perl 正则的基础上做了一定的改进，用起来还是挺不错的，而且语法和 API 并不复杂。正则表达式的定义 …
你不知道的14种常用的javascript调试技巧
5个Vuex插件，给你的下个VueJS项目原文：5 Vuex Plugins For Your Next VueJS Project 作者：Anthony Gore 使用 Vuex 来管理 Vue 的状态，有很多好的理由。其中之一就是，通过 Vuex 插件可以非常容易的扩展一些很酷的功能。Vuex 社区中的开发人员…
JavaScript 与多线程本文重点在于介绍多线程相关概念，如多线程，多线程与 CPU 之间的关系，线程同步以及为什么要进行线程同步。此外，还讨论了 JS/Chrome/Node 的线程模型。
NPM — JavaScript 的包管理器本文主要介绍npm的常用命令，以及如何发布一些常用的js模块化代码到npm上面方便日后的使用，和举例如何把一个vue组件打包发布到npm到最后下载到本地使用的过程。 npm(Node Package Manager)是node的默认模块管理器，一个命令行下的软件，用来安装和管理node模块，同时也可以管理其他开放式的js模块代码。npm有一个好处…
vue-loader 源码解析系列之整体分析 vue-loader is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module 简单来说就是：将 .vue 文件变成 .bundle.js，然后放入浏览器运行。观察输入输出输入测试是最好的文档，所以我们从测试用例开始分析，找到test/fixture/basic….
JavaScript 成本分析
CSS浮动简介以及实现你从来没了解过的CSS浮动浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？即使是经验丰富的开发者也会在浮动上出错，所以理解浮动的行
JavaScript 新语法：私有属性这个语法是框架开发者们非常期待的，这样就可以有效区分用户的命名空间和框架内部字段。虽然这个“#”实在是让人很不习惯。
前端动画大乱炖作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新，如有不当还望多多指正。 …
JavaScript性能优化技巧：概述在这篇文章中，涵盖了很多广泛而又多变的环境。我们将尽量坚持“使用工具，而不是规则”的原则，把JS的流行词汇保持在最低限度。由于我们无法在2000字的文章中涵盖与 JS 性能表现相关的所有内容，所以请确保你阅读文中提到的引用资料，并在之后你自己进行了相应的研究。
如何为 ThinkJS 3 网站优化 TTFB 时间今年早些时候，奇舞团开源的 Node.js 框架 ── ThinkJS 迎来了她的 3.0 版本。尽管今年我很少更新博客，但「每次 ThinkJS 发布大版本，我都要更新博客程序」的老传统还是不能丢。所以，你现在看到的这个博客，已经是基于 ThinkJS 3 全面重构后的新版。 ThinkJS 3 基于 Koa 2.x 开发，内核实现得非常小巧，框架…
【CSS自适应布局等分比例实践】CSS等比例划分，在CSS布局中是比较重要的，下面分享几种常用方法和探讨一下兼容性。一：浮动布局+百分比emmet html代码：ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}.float-ul{w…详情→ #前端开发博客#
Vue 升级小记最近接手了一个 Vue 1.0 的陈年老项目，需要将其升级到Vue 2.0。下面记录一下升级过程：安装迁移工具首先需要安装 vue-migration-helper CLI 工具：控制台运行命令：npm install –global vue-migration-helperCLI 工具来帮助项目从Vue 1.x 迁移到 2.x。它扫描文件以查找特定于 Vue 的代码，…
ReactNative 框架在京东无线端的实践良好解决多终端开发问题是提升团队开发效率的有效方法，本文全面解析了京东 JDReact 三端融合平台，一起来看看京东的解决方案吧！
学习 CSS Grid 全面介绍 CSS Grid 的一篇文章，简单明了。
利用 HTML5 Web Audio API 给网页交互增加声音本文展示的交互音效仅仅是 HTML5 Web Audio API 众多特性中的冰山一角，但已经足够让广告性质类的网页熠熠生辉，甚至传统 Web 站点在一些特殊场合也是可以尝试使用的。
Vue 的 Virtual DOM 实现：snabbdom 解密 Vue 2.0 的 Virtual DOM 实现复刻自 snabbdom。本文对 snabbdom 的源码进行了解读。
CSS Animations v.s Web Animations API Web Animations API 为开发人员提供了通过 JavaScript 直接操作浏览器动画引擎的方式。
浅谈 HTTP/2 Server Push Server Push 的意义很简单，说白了就是为了提前推送响应。这其中包含两个问题：推什么？怎么推？
前端测试工具比较：选 Jest，不选 Mocha 我们Automattic公司的WordPress.com是由Calypso项目推动的，而这个项目中所有的测试用的都是Mocha框架。项目中还包括端到端测试，都保存在自己独立的代码库里。这套设定我们已经用了三年多了，我觉得是时候该重新审查一下这
3D WebGL入门之场景这是3D WebGL入门的系列文章的第一部分。如果你没有看过其他部分，请务必要看一看。第一部分：场景第二部分：几何体第三部分：材料
基于 GitLab 的简单项目管理与协作流程 GitLab 是一个类似于 GitHub 的开源源码托管服务，它除了提供基于 git 的基本代码托管服务外。还具备很多与软件开发协作相关的其他功能。比如 issues、Merge Requests 等。利用 GitLab 提供的这些功能，我们可以实践一些简单的项目管理和协作流程。这套流程借鉴于很多成功的开源项目，非常适合在小型开发团…
关于前端页面渲染数据结构的思考本文从前端数据结构的讨论入手，分享了一些关于如何搭建可视化编辑页面系统的开发思路。
JavaScript 模块化的现状最近在 twitter 上有很多关于 ES Module 现状的讨论，尤其是在 Node.js 上，他们计划引入新的文件扩展名 *.mjs。人们有足够理由对此感到担忧和不确定，因为这个话题异常复杂，这篇文章会尽力阐述清楚问题。