20180817 前端开发周报-前端开发博客

2019届校招前端面试题整理——HTML、CSS篇；从青铜到王者10个css3伪类使用技巧和运用，了解一哈；ES6核心，值得驻足花一天时间来学习；前端每日实战 2018 年 7 月份项目汇总（共 29 个项目）；VUE如何在for循环里面根据内容值动态的加入class；Javascript 模块化指北；React Native with MobX — 入门；滚动视差？CSS 不在话下

2019届校招前端面试题整理——HTML、CSS篇DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。
从青铜到王者10个css3伪类使用技巧和运用，了解一哈写在前面伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新
ES6核心，值得驻足花一天时间来学习 1.let 和 const 命令在es5时，只有两种变量声明，var 和function。在es6中新增了四种let和const，以及另外两种声明import和class。我们先讲解let和const,后续会补充import和class （1）let 我们
前端每日实战 2018 年 7 月份项目汇总（共 29 个项目）《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！
VUE如何在for循环里面根据内容值动态的加入class 最近在做玩家蚂蚁项目的时候遇到了一个评分显示的小功能，这个在前端显示的星星是用class样式来进行控制的 class =” real-star comment-stars-width5 ” 数据库里记录的信息只有一个评分1-5。我们如果用一般的php方法直接在class里面用 comment-stars-width{$score}这样是行不通的。在查了很多资料和做…
Javascript 模块化指北随着 Web 技术的蓬勃发展和依赖的基础设施日益完善，前端领域逐渐从浏览器扩展至服务端（Node.js），桌面端（PC、Android、iOS），乃至于物联网设备（IoT），其中 JavaScript 承载着这些应用程序的核心部分，随着其规模化和复杂度的成倍增长，其软件工程体系也随之建立起来（协同开发、单元测试、需求和缺陷管理等），模…
React Native with MobX — 入门在这里，我们将结合MobX和React Native来创建一个简单的列表应用程序。如果您正在寻找如何开始使用MobX和React Native，那么这应该是一个很好的选择。想学习React Native？查看 React Native Train
《滚动视差？CSS 不在话下》视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。（by chokcoco ）
Deno下一代Nodejs？Deno初体验 Deno下一代Nodejs?Deno初体验前言 Ryan Dahl之父发布了新的项目Deno,很多IT媒体都使用了标题“下一代Nodejs”,首先我们看一下Deno的特性: 1.支持type…
Vue实现左右菜单联动实现（更新） title: Vue实现左右菜单联动实现 date: 2018-08-11 16:31:34 tags: Vue 左右联动 top: 100 copyright: true 知乎个人博客 Github 源码传送门：Rain120/vue-study 根
Vue.js路由管理器 Vue Router通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：
手把手教你用原生JavaScript造轮子（2）——轮播图通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。
7款炫酷的HTML5 Canvas动画特效 HTML5真的是一个相当出色的Web技术，它不仅可以让你更加方便地操纵页面元素，而且可以通过canvas实现更多的动画特效，引进HTML5标准后，CSS3也就可以发挥更大的作用。本文主要介绍了一些基于HTML5 Canvas的动画特效，分享给大家，希望大家喜欢。 1、HTML5 Canvas瀑布动画超逼真这是一个很逼真的HTML5瀑布动画，基于Can…
vue全家桶仿某鱼部分布局以及功能实现每次写文章时，总会觉得比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是可以复盘一下自己的开发过程，对自己还是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做学习用途。
Web 端反爬虫技术方案对于内容型的公司，数据的安全性很重要。对于内容公司来说，数据的重要性不言而喻。比如你一个做在线教育的平台，题目的数据很重要吧，但是被别人通过爬虫技术全部爬走了？如果核心竞争力都被拿走了，那就是凉凉。再比说有个独立开发者想抄袭你的产品，通过抓包和爬虫手段将你核心
前端每日实战：102# 视频演示如何用纯 CSS 创作一个小和尚（发扬佛性编程，别老想着暴捶产品经理）效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
Web 应用架构基础课初级 Web 应用开发者必学的基础网络架构概念。
Node.js 知多少自从开始接触 Node 起，就离不开查阅大大小小的书籍、课程等等，大部分书籍和网络教程其实多多少少都是讲到一些框架或者生态里的各类工具库的使用(生态是 Node 引以为‘豪’的一点)，偏向于速成，当然，我认为 Node 无论是在学习成本还是开发效率上都是数一数二的。这些途径的最终目的都是好的，也是一个帮助初学…
TensorFlow.js 简介本文翻译自Medium上的文章：A Gentle Introduction to TensorFlow.js，原文地址：https://medium.com/tensorflow/a-gentle-introduction-to-tensorflow-js-dba2e5257702 Tensorflow.js是一个基于deeplearn.js构建的库，可直接在浏览器上创建深度学习模块。使用它可以在浏览器上创建CNN(卷积神经…
Rxjs 响应式编程-第一章：响应式现实世界相当混乱：事件不按照顺序发生，应用崩溃，网络不通。几乎没有应用是完全同步的，所以我们不得不写一些异步代码保持应用的可响应性。大多数的时候是很痛苦的，但也并不是不可避免。
使用Jest进行React单元测试 React单元测试方案前置知识为什么要进行测试测试可以确保得到预期的结果作为现有代码行为的描述促使开发者写可测试的代码，一般可测试的代码可读性也会高一点如果依赖的组件有修改，受影响的组件能在测试中发现错误测试类型单元测试：指的是以原件的单
前端工程不了解？带你踩坑加爬坑本文希望能帮助那些一直用脚手架而对工程化没有概念的朋友。文中许多步骤会在运行时报错，从错误中分析需要添加的配置，加深印象以及对所添加的每一行配置的理解。本文将以 React 为例，带你走一次。创建目录 mkdir demo && cd demo npm init touch index.js 复制代码 webpack 安装webpa…
JSX 这么6？本文会先解释一下JSX的工作原理，再介绍一下如何用“不寻常”的方式来使用JSX。如果你已经了解了JSX的工作原理，可以跳过第一部分。如果你只想学一些实用的东西，那可以跳过第二部分。上周，我发了一条这样的动态：可以看出大家
原生js实现日期选择器插件距离自己上次写插件差不多半年了。公司技术栈都是用框架，调解下口味就写了此原生插件。因为本意是想兼容到ie9就不用es6语法写了。前段时间在看vue源码受了点启发，本插件有点接近数据驱动视图更新的响应式渲染。…
JS 中的offset、scroll、client总结经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。两张图镇楼，随时翻阅 1. offset offset 指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条、padding、border，不包…
WebWorker与WebSocket实现前端消息总线 Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。将二者一结合，业务系统信息流转通知功能完全就可以剥离出来。架构图 JS Work
js解惑-函数执行顺序背景 JS基础知识温习。函数解析原理分3个阶段：准备（Hoisting）装载（填充数据）执行（逐行处理）准备本阶段就是书本中所说的Hoisting，包括：形参变量创建、函数体内变量提升创建和函数申明创建。就是先把函数中所有的变量或者声明
记一次基于vue的spa多页签实践经验前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以
【如果只读一本HTTP入门的书，那一定是这本】HTTP（Hypertext Transfer Protocol，超文本传输协议1）是在万维网上进行通信时所使用的协议方案。HTTP 有很多应用，但最著名的是用于 Web 浏览器和 Web 服务器之间的双工通信。详见
《微信小程序开发07-列表页面怎么做》今天我们就来实现列表页的demo。（by 叶小钗）
基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
找一份好的前端工作，起点很重要到底什么才是一份好的前端工作？自从开始做咨询，就不断有人问我：“老师，前端这个行业行业怎么样啊？有发展吗？”或者是：“老师，做IT，算不算一份好工作啊？”工作，是一个永恒的话题：没工作的人需要一份工作；…
ES6深入浅出模块系统模块化主要是帮助我们更好的组织代码，模块允许我们将相关的变量和函数放在一个模块中。在 ES6 模块化之前，JS 语言并没有模块的概念，只有函数作用域和全局作用域非常容易发生命名冲突。之前的 RequireJS、SeaJS…
用Vue撸一个『A-Z字母滑动检索菜单』最近用vue仿写途牛旅行APP 遇到了这样的城市列表选择页面，花了些时间，用Vue实现了一下并让它体验的接近安卓/IOS 原生组件
美团扫码付的前端可用性保障实践开篇 2017年，美团金融前端遇到了很多通用性问题，特别是在保障前端可用性的过程中，我们团队也踩了不少“坑”，在梳理完这些问题以后，我们还专门做了第31期线下沙龙给大家进行了分享。不管是在面试过程中与候选人讨论，还是在团队内的和我们前端小伙伴讨论，都能发现很多
《React Native 精解与实战》书籍连载：React 与 React Native 简介此文是我的出版书籍《React Native 精解与实战》连载分享，此书由机械工业出版社出版，书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战，以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示，精选了大量实例代码，方便读者快速学习。 …
浅析setTimeout与Promise 关于JavaScript异步编程，前文解析过了JavaScript并发模型，该并发模型基于事件循环。正巧又在Stackoverflow上回答了一个关于setTimeout与Promise执行顺序相关的问题，于是总结这一知识点，与更多读者分享，同时完善JavaS
聊聊 CSS 中的层叠相关概念很系统的总结。
前端面试&笔试&错题指南(三） JavaScript排坑指南(三) JavaScript总是给人以惊喜，学习不止，进步不断，今天继续补充JS容易搞错的几道笔试/面试题，为了秋招继续努力，欢迎一起为秋招努力的小伙伴共勉 ————————————-
深入前端学习原来这么有趣第6期最近做的项目是从0开始采用Vue作为数据驱动框架。所以有很多Vue实战上的经验体会，下面就专门拿几个常用的但难度不高的VUe功能说一下： 1.阻止事件冒泡：冒泡概念普及：当单击事件在dom结构上存在父子关系时，单击子dom，不仅会触发子dom单击事件还会触发父dom单击事件。上面的大概就是典型的需要…