20180330 前端开发日报-前端开发博客

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

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