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

gcoord：用来修正百度地图、高德地图及其它互联网地图坐标系不统一问题的 JS 库；WebSocket 简介及应用实例；一个前端菜鸟的成长历程；JavaScript学习笔记：querySelectorAll 和 getElementsByTagName区别；前端搬砖工三天入门Locust压力测试；vue地区选择组件；JS中原型和原型链深入理解；只要这几步，webpack速成不是事儿

gcoord：用来修正百度地图、高德地图及其它互联网地图坐标系不统一问题的 JS 库 gcoord( geographic coordinates)是一个处理地理坐标系的js库，用来修正百度地图、高德地图及其它互联网地图坐标系不统一的问题 Features 轻量 – 无外部依赖，gzip后大小仅2kb 兼容性强 – 能在node环境以及所有现代浏览器（IE8+）中运行稳定高效 – 100%测试覆盖多…
WebSocket 简介及应用实例 HTML5 的出现，标志着后 Flash 时代各种现代浏览器的集体爆发，也是谨防 Adobe 一家独大的各家厂商们，历经多年各自为战，想换个活法儿并终于达成一定共识后，所积kao累bei的技术的一次集中释放 — 正所谓 “H5 是个筐，什么都可以往里装”。其中引人瞩目并被广泛支持的一项，就是此次要谈论的 WebSocket 了。本文将尝…
一个前端菜鸟的成长历程从实习算起，到现在工作了也有一年半的时间了，在这期间，深深感受到了前端领域的飞速发展，在这里记录一下自己的成长历程，算是对知识的一个梳理，也希望帮助到刚入行的同学们。说来惭愧，大学里并没有涉及前端的知识，当时对自己的定位很迷茫，不知道毕业之后何去何从。所以盲目的报了很多学习班，还考了思科认证的网…
JavaScript学习笔记：querySelectorAll 和 getElementsByTagName区别在《DOM的操作》一节中知道 querySelectorAll() 和 getElementsByTagName() 两个方法都是用来查找DOM元素的。通过上一节的学习，知道 querySelectorAll() 方法将获取到 NodeList 对象， getElementsByTagName() 方法获取到的是 HTMLCollection 对象。虽然他们获取的都是DOM动态集合，但两者还是略有差异的。今天我们就来…
前端搬砖工三天入门Locust压力测试 Locust是一个基于Python的带有可视化图形界面的测试工具。本文有什么本人不是专业的测试人员，Python也是先学先用的，所以不会涉及到太多的相关专业知识。本文主要是分享自己学习使用Locust的收获，基于官方文档和他人的博客，结合自己的使用体验，所以不是一篇教学或者专业文。你在这篇文章中看不到Locust的嵌套t…
vue地区选择组件主要用于全国地区数据的操作，包括省，市，区三级联动，地区数据的添加和删除；在操作地区数据时，以前也用过树形的地区选择组件，但因其在再操作大量的地区数据时，渲染缓慢，所以我们就换了另一种数据展示形式和交互形式，从而就有了这个组件。注意：该组件是 vue.js 组件 demo 抢鲜体验请点击这里 …
JS中原型和原型链深入理解首先要搞明白几个概念：函数（function）函数对象(function object) 本地对象(native object) 内置对象(build-in object) 宿主对象(host object) 函数 function foo(){ } var foo = function(){ } 前者为函数声明，后者为函数表达式。typeof foo 的结果都是function。函数…
只要这几步，webpack速成不是事儿 1、Webpack 是什么？直接上图简言之：webpack可以做如下的事情打包所有的脚本打包所有的图片打包所有的样式一句话：打包所有的资源 2、webpack 之安装 2.1 webpack安装环境依赖 webpack是基于Node的，在
你不知道的Vuejs – Vuejs 自定义路由实现对于单页面应用，前端路由是必不可少的，官方也提供了 vue-router 库供我们方便的实现，但是如果你的应用非常简单，就没有必要引入整个路由库了，可以通过 Vuejs 动态渲染的API来实现。我们知道组件可以通过 template 来指定模板，对于单文件组件，可以通过 template 标签指定模板，除此之外，Vue 还提…
如何写出更好的 React 代码？原文地址：How To Write Better Code In React 原文作者：Rajat S 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：jonjia 校对者：jasonxia23 老教授写出更好
webpack实战（一）：真实项目中一个完整的webpack配置前段时间，使用webpack查阅资料时发现要么是入门级文章，要么是如何优化打包速度或如何使用某个plugin、loader的文章。找不到一个在真实项目中的使用webpack的完整方案用以参考，所以花了许多精力去整合资料、查看代码和踩坑。因此我将自己摸索的一个配置方案，分享出来，希望能提供一点借鉴。不足之处，欢迎大伙指正…
vue项目可以从哪些方面进行优化图片优化图片大小优化，部分图片使用WebP（需要考虑webp兼容性）在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成可以参考juejin.im/post/5ad043… 减少图片请求，
Vue官网中的约束源码解释 — 生命周期
Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners) 当我们在书写 vue 组件的时候，也许可能会用到数据传递；将父组件的数据传递给子组件，有时候也需要通过子组件去事件去触发父组件的事件；每当我们遇到这样的需求的时候，我们总是会想到有三种解决办法：通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex …
理解 JavaScript: new 关键字由于存在海量的库和工具，以及各种各样简化你开发的玩意儿，很多程序员开始在不深入了解底层的情况下开发应用。JavaScript就是这种现象的代言人。JavaScript作为一种最复杂的且流传最广泛的语言，很多的开发者被高层次库的使用吸引，同时将糟粕抽离。
项目应用中浅谈Vuex学习笔记 vuex叫做状态管理，借鉴了redux，先说说什么叫状态。对于我们开发人员来说，状态好像一个容器，保存下来数据进行统一处理。就像官放给出的计数器的例子一样，A页面增加数量存入 store ，B页面减少数据改变状态。这样做我们就不需要调控修改后，到下一个页面再调取一遍接口，再渲染之后操作还需要…
Angular 6 正式发布，新功能详解作者｜Stephen Fluin 编译｜覃云今天，Angular 6.0.0 正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。这次更新还包括框架包（@angular/core、@angular/comm
干净的git历史和代码审查工作流程 2018-04-19 Clean git histories and code review workflows A couple of recent tweets really resona
Webpack 配置详解（含 4）——从 0 配置一套开发模板前言源代码熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack 也拆成…
你不知道的 Vuejs：Vuejs 自定义路由实现 by yugasun from https://yugasun.com/post/you-dont-know-vuejs-11.html 本文可全文转载，但需要保留原作者和出处。对于单页面应用，前端路由是必不可少的，官方也提供了 vue-router 库供我们方便的实现，但是如果你的应用非常简单，就没有必要引入整个路由库了，可以通过 Vuejs 动态渲染的API来实现。 …
使用git rebase合并多次commit 使用git rebase合并多次commit 1. 背景一个repo通常是由一个team中的多个人共同维护，如果需要增加新feature，那么就是一个feature分支了。由于开发中各种修改，本feature分支多次commi
Immutable.js很吓人？我来告诉你如何开始原文 – Immutable.js is intimidating. Here’s how to get started. 你从许多渠道中了解到，你应该使用Immutable。你也想去使用，但是不确定为什么去使用。而当你去看官方文档时，映入你眼帘的第一个
HTML5触摸事件实现移动端简易进度条 HTML中新添加了许多新的事件，但由于兼容性的问题,许多事件都没有广泛的应用，接下来为大家介绍一些好用的移动端触摸事件: touchstart、touchmove、touchend。介绍下面我们来简单介绍一下这几个事件: touchstart ：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 …
高性能JavaScript模板引擎原理解析随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新…
【20180505 前端开发日报】renren-fast-vue 1.2.0 发布，一套更优的前端解决方案；如果把编程语言比做女人，那JavaScript则是……；纯前端实现可传图可字幕台词定制的GIF表情生成器；JavaScript学习笔记：动态集合；Webview唠唠嗑；前…详情→
Vue.js中 watch 的高级用法假设有如下代码： <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firs
Intact.js v2.2.0，可继承，强逻辑模板的 MVVM 框架 <a href="https://market.cloud.tencent.com/act/wangjian/mtscloudwj?fromSource=gwzcw.883667.883667.883667 ">【腾讯云】0基础建站网站模板9元起！ >
Vue 按键修饰符 /** 提交表单 */ <template> <div class="demo"> 电话号码: <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" /> </div> </template> <script> export def…