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

2017年10个最好的Javascript和CSS库；JavaScript 数组遍历方法的对比；老司机常用的几个JavaScript调试技巧；如何用 CSS 网格快速做出网站原型；three.js实现炫酷的3d影院；两行 CSS 代码实现图片任意颜色赋色技术；css sprites精灵图、css图片整合、css贴图定位案例教程；jquery template.js前端模板引擎

1、2017年10个最好的Javascript和CSS库

localForage 用于indexedDB和WebSQL的封装程序，可以提高Web应用程序在本地存储数据以便脱机使用的能力。读写操作与localStorage类似，但是可以保存许多类型的数据，而不是只保存字符串。它还提供了一个双重API，使开发人员可以选择使用回调或promises。 AOS AOS是一个CSS库，允许您添加滚动动画效果。 …
2、JavaScript 数组遍历方法的对比

JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句代码: var arr = for(var i = 0, len = arr.length; i < len; i++){ console.log(arr ) } 这是标准for循环的写法也…
3、老司机常用的几个JavaScript调试技巧

1. debugger 除了console.log, debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。 if (thisThing) { debugger; } 2. 用表格显示对象有时，有一组复杂的对象要查看。可以通过console.log查看并滚动浏览，亦或者使用cons…
4、如何用 CSS 网格快速做出网站原型

简评：CSS 网格模块是创建网站模型的绝佳工具。它是我尝试过的任何其他系统中最快让你体验布局的工具。我们的网格我们将从模仿一个经典网站的非常基本的网格开始：首先，我将解释我们需要的 HTML 和 CSS 代码…
5、three.js实现炫酷的3d影院

阅读本博客可以获取到的知识创建一个3d的空间粒子效果 three.js点击事件的处理着色器的初步使用实现一个光晕效果 1.创建一个3d的空间可以想象一下我们在房间内，房间是一个立方体，如果你有生活品味，可能会在房间内贴上壁纸，three.js可以
6、两行 CSS 代码实现图片任意颜色赋色技术

很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术，当时惊为天人，感慨还可以这样玩，私底下也曾多次想过有没有其他方法可以实现，又或者不仅仅局限于 PNG 图片。    mix-blend
7、css sprites精灵图、css图片整合、css贴图定位案例教程

一、什么是css sprites CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合并为一张整图，然后再利用bac
8、jquery template.js前端模板引擎

作为现代应用，ajax的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板在刚有web的时候，前端与后端的交互，非常直白，浏览器端发出URL，后端返回一张拼好了的HTML串。浏览器对其进行渲染。html中可能会混有一些php(或者php中混有一些html)。在服务端将数据与模板进行拼装，生成要返回浏览器端的html串…
9、大前端神器安利之 Puppeteer

Puppeteer(中文翻译”木偶”) 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个Node库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整（非无头）的 Chrome。Chrome素来在浏览器界稳执牛耳，因此，Chrome Headless 必将成为 web 应用自动化测试的行业标杆。使用P…
10、瞎折腾：把JS,CSS任意文本文件加密成一张图片

这篇文章发布于 2017年12月24日，星期日，16:04，归类于js实例。阅读 264 次, 今日 264 次 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6661 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、这是一张包含特殊信息的加密图片 64像素*64像素原始加密图…
11、参加第12届D2前端技术论坛是怎么样一种体验？

倒不觉得说通过各种大会，在技术上能得到多大收获。主要是可以看看行业前沿大佬们，现在都在做什么？想要做什么？将要做什么？
12、2018 年你应该知道的 Vue.js 的 11 个组件库

2018 年来临之际，继最热的 React 组件库和 Angular 组件库之后，这里有 11 个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用程序。与 React 和 Angular 不同的是，Vue.js 是 Evan You 通过众包（ crowd-sourcing）来维护的一个开源项目。这也是 Vue.js 最好的一部分，因为会鼓励…
13、2017前端技术发展回顾

原文 – A recap of front-end development in 2017 原文作者 – Trey Huffine 原文地址 – https://levelup.gitconnected.com/a-recap-of-front-end-dev
14、读懂源码：一步一步实现一个 Vue

源码阅读：究竟怎样才算是读懂了？市面上有很多源码分析的文章，就我看到的而言，基本的套路就是梳理流程，讲一讲每个模块的功能，整篇文章有一大半都是直接挂源码。我不禁怀疑，作者真的看懂了吗？为什么我看完后还是什么都不懂呢？事实上一个经过无数次版本
15、JavaScript 优雅的实现方式包含你可能不知道的知识点

有些东西很好用，但是你未必知道；有些东西你可能用过，但是你未必知道原理。实现一个目的有多种途径，俗话说，条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论，收集整理拓展一波，…
16、欢迎来到新时代，HTML 5.2 已成为 W3C 新推荐标准

