20180330 前端开发日报

新人必看的短小而精悍的javascript function;JS中的九个console命令以及用法;记金山wps2019届前端笔试题 | 掘金技术征文;3月web前端面试小结 | 掘金技术征文;教你用 css 写一个拟物化图标;彻底捋一捋JS事件:捕获与冒泡、事件处理程序、事件对象、跨浏览器、事件委托;对Node.js异步的进一步理解;vuejs单页应用的权限管理实践

  1. 新人必看的短小而精悍的javascript function 最近github上看到30-seconds-of-code关于js,css都是值得看的,今天分享10个fnc. 1.回到顶部,优点使用浏览器刷新频率的requestAnimationFrame,很顺滑 const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationF...
  2. JS中的九个console命令以及用法 一、显示信息的命令 根据信息的不同,console对象有四种显示信息的方法,分别是 console.log('text'); 日志的输出 console.info('信息'); 信息提示 console.error('错误'); 错误信息 console.wa
  3. 记金山wps2019届前端笔试题 | 掘金技术征文 第一题 console.log(a) // undefined var a = 1; var getNum = function() { a = 2; } function get
  4. 3月web前端面试小结 | 掘金技术征文 说一下box-sizing的应用场景 box-sizing的属性值分为两个,border-box和content-box,其中, border-box:width=content+padding+border content-box: width=conte
  5. 教你用 css 写一个拟物化图标 拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行。相当长一段时间,无论系统、网页还是第三方应用都争相使用拟物化的设计风格。那时候的dribbble网,各色优秀的拟物化设计作品也争奇斗艳、层出不穷。 下面先展示几张优秀的拟物化设计作品,让
  6. 彻底捋一捋JS事件:捕获与冒泡、事件处理程序、事件对象、跨浏览器、事件委托 一、捕获与冒泡 事件流描述的是从页面中接收事件的顺序 IE 的事件流是事件冒泡流 而 Netscape Communicator 的事件流是事件捕获流 DOM2级事件规定的事件流包括三个阶段: 事件捕获阶段 处于目标阶段 事件冒泡阶段
  7. 对Node.js异步的进一步理解 上周写的JS异步编程的浅思,一步一步将反人类的异步回调演化到带有 async/await 关键字的同步/顺序执行,让我的异步编程处理能力有了质的突破,达到“ 异步编程的最高境界,就是根本不用关心它是不是异步 ”。 那么,问题来了 Node.js的这种异步是如何在单线程的JS中实现的呢? Node.js的异步设计,会有哪些好处,...
  8. vuejs单页应用的权限管理实践 原文发布于 http://blog.ahui.me/posts/2018-03-26/permission-control-of-vuejs/ 在众多的B端应用中,简单如小型企业的管理后台,还是大型的CMS,CRM系统,权限管理都是一个重中之重的需求,过往的
  9. 2018三月个人前端社招面试经验总结 社招面试相比校招面试,我个人觉得是并不太那么的看重基础知识了(基础知识还是非常重要的)。社招一般没笔试,更多的是聊你之前做过的项目。基本上问问几个问题就知道你是什么水平了。 第一家: 应聘公司:拉勾网上发来的面试邀请,坐落于上海陆家嘴某金融大夏,环境非常高大上,面试官也还不错。面试的岗位是react-n...
  10. vue-music 音乐网站 在学习完vueJS,一直想做个项目来锻炼一下,选来选去,还是做个网易云音乐,其间遇到了很多坑,也逐渐接受了Vue这种组件化的思想以及从Dom操作转换为用数据去驱动视图。并且在某部分基础组件上借鉴(搬运)了elementUI的源码(不过elementUI写的是真好) 技术栈 Vue.js Vuex Vue-router axios Binaryify ...
  11. Vue SPA项目SEO优化之预渲染Prerender-spa-plugin 由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容,通过预渲染插件 prerender-spa-plugin 解决vue的SPA项目的seo问题。 可以看到项目编译后的 index.html 中只有一些HTML和js,css文件的引用,而无关于内容的静态文本。当然你也可以添加meta的keyword和descrption,去简答的描述一些关于网站的内...
  12. Git 中那些容易混淆和忽略的指令都做了些神马 整理下git中不是很清晰的一些指令的背后做了什么,有说的不对的地方,欢迎指正。 git merge & git rebase 这节缘起于最近给公司的优秀的开源组件库提pr,在开发说明文档中看到,推荐在提交pr前建议用git rebase 清理下comm
  13. Web 开发进阶指南 因为对面试技巧特别感兴趣,过去的一段时间我也一直在总结一些面试题,也恰巧看到社区有人写了一系列关于《PHPer 面试指南》的文章,号称“史上最全、最具有指导”,我很感兴趣的点进去看了一些,文章梳理了很多知识点,我挺赞同作者的一些观点,年轻有为,激起了我写这篇文章的兴趣。下面对应《PHPer 面试指南》各章节...
  14. 移动前端开发viewport深入理解 一个网页在pc端和移动端能统一适配,关键因素就在于viewport。在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网
  15. 【Python3网络爬虫开发实战】6-Ajax数据爬取-3-Ajax结果提取 这里仍然以微博为例,接下来用Python来模拟这些ajax请求,把我发过的微博爬取下来。 1. 分析请求 打开Ajax的XHR过滤器,然后一直滑动页面以加载新的微博内容。可以看到,会不断有Ajax请求发出。 选定其中一个请求,分析它的参数信息。点击该请求,进入详情页面,如图6-11所示。 图6-11 详情页面 可以发现...
  16. Vue.js & Checkbox 半选状态 引子 上周项目中有一常见的场景需求:一组 checkbox ,然后一 checkbox 控制该组的全选/全不选状态,如该组未全选中需展示成半选中的状态。可能我描述的不够清楚,反正就是如下的样子(我用 jQuery 写了个 demo)。实现起来并不复杂,为了保持跨浏览器样式一致性,之前是其他 DOM 元素去模拟 checkbox ,半...
  17. Eng --- React 、 Vue 、 Angular全家桶套餐外的另一种超轻量级实现方式 (纯国产) 简介: Eng 是一款 MVVM 模式超 轻量级的 组件化数据渲染 JS 本地插件 , 仅有16kb 。 但却支持 React 、 Vue 、 Angular 全家桶套餐的主要核心功能 , 因此是这三类工具
  18. V8 JavaScript 引擎 6.6 发布,异步性能大幅提升 V8 JavaScript 引擎 6.6 已发布,该版本针对 JavaScript 语言有以下功能改进: Function.prototype.toString() 现在更精确的返回源码,包括空格和注释。对比示例: 行分隔符(U + 2028)和段落分隔符(U + 2029)现在允许在字符串文字中 匹配 JSON 。以前,这些符号被视为行结束符,使用它们...
  19. 上海地铁线路图全新重构(React) 之前一直有在维护一个上海地铁线路图的 pwa,最主要的特性就是 “offline first”。但是由于代码都是通过原生的 js 去实现,之前我都不是很喜欢去用框架,不想具有任何框架的偏好。但是到后期随着代码量的增加,代码的确变得混乱不堪,拓展新功能也变得尤为困难。因此,花了将近两个礼拜的时候对于应用进行了一次完整的...
  20. CSS Transitions, Animations 與 Vue 要理解 Vue 轉場與動畫的運作,首先我們需要具備 CSS transitions 和 animations 的基本知識。 這邊我們不會完整交代所有的教學,而是重點式的節錄。 讓我們先從 transitions 開始,transitions 中文我們可以稱為轉場,其主要的意思定義 CSS 樣式產生變化時,兩者之間的轉換效果,所謂的轉換效果指的是變化的...
  21. Vue——关于自定义动态组件 现在基于vue的UI组件库有很多,比如iview,element-ui等。但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件。 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: ...
  22. Vue.js实现可配置的登录表单 表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下。 业务场景 在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录,有的客户还希望能有手机号+验证码+密码的登录方式…所以登录方式的灵活性需要可配置的表单支持,于是...
  23. vuex 源码:深入 vuex 之 action 前言 mutation 用于同步更新 state,而 action 则是提交 mutation,并可进行异步操作,从而间接更新 state。 在还没解读之前,大家都认为 action 相对于 mutation 来说难理解得多,毕竟涉及到了异步。本篇就来看看 a
  24. 写一个babel插件实现按需打包的功能 你要是没有抽象语法树基础的话,建议先看一下上一篇文章抽象语法树 Abstract syntax tree这样更有助于对下文的理解! 背景:当我们同时引入一个包中的两个方法,有两种形式 第一种形式 import {flatten,join} from 'l
  25. WebSocket系列之基础知识入门篇 本文是WebSocket系列的第一篇,主要介绍WebSocket相关的基础协议知识和API。由于WebSocket的相关介绍在MDN中分布较乱,初学者不太容易入门,因此通过本文将相关基础知识和使用方法进行一个归纳和总结。 本文主要内容如下: WebSocket基础概念介绍 WebSocket协议初读 WebSocket 相关API浅析 WebSock...
  26. 20180329 前端开发日报HTML5中37个最重要的技术点;webpack4之基础篇;JavaScript 优雅模式 Ice Factory;Nerv:京东高性能前端框架;vue2 + koa2 + webpack4 的SSR之旅;不可思议的纯CSS导航栏下划线跟随效果;腾讯一面(2019前端实习岗)|...详情→ ​​​

    20180329 前端开发日报
  27. OkHttp 源码解析(三):连接池简介 上一篇文章(OkHttp 源码解析(二):建立连接)分析了 OkHttp 建立连接的过程,主要涉及到的几个类包括 StreamAllocation、RealConnection 以及 HttpCodec,其中 RealConnection 封装了底层的 Socket。Sock...
  28. IOS、Android与H5互相通信-JsBridge原理 这方面的文章很多,做个小总结吧,扯着扯着可能要扯出很多东西,只为记录一些东西。有摘录,有原创:)H5和原生app(iosAndroid)交互的介质基本都是基于Webview,可以把Webview看作是一个性能打八折的浏览器。IOS调用Javascriptio
  29. PSV 发布 3.1.4 版,JS 数据格式验证工具 JS 数据格式验证工具 PSV 新发布 3.1.4 版本,较之前优化语法结构,测试覆盖率提升至99%。 Porco Schema Validate (PSV) 是一款轻量级 JS 数据格式验证工具,相比于其他功能齐备的验证工具,PSV 的优势在于体积非常小,最开始的核心代码只有 130 行。因此 PSV 非常适合做小型项目、原型试错、个人...

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

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

原文:20180330 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20180330.html)