20180516 前端开发日报

Vue从零开始系列(上手),呆萌小白上手VUE;JavaScript 是如何工作的:在网络层如何优化性能和安全;JavaScript原型梳理;使用 Puppeteer 和 Jest 测试你的 React 应用;自建最轻量的react+webpack+ES6架构;Node.js 沙箱环境;浅谈前端安全以及如何防范;vue-cli 开发组件的脚手架 wendzhue/component

  1. VUE从零开始系列(上手),呆萌小白上手VUE 抱歉这回拖得时间有点长,不过我尽量保证抽出时间来坚持写下去,另本人水平有限,欢迎大家指正和拍砖。在上一章,大家对整个项目结构应该有所了解了,那我们就开始着手开始写页面。 对 vue-cli 的一些修改 由于我们用脚手架搭建并不能完全满足项目的需要,所以我们要再增加一些东西。 1、安装vuex做状态管理 vue...
  2. JavaScript 是如何工作的:在网络层如何优化性能和安全 原文:How JavaScript Works: Inside the Networking Layer + How to Optimize Its Performance and Security 译者:neal1991 welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me LICENSE: MIT ...
  3. JavaScript原型梳理 JavaScript中原型这个概念很经常被提起,那么它到底是什么呢,它又有什么用呢?接下来让我们一步一步来理解它。 认识原型 原型的概念 在JavaScript中, 原型也是一个对象 ,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个 ] 内部属性,这个属性所对应的就是该对象的原型。 原型...
  4. 使用 Puppeteer 和 Jest 测试你的 React 应用 端到端测试可以帮助我们确保 React 应用中所有的组件都能像我们预期的那样工作,而单元测试和集成测试做不到这样。 Puppeteer 是 Google 官方提供的一个端到端测试的Node 库,它向我们提供了基于 Dev Tools 协议封装的上层 API 接口来控制Chromium。有了 Puppeteer,我们可以打开应用、执行测试。 在这篇文章中,...
  5. 自建最轻量的react+webpack+es6架构 一、初始化项目 $ mkdir my-app & cd my-app $ npm install --yes 二、安装依赖库 # 必备react基础模块 $ npm install --save react react-dom # 必备webpack基础模块,webpack4.x版本需安装webpack-cli, webpacke-dev-server开启服务器 $ npm install --save-dev webpack webpack-dev-server...
  6. Node.js 沙箱环境 node官方文档里提到node的vm模块可以用来做沙箱环境执行代码,对代码的上下文环境做隔离。 A common use case is to run the code in a sandboxed environment. The sandboxed c
  7. 浅谈前端安全以及如何防范 随着互联网的发达,各种web应用也变得越来越复杂,满足了用户的各种需求,但是随之而来的就是各种网络安全的问题。作为前端开发行业的我们也逃不开这个问题。所以今天我就简单聊一聊WEB前端安全以及如何防范。首先前端攻击都有哪些形式,我们该如何防范?一、XSS攻击XS
  8. vue-cli 开发组件的脚手架 wendzhue/component 最近在开发组件的时候经常要折腾脚手架,于是花了点时间为 vue-cli 写了一个模板,欢迎大家试用。 使用方法如下: 特色: 可选择使用传统方式开发 demo,或者是基于 UI 开发工具 Storybook。提供统一的命令 npm run dev 打开带热重载的预览界面,方便开发。 一行命令生成预览 demo npm run bu...
  9. vue移动端路由切换完整实例 在写移动端时,因为需要给页面做转场动画,便有了这次的研究 其中最主要的时以下两个问题: 浏览器导航栏的切换 ios 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画。 除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的。主要就是...
  10. 为Vue-Cli添砖加瓦 哈喽大家好,这里是代码搬运工。第一次写还挺紧张的呀。 首先我们安装一个vue-cli(不会的同学可以看这里npm安装vue) 现在我们的目录是这样的(eslint我没开): 然后装好依赖启动这个cli 1.路由懒加载 在router文件夹新建一个 asyncload.js 代码如下: export default function (url) { ...
  11. 原生JS实现类似《掘金》网站的图片查看器 经常看掘金网站发现他的图片预览挺不错的,跟以前的 fancyBox 插件效果差不多。在这里我为大家提供一些编写思路。 记录页面的图片所在位置offsetTop / offsetLeft / width /height。 创建div层铺满整屏幕。 如果是加载大
  12. 深入理解Vue的watch实现原理及其实现方式 理解Vue中Watch的实现原理和方式之前,你需要深入的理解MVVM的实现原理,如果你还不是很理解,推荐你阅读我之前的几篇文章: 彻底搞懂Vue针对数组和双向绑定(MVVM)的处理方式 vue.js源码解读系列 - 双向绑定具体如何初始化和工作 vue.js源码解读系列 - 剖析observer,dep,watch三者关系 如何具体的实现数据双...
  13. 一篇就让你学会webpack4 webpack 是一个现代 JavaScript 应用程序的静态模块打包器,目前最流行的打包神器,接下来聊一下webpack4 首先webpack4要求 node版本在8.5以上 ,cmd中 node -v 查看node版本。 1.什么是webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不...
  14. 前端人工智能?TensorFlow.js 学会游戏通关 题注:本文转载自 阿里南京技术专刊-知乎。 关键字:Tensorflow,JavaScript,AI,前端开发,人工智能,神经网络,遗传算法 先上最终效果 T-Rex Runner 是隐藏在 Chrome 中的彩蛋游戏,最近我用刚推出的 TensorFl
  15. JavaScript开发区块链只需200行代码 JavaScript开发一个简单的区块链只需200行代码。通过JavaScript的开发实现过程,你将理解区块链是什么:区块链就是一个分布式数据库,存储结构是一个不断增长的链表,链表中包含着许多有序的记录。 然而,在通常情况下,当我们谈到区块链的时候也会谈起使
  16. 数字在JavaScript中是如何编译的 JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。由于特别考虑,本文中的数字将用整数表示,以便在阅读本文后,您将了解在以下交互中会发生什么: (译者注:浮点数并不一定等于小数,定点数也并不一定就是整数。
  17. 前端基础面试题@CSS篇 随笔 最近出去面了一次试。去之前信心满满,去之后灰头土脸,因为连最简单的“css居中方式有多少种”、“说说js数据类型”这种入门问题竟然回答的支支吾吾,也怪不得面试官20分钟就优雅的把我送了出来。 痛定思痛,总结了一些基础面试题,望壮士你出门迎敌时,不要像我一
  18. vue router+ vuex+ 首页登录判断逻辑 首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页。登录成功后,跳转到前一个页面。 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from nex
  19. js异步编程发展 在最开始的时候,js异步编程是一件很痛苦的事,不过随着技术发展,现在写异步已经可以像写同步一样舒服了。 主要的变化过程: 回调函数 ===>>> promise ===>>> generater ===>>&gt
  20. [Angular]在Angular中和DOM打交道的正确姿势 原文链接: https://blog.angularindepth.com/working-with-dom-in-angular-unexpected-consequences-and-optimization-techniques-682ac09f6866 介绍 文章里有很多Angular中的术语,可以参见这篇文章 使用ViewContainerRef来操作Angular中的DOM 组件视图(Component View) ...
  21. vue中使用高德地图搭建实时公交应用(地图 + 附近站点+线路详情 + 输入提示+换乘详情) 最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果: 如果有需要源码的童鞋请移步我的github地址vue搭建实时公交(欢迎star) 实现思路 在vue项目
  22. 清晰明白的解释下 JS 中的 Symbols, Iterators, Generators, Async/Await, 和 Async Iterators Symbol Object.keys(),getOwnPropertyNames 会忽略key值为Symbol的 无法 for in 遍历 Symbol是唯一的,可以避免重复 Symbol.for 创建的Symbol不是唯一的 Interat ...
  23. 【翻译】Webpack 4 教程:从0配置到生产模式 原文链接:Webpack 4 Tutorial: from 0 Conf to Production Mode webpack 4 问世了! 这个流行的模块打包工具进行了大规模的升级。 webpack4,有什么更新?大幅度的性能优化,零配置和明智的默认配置。
  24. 周大侠啊 进击的 JavaScript 之 原型链 在JavaScript中,我们创建一个 函数A (就是声明一个函数), 那么浏览器就会用 构造函数 Function 来创建这个函数。所以,所有的 函数 的 constructor 属性都指向 构造函数 Function 。 A.constructor === Function; //true (函数本身并没有这个属性,后面介绍。记住,这里是函数,重点,要考,哈哈) 然后会在内存中创建...
  25. 一步一步实现一个Promise A+规范的 Promise 2015年6月,ES2015(即ES6)正式发布后受到了非常多的关注。其中很重要的一点是 Promise 被列为了正式规范。在此之前很多库都对异步编程/回调地狱实现了类 Promise 的应对方案,比如 bluebird、Angular 的 Q 和大名鼎鼎的
  26. 浅入浅出webpack 准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大。由于上一次学习Webpack的时候并没有了解过Node.j
  27. 使用webpack搭建react开发环境 安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install -
  28. 让fetch也可以timeout 本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原生的HTML5 API fetch并不支持timeout属性,习惯了jQueryajax配置的同学,如果一时在fetch找不到配置timeout的地

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

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

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