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