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

基于 vue-cli 的 webpack 通用封装, 更易简单的开始你的项目；Webapck+Vue多页面商城模板；前端每周清单第 42 期：V8 的执行流与优化， Pinterest 的 PWA 实践， Rust 与 WebAssembly 应用；如何利用Git中的tag管理项目版本号；vue-loader 源码解析系列之 selector；[javascript]搞清this的指向只需问两个问题；分享一个比较全的webpack配置，分为基础和适配antdesign的配置；使用JavaScript 写Web路由

基于 vue-cli 的 webpack 通用封装, 更易简单的开始你的项目 vayne 薇恩基于 vue-cli 的 webpack 通用封装, 更易简单的开始你的项目使用 npm i vayne -g yarn add vayne -D –registry
Webapck+Vue多页面商城模板 Vue官方提供了Vue-Cli脚手架，集成了Webpack的环境，上手开发和构建非常方便。但Vue-cli适用于单页应用，而平常做的项目中往往都是多页的，网上看了很多Webpack多页面的配置，中间遇到很多坑，自己看文档，对着做出了这个多页面的商城模板。项目模板效果: 项目开源在Github,欢迎star。 github地址 …
前端每周清单第 42 期：V8 的执行流与优化， Pinterest 的 PWA 实践， Rust 与 WebAssembly 应用前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点，开发教程，工程实践，深度阅读，开源项目，巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID ： frontshow），及时获取前端每周清单。新闻热点国内国外，
如何利用Git中的tag管理项目版本号利用tag管理项目版本号左鹏飞 2017.12.04 1. 什么是tag?什么时候应该创建一个tag? 项目的版本管理中,每当一个release版本发布时,需要做一个
vue-loader 源码解析系列之 selector const path = require(‘path’) const parse = require(‘./parser’) const loaderUtils = require(‘loader-utils’) module.exports = function (content) { // 略 const query = loaderUtils.getOptions(this) || {} // 略 const parts = parse(content, filename, this.sourceMap, sourceRoot, query.bustCache…
[javascript]搞清this的指向只需问两个问题在确定身份时我们需要问两个问题： 1，我是谁；2，我在那一，考虑一下情景问：我是学生，我在哪（this = ?）？答：学校问：我是员工，我在哪（this = ?）？答：公司问：我是中国人，我在哪（this = ?）？答：中国问：我去参加运动会，挂着我们学…
分享一个比较全的webpack配置，分为基础和适配antdesign的配置 We provide some common configurations that saves a lot of time when you initially learn how to config webpack for developing.
使用JavaScript 写Web路由经过《前端路由一探》的学习，简单的了解了Web路由方面的知识。另外在学习HTML5 History API时，知道可以通过这个API来实现Web页面的跳转，而且浏览器不需要刷新。那么今天我们来看如何使用JavaScript写Web路由。从网上找了两个示例，第一个是 @KrasimirTsonev 用 100行代码写的一个示例，另一个是 @Joakim Carlst…
【20171205 前端开发日报】5分钟学会 CSS Grid 布局；新开源工具诞生让C++秒变JavaScript；JavaScript 的时间消耗；浏览器野史 UserAgent列传；Python Web 开发框架 Django 2.0 发布，不再支持 Python 2；10个机器学习的JavaScript示例；GitHub…详情→
简单例子学习Vue.js单元测试 A vue.js project to learn how to coding unit test 前言使用vue-cli可以直接生成一个包含unit & e2e测试的开发环境。这里我们主要针对unit文件进行单元测试。
让Vue的v-for支持迭代器遍历在写一个项目的时候希望使用Map来进行遍历，然后我取出了Map的keys，keys是一个 Map Iterator （迭代器，ES6引入的 Symbol.iterator ）类型，这时我尝试使用 v-for 来对迭代器进行遍历，当然我的期望是能够遍历出来。我们都知道vue的 v-for 提供了两种遍历方式， v-for="item in items" v-fo…
H5+JS+JQuery+ECharts实现异步加载
关于静态类型的令人震惊的秘密–关于使用TypeScript看法 TypeScript的流行最近真的爆炸了。我喜欢TypeScript，我喜欢静态类型。它的结构而不是名义上的，这意味着它的工作基本上像自动鸭子打字，而不是名称或基于身份的类型检查。这非常适合JavaScript等动态语言。 “大规模的网络应用程序是没有静态类型
6 大主流 Web 框架优缺点对比是该读些评论和做一些总结的时候了。当我们开始写这个系列博客的时候，我们知道 JavaScript/web 应用框架并不太好总结。我们努力对这个不可回答的问题作出回答：我该用什么样的框架？在这篇文章中，我们将对这个系列中所提到的每款框架做一个总结，包括我们所认为的强项和弱项。另外，我们为你留下了一些值得思考…
Nuxt.js服务端渲染实践，从开发到部署感悟经过几个周六周日的尝试，终于解决了服务端渲染中的常见问题，当SEO不在是问题的时候，或许才是我们搞前端的真正的春天，其中也遇到了一些小坑，Nuxt.js官方还是很给力的，提issue后很积极的给予帮助，再次感谢Nuxt.js的开发团队。路由鉴权第一个
如何实现一个简单的Node.js脚手架原因在工作中，需要开发一个脚手架，用于给相关用户提供相关的开发便利性。适合人群对前端、Node操作有一定的了解，同时向了解脚手架开发过程或者需要自己实现一个脚手架的开发者。目标开发一个简单的脚手架…
WebGL2系列之图元重启背景在使用WebGL绘制图形的时候，大多数情况下，绘制一个图形的时候，其各个图元都是相连的。但是在一些情况下，我们需要绘制图元不相连的图形，如果绘制的模式是gl.TRAINGLES或者gl.LINES，也是可以达到的，但是如果绘制的模式是gl.TR
【四种常见的 POST 提交数据方式】HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。全文=> 　　HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。　　我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状…
由浅入深学习 JavaScript Debug 技巧译者按：从alert到debugger;看看你属于哪个段位。原文: JavaScript Debugging for Beginners 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。我常常看到不少开发者不懂如何Debug JavaScript代码，因此决定写一篇博客为初…
再也不学AJAX了（三）跨域获取资源 ① – 同源策略我们之前提到过，AJAX技术使开发者能够专注于互联网中数据的传输，而不再拘泥于数据传输的载体。通过AJAX技术，我们获取数据的方式变得更加灵活，可控和优雅。但是AJAX技术并不是一把万能钥匙，互联网中的数据隐…
从零开始编写一个babel插件我们编写的babel插件是所属于babel-loader,而babel-loader基本运行与webpack环境.所以为了检测babel插件的是否起作用，我们必须构建webpack环境. 目录结构 |– babel-plugin-wyimport |– .editorconfig |– .gitignore |– package.json |– README.md |– build | |– app.be45e566.js …
基于 HTML5 Canvas 的简易 2D 3D 编辑器不管在任何领域，只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的，今天我们不需要 3dMaxs 等设计软件，直接用 HT 就能自己写出一个 2D 3D 编辑器，实现这个功能我觉得成就感还是爆棚的，哈哈！只…
我与Node.js重新认识的第2周 – Node.js 底层书接上次：《我与Node.js重新认识的第一周 – Node.js 风格特点》。这次读了一些关于底层实现的东西：《深浅》第3章异步I/O – node.js是如何实现异步i/o的 Udemy 《Learn and Understand NodeJS Learn and Understand NodeJS》 Section 2&3 V8引擎首先，学习node.js一定要了解V8引擎，他是一个…
使用 Redux-Arena 组合 React 组件对于 Redux-Arena 的简要介绍，参考这篇文章。Github 地址在此。常规组合方式的缺陷在 React 的各类组件库中，有时为了提高组件的复用性，某些高阶组件的children需要接收一个渲染函数，而不是一个Element。举一个 React-Vir
【JS中数组操作】全文=> 什么是API API: Application Programming Interface,应用程序编程接口; js中对象提供的方法就叫做API； instanceof 检测一个对象是否是数组;(用来对付复杂数据类型;) // 简单数据类型 typeof ; A instanceof B // A是不是B造出来的; 例： var arr = ; console.log(arr inst…
JavaScript性能优化的小知识总结前言一直在学习 javascript，也有看过《犀利开发 Jquery 内核详解与实践》，对这本书的评价只有两个字犀利，可能是对 javascript 理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。鉴于想让自己有一个提升，进不了一个更加广阔的天地，总得找一个属于自…
[webpack]中小型多页面应用整合webpack终极方案现在前端模块化、es6、MVVM这么火，附带的在学习使用这些知识时或多或少都会接触到webpack。这里我不会去讲webpack本身的知识，这些东西都烂大街了一搜一大把。通过本文你将会了解到如何将webpack引入到一个传统的多页面项目（如：商城）中去，借助webpack让我们能够使用es6、能够实现我们的模块化方案注意：…
前端跨域解决方案浏览器同源策略什么是浏览器同源策略？ “同源策略”（Same Origin Policy）是浏览器安全的基础。同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的…
简单案例学习Vue.js单元测试使用 vue-cli 可以直接生成一个包含 unit & e2e 测试的开发环境。这里我们主要针对 unit 文件进行单元测试。（本发首发于我的笔记网站）命令行效果预览 test/unit 文件结构及分析 ├── coverage ├── jest.conf.js ├── setup.js └── specs ├── api-test.spec.js ├── click-test.spec.js …
Web开发这十年作者 | Ivan Zarea 译者 | 薛命灯 Web 开发这十年都发生了怎样的变化？来看看 Ivan Zarea 总结的 Web 开发这十年。以下内容摘译自作者的博客，查看英文原文：