20171211 前端开发周报-前端开发博客

CSS 实现左右交换的效果；JavaScript 权威面试指南；说说 ParcelJS；2017 前端大事件和趋势回顾，2018 何去何从？；如何更好的管理前端环境变量；宣布 Parcel：一个快速，零配置的 Web 应用打包工具；CSS float相关详解；基于 vue-cli 的 webpack 通用封装, 更易简单的开始你的项目

CSS 实现左右交换的效果鞋厂的 App 有这么一个效果，而我的小伙伴刚好要做这样一个效果，于是就开始研究到底是怎么做的，Emmmm，大家都知道我平时糊设计图的功底为 0，所以好好研究了一下。：首先布局用 flex 可以实现，而动画可以用 transform 或者
JavaScript 权威面试指南原文链接：The Definitive JavaScript Handbook for a developer interview作者： Gustavo Azevedo译者：余博伦原文转自 freeCodeCamp on medium，转载请
说说 ParcelJS 看到 ParcelJS 还是眼前一亮的。新建 index.html 、 index.js 和 index.css ，然后 parcel index.html ，就能拿到可运行的 html、js 和 css 组合。html 可以作为入口正是我期望的，这让前端开发回归到本来的状态，很舒服。 ParcelJS 是以 assets 方式组织的，assets 可以是任意文件，所以…
2017 前端大事件和趋势回顾，2018 何去何从？ 2017 年，前端开发继续飞速发展。以下是在过去的一年中非常值得关注的一些事件和趋势整理，主要参考了国内外的一些报道和文章，希望能对大家在思考 2018 年的趋势和走向上有所帮助。欢迎指正、评论和补充。 1、React 16 和 MIT 许可证 2017 年，React 继续在前端领域占据主导地位，备受期待的 React 16 也正式…
如何更好的管理前端环境变量 2017-10-10 如何更好的管理前端环境变量本文主要分析使用环境变量管理前端项目时会遇到的问题，并介绍常用工具给出解决方案。如何使用环境变量在搭建基于 webpack 前端项目时（或任意
宣布 Parcel：一个快速，零配置的 Web 应用打包工具宣布 Parcel：一个快速，零配置的 Web 应用打包工具原文： Announcing Parcel: A blazing fast, zero configuration web application bundler 译者：neal1991 welcome to star my articles-translator , …
CSS float相关详解 float属性是CSS常用的一个属性，应用场景广泛，同时也是一个难点，涉及到一些相关细节及注意点。因此，就特别整理总结一下。一、float介绍 float元素也称为浮动元素，设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离
基于 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地址 …
每日一博 | 可能是目前最完整的前端框架 Vue.js 全面介绍调试插件在vue调试方面，可以选择安装chrome插件vue Devtools。打开vue项目，在console控制台选择vue面板。在Devtools工具中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项目内Vuex的状态变量信息。 UI组件库在vue组件库方面，个人不推荐使用UI组件库，毕竟自己…
Parcel 打包示例 – React HelloWorld使用 Parcel 打包的 React HelloWorld 应用。GitHub 地址: https://github.com/justjavac/… 0. 新建目录 {代码…} 1. 初始化 npm {代码…} 或 {代码…} 此时会创建要给 package.json 文件，文件内容： {代码…
如何实现一个Web Server最近一鼓作气重构了去年造的一个轮子 Vino。Vino 旨在实现一个轻量并且能够保证性能的 Web Server，仅关注 Web Server 的本质部分。在重构过程中，Vino 借鉴了许多优秀开源项目的思想，如 Nginx、mongoose 和 Web…
Vue SPA 首屏加载优化实践本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案！我们以 vue-cli 工具为例，使用 vue-router 搭建SPA应用，UI框架选用element-ui ， ajax方案选用 axios , 并引入 vuex ，使用 vuex-router-sync 将 router 同步到 store ，服务器使用本地Nginx服务。构建项目 vue-init webpack vue-spa-s…
分享一个比较全的webpack配置，分为基础和适配antdesign的配置 We provide some common configurations that saves a lot of time when you initially learn how to config webpack for developing.
javascript项目开发规范实例首次发表在个人博客总结一下个人在开发及review同事代码的过程中遇到的因为一些项目规范带来的问题及认为比较好的解决方法; 由于个人经验和认知水平有限,下面仅代表我的个人观念,欢迎各位大佬多给我提建议; 以本人最近写的一个项目(技术栈为Meteor + React + MongoDB)为例 readme的使用因为一个项目往往需要…
CSS VS JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了？而且，Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点？这篇文章将会逐点讲解基
《Python Web 开发框架 Django 2.0 发布，不再支持 Python 2》Django 是一个 Python Web 开发框架。12 月 2 日，Django 官网发文宣布推送 Django 2.0 版。在 Django 2.0 的发布说明中，最大吸引注意的内容就是兼容性
浅究Vue响应式原理摄于2017年11月24日 09:02:42 By OnePlusA5000 in HangZhou Vue最明显的特性之一便是它的响应式系统，数据模型即是普通的 JavaScript 对象。而当你修改它们时，视图便会进行更新。这也给开发者提供了极大的方便来绑定和渲染数据，文章简要阐述下其实现原理，如有错误，还请不吝指正。响应式data <div id =…
再也不学AJAX了（三）跨域获取资源 ② – JSONP & CORS 浏览器的“同源策略”固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，“同源策略”又会成为开发者的阻碍。在本文中，我们会简单介绍需要跨域请求资源的两种情景，然后，详细解释目前主流的四种跨域请求资源方案。让我们开始吧！一、何时需要跨域试想，当我们拥有多个站点，…
如何利用Git中的tag管理项目版本号利用tag管理项目版本号左鹏飞 2017.12.04 1. 什么是tag?什么时候应该创建一个tag? 项目的版本管理中,每当一个release版本发布时,需要做一个
撸js基础之函数前言前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 函数的基础知识。本系列另外还有两篇：
iOS 与 JS 交互手册 – JavaScriptCore 在前端快速发展的今天，JavaScript 在移动端的应用也越来越广泛，作为 iOS 开发者来说，与 JavaScript 进行交互也是不大不小的一个方面，尤其是一些 web 内嵌页， UIWebView 和 WKWebView 对 JavaScript 语言来说就像一个黑盒，出现问题使用 Objective-C 和 Swift 很难进行调试。我最近就遇到一个这方面…
【浏览器野史 UserAgent列传】我对userAgent并不陌生，但明明一个单词就可以说清楚的事情，却是这么掏心掏肺的回答。怪可怜的，一定有冤情。后来我查阅了很多资料，发现历史非常的精彩。全文=> 　　某天，我做一个小项目，需要判断一下浏览器类型。简单的呀。　　控制台敲下：navigator.userAgent 　　浏览器回应：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 　　天，这串是啥？你怎么连话都说不清楚？　　我对userAgent…
Javascript 杂谈：熟悉基本概念 Javascript 杂谈：熟悉基本概念 1. 信息、变量、数据类型和变量对象 1.1. 看不见的信息 1.2. 客观的数据
【20171205 前端开发日报】5分钟学会 CSS Grid 布局；新开源工具诞生让C++秒变JavaScript；JavaScript 的时间消耗；浏览器野史 UserAgent列传；Python Web 开发框架 Django 2.0 发布，不再支持 Python 2；10个机器学习的JavaScript示例；GitHub…详情→
基于Vue的组织架构树组件由于公司业务需求，需要开发一个展示组织架构的树组件（公司的项目是基于Vue）。在GitHub上找了半天，这类组件不多，也没有符合业务需求的组件，所以决定自己造轮子！分析既然是树，那么每个节点都应该是相同的组件节点下面套节点，所以节点组件应该是一个递归组件那么，问题来了。递归组件怎么…
使用vue-cli的webpack模板的一次优化使用过vuejs的开发者一定对vue-cli不陌生，这个命令行工具提供了几个常用的搭建项目的模板，目前官方支持6个模板： webpack webpack-simple browserify browserify-simple pwa simple 而使用得最多也是Github上start数最多的模板则是 webpack 这个模板，它包含的内容也非常丰富：语法校验、c…
让Vue的v-for支持迭代器遍历在写一个项目的时候希望使用Map来进行遍历，然后我取出了Map的keys，keys是一个 Map Iterator （迭代器，ES6引入的 Symbol.iterator ）类型，这时我尝试使用 v-for 来对迭代器进行遍历，当然我的期望是能够遍历出来。我们都知道vue的 v-for 提供了两种遍历方式， v-for="item in items" v-fo…
Vue 模板编译原理 Vue 模板编译原理关于vue的内部原理其实有很多个重要的部分，变化侦测，模板编译，virtualDOM，整体运行流程等。之前写过一篇《深入浅出 – vue变化侦测原理》讲了关于变化侦测的实现原理。那今天主要把模板编译这部分的实现原理单独拿出来讲一讲。本文我可能不会在文章中说太多细节部分的处理，我会…
temme：优雅地从 HTML 提取 JSON 数据本文介绍了一个从 HTML 提取 JSON 数据的工具，并以豆瓣电影的例子展示了该工具的使用方法。本文中用到了大量的 CSS 选择器，CSS 选择器可以参考 MDN。最近几个月写 Node 爬虫比较多，解析 HTML 文档用的工具是 cheerio（