W3C 万维网联盟近日宣布，HTML5.2 已准备就绪，现已成为 W3C 推荐标准。HTML5.2 是 HTML 语言第五大版本的第二个小版本。详见（来自：开源中国）
17、关于 vue 全家桶的四个 “最佳实践”

在读这篇文章之前，我想先安利大家一个东西：看到这副黑框眼镜，你是不是想到了什么？对，就是它：Vue.js 组件编码规范。读过的同学忽略，没读过的同学有时间的话请花 20 分钟认真看看，文章的内容都是在认可这篇规范的基础上展开的。另外，本文中的“最佳实践”（注意引号），全都是一家之言，不一定…
18、Vue多页面应用开发

Vue多页面应用开发平时Vue只用来做单页面应用开发，其实它是可以做多页面开发的 Vue在工程化时，依赖webpack，webpack从一个入口文件将依赖的所有模块都整合在了一个页面所以要实现多页面
19、利用FormData对象实现AJAX文件上传功能及后端实现

包括HTML基础设置、CSS界面优化、JS利用FormData对象和AJAX进行上传、后端接收文件并存储到指定路径以及删除文件操作。基础的设置： <form enctype="multipart/form-data"> <input id="file" type="file" multiple="multiple" name="file" accept=&q…
20、JavaScript30秒，从入门到放弃

有意思最近很火的github上的库30-seconds-of-code，特别有意思，代码也很优雅。能学es6 自己翻译，能学英语代码很美，很优雅，美即正义函数式表达，享受 arrayGcd Calculates the greatest common denominato…
21、Node.js VS PHP — 你应该选择哪一个？

现在，Web开发公司和开发人员可以选择多种技术栈来构建Web应用程序。早期网络发展，不同的技术被用于前端和后端开发。但是，随着Node.js的发布，布局发生了变化，因为它允许开发人员使用 JavaScript 编写后端代码。这最终催生了MEAN（MongoDB + Express +AngularJS + NodeJS ）堆栈 web 开发框架，从前端到后端甚至…
22、基于 WebRTC 构建 Web SIP Phone

0 阅前须知本文并不是教程，只是实现方案我只是从WEB端考虑这个问题，实际还需要后端sip服务器的配合 jsSIP有个非常不错的在线demo, 可以去哪里玩耍，很好玩呢 try jssip 1. 技术简介 WebRTC: WebRTC，名称源自…
23、React同构与极致的性能优化

本文发表于北斗同构github, 转载请注明出处注：本文为第12届D2前端技术论坛《打造高可靠与高性能的React同构解决方案》分享内容，已经过数据脱敏处理。前言随着React的兴起, 结合Node直出的性能优势和React的…
24、Vue 2.0学习笔记：使用$refs访问Vue中的DOM

通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是 $refs 属性。但是在深入到JavaScript部分之前，我们先看看模板。 <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">点击偶</butt…
25、TypeScript, Angular 和移动端的跨平台开发

摘要 Google技术经理陈亮将为大家介绍TypeScript和Angular是什么以及如何利用TypeScript和Angular进行移动端的跨平台介绍。内容来源： 2017年7月15日，Google Engineering Manager陈亮在“2017 JavaScript中国开发者大会”进行《TypeScript, Angular, 和移动端的跨平台开发》演讲分享。IT 大咖说作为独家视频合…
26、vue+koa2+mongodb点餐系统总结

这是一个点餐系统，包含用户点餐、商家出餐、管理员管理三部分功能这个项目本来是校内实训，需要用java编写，我负责一部分。但是我不太喜欢用java，且时间足够，就自己独自做了一份，用于学习。项目的功能和需求是根据前期小组讨论出来的，也基本都是仿饿了么的各项功能基本都实现了线上地址：(比较慢)47.93.254….
27、可能是最全的Vue-TypeScript教程(附实例代码和一键构建工具)

功能轮播搜索列表懒加载简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址： github.com/SimonZhangI… 欢迎提…
28、我劝你别在数字键盘上刁难我——Vue自定义数字键盘组件

最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话体验很不好，天天催着我找时间优化，原生控件还有优化个毛线，回去等死吧~ 既然要用户体验，而我又对原生控件感到很绝望，于是！我有一个大胆的想法…. 我们自己动手写一个！废话不多说，先上效果图吧~…
29、你不知道的javaScript上卷(第一章作用域是什么)
#开源项目#Bootstrap 4 组件与 Vue.js 集成：

30、Bootstrap-vue

详见： Bootstrap-vue 是前端两大流行框架 Vue 与 Bootstrap 4 集成的项目，用于构建响应式、移动优先的 Web 项目。
31、JS截取字符串之substring、substr和slice详解

js字符串截取，本文详细的介绍了JavaScript中substring()、substr()和slice()三个js字符串截取的方法，substring()方法用于提取字符串中介于两个指定下标之间的字符.substr 方法用于…详情→ #前端开发博客#
32、Json最强攻略

