20171225前端开发周报

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

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

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

  2. 2、JavaScript 数组遍历方法的对比

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

  3. 3、老司机常用的几个JavaScript调试技巧

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

  4. 4、如何用 CSS 网格快速做出网站原型

    简评:CSS 网格模块是创建网站模型的绝佳工具。它是我尝试过的任何其他系统中最快让你体验布局的工具。 我们的网格 我们将从模仿一个经典网站的非常基本的网格开始: 首先,我将解释我们需要的 HTML 和 CSS 代码...

  5. 5、three.js实现炫酷的3d影院

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

  6. 6、两行 CSS 代码实现图片任意颜色赋色技术

    很久之前在张鑫旭大大的博客看到过一篇&nbsp;PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片。 &nbsp;&nbsp; mix-blend

  7. 7、css sprites精灵图、css图片整合、css贴图定位案例教程

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

  8. 8、jquery template.js前端模板引擎

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

  9. 9、大前端神器安利之 Puppeteer

    Puppeteer(中文翻译”木偶”) 是 Google Chrome 团队官方的无界面(Headless)Chrome 工具,它是一个Node库,提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整(非无头)的 Chrome。Chrome素来在浏览器界稳执牛耳,因此,Chrome Headless 必将成为 web 应用自动化测试的行业标杆。使用P...

  10. 10、瞎折腾:把JS,CSS任意文本文件加密成一张图片

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

  11. 11、参加第12届D2前端技术论坛是怎么样一种体验?

    倒不觉得说通过各种大会,在技术上能得到多大收获。主要是可以看看行业前沿大佬们,现在都在做什么?想要做什么?将要做什么?

  12. 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. 13、2017前端技术发展回顾

    原文 - A recap of front-end development in 2017 原文作者 - Trey Huffine 原文地址 - https://levelup.gitconnected.com/a-recap-of-front-end-dev

  14. 14、读懂源码:一步一步实现一个 Vue

    源码阅读:究竟怎样才算是读懂了? 市面上有很多源码分析的文章,就我看到的而言,基本的套路就是梳理流程,讲一讲每个模块的功能,整篇文章有一大半都是直接挂源码。我不禁怀疑,作者真的看懂了吗?为什么我看完后还是什么都不懂呢? 事实上一个经过无数次版本

  15. 15、JavaScript 优雅的实现方式包含你可能不知道的知识点

    有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。 实现一个目的有多种途径,俗话说,条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论,收集整理拓展一波,...

  16. 16、欢迎来到新时代,HTML 5.2 已成为 W3C 新推荐标准

    W3C 万维网联盟近日宣布,HTML5.2 已准备就绪,现已成为 W3C 推荐标准。HTML5.2 是 HTML 语言第五大版本的第二个小版本。详见 (来自:开源中国) ​​​​

    欢迎来到新时代,HTML 5.2 已成为 W3C 新推荐标准
  17. 17、关于 vue 全家桶的四个 “最佳实践”

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

  18. 18、Vue多页面应用开发

    Vue多页面应用开发 平时Vue只用来做单页面应用开发,其实它是可以做多页面开发的 Vue在工程化时,依赖webpack,webpack从一个入口文件将依赖的所有模块都整合在了一个页面 所以要实现多页面

  19. 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. 20、JavaScript30秒, 从入门到放弃

    有意思 最近很火的github上的库30-seconds-of-code,特别有意思,代码也很优雅。 能学ES6 自己翻译,能学英语 代码很美,很优雅,美即正义 函数式表达,享受 arrayGcd Calculates the greatest common denominato...

  21. 21、Node.js VS PHP — 你应该选择哪一个?

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

  22. 22、基于 WebRTC 构建 Web SIP Phone

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

  23. 23、React同构与极致的性能优化

    本文发表于北斗同构github, 转载请注明出处 注: 本文为第12届D2前端技术论坛《打造高可靠与高性能的React同构解决方案》分享内容,已经过数据脱敏处理。 前言 随着React的兴起, 结合Node直出的性能优势和React的...

  24. 24、Vue 2.0学习笔记:使用$refs访问Vue中的DOM

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

  25. 25、TypeScript, Angular 和移动端的跨平台开发

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

  26. 26、vue+koa2+mongodb点餐系统总结

    这是一个点餐系统,包含用户点餐、商家出餐、管理员管理三部分功能 这个项目本来是校内实训,需要用java编写,我负责一部分。但是我不太喜欢用java,且时间足够,就自己独自做了一份,用于学习。 项目的功能和需求是根据前期小组讨论出来的,也基本都是仿饿了么的 各项功能基本都实现了 线上地址:(比较慢)47.93.254....

  27. 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. 28、我劝你别在数字键盘上刁难我——Vue自定义数字键盘组件

    最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 input 进行金额输入的话 体验很不好,天天催着我找时间优化,原生控件还有优化个毛线,回去等死吧~ 既然要用户体验,而我又对原生控件感到很绝望,于是!我有一个大胆的想法.... 我们自己动手写一个! 废话不多说,先上效果图吧~...

  29. #开源项目#Bootstrap 4 组件与 Vue.js 集成:

    30、Bootstrap-vue

    详见: Bootstrap-vue 是前端两大流行框架 Vue 与 Bootstrap 4 集成的项目,用于构建响应式、移动优先的 Web 项目。 ​​​

    Bootstrap-vue
  30. 31、JS截取字符串之substring、substr和slice详解

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

    JS截取字符串之substring、substr和slice详解
  31. 32、Json最强攻略

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

  32. 33、vue: 从一个下拉框组件理解vue中的父子通讯

    如果说vue组件化开发中第一步应该了解的是什么的话,那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的),只有理解了这一步,才能更好的开发组件 这里先提出两个关键词: props 与 emit : 写这个组件之前,先看看效果图: 组件开发分析: 既然是组件: 首先组件内...

  33. 前端入行两年--教会了我这些道理1.前言 光阴似箭,日月如梭。不得不感慨时间过得很快,2017差不多结束了,一下子我从事前端开发的时间已经两年了。这两年可以说是一波三折,回想这两年的经历,让我忍不住了写下了这篇文章,记录自己在这两年经历...
  34. 35、很全很全的JavaScript的模块讲解

    离职中,从今天起就不用上班了,最近一直在搞基础的东西,弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的……)链接地址:Front-End-Basics 此篇文章的地址:JavaScript的模块 基础笔...

  35. 36、从 webpack 到全面拥抱 Parcel #2 让 Parcel 支持 vue

    原文发表于:www.rails365.net 相关链接(网友提供): parcel-plugin-vue parcel-demo 默认情况下 Parcel 是支持 React 和 Preact,可以通过查看下面这个页面得知。 https://parceljs.org/recipes.html 要让 Parcel 支持 vue,需要简单处理一下。(下面的方法是我尝试的,如果有更好的,...

  36. 37、Vue2 技术栈归纳与精粹

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

  37. 38、A Simple RESTful API Service With Node.js And Koa2

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

  38. 39、我总结的JavaScript性能优化的小知识

    一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨。详见 (来自:静逸 - 博客园) ​​​​

  39. 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通信,较好地解耦了通信端点之间的...

  40. 41、只发精品匠心打造Vue侧滑菜单组件

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

  41. 42、ajax跨域,这应该是最全的解决方案了

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

  42. 43、希望是最浅显易懂的 RxJS 教学

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

  43. 44、以同构之名,再谈 Redux/Vuex 的必要性

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

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

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

原创文章:20171225前端开发周报 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fe-weekly-20171225.html)