前端开发

安装 安装：npm i -D babel-core babel-loader babel-plugin-transform-runtime 安装：npm i -D babel-preset-es2015 babel-preset-stage-0 安装：npm i -S babel-runtime 说明： babel-core 把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，再通过 语法转换器 分析其语法后转为低版本 js。 babel-preset-* babel-plugin-* 代表了一系列的转码插件 有了 babel-plugin 系列，可以按需配置自己想要的特性，若是想搭个 es6 环境，一个个地配置各个插件，我猜你会疯掉。babel-preset 系列就可以满足我们的需求，babel-preset 系列打包了一组插件，类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包处于 strawman 阶段的语法 babel-runtime babel-runtime 在代码中中直接引入 helper

一、 背景 魔法校是tob起家，众所周知tob业务很容易做成巨石应用，近两年来魔法校飞速发展，我们的某个主要的前端项目遇到了瓶颈，那就是项目太大了。 为了减少耦合度加快打包速度，我们选择将一些功能提出来新建项目，然后通过iframe的方式引入到主项目中去。 虽然项目体积大的问题得到了解决，但用户体验却随之下降。 因为每次用户切换到iframe的tab时不管优化的再好总要有一瞬间的白屏，整个系统使用起来没有连贯性，而且在iframe里切换页面浏览器的地址栏url并不会变化，给人的感觉就是两个系统。 业务的快速发展迫使我们去寻找一种新的方式-微前端。 二、微前端的基本概念 1、什么是微前端 微前端是近两年比较火的一个概念，这个术语最初来自 2016 年的 ThoughtWorks 技术雷达，它将微服务的概念扩展到了前端领域。 目前的趋势是构建一个功能丰富且强大的前端应用，即单页面应用(SPA)。 前端层通常由一个单独的团队开发，随着时间的推移，会变得越来越庞大而难以维护。 这就是传说中的前端巨无霸Frontend Monolith。 微前端背后的理念是将一个网站或者 Web App 当成特性的组合体，每个特性都由一个独立的团队负责。 每个团队都有擅长的特定业务领域或是它关心的任务。 这里，一个团队是跨职能的，它可以端到端，从数据库到用户界面完整的开发它所负责的功能。 然而

前言 对于刚开始学习前端的伙伴俩说，问得最多的问题就是 ——前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。 虽然这篇文章花了很长时间，肯定也有其局限性；希望各位不吝指出。 入题 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS&HTML&JavaScript了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中JavaScript又是重中之重。 接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。 目录 三大件学习 库工具 前端框架（ MVVM ）的学习 浏览器 & 计算机基础 前端工程化 性能优化 Nodejs 数据结构和算法 依葫芦画瓢 三大件学习 现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。 刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。 CSS & HTML 对于刚入门的朋友我依旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。 当然如果你愿意

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/fPNMaeNYgU3eJsh0SLMRRg 作者：孔垂亮 【前端科普系列】往期精彩内容： 《前端科普系列（1）：前端简史》 主要介绍 web 前端发展的历史、大事件。 本文为系列文章（2），主要介绍 Node.js 的前世今生、核心科技以及背后的故事。 一、关于 Node.js 1.Node.js 是什么 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 按照 Node.js官网 的解释非常简单： Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时。 那我们该怎么理解这句话呢？ Node.js 不是 JavaScript 的应用、也不是一种框架、更不是一门语言。它是一个 JavaScript 的运行环境，就和浏览器是一个 JavaScript 运行环境一样。 它是构建在 Chrome’s V8 这个著名的 JavaScript 引擎之上的。 这里不得不聊聊 Chrome & V8。 2.Node.js 诞生的背景 2008年， Google 开发了 Google 地图，但 Google 地图那时是安卓的原生应用。为了进一步扩展 Google

前端性能优化 一、减少 HTTP的请求次数和报文的大小 css sprite （雪碧图、图片精灵）技术 使用字体图标或者 svg 等矢量图 • 减少HTTP请求次数或者减少请求内容的大小 • 渲染更快：因为他们是基于代码渲染的，而对于位图（png / jpg / gif)是需要把图片编码再渲染 • 不容易失真变形 • 也可以使用 webp 格式图片，这种格式要小一些，但是需要服务器端支持这种格式的请求处理 图片懒加载（延迟加载）技术 • 第一次加载页面的时候不去请求真实的图片，提高第一次渲染页面的速度 • 当页面加载完，把出现再用户视野区域中的图片做真实加载，没有出现的先不加载（节约流量，也能减少对服务器的请求压力） • 对于数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术） 音视频文件取消预加载（preload = ‘none’），这样可以增加第一次渲染页面的速度，当需要播放时侯再加载 客户端和服务器端的数据传输尽可能基于 json 格式完成，xml 格式比 json 格式要大一些；还可以基于二进制编码或者文件流格式，这种格式比文件格式快很多 把页面中的 css / js 图片等文件进行合并压缩 • 合并：争取 css 和 js 都只导入一个，（webpack 可以实现自动合并压缩） • 压缩：基于 webpack 可以压缩，对于图片自己找工具压缩

