前端
关注
分享
扫一扫
w1fl1w
这个作者很懒，什么都没留下…
展开
-
8.5.4 Vite实现原理
本文为拉勾网大前端高薪训练营第一期笔记Vite概念Vite是一个面向现代浏览器的一个更轻、更快的web应用开发工具基于ECMAScript标准原生模块系统(ES Modules)实现Vite项目依赖Vite@vue/compiler-sfcvite指令vite servevite buildHMRVite HMR: 立即编译当前所修改的文件Webpack HMR: 会自动以这个文件为入口重写build一次，所有的涉及到的依赖也都会被加载一遍build内部是rollup，最后原创 2020-11-20 15:54:42 · 246 阅读 · 0 评论 -
8.5.3 Vue.js 3.0响应式系统原理
本文为拉勾网大前端高薪训练营第一期笔记Vue.js响应式Proxy对象实现属性监听多层属性嵌套， 在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用Proxy注意事项<script> 'use strict' // 问题1： set 和 deleteProperty 中需要返回布尔类型的值 // 在严格模式下，如果返回 false 的话会出现 Type E原创 2020-11-20 15:54:00 · 158 阅读 · 0 评论 -
8.5.2 Composition API
本文为拉勾网大前端高薪训练营第一期笔记心得体会Vue3.0的重要变动就是composition API，在查看代码方面比之前真的好太多了，感觉起来和React.js的Hook很类似。composition api举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2020-11-20 15:53:10 · 186 阅读 · 0 评论 -
8.5.1 Vue3.0介绍
本文为拉勾网大前端高薪训练营第一期笔记Vue.js 3.0源码组织方式的变化采用TypeScript重写使用Monorepo管理项目结构Composition API性能提升Vitepackages目录结构compiler-core平台无关的编译器compiler-dom浏览器平台下的编译器，依赖于compiler-corecompiler-sfcsingle file component，用来编译单文件组件，依赖于compiler-core和comp原创 2020-11-20 15:49:26 · 200 阅读 · 0 评论 -
8.4.3 封装Vue.js组件库
本文为拉勾网大前端高薪训练营第一期笔记CDD（Component-Driven Development)自下而上从组件级别开始，到页面级别结束CDC的好处组件在最大程度被复用并行开发可视化测试组件的边界情况root: 获取根组件parent: 获取父组件children: 获取所有子组件ref：拿到组件或者domprovide&inject: 类似于react的context provider，上层定义一个provide的一些变量，下层任意一层都能inject获取原创 2020-11-20 15:47:20 · 196 阅读 · 0 评论 -
8.4.2 静态站点生成
本文为拉勾网大前端高薪训练营第一期笔记什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具这个功能也叫预渲染生成的网站不需要类似PHP这样的服务器只需要放到支持静态资源的Web Server或CDN上即可运行好处省钱不需要专业服务器，只要能托管静态文件的空间即可快速不经过后端服务器的处理，只传输内容安全没有后端程序的执行，自然会更安全常见的静态网站生成器Jekyll (Ruby)Hexo (Node)原创 2020-11-20 15:43:51 · 386 阅读 · 1 评论 -
8.4.1 搭建自己的SSR
本文为拉勾网大前端高薪训练营第一期笔记心得体会SSR是未来前端页面必不可少的一个组成成分，掌握了Vue SSR基本上其他框架都非常类似。3-4-1 搭建自己的SSRVue SSR 介绍是什么官方文档:https://ssr.vuejs.org/Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈官方文档的解释:Vue.js 是构建客户端应原创 2020-11-21 00:05:21 · 7190 阅读 · 1 评论 -
8.3.4 NuxtJS综合案例
本文为拉勾网大前端高薪训练营第一期笔记心得体会本章节花了很多时间看和学，主要是我对Vue.js和Nuxt.js并不是特别熟悉，之前写React.js比较多，这次真的是用一个非常实战的例子来学和实践，老师在视频里基本上只是把重点给做了，还有很多页面需要自己补全功能，经过这次作业有了一次全方位的理解，硕果累累，真的推荐学的人都自己实践一下。实现的过程会遇到很多奇奇怪怪的问题，具体的问题和解决办法在本文最后，nuxtjs的报错真的不告诉是代码的哪一行真的很麻烦。还有个意外收获就是因为这次作业是需要部署到原创 2020-09-24 13:35:27 · 673 阅读 · 0 评论 -
8.3.3 NuxtJS基础
本文为拉勾网大前端高薪训练营第一期笔记Nuxt.js 介绍官网:https://zh.nuxtjs.org/GitHub 仓库:https://github.com/nuxt/nuxt.jsNuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有Node.js 项目中使用 Nuxt.j原创 2020-09-24 11:02:33 · 198 阅读 · 0 评论 -
8.3.2 服务器端渲染基础
本文为拉勾网大前端高薪训练营第一期笔记在今天看来，这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下，这种模式存在很多明显的不足:应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力;前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案;由于内容都是在服务端动态生成的，所以服务端的压力较大;相比目前流行的 SPA 应用来说，用户体验一般;但是不得不说，在网页应用并不复杂的情况下，这种方式也是可取的。SPA单页面应用概述随着前端技术栈和原创 2020-09-24 11:00:25 · 214 阅读 · 0 评论 -
8.3.1 Vuex 状态管理
本文为拉勾网大前端高薪训练营第一期笔记组件内的状态管理流程Vue 最核心的两个功能:数据驱动和组件化。组件化开发给我们带来了:更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state data() { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // action原创 2020-09-24 10:57:48 · 202 阅读 · 0 评论 -
8.2.3 Vue.js 源码剖析-模板编译和组件化
本文为拉勾网大前端高薪训练营第一期笔记8.2.3 Vue.js 源码剖析-模板编译和组件化模板编译模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)<div> <h1 @click="handler">title</h1> <p>some content</p></div>渲染函数 renderrender (h) { return h('div', [ h('h原创 2020-08-07 14:40:19 · 193 阅读 · 0 评论 -
7.模块化开发笔记（主要webpack）
script type=‘module’自动严格模式单独私有作用域通过CORS的方式请求外部JS模块，且必须http这种形式，不能通过文件等同于defer，延迟执行脚本import exportes module import和export都可以用as重命名import和export是传引用（变量地址），而不是传值import的不能改，是const的import a from 'a.js’不能省略.jsimport b from ‘./b/index.js’ 不能省略index.jsi原创 2020-07-06 16:55:12 · 673 阅读 · 0 评论 -
6.前端工程化笔记
自动化步骤创建项目编码格式化代码校验代码风格编译/构建/打包预览/测试Web Server/MockLive Reloading/HMRSource Map提交Git HooksLint-staged持续集成部署CI/CD自动发布5个维度讲解前端工程化脚手架工具开发自动化构建系统模块化打包项目代码规范化自动化部署常见创建脚手架create-react-appvue-cliangular-cliyeomanInstall原创 2020-06-06 02:46:32 · 328 阅读 · 0 评论 -
5.JavaScript性能优化笔记
Javascript中的垃圾对象不再被引用时对象不能从根上访问到时(不是可达对象)常见的GC算法引用计数设置引用数，判断当前引用数是否为0优点发现垃圾时立即回收最大限度减少程序卡顿，因为回收比较及时缺点无法回收循环引用的对象资源开销大标记清除分标记和清除两个阶段完成1.遍历所有对象找标记活动对象2.遍历所有对象清除没有标记对象3.回收相应的空间优点：解决了引用计数的函数里的循环引用不可回收的问题缺点：回收后地址不连续，垃圾碎片化不能原创 2020-06-06 02:45:17 · 142 阅读 · 0 评论 -
4.函数式编程范式笔记
函数式编程的意义随着react的流行受到越来越多的关注Vue 3也开始用函数式编程抛弃this打包过程可以更好的tree shaking过滤无用代码方便测试，方便并行处理很多库可以帮助做函数式开发，lodash、underscore、ramdaMDN first-class function函数可以存储在变量函数可以作为参数函数作为返回值函数可以存在变量const BlogController = {create(content){ return Db.create(con原创 2020-06-06 02:44:00 · 308 阅读 · 0 评论 -
3.TypeScript语言笔记
强类型与弱类型（类型安全）静态类型与动态类型（类型检查）强类型语言不允许有任意的隐式类型转换，弱类型允许举例‘100’-50动态类型语言里，变量是没有类型的，变量中存放的值是有类型的弱类型的问题类型异常需要等到运行时发现类型不明确，函数功能发生改变对对象索引器错误的用法强类型优势错误更早暴露代码更智能，编码更准确重构更牢靠减少不必要的类型判断使用flowyarn add flow-bin —devjs文件里首部加@flow成员加类型注释 a: numberyarn原创 2020-06-06 02:43:05 · 126 阅读 · 0 评论 -
2.JavaScript异步编程笔记
JavaScript执行时是单线程的，但是浏览器不是单线程的，比如内部API webapi会有别的线程执行，比如setTimeoutPromise对象的then方法会返回一个全新的Promise对象后面的then方法就是在为上一个then返回的Promise注册回调前面then方法中回调函数的返回值会作为后面then方法回调的参数如果回调中返回的是Promise，那后面then方法的回调会等待它的结束then里其实传两个回调参数，第一个onFulfilled，第二个onRejected，只是一原创 2020-06-06 02:39:49 · 136 阅读 · 0 评论 -
1.前端ES新特性详解笔记
let const varhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/letps:mozilla解释真的是太详细了var会提升到代码最前声明，但是不赋值let不会var会全局变量let只会在块作用域里const就是常量的let，必须在声明时赋值数组解构数组解构可以简化代码对象解构对象解构可以:anotherName换变量名模板字符串模板字符串方便拼接字符串和变量带标签的模原创 2020-06-06 02:26:45 · 404 阅读 · 0 评论