自动化编译工具瞭望
前言: 随着前端vue、react、Angular等框架越来越火,自动化构建工具也时不时映入我们的眼帘,转眼已是几分天下的局面,功能很强大,使得前端项目开发和维护越来越方便,但是想灵活运用,学习曲线却越发陡峭,文档更是爆炸式的膨胀,我们面对的是各种基于不同编译工具的专项功能插件,及对应的配置参数。
搞好了:解放双手,极大的提升"开发体验",一键搞定一切,空对空导弹一键发射,发射后不管!自动追击目标。脱靶自动启动自曝程序,不会伤及地面。
搞不好:鸡肋,加重负担,浪费人力(专人维护,其他人一点不会,或者多版本迭代后变得难以上手),反而浪费时间(调试流程别扭,半自动半手动ctrl+c还得关闭这个软件打开那个软件),黑盒(最禁忌!直接傻眼),过度依赖编译工具,束缚技术选型,单一技术栈。
编译工具带给我们什么?(1)搭建开发环境:
热更新
mock数据
代理
(2)生成上线文件:
编译(less,sass,es6,typescript,.vue,.jsx )
语法校验
压缩校验 css ,js
css3代码自动补全
px转rem
自动化测试
自 ...
es6新特性
一. es6对象的扩展1. 属性的简洁表示法ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
12345678910111213let birth ='foo';const Person ={ name:'张三'; //等同于birth: birth birth, // 等同于hello: function ()... hello(){ console.log('我的名字是',this.name);} };
2. 属性名表达式JavaScript 定义对象的属性,有两种方法。
12345678// 方法一obj.foo =true;// 方法二obj['a'+'bc']=123;
ES6 允许字面量定义对象时,用表达式作为对象的属性名。
123456789let propKey ='foo';let obj ={ [propKey]:true, ['a ...
函数式编程
一、JS引擎的工作原理先引入几个概念:执行环境栈、执行环境、全局对象、变量对象、活动对象、作用域和作用域链
然后贴一段代码:
12345678910var x = 1; //定义一个全局变量 xfunction A(y){ var x = 2; //定义一个局部变量 x function B(z){ //定义一个内部函数 B console.log(x+y+z); } return B; //返回函数B的引用}var C = A(1); //执行A,返回BC(1); //执行函数B,输出 4
下面我们从全局初始化、执行函数A、执行函数B 三个阶段来分析JS引擎对这段代码的处理过程
1.全局初始化JS引擎在进入一段可执行代码时,会完成三项初始化工作:
首先,创 ...
nuxt.js
Nuxt.js是什么?
一个基于 Vue.js 的通用应用框架
基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用
预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置
提供了一种命令叫:nuxt generate,为基于 Vue.js 的应用提供生成对应的静态站点的功能
为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等
Nuxt.js的特性
基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能,支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预处理器: SASS、LESS、 Stylus等等
支持HTTP/2 推送
目录结构1234567891011├── assets/ # 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript├── components/ # 组件目录 componen ...
Vue服务器端渲染
1. 服务器端渲染(SSR)简介1.1 什么是服务器端渲染(SSR)?
Vue.js 是构建客户端应用程序的框架
默认情况下浏览器输出Vue组件,生成DOM并操作DOM
服务器端渲染则是服务器端生成静态的HTML字符串,浏览器将静态标记“混合”为客户端可交互的应用程序
服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”,因为应用程序的大部分代码都可以在服务器和客户端上运行
1.2 为什么使用服务器端渲染(SSR)?与传统 SPA(Single-Page Application - 单页应用程序)相比,服务器端渲染(SSR)的优势主要在于:
更好的 SEO
搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,抓取工具并不会等待异步完成后再行抓取页面内容。
更快的内容到达时间
无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。
1.3 使用服务器端渲染(SSR)需要权衡的地方
开发条件所限
...