大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新…… github：https://github.com/Daotin/Web 微信公众号：前端队长 博客园：http://www.cnblogs.com/lvonve/ 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！ 前言 昨天收到一个朋友的留言反馈，意思是说文章太多，找起来很麻烦，做个索引页就好了。 这个建议特别好，于是下面就是整个 《从零开始学 Web 开发》 所有内容的索引，并且按照知识点的分类排列好，每一篇文章的主要内容也简单的列举出来。 本索引将长期不定期更新…… 索引 从零开始学 Web 之 HTML 从零开始学 Web 之 HTML（一）认识前端 什么是前端 网页组成 Web 标准 浏览器内核 认识 HTML HTML 结构标准 标签分类 开发工具 从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等 标签 超链接 特殊字符 列表 音乐标签 滚动标签 head里面相关 从零开始学 Web 之 HTML（三）表单 表格 表单 标签语义化 从零开始学 Web 之 CSS 从零开始学 Web 之 CSS（一）选择器 CSS概念 选择器 从零开始学 Web 之 CSS

最近在做一个node项目，需要对前端传递给node端的敏感数据进行加密，并在node端对该加密数据进行解密；因为在做node项目之前，与后端配合开发过类似的需求，即前端加密后端解密；所以就尝试采用RSA非对称加密算法来实现。由于第一次采用RSA来完成加解密的整个过程，遇到了不少坑；不过由于种种原因，最后采用了AES的加密方式；下面就来说说前端加解密实现方案。 RSA加解密算法 实现思路 当然首先想到采用的加解密算法就是 RSA ，其关键在于算法的 公钥/秘钥 。其主要用法： 算法生成一份公钥和私钥，其中公钥是公开的，所有人都可以知道，私钥是保密的 用公钥解密，要用私钥解密 于是，基于RSA算法来实现加解密，找到了对应的浏览器端库 jsencrypt 和node端的库 node-rsa 来实现具体的功能。 具体实现思路： 使用 jsencrypt 在前端实现用公玥加密，使用 node-rsa 在node端用私钥解密。 遇到的坑 由于采用的是RSA算法，所以需要前后端约定具体的公钥和私钥。怎么生存公钥私钥呢？ 于是根据 jsencrypt 库的介绍，使用 openssl 方式来生成对应的公钥和私钥。于是生成的公钥和私钥大概是如下样子： // 私钥 -----BEGIN RSA PRIVATE KEY-----

首先说一下简单使用方法: 1.首先上官网下载Bootstrap(就是一些js文件和一些css文件) ,网址: https://v3.bootcss.com/getting-started/#download 这个网站有基本模板index.html,直接拷贝(将js文件夹和css文件夹同时拷贝,自己手动添加jQuery,配置到index.html中即可),body标签内写上你想要编写的代码 　　　　 2.对于你需要的样式,可以直接去网址 https://www.runoob.com/bootstrap/bootstrap-buttons.html 选择拷贝,修改一下名称即可 概念 前端框架,基于html,css,JavaScript 是一个半成品,开发人员可以在框架基础上,再进行开发,简化代码 好处: 定义了很多的css样式和js插件.开发人员可以使用这些样式和插件实现非常丰富的页面 响应式布局(很关键) a) 同一套页面可以兼容不同分辨率的设备 Bootstrap基本入门案例 下载bootstrap文件 将下载文件中三个文件复制到项目中 创建html页面,引入必要的文件(JQuery文件)资源( https://v3.bootcss.com/getting-started/#download )这个网站中有基本模板 对html文件进行简单的修改 备注:Bootstrap

什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。 什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www. domain.com/a.js http://www. domain.com/b.js 同一域名，不同文件或路径 允许 http://www. domain.com/lab

我给你解释一下web前端工作是做啥的，Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 个人背景： 首先我的前端是自学的，而那个时候并没有前端的称呼，那个时候叫网页制作，所以我们当时是学Java，所谓的web前端其实就是顺带学的，并没啥难度，我学编程是用了大概一年的时间，因为当时在学校时间还是比较多的，所以我建议大家不要想着速成，学任何一门手艺都需要一个过程，这是我个人的建议，而且根据我目前对于行业的了解，速成找工作还是比较困难的，就培训来说，很多人培训出来都找不到工作，并不是培训教的不好，实在时间太短，只有四个月时间。 几点建议： 1.作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己专研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。 2.视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里小编给大家提醒