react | 易学教程

还学的动吗？盘点下Vue.js 3.0.0 那些让人激动的功能

阅读更多关于还学的动吗？盘点下Vue.js 3.0.0 那些让人激动的功能

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://blog.bitsrc.io/vuejs-3-0-0-beta-features-im-excited-about-c70b82fac163 路漫漫其修远兮，吾将上下而求索。——献给所有为 Vue的发展而默默付出的开发者们。 (图片来源于网络) 前几天，Vue正式进入了beta阶段，作为一个日渐流行的JavaScript库，Vue.js由Evan You和Vue社区的284多名成员创建。如今，它已拥有超过120万用户，并成为用来解决大型单页web应用程序的有效手段。 (图片来源于网络) 在撰写本文时，Vue.js 3.0.0已经对外发布了Beta版，其中最重要的变化是受React Hooks的启发，在新的API中允许使用基于函数的方式编写组件。 (图片来源于网络) 以下是Vue.js 3.0.0 中的新功能：允许使用基于函数的方式编写组件虚拟DOM重写可提高性能并改善TypeScript支持原生门户 Fragments 片段（不会在DOM树中渲染的虚拟元素）全局mounting 有条件地暂停组件渲染我们将从性能、代码优化（Tree-shaking）、函数式API（Composition API）等方面，盘点 Vue.js 3.0.0

老板知道会点赞，前端开发人员的10个安全建议

阅读更多关于老板知道会点赞，前端开发人员的10个安全建议

Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时，我们通常会查看性能，SEO友好性和可访问性等指标，而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端，后端开发人员也必须采取重要措施来保护服务器，但最终，保护数据的责任在后端和前端之间共享。虽然敏感数据可能被安全地锁在后端仓库中，但前端掌握着前门的钥匙，窃取它们通常是获得访问权限的最简单方法。后端和前端之间共同承担保护用户数据的责任。恶意用户可以采取多种攻击手段来破坏我们的前端应用程序，但是幸运的是，我们只需使用几个正确配置的响应头并遵循良好的开发实践，就可以在很大程度上减轻此类攻击的风险。在本文中，我将介绍10种简单的操作，可以通过这些简单的操作来改善对Web应用程序的保护。测量结果在我们开始改善网站安全性之前，重要的一点是要对我们所做更改的有效性提供反馈。虽然量化构成“良好开发实践”的内容可能比较困难，但是可以相当准确地度量安全头的强度。就像我们使用Lighthouse获取性能，SEO和可访问性分数一样，我们可以使用 SecurityHeaders.com 根据当前响应头获取安全分数。 SecurityHeaders可以给我们的最高分是“A+”，我们应该始终为此努力。关于响应头的说明处理响应头曾经是后端的任务，但是如今，我们经常将Web应用程序部署到Zeit或Netlify等

Ionic Framework 4 介绍

阅读更多关于 Ionic Framework 4 介绍

Ionic Framework 4是一个开源UI工具包，用于使用Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动和桌面应用程序。Ionic Framework专注于前端用户体验，或应用程序的UI交互（控件，交互，手势，动画）。它易于学习，并与其他库或框架（如Angular）很好地集成，或者可以独立使用而无需使用简单脚本包含的前端框架。目前，Ionic Framework 4已与Angular正式集成，但对Vue和React的支持正在开发中。下面介绍Ionic Framework 4的一些特性：跨平台构建和部署跨多个平台的应用程序，例如本机iOS，Android，桌面和Web作为渐进式Web应用程序 - 所有这些都具有一个代码库。写一次，到处运行。基于Web标准 Ionic Framework建立在可靠的基础之上，标准化的Web技术：HTML，CSS和JavaScript，使用现代Web API，如Custom Elements和Shadow DOM。因此，Ionic组件具有稳定的API，并不是单个平台供应商的心血来潮。精美的设计干净，简单，功能齐全。Ionic Framework旨在在所有平台上以开箱即用的方式工作和显示。从预先设计的组件，排版，交互式范例和华丽（但可扩展）的基本主题开始。 Ionic CLI Ionic CLI

webpack4 抽离公共代码

阅读更多关于 webpack4 抽离公共代码

通过webpack打包提取公共代码提取公共代码的必要性网站都是由多个页面组成的，一般来说所有的页面采用的都是相同的技术栈，要么都是Vue，都是React，要么都是Angular，采用的技术是一致的，既然是一致的，就会有公共的代码，有很多代码是相同的，如果每个页面都将这些相同的公共代码包含进去，会引起一些问题。相同的资源配重复加载，造成了资源的浪费，（最后的静态资源包会很大）每个页面打开的时间会变长（影响用户体验）因为第一个原因，导致了第二个原因，所以我们将公共代码抽离出来，在用户打开一个页面的时候，顺便加载了公共的文件，在打开其他页面的时候，如果其他页面也引用了这个公共文件，就不用重新加载，直接从浏览器缓存中获取，这么做解决了以上的两个问题。有人说通过cdn加载公共静态资源也可以解决以上问题，对此，我说：什么是CDN 内容分发网络，加速网络传输，就是通过将资源部署到世界各地，用户访问时按照就近原则从最近的服务器获取资源，来提高获取资源的速度，cdn就是对http的提速 image 综合以上，cdn在数据传输层面上降低了用户打开首页的时间，和webpack提取公共打码不是一个方向如何提取公共代码？从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置

