20180526 前端开发日报

RCTF2018 web Writeup;你不懂js系列学习笔记-异步与性能- 05;Node.js 10.2.0 发布,功能改进和 Bug 修复;超简单的前端跨域、前后端分离解决方案;如何正确的(?)利用 Vue.mixin() 偷懒;Vue项目中路由动态传参功能相关实现;再说 Vue SSR 的 Cookies 问题;不借助Echarts等图形框架原生JS快速实现折线图效果

  1. RCTF2018 Web Writeup RCTF刚好赶上了完成毕设的时间,没办法只接触了部分题目,可惜的是,其中很多题目都不是特别有意思,这里只整理部分我参与的.. r-cursive LUL dat font http://r-cursive.ml hint: If you get stuck after arbitary code execution, try to escape the sandbox. phpinfo may help you figure out how the sandbo...
  2. 你不懂js系列学习笔记-异步与性能- 05 原文: You-Dont-Know-JS 这本书至此一直是关于如何更有效地利用异步模式。但是我们还没有直接解释为什么异步对于 JS 如此重要。最明显明确的理由就是 性能 。 举个例子,如果你要发起两个 ajax 请求,而且他们是相互独立的,但你在进行下一个任务之前需要等到他们全部完成,你就有两种选择来对这种互动...
  3. Node.js 10.2.0 发布,功能改进和 Bug 修复 Node.js 10.2.0 已发布,这是针对 10.x 系列的第二个维护版本,包含一些改进和修复。 主要亮点: addons: Fixed a memory leak for users of AsyncResource and N-API. (Michael Dawson)  #20668 assert: The error parameter of  assert.throws() can be an ...
  4. 超简单的前端跨域、前后端分离解决方案 LiveNode是一个基于Node.js轻巧的web服务,帮助前端开发者解决本地跨域,代码刷新,以及SPA(单页应用)前后端服务分离,并且可以用于生产环境项目部署。 Github地址 安装 全局安装livenode脚手架工具 npm install livenode-cli -g 初始化 创建项目 livenode init 根据提示输入项目文件名称(不输...
  5. 如何正确的(?)利用 Vue.mixin() 偷懒 最近开发的页面以及功能大都以表格为主,接口获取来的 JSON 数据大都是需要经过处理,比如时间戳需要转换,或者状态码的转义。对于这样的问题,各大主流框架都提供了类似于过滤的方法,在 Vue 中,一般是在页面上定义 filter 然后在模板文件中使用 | 进行处理。 这种方法和以前的遍历数组洗数据是方便...
  6. Vue项目中路由动态传参功能相关实现 这两天在项目中有个新需求:在当前页面中的有很多数据,过滤数据的条件有时间,页码,类型,id搜索....,假设我在页面中选择的某段时间,某个类型,现在我需要把握当前看到的信息完全展现给另一朋友。 server端环境:时间和页码可以动态的传递到后端 一. 初步解决方案 刚看此需求首先想到的是vue—router的动态传参,...
  7. 再说 Vue SSR 的 Cookies 问题 一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies
  8. 不借助Echarts等图形框架原生JS快速实现折线图效果 这篇文章发布于 2018年05月25日,星期五,02:01,归类于js实例。 阅读 34 次, 今日 34 次 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7605 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。 一、折线图效果预览 例如下图所示的折线图效果实现就很简单: ...
  9. 最后说 Vue2 SSR 的 Cookies 问题 本来想前面写点什么的, 还是算了, 直接说思路吧. 从 Vue2.3 版本后, SSR 的 cookies, 就变成一个无比麻烦的问题, 具体请访问官网文档: https://ssr.vuejs.org/zh/api.html#runinnewcont
  10. 面向Vue新人:使用Vue自定义指令来完善一个Select组件 本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一、首先,我们简单布局一下
  11. Event Loop是个什么玩意:从 Vue 的 nextTick 说起 熟悉 Vue 的同学们都知道,Vue 有个 nextTick 方法,用来异步更新数据。 来看看这个栗子: <body> <div id="main"> <ul class="list">
  12. 前端转换神器react-to-vue 近年来,前端技术不断火热,尤其以React和Vue技术最为火爆,这两个前端框架也是目前国内使用得最多的两个框架。虽然,在使用的广度上React虐胜一筹,但Vue框架的发展趋势也不容小觑,特别是去年React的MIT风波,越来越大的企业开始将目光转向了Vue。那
  13. Web 前端性能基础指标 & 计算方式 前端性能衡量指标 从用户角度而言,打开一个页面想要的就是页面可以尽快有响应,加载完并且可以允许交互;因此前端的性能可以用白屏时间,首屏时间,可交互时间来衡量。下图是用户请求过程的截图,白屏时间就是用户发起请求之后到页面开始显示的时间,可以看到在324ms之前页面都是空白的,所以白屏时间就是3...
  14. Vue是如何实现双向绑定的? 本文主要探讨双向绑定,不对响应式做讨论哈 前言 一直对双向绑定的概念不是很清楚,处于“人云亦云”的状态,想要讲解却无法达到很好讲述水准,不能很清楚的讲明白这个概念。所以就有了写此文的想法。个人觉得,如果讲述者无法清晰、有条理、直白
  15. JS 底蕴之 变量、作用域和垃圾回收 基本类型和引用类型 在 JavaScript 中,数据类型可分为基本类型和引用类型, 基本类型有六种:Null,Undefined,String,Boolean,Number,Symbol; 而引用类型就是传说中的 Object 了。 其中基本类型是按值传递
  16. Async-Await≈Generators+Promises Async-Await ≈ Generators + Promises 这篇文章我将介绍ES2017的async函数为什么是ES2016的Generators和Promises特性功能的语法糖。 阅读须知 本文不对三者概念进行介绍和讲解 本文唯一的目的就是
  17. jquery html() callback 通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片。问题是JQuery的.html()函数是同步的,如果我们想知道HTML被加载之后容器的高,例如获取容器的offsetHeight或scrollHeight属性的值,必须要等HTML元素中所有的内容都加载完毕后才能获取到真实的值,...
  18. Vue中computed的本质—lazy Watch 两个月前我曾在掘金翻译了一篇关于Vue中简单介绍computed是如何工作的文章,翻译的很一般所以我就不贴地址了。有位我非常敬佩的前辈对文章做了评价,内容就是本文的标题“感觉原文并没有讲清楚 computed 实现的本质- lazy watcher”。上周末正
  19. 关于JavaScript中this的软绑定 所谓软绑定,是和硬绑定相对应的一个词,在详细解释软绑定之前,我们先来看看硬绑定。在JavaScript中,this的绑定是动态的,在函数被调用的时候绑定,它指向什么完全取决于函数在哪里调用,情况比较复杂,光是绑定规则就有默认绑定、隐式绑定、显式绑定、new绑定等,而硬绑定是显示绑定中的一种,通常情况下是通过调用函...
  20. css3D 的魅力》最近玩了玩用css来构建3D效果,写了几个demo,所以在博客中总结一下。 (by 子慕大诗人) ​​​
    css3D 的魅力
  21. vue项目中富文本编辑器踩坑之旅 一开始选用了 tinymce ,遇到的问题如下: 主要参照的是 https://github.com/PanJiaChen/vue-element-admin 第一个问题是引入静态文件的路径与此不一样 第二个问题是当把这个放在 ivew 的 Modal 弹窗中,不能编辑,工具栏可以点击,但是编辑区域点了没反应 后来自己...
  22. ES7 只有两个新功能,这是它们的工作原理》ES7 带来了两个新功能:Array.prototype.includes() 和 新的指数运算符:** 。 (唐耶尔 译,欢迎加入翻译组: ) ​​​
    ES7 只有两个新功能,这是它们的工作原理
  23. 关于JavaScript的内存机制 一、背景 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存空间并不是一个经常被提及的概念,很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后,会对内存空间的认知比较模糊,甚至有些人干脆就是一无所知. 当...
  24. 20180525 前端开发日报】高效开发 Web 单页应用解决方案;Safe.js 3.0.0 发布,史上最大更新增加6项功能;快速介绍几个JS函数;v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具;JS事件循环,了解一下?;Node-Web-Console——基于 N...详情→ ​​​
    20180525 前端开发日报
  25. 如何让一个vue项目支持多语言(vue-i18n)这两天手头的一个任务是给一个五六年的老项目添加多语言。这个项目庞大且复杂,早期是用jQuery实现的,两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加多语言,不可避免存在很多文本替换的工作,...
  26. Web Bundler CheatSheet, 选择合适的构建打包工具 题注:Web Bundler CheatSheet 属于 Awesome-CheatSheet 系列,盘点数个常用的开发打包工具清单。欢迎加入阿里南京前端团队,欢迎关注阿里南京技术专刊了解更多讯息。 Web Bundler CheatSheet | Web 构
  27. 人人都能懂的Vue源码系列(三)—resolveConstructorOptions函数 上篇文章介绍了Vue构造函数的部分实现,如果当前Vue实例不是组件,则执行mergeOptions方法。 vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor),
  28. 来学着写自己的“jQuery” jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档对象模型(DOM)元素、创
  29. Golang 在自定义的 https 服务器中启用 pprof 接口 以下所有观点都是个人愚见,有不同建议或补充的的欢迎emial, aboutme 原文章地址 pprof的简介 pprof是golang标准库里面的其中一个库,它通过其HTTP服务器得到运行时的分析数据,从而给pprof可视化工具提供数据分析来源。它可以用来分析性能消耗,分析内存泄漏,死锁等。 具体使用可以了解官方包pprof,那...
  30. Safe.js 3.1.0 发布,8点准时到达增加双向绑定 一天又一天,Safe.js更新准时到达! 那么我们来看一下这次safejs的更新又更新了哪些内容: 修改组件方法,可以重复渲染 增加bindVal属性 增加bindHTML属性 增加bindText 具体想了解更新内容的可以进入我们在码云上的wiki! 点 赞是参与开源社区的必备礼仪(红薯说的...),前往 ...

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

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

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