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

前端入行两年–教会了我这些道理；Vue多页面应用开发；Vue 2.0学习笔记：使用$refs访问Vue中的DOM；2017前端技术发展回顾；我劝你别在数字键盘上刁难我——Vue自定义数字键盘组件；老司机常用的几个JavaScript调试技巧；Vue.js Demo 汇总网(适合想学习 Vue和找某些功能模块的)；很全很全的JavaScript的模块讲解

前端入行两年–教会了我这些道理1.前言光阴似箭，日月如梭。不得不感慨时间过得很快，2017差不多结束了，一下子我从事前端开发的时间已经两年了。这两年可以说是一波三折，回想这两年的经历，让我忍不住了写下了这篇文章，记录自己在这两年经历…
Vue多页面应用开发 Vue多页面应用开发平时Vue只用来做单页面应用开发，其实它是可以做多页面开发的 Vue在工程化时，依赖webpack，webpack从一个入口文件将依赖的所有模块都整合在了一个页面所以要实现多页面
Vue 2.0学习笔记：使用$refs访问Vue中的DOM 通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是 $refs 属性。但是在深入到JavaScript部分之前，我们先看看模板。 <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">点击偶</butt…
2017前端技术发展回顾原文 – A recap of front-end development in 2017 原文作者 – Trey Huffine 原文地址 – https://levelup.gitconnected.com/a-recap-of-front-end-dev
我劝你别在数字键盘上刁难我——Vue自定义数字键盘组件最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话体验很不好，天天催着我找时间优化，原生控件还有优化个毛线，回去等死吧~ 既然要用户体验，而我又对原生控件感到很绝望，于是！我有一个大胆的想法…. 我们自己动手写一个！废话不多说，先上效果图吧~…
老司机常用的几个JavaScript调试技巧 1. debugger 除了console.log, debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。 if (thisThing) { debugger; } 2. 用表格显示对象有时，有一组复杂的对象要查看。可以通过console.log查看并滚动浏览，亦或者使用cons…
Vue.js Demo 汇总网(适合想学习 Vue和找某些功能模块的) 这个网站汇总了大多有用的,且都基于Vue 的项目和最佳实践(DEMO),不管是菜鸡还是上手了想加深认知的.在上面花些时间应该是可以更近一步的,比如阅读人家的源码实现,尝试自己写,打包,发包等
很全很全的JavaScript的模块讲解离职中，从今天起就不用上班了，最近一直在搞基础的东西，弄了一个持续更新的github笔记，可以去看看，诚意之作（本来就是写给自己看的……）链接地址：Front-End-Basics 此篇文章的地址：JavaScript的模块基础笔…
Angular 应用瘦身记——比 jQuery 更小的 TodoMVC 本文内容提取自《2017成都WEB前端交流大会》中的主题演讲。众所周知，Angular 以官方提供的一体化解决方案（全家桶）而闻名，官方团队提供了构建 Web App 所需的大部分类库和工具支持。不过，「大而全」的「大」指的是覆盖范围广，而并非应用体积大，这里我们以TodoMVC 为例，将其优化到比 jQuery 更小的体积 …
ajax跨域，这应该是最全的解决方案了前言从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识…
JavaScript async 函数详解本文是读书笔记前言 async 函数就是 Generator 函数的语法糖，js 异步编程的最终解决方案。可以认为： async 函数 == co + generator 函数 Promise 函数见引用 2 只是回调函数的另一种写法，把回调函数的横向加载，改成纵向加载，缺点是代码一堆的 then。 Generator 函数见引用 2 Gener…
以同构之名，再谈 Redux/Vuex 的必要性动态网页起初由服务器端脚本支撑，例如 Jsp、Asp 和 Php 等，也就是说，在当时，网页都是由服务端渲染的（这里的渲染指的是，将数据注入模板，渲染成 html，发回到浏览器），服务器端的 MVC 架构由此提出，模板由服务器端维护得益于 Ajax 的发展，网页开始可以进行局部刷新，Js 通过发送 Ajax 请求拉取接口数据，再通…
datamanager.js 基于observer思想的数据管理器原文载于我的博客 http://www.tangshuang.net/381… 这里主要探讨一下怎么把数据请求从业务代码中抽象出来。传统的数据请求方式是我们在具体的业务代码，或某些特定的逻辑代码（例如redux的action）中手工写一个
vue: 从一个下拉框组件理解vue中的父子通讯如果说vue组件化开发中第一步应该了解的是什么的话，那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的)，只有理解了这一步，才能更好的开发组件这里先提出两个关键词： props 与 emit ：写这个组件之前，先看看效果图：组件开发分析：既然是组件: 首先组件内…
【只发精品】匠心打造Vue侧滑菜单组件本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout 组件。前言大家有兴趣先用手机扫一扫这个二维码，或者点我然后点击页面中左上角的头像打开drawer或者向右向左拖拽，就可以看到下面gif的效果，打开自己的手机QQ，是不是…
vue+koa2+mongodb点餐系统总结这是一个点餐系统，包含用户点餐、商家出餐、管理员管理三部分功能这个项目本来是校内实训，需要用java编写，我负责一部分。但是我不太喜欢用java，且时间足够，就自己独自做了一份，用于学习。项目的功能和需求是根据前期小组讨论出来的，也基本都是仿饿了么的各项功能基本都实现了线上地址：(比较慢)47.93.254….
NectarJS:编译JavaScript为任意平台原生二进制代码大家好，我是Adrien Thierry,我启动了一个alpha版本重要的项目，这个项目我付出了一年多的时间，这个项目就是 NectarJs . NectarJS 是一个JavaScript编译器，他可以使JS开发者做任何事情都十分有效并且使用他们最喜欢的语言。自从上个九月，我决定放弃一切其他活动，来让自己全身心的投入到这个项目中。这是…
轻松理解JS函数节流和函数防抖问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？ **问题2：**如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？ …
Vue-Socket.io源码解读背景有一个项目，今年12月份开始重构，项目涉及到了socket。但是socket用的是以前一个开发人员封装的包（这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮子）。因此，趁着这个重构的机会，将vue-socket.io引入，后端就用socket.io。我
webpack3实战（5）打包一个多页、jQuery、图片转base64、压缩混淆、异步模块加载的项目前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。实战项目示例目录 0、使用说明安装： npm install 运行（注，这里不像之前用的 test ，而是改用了
Nexus.js介绍：一个多线程的JavaScript运行库首先，如果你不熟悉这个项目，建议先阅读之前写的一系列文章。如果你不想阅读这些，不用担心。这里面也会涉及到那些内容。现在，让我们开始吧。去年，我开始实现Nexus.js，这是一个基于Webkit/JavaScript内核的多线程服务端JavaScript运行库。有一段时间我放弃了做这件事，由于一些我无法控制的原因，我不打算在…
前端面试总结（at, md）引入面试过去了这么久，把八月份面试题和总结发一下吧，虽然年底大家可能都不换工作~ 还是可以看看的。关于面试，引用叶老湿的一句话。你的简历是自己工作的答卷，项目经历是你给面试官出的考纲。所以，我的面…
Webpack实战-构建同构应用同构应用是指写一份代码但可同时在浏览器和服务器中运行的应用。认识同构应用现在大多数单页应用的视图都是通过 JavaScript 代码在浏览器端渲染出来的，但在浏览器端渲染的坏处有：搜索引擎无法收录你的网页，因为展示出的数据都是在浏览器端异步渲染出来的，
Webpack多页面实现公共头部尾部和分离生产环境在日常开发中，经常会遇到这种类似头部和尾部，多个页面的拥有相同的HTML结构，如果每个页面都添加这种一样的代码，会让文件显得臃肿，且后期维护成本也很大。因此，我们可以将这些共用的HTML抽取出来形成类似组件的形式，在页面中直接引入就可以 gulp实现共用HTML 参考这里不推荐，因为无法实时编译。用Webpa…
Lerna+webpack+juction来拆分组件库为多个单独的npm包前不久发布了 vc-popup组件集 , 但是那时候完全只是展示没有如何使用的教程, 因为当时急于发布出来, 实在不妥, 抱歉~ 既然是想自己东西可以让别人方便使用, 那就是打包成npm的包咯, 但是考虑 vc-popup 仅仅是popup的组件集, 不是完整的组件库, 所以很多时候用户仅仅想使用某个 popup , 那么其他 popup 也打包进去, …
小tip: 了解LinearRGB和sRGB以及使用JS相互转换这篇文章发布于 2017年12月18日，星期一，23:11，归类于graphic相关,js相关。阅读 43 次, 今日 43 次 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6646 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、了解LinearRGB和sRGB LinearRGB顾名思义就是线…
译：Code Splitting with Vue.js And Webpack 用webpack来打包你的单页应用的一个可能的缺点是你可能会得到一个非常大的打包文件，有时甚至会有几兆大小。 Asset Size bundle.main.js 1.36MB 随之带来的问题是用户在屏幕上看到任何东西之前，必须要下载整个文件并运行它。如果用户使用的是网络连接…
goweb：基于 Go 语言开发 API 的工具一个基于go语言开发API的工具，这个工具受到了SpringMVC的启发，结合了go语言本身的特性，整体比较简单，接下来，看看如何使用它。下载安装： go get github.com/alberliu/goweb 1.核心功能请求体参数注入 package main import “github.com/alberliu/goweb” type User struct { Id in…
express，koa2等node处理前端上传图片并保存到文件中在实际的项目中，图片的处理往往是最麻烦的，无论是前后台，我自己也试手了一两个图片上传的小项目，把步骤写下来，以后自己忘记可以返回来看一下，同时希望能够帮到小伙伴们… 前端网页框架： vue + iview等组件来实现图片的file功能 + koa2 运用iview的Upload组件 Upload 上传 upload组件方法方式就不过…
前端每周清单第 44 期: 2017 JS 调查报告、REST 接口实时化、ESM 的过去与未来前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID ： frontsh…

关注github前端日报订阅精彩文章

前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流