前言无论是前端解析后端的数据还是做全栈的技术需要，你都可能多少需要知道些json的技术点，从json的标准格式到json的格式转换与传输，再到中转的处理。本文小编与你一起回顾json的最强知识点攻略。概念 javascript的对象
33、vue: 从一个下拉框组件理解vue中的父子通讯

如果说vue组件化开发中第一步应该了解的是什么的话，那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的)，只有理解了这一步，才能更好的开发组件这里先提出两个关键词： props 与 emit ：写这个组件之前，先看看效果图：组件开发分析：既然是组件: 首先组件内…
前端入行两年–教会了我这些道理1.前言光阴似箭，日月如梭。不得不感慨时间过得很快，2017差不多结束了，一下子我从事前端开发的时间已经两年了。这两年可以说是一波三折，回想这两年的经历，让我忍不住了写下了这篇文章，记录自己在这两年经历…
35、很全很全的JavaScript的模块讲解

离职中，从今天起就不用上班了，最近一直在搞基础的东西，弄了一个持续更新的github笔记，可以去看看，诚意之作（本来就是写给自己看的……）链接地址：Front-End-Basics 此篇文章的地址：JavaScript的模块基础笔…
36、从 webpack 到全面拥抱 Parcel #2 让 Parcel 支持 vue

原文发表于：www.rails365.net 相关链接（网友提供）： parcel-plugin-vue parcel-demo 默认情况下 Parcel 是支持 React 和 Preact，可以通过查看下面这个页面得知。 https://parceljs.org/recipes.html 要让 Parcel 支持 vue，需要简单处理一下。（下面的方法是我尝试的，如果有更好的，…
37、Vue2 技术栈归纳与精粹

Vue是一款高度封装的、开箱即用的、一栈式的前端框架，既可以结合webpack进行编译式前端开发，也适用基于gulp、grunt等自动化工具直接挂载至全局window使用。本文成文于Vue2.4.x版本发布之初，笔者生产环境当前使用的最新版本为2.5.2。在经历多个前端重度交互项目的开发实践之后，笔者结合官方文档对Vue技术栈进行了全面…
38、A Simple RESTful API Service With Node.js And Koa2

背景: 2017年可以说是区块链爆发的一年，都说币圈一日股市一年，小道消息的即时性很重要，自己有时候想要即时查询币价，同时也需要实时获知一些利好或利空消息，奈何总找不到合适自己的小玩意；女朋友怕冷，又总嫌弃带雨伞麻烦，如果来个天气预报提醒她几时需要带雨伞，那简直perfect； …
39、我总结的JavaScript性能优化的小知识

一直在学习javascript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对javascript理解的还不够透彻异或是自己太笨。详见（来自：静逸 – 博客园）
40、实现WebSocket和WAMP协议的开源库WampSharp

Websocket Application Messaging Protocol 协议： https://github.com/wamp-proto/wamp-proto 1. 基础档案引入： WAMP协议是一种建立在Websocket之上可以进行publish&subscribe和rpc的通信协议。它实现了类似ZeroMQ中的pub&sub通信模式，同时将这种模式用于传统的rpc通信，较好地解耦了通信端点之间的…
41、只发精品匠心打造Vue侧滑菜单组件

本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout 组件。前言大家有兴趣先用手机扫一扫这个二维码，或者点我然后点击页面中左上角的头像打开drawer或者向右向左拖拽，就可以看到下面gif的效果，打开自己的手机QQ，是不是…
42、ajax跨域，这应该是最全的解决方案了

前言从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识…
43、希望是最浅显易懂的 RxJS 教学

前言關注 RxJS 已經好一段時間了，最早知道這個東西是因為 redux-observable，是一個 redux 的 middleware，Netflix 利用它來解決複雜的非同步相關問題，那時候我連redux-saga都還沒搞懂，沒想到就又有新的東西出來了。半年前花了一些時間，找了很多網路上的資料，試圖想要搞懂這整個東西。可是對我來說，…
44、以同构之名，再谈 Redux/Vuex 的必要性

动态网页起初由服务器端脚本支撑，例如 Jsp、Asp 和 Php 等，也就是说，在当时，网页都是由服务端渲染的（这里的渲染指的是，将数据注入模板，渲染成 html，发回到浏览器），服务器端的 MVC 架构由此提出，模板由服务器端维护得益于 Ajax 的发展，网页开始可以进行局部刷新，Js 通过发送 Ajax 请求拉取接口数据，再通…

喜欢这篇文章的朋友，欢迎收藏、分享、评论，帮我上热门，你的支持，是我每日更新的动力！

喜欢前端的朋友可以点击关注一下我微博，每日分享精彩的前端文章！

关注我

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

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

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