20180127 前端开发日报

Webpack 4.0.0 beta.0 发布,不再支持 Node.js 4;最完整的前端框架Vue.js介绍;JS的中的 for in 循环有什么问题?;CompatWebView:WebView 的 JavaScriptInterface 注入漏洞解决方案;ShadowNode: 以更轻量级的方式使用 Node.js;利用NODEJS+Puppeteer实现服务器保存网页为图片和PDF;vue引入新版 swiper,vue-awesome-swiper填坑;vue实现前进刷新,后退不刷新

  1. Webpack 4.0.0 beta.0 发布,不再支持 Node.js 4 Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle – 通常只有一个,由浏览器加载。 Webpack 4.0.0 已发布首个 beta 测试版本,带来了大量…
  2. 最完整的前端框架Vue.js介绍 编辑推荐: 本文来自于51cto ,Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。本文详细介绍,希望可以帮助正在学习的你。 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授…
  3. JS的中的 for in 循环有什么问题? 答案:for循环语句 for in *循环 js中for循环 for循环 forin8 for in foreach…回答问题,赢新手礼包 苦等1分钟: 陈小春有没有演过只会工作不会做爱的电…
  4. CompatWebView:WebView 的 JavaScriptInterface 注入漏洞解决方案 CompatWebView CompatWebView是为了解决WebView的JavaScriptInterface注入漏洞 漏洞介绍:CVE-2012-6636 CVE-2013-4710 官方说明:addJavaScriptInterface This method can be used to allow JavaScript to control the host …
  5. ShadowNode: 以更轻量级的方式使用 Node.js 好久不见,Yorkie 最近做了一个小东西,在此分享给大家! 先放个链接: Rokid/shadow-node 从名字来看,他可不是一个 Node.js 的 C++ Addon,而是可以运行 Node.js 程序的另一个运行时(Runtime),相比 Node.js,具有更快的启动速度以及更小的内存占用、更加节省内存的模块加载方式!原来一个 Node.js 应用…
  6. 利用NODEJS+Puppeteer实现服务器保存网页为图片和PDF 今年5月在github上创建的项目,属于比较新的chromium无头浏览器类库。 Puppeteer在项目中的实际使用 基础安装 选用Puppeteer的主要原因有两点, 1:GOOGLE官方维护,活跃度很高,个人觉得前途光明。 2:我们的产品在chrome上适配最好。目前最新版本是 0.13.0 ,我们采用 0.12.0 版本,因 …
  7. vue引入新版 swiper,vue-awesome-swiper填坑 关于新版 vue-awesome-swiper 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的swiper不会自动播放? 为什么我的s
  8. vue实现前进刷新,后退不刷新 最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷
  9. 转眼人到中年:前端老程序员无法忘怀的一次百度电话面试 等待,山雨欲来 2010年9月22日,中秋,记得那天下着零星的小雨。大部分同学都已回了家,深秋的校园显得格外空旷寂寥。平时车来人往的校道,也只剩三三两两的行人低着头走着。 匆匆忙忙吃完早餐,一个人背着书包来到了教学楼,找了僻静的角落坐下。看看手机,8:45左右,离电话面试还有大概15分钟。心里有些紧张,毕竟…
  10. 每日一博 | Vue 框架之 goods 组件开发 一、 布局 Flex Flex 布局,可以简便、完整、响应式地实现各种页面布局,Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 // 指定为 Flex 布局 display: flex; // 主要属性 flex: none | [ <‘flex-grow’> <‘flex-sh…
  11. JavaScript框架短暂的生命周期 看新闻很累?看技术新闻更累?试试 下载InfoQ手机客户端 ,每天上下班路上听新闻,有趣还有料! 根据Stack Overflow一项新的分析,JavaScript框架的生命周期是非常短暂的。但是这个数据也展现了主流框架的寿命和满足特定需求的框架的寿命是有所差异的。 在一篇 博客文章 中,Stack Overflow的开发人员Ian A…
  12. Laravel框架中缩小Vue应用的体积 这两天写一个很小的Laravel+Vue的前后端分离应用,前端的代码文件并不多,但webpack打包生成的app.js居然有3M,生成的production版也有1.4M,放到自己的服务器上,那速度完全无法忍受。于是探究起如何缩小应用体积。 定位导致应用体积大的原因 这里使用 webpack-bundle-analyzer ,该插件可以将内容束显示为很直观…
  13. 从2.4万篇文章中挑出的最棒的 JavaScript 学习指南(2018版) 从2.4万篇文章中挑出的最棒的 JavaScript 学习指南(2018版) 标签: javascript …积分:142 排名:千里之外 原创:0篇 转载:4篇 译文:13篇 评论:0条文章…
  14. 前端性能优化:客户端从输入到展示讲解 性能优化的根本目的: 要思考的是用户使用网站的体验如何,而不是我们可以节省多少字节,只有准确感知用户的感受,我们才有必要谈毫秒、字节和请求数量等问题。 针对优化注意事项: 防止过早优化:没必要在刚开始阶段就对一个细节进行放大型的优化,因为这样
  15. Angular 6.0.0-beta.1 和 5.2.2 发布,Web 前端框架 Angular 6.0.0 beta1 版本已发布,主要是修复 bug 新增了一些特性。同时发布的还有 Angular 5.2.2,这是一个维护版本,修复了一些  bug 。 6.0.0-beta.1 (2018-01-25) Bug 修复 common:A null value should remove the style on IE  avoid triggering a cli bug common:…
  16. 基于NX开发Angular项目 首先通过nx命令行建立一个workspace > create-nx-workspace example ​ 该过程中会自动安装所需的各项依赖,请确保通过nx命令建立workspace,避免因使用webpack或ng-cli创建项目,带来各项依赖的额外安装。 当nx workspace建立之后,我们需要在example的app中建立对应的项目 > ng generate app myapp –rou…
  17. Lavas:基于 Vue 的 PWA 解决方案 简介 Lavas 是一套基于 Vue 的 PWA 解决方案,能够帮助开发者快速搭建 PWA 应用,解决接入 PWA 的各种问题,对提升用户体验,用户留存率等有明显提升,且开发者无须过多的关注 PWA 开发本身。 如果您对 PWA 的概念还不熟悉,可以参考 Lavas 官网中关于 PWA 的介绍。简而言之,PWA 的目标是让移动端的 H5 站…
  18. 系列文章:软件工程师需要了解的网络知识之从铜线到 HTTP 写作目标 本文面向中国互联网届众多的“应用软件工程师”,确切地说,面向 web 后端工程师(Java、PHP),web 前端工程师,移动开发工程师(iOS、Android)。本文将从铜线讲起,一路讲到 HTTP,为大家剖析出一个真实的“网络”。 写作由来 内容来源 前两天我给一个要跳槽的做 iOS 的哥们儿讲了几个…
  19. 浏览器通讯新标准:WebRTC What is WebRTC? WebRTC是Web Real-Time Communication的简称,它是谷歌的一个开源项目,其目的是通过一系列的协议和规范来让浏览器提供支持实时通讯功能的API接口,这样在浏览器中通过简单的接口调用即可实现本地音频、视频等资源的实时共享。 早在 2009 年,Google的一名员工就提出了该想法,随后便有几…
  20. javascript 后缀数组 后缀数组是处理字符串的利器, 它本身涉及许多辅助概念. 基本概念 1.1子串 表示字符串的某一小段, 如awbcdewg拥有 awbc, awbcd, awbcde等子串。 1.2后缀 后缀是字符串从某个位置起到达末尾的一种特殊子串。后缀可以等于自身,相等于从一个字符开始. 假令我们设计一个取后缀的函数, 它可以这样实现: functio…
  21. Vue 实践过程中的几个问题 前言 本篇是我在使用vue过程中,遇到的几个小问题和之前不了解的东西,记录下来,希望能够帮助各位踩坑。如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家。 本文首发于我的个人blog:obkoro1.com 本篇记录个人遇到的问题如下: 路由变化
  22. 在控制台中调试 AngularJS 应用 当我们在编写 AngularJS 的应用时,通过 Chrome, Firefox, 和 IE 的 Javascript 控制台来获取隐藏在应用之中的数据(Data)和服务(Service) 是一件非常具有挑战性的工作。下面列出了一些简单的小窍门,可以帮助我们使
  23. JavaScript for…in 循环出来的对象属性顺序到底是什么规律? 在学习 JavaScript 语言的 for…in 循环时,总是会被告知:用它循环对象,循环出来的属性顺序并不可靠,所以不要在 for…in 中做依赖对象属性顺序的逻辑判断。 但是我们自己写一个对象时,来回刷新好几遍,发现循环出来的属性顺序是一样的啊?
  24. 前端特效08:HTML5与js 实现的终端输入效果 今天,小编将与大家分享web前端特效荟萃系列第八期,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~ 第八期,给大家分享一个 使用javascript和html5的canvas实现传统终端输入效果 。相关代码如下: <!doctype html> <html lang="en"> <body> <canvas id=&quo…
  25. 手把手教你撸一个 Webpack Loader 文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样,webpack 能把左侧各种类型的文件(webpack 把它们叫作「模块」)统一打包为右边被通用浏览器
  26. OneAPM大讲堂 | 谁更快?JavaScript 框架性能评测 文章系国内领先的ITOM 管理平台供应商OneAPM 编译呈现。 网页性能是一个丰富且又复杂的话题。在本帖中,我们会将讨论的的范围局限在前端JavaScript 框架上,探究相对于另外一种框架而言,使用当前的框架会如何影响您的应用程序的性能。我们会特别关注两点: (1)某种框架要使用多长的时间来更新用户界面 (2)为了…
  27. 使用 rails/jquery-ujs 来编写非侵入式的服务端模板代码 项目地址 https://github.com/rails/jquery-ujs 在线 demo 演示 jquery-ujs https://mengkang.net/demo/rails/ 原理解析:代理表单提交 https://mengkang.net/demo/rails/2.html 原理解析:实现 ajax 提交 https://mengkang.net/demo/rails/3.html 项目中经…
  28. 2017年,Node.js生态圈正蓬勃发展以下10点足以说明一切 原文出处 The Node.js Community was amazing in 2017! Here's the proof: 2017年,Node.js生态圈正蓬勃发展!以下10点足以说明一切! 原文:The Node
  29. JavaScript异步机制详解 学习JavaScript的时候了解到JavaScript是单线程的,刚开始很疑惑,单线程怎么处理网络请求、文件读写等耗时操作呢?效率岂不是会很低?随着对这方面内容的了解和深入,知道了其中的奥秘。本篇文章就主要讲解一下JavaScript怎么处理异步问题。 一、同步与异步 在介绍JavaScript的异步机制之前,首先介绍一下:什…

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

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


关注我

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

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

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