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

WebGL基础教程：第一部分；基于 Vue-Cli3 构建的脚手架模版；王垠对 JS 的评价；学习如何用CSS变量创建网页响应布局 — css var()；新手福音用vue-cli3从0到1做一个完整功能手机站（一）；Web事件总结；JavaScript运行原理解析；Vue 源码解析 – 实例化 Vue 前（二）

WebGL基础教程：第一部分 WebGL是一种基于OpenGL的浏览器内置3D渲染器，它可以让你在HTML5页面中直接显示3维内容。在本教程中，我会介绍你使用此框架所需的所有基础内容。介绍开始学习之前，有几件事你是需要了解的。 WebGL是将3D内容渲染到HTML5的canvas元素上的一种JavaScript API。它是利用"3D世界"中称为着色器的两种脚本…
基于 Vue-Cli3 构建的脚手架模版早在 2018 年中上旬，那时候 Vue-Cl3 还处于 Beta 、 RC 版本时候，就有在公司小项目中予以使用，且颇为受用；就有将先前写Vue 项目的经验，集成进新的模板 awesome-vue-cli3-example ，以便更高效和合理地构建 Web 应用程序。如今，它已成为 Vue.js 开发的标准工具，故而就在此分享。如果您想预览此脚手架模版，可…
王垠对 JS 的评价
学习如何用CSS变量创建网页响应布局 — css var()如果你未曾听说过CSS变量，那么我告诉你，它就是CSS的一种新功能，可以让你拥有在样式表中使用变量的能力，这样做时并不需要什么特别的设置呦。
新手福音用vue-cli3从0到1做一个完整功能手机站（一）开篇从今天起，小肆将和大家从头开始做一个完整的实战项目。其中遇到的每个知识点都是我们工作中常见的，这些知识点大多在网上都能找到但却没有哪个教程能都讲得到，那就由小肆来做吧。关注”技术放肆聊“,跟小肆一起行动起来！在这个项目中，小肆力争做到以下几点: 应用目前最新的技术，并随时间更新。 …
Web事件总结事件并不是JavaScript的核心部分，他们是在浏览器的Web Api中定义的。下面列举的几种情况，都属于发生了事件。
JavaScript运行原理解析首先说一下为什么要做成虚拟机，因为机器不同，如果没有虚拟机我们就相当于需要针对每一种机器都要进行代码编译，这样肯定是不合理的。所以为了解决这样的问题，Java引入虚拟机（VM）的概念，让编译后的代码直接…
Vue 源码解析 – 实例化 Vue 前（二）上一篇文章，大概的讲解了Vue实例化前的一些配置，如果没有看到上一篇，通道在这里： Vue 源码解析 – 实例化 Vue 前（一）在上一篇的结尾，我说这一篇后着重讲一下 defineReactive 这个方法，这个方法，其实就是大家可以在外面看见一些文章对 vue 实现数据双向绑定原理的过程。在这里，根据源码，我决…
前端进击的巨人（一）：执行上下文与执行栈，变量对象写在开篇已经不敢自称前端小白，曾经吹过的牛逼总要一点点去实现。正如前领导说的，自己喝酒吹过的牛皮，跪着都得含着泪去实现。那么没有年终完美总结，来个新年莽撞开始可好。进击巨人系列开篇，不忘初心，…
超详细的webpack原理解读本文抄自《深入浅出webpack》，建议想学习原理的手打一遍，操作一遍，给别人讲一遍，然后就会了在阅读前希望您已有webpack相关的实践经验，不然读了也读不懂本文阅读需要几分钟，理解需要自己动手操作蛮长时间
WebGL基础教程：第二部分本文基于这个系列第一部分中介绍的框架，另外还增加了一个模型导入器，和针对3D对象定制的类。你会从中了解到动画和控制，内容很多，我们赶紧开始吧。因为严重依赖于上一篇文章，所以，如果你还没读过，建议先读一下。 WebGL在3D世界中操纵物体的方式是使用称为变换的数学公式。所以，在…
[实践系列]Babel原理Babel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本，简言之，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。
深入 CommonJs 与 ES6 Module目前主流的模块规范 UMD CommonJs es6 module umd 模块（通用模块） {代码…} 如果你在js文件头部看到这样的代码，那么这个文件使用的就是 UMD 规范实际上就是 amd + commonjs + 全局变量这三种风格的结合这…
vue-cli3 从搭建到优化安装 node >= 8.9 推荐：8.11.0 + 安装： npm install -g @vue/cli 检查： vue –version 如果已安装旧版本，需要先 npm uninstall vue-cli -g 卸载掉旧版本。初始化架构创建： vue create project-name 注：项目名称不能驼峰命名。选择一个预设（这里我选择更多功…
Javascript中的异步编程他不太理解这段代码中，funB 函数作为 funA 函数的参数这样的写法。从语义上看，callback 的意思是回调，那么是说 funB 是 funA 的回调嘛？
【20190115 前端开发日报】2019 年（大）前端技术规划；记一次 Vue 单页面上线方案的优化；前端常用代码片段(四)；前端常用代码片段(五)；vue-cli3使用svg问题的简单解决办法；细说 async/await 相…详情→
每个JavaScript开发人员都应该知道的新ES2018功能（译文） ECMAScript标准的第九版，官方称为ECMAScript 2018（或简称ES2018），于2018年6月发布。从ES2016开始，ECMAScript规范的新版本每年发布而不是每几年发布一次，并且添加的功能少于主要版本以前。该标准的最新版本通过添加四个新RegExp功能， rest/spread 属性， asynchronous iteration ，和 Promise.prototype….
如何测试 React Hooks？原文：https://blog.kentcdodds.com/react-hooks-whats-going-to-happen-to-my-tests-df4c2b4d67b7 我们该如何准备好 React 新特性 hooks 的测试呢？对于即将来临的 React Hooks 特性，我听到最常见的问题都是关于测试的。我都能想像出你测试这种时的焦虑： // 借用另一篇博文中的例子： // htt…
webpack引入第三方库的方式，以及注意事项一般情况下，我们不用担心所使用的第三方库，在npm管理仓库中找不到。如果需要某一个库，如：jquery，可以直接运行 npm install jquery 脚本命令来安装这个项目所需要的依赖；然后，在使用jquery的模块文件中，通过 import $ from ‘jquery’ 或者 var $ = require(‘jquery’) 来引入。这是常用的…
「ReactNaitve」对hooks最佳实践的探索 eg: const = useState(0) 介绍（1）有一个参数：默认值，可以是函数，只在初始渲染时执行一次（2）返回一个带有两个元素的数组（3）第一个元素是 state 的值, 第二个元素是更新state的函数，每次新的，使用useCallback，可以让它使用上次的函数；函数名随意不…
Spring Security (三）:与Vue.js整合本篇内容较长，先看下效果：然后侧边栏的路由其实根据我们后台获取到的：（这个数据结构比较简单，在这里只是演示） { "code": 200, "msg": "", "data": { "id": "1", "username": "admin", "roles&…
WebGL基础教程：第三部分欢迎回到第三部分，也是我们的迷你WebGL教程系列的最后一部分。在此课程中，我们会会介绍光照和添加2D对象到场景中。新的内容很多，我们还是直接开始吧。光照光照可能是3D应用中最技术化和最难理解的部分了。牢固地掌握光照知识绝对是非常基本的。光照是如何工作的？在我们介绍不同类型的光照，和编码技术…
WebSocket 协议第七章——关闭连接（Closing the Connection）本文为 WebSocket 协议的第七章，本文翻译的主要内容为 WebSocket 连接关闭相关内容。有兴趣了解该文档之前几章内容的同学可以见：【译】WebSocket 协议——摘要（ Abstract ）【译】WebSocket 协议第一章——介绍（ Introduction ）【译】WebSocket 协议第二章——一致…
你不知道的JavaScript-性能测试和调优之前我们讨论过宏观层面上的 JavaScript 性能问题，讨论了 asm.js 、 WebAssembly 和 WebWorker 技术，接下来我们探究一下 JavaScript 在微观层面上的性能问题，并逐步了解这些性能问题是否真实存在，以及是否需要花大量时间去优化。性能测试问题如果我们要测试一段代码的运行速度（执行时间），…
学习 PixiJS — 动画精灵看完官方教程中提到的这本书 — Learn Pixi.js ，准备写写读后感了，官方教程中所说的内容，基本上就是书的前4章，所以我就从第5章开始写写吧。
Go和WebAssembly：在浏览器中运行Go程序在过去很长一段时间里，Javascript是Web开发人员中的通用语言。如果你想写一个稳定成熟的 Web 应用程序，用javascript几乎是唯一的方法。
Web程序性能优化——asm.js和WebAssembly asm.js asm.js 是 JavaScript 语言中一个可以高度优化的子集。通过避免 JavaScript 引擎某些难以优化的机制和模式（主要是垃圾回收和类型判断），达到 JavaScript 引擎运行优化的目的。换言之，正常的 JavaScript 代码会类型自动装换和垃圾自动回收的，而编写 asm.js 风格的代码则表示程序员需要…
WebAssembly 系列（第五部分）- 是什么让 WebAssebly 如此之快？