Webpack抽离第三方类库以及common解决方案

阅读更多关于 Webpack抽离第三方类库以及common解决方案

前端构建场景有两种，一种是单页面构建，另一种是多入口构建多页面应用程序（我视野比较小，目前就知道这两种），下面我们针对这两种场景总结了几种抽离第三方类库以及公共文件的解决方案。如果有哪些地方优化不周到，请指点一二，另外求关注求星星，么么哒单页面构建：常规配置 const path = require('path' ); const MiniCssExtractPlugin = require('mini-css-extract-plugin' ); const HtmlWebpackPlugin = require('html-webpack-plugin' ); const { CleanWebpackPlugin } = require('clean-webpack-plugin' ) module.exports = { mode: "development" , entry: { app: './app.js' }, output: { path: path.resolve(__dirname, './build/' ), filename: "bundle-[chunkhash:8].js" }, devtool: "source-map" , module: { rules: [ { test: /\.js$/ , use: { loader: 'babel

单页面应用程序（SPA）的优缺点

阅读更多关于单页面应用程序（SPA）的优缺点

　　我们通常所说的单页面应用程序通常通过前端框架（angular、 react 、 vue ）进行开发，单页面应用程序将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。一、优点 1.良好的交互体验　　单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅，web应用更具响应性和更令人着迷。 2.良好的前后端工作分离模式　　后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。 3.减轻服务器压力　　单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。二、缺点 1.首屏加载慢如果不对路由进行处理，在加载首页的时候，就会将所有组件全部加载，并向服务器请求数据，这必将拖慢加载速度；通过查看Network，发现整个网站加载试讲长达10几秒

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

阅读更多关于解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果一、前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的，但是想要找到可以运行的代码还是比较困难的，最近突然想起就在网上汇总了一些这样的代码。二、3D效果代码 2.1、旋转相册 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转相册</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{ margin:0; padding:0; } body{ background: black; } .content{ width: 200px; height: 150px; position: relative; margin:200px auto 0; perspective: 1500px; } .box{ width: 200px; height: 150px; transform-style: preserve-3d; transform:rotateX(-30deg); animation:photo 15s linear

玩转3D Swiper美女性感秀之思路分析总结

阅读更多关于玩转3D Swiper美女性感秀之思路分析总结

前言　　继一次的 3D魔方之后，这次利用CSS3的transform、translate、rotate、preserve-3d等结合JS的 requestAnimationFrame 、 class 带你一起玩转性感美女秀，正常套路，请先一堵为快，有兴趣继续，没兴趣也可以看看美女养眼哦🤪！想直接在线预览 👈 这里是 @IT·平头哥联盟，我是首席填坑官∙苏南，用心分享做有温度的攻城狮。群：912594095 回顾：　　看过上次的 3D魔方的同学对于本次的分析会有一定的帮助,当然如果大佬您本身就对 css3 就已经玩的很666了，那么对于下文的分解就请扮演老师的角色吧，小弟如有不足之处，欢迎斧正。 CSS3·画出最懂你的3D魔方 Canvas·手把手教你如何绘制一辆会跑车解析：创建列DIV ：从上图中我们能看出，每次旋转的动画是由多列小卡片组成的；每列根据它的下标，对背景进行位移，做到拼接的效果，整体看起来就成了一张图一起来看一下真像是啥样的： colNode(){ //生成列的节点 for (var i=0;i<this.colLen;i++){ let iDivCol = document.createElement('div'); //列 iDivCol.className = "div-col"; iDivCol.style.width =

好程序员web前端培训分享React学习笔记（二）

阅读更多关于好程序员web前端培训分享React学习笔记（二）

　　好程序员web前端培训分享React学习笔记（二），组件的数据挂载方式，属性(props)props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props 　　属性是描述性质、特点的，组件自己不能随意更改。　　之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props: import React, { Component, Fragment } from 'react'import ReactDOM from 'react-dom'class Title extends Component { render () { return ( <h1>欢迎进入{this.props.name}的世界</h1> ) }}const Content = (props) => { return ( <p>{props.name}是一个构建UI的库</p> )}class App extends Component { render () { return ( <Fragment> <Title name="React" /> <Content

关于this.setState()的那些事

阅读更多关于关于this.setState()的那些事

在网上看了很多关于 this.setState() 的介绍，觉得受益匪浅，就总结了一些帮助自己理解的点，在此分享出来，如果有侵权的地方，请及时提醒。一、State的定义状态（ state ）和属性（ props ）类似，都是一个组件所需要的一些数据集合，但是它是私有的，并且由组件本身完全控制，可以认为它是组件的“私有属性（或者是局部属性）”。二、关于 setState() 有三件事是你应该知道的。 # 参考链接 1.不要直接修改 state(状态) this.state.comment = 'Hello'; 上述代码并不会重新渲染组件，需要使用this.setState()代替： this.setState({ comment: 'Hello' }); 需要注意的是唯一可以分配 this.state 的地方是构造函数。 2.state(状态) 更新可能是异步的 React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。因为 this.props 和 this.state 可能是异步更新的，你不能依赖他们的值计算下一个 state (状态)。以下面的代码为例: this.setState({ counter: this.state.counter + this.props.increment, }); 我们并不能通过上述代码得到想要的值

订阅 react