04 2022 档案
3.3 变量
摘要：变量 ES的变量是松散类型的，可以保存任何类型的数据 每个变量只不过是一个保存任意值的命名占位符 三个关键字，可以声明变量。let，const, var let, const 只能在es6 和之后版本使用 var关键字 不初始化的话，变量会保存一个undefined值 var声明作用域：在一个函数内
阅读全文
3.2 关键字和保留字
摘要：关键字和保留字 保留的关键字不能作为标识符 ES6的所有关键字 break case catch class const continue debugger default delete do else export extends finally for function if import in
阅读全文
3.1 语法
摘要：区分大小写 ECMAScript借鉴了C语言和类C语言比如java ECMAScript的一切都区分大小写，无论是变量，函数名，操作符 标识符 就是变量，函数， 参数，属性等的名称 必须由一个和多个字符构成：第一个字符必须是（字母，下划线，美元符号），剩下字母必须是（字母，数字，下划线，美元符号）
阅读全文
2.2-2.4 行内代码和外部文件，文档模式，noscript元素
摘要：行内代码和外部文件 虽然可以直接在html文档中嵌入js代码，但最佳实践还是将js代码放入外部文件。好处如下： 可维护性 缓存：比如两个页面都用到同一个js文件，只需要下载一次 文档模式 IE5.5 发明了文档模式的概念，可以使用doctype切换文档模式 文档模式种类：混杂模式，标准模式 混杂模式
阅读全文
TCP协议
摘要：OSI 参考模型 开放式系统互联模型：open system interconnect 是ISO组织在1985年发布的网络互联模型，就是所有公司使用统一的规范来控制网络，这样所有公司遵循相同的通信规范，网络就能互联互通了 OSI模型定义了网络互联的七层框架 每一层实现各自的功能和协议，并完成与相邻层
阅读全文
2.1 <script>元素
摘要：script元素 将js插入html的主要方法是使用script元素 是由网景公司创造出来的，后来被加入html规范 有8个属性 解释行内js代码和外部代码，页面都会有阻塞，包含下载文件的时间 使用了src属性的script标签，就不能在包含js代码，否则会不执行js代码 不管什么代码，浏览器会按照
阅读全文
css 清除浮动
摘要：为什么要清除浮动 因为浮动会造成父元素高度塌陷 清除方式 开启BFC，比如display:flex; 或者overflow：auto； 放入一个空标签。缺点：增加没必要的标签，布局混乱，基本不用了。 <div style="clear: both;"></div> 放入一个伪元素。推荐使用 .cle
阅读全文
css BFC
摘要：BFC Block Formatting Context 页面上一个独立的容器，容器内的子元素不会影响到外面的元素 在一个BFC中，两个元素的上下margin会重叠 如何创建一个BFC 元素浮动 绝对定位（absolute或者fixed） display:flex; display:inline-b
阅读全文
css 水平垂直居中实现方式
摘要：css 水平垂直居中实现方式 第一种方式 display:flex; justify-content:center; align-items:center; 第二种方式 margin:auto; 第三种方式 position:absolute; top:50%; left:50%; transfor
阅读全文
js 的null和undefined的区别
摘要：相同点 进行条件判断时，都是false 都是保存在栈中 区别 类型不一样 typeof(null) // object typeof(undefined) //undefined console.log(typeof(null) 'object')//true console.log(typeof(
阅读全文
1.2 js实现
摘要：完整的js 核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM ECMAScript 不局限于浏览器，浏览器只是一个宿主环境 宿主环境提供ECMAScript的基准实现和与环境交互的扩展 其他宿主环境，比如nodejs，flash 不涉及浏览器，ECMAScript定义了什么？
阅读全文
1.1 简短的历史回顾
摘要：开发主要目的 代替服务器语言处理输入验证 之前，是与服务器通信，进行验证 那时网速慢，服务器验证很耽误时间 发展史 1995年，网景公司，工程师Brendan，开发了Mocha，后来改名为livescript 后来，网景公司和sun公司合作开发，共同完成了livescript，后来改名为javasc
阅读全文
js 数字精度丢失问题
摘要：经典面试题 0.1+0.2！=0.3 Number 在js中，数值类型就是number 采用的是IEEE754规范中的64位双精度浮点数编码 存储结构优点是归一化处理整数和小数，节省储存空间 整数很容易转换成二进制，但还是有大小的限制，2**53 小数的小数点位置不是固定的，所以使用二进制的科学计数
阅读全文
vue使用proxy和defineProperty 监听数据的区别
摘要：vue3 为什么用proxy代替defineProperty defineProperty：对对象的属性做循环再监听，对数组需要重写数组方法才能监听到。 proxy：直接对整个对象监听，不需要循环整个对象，对新增和删除属性也能监听。对数组不需要再写方法，大大提高了性能。缺点就是不兼容低版浏览器。 从
阅读全文
vue 组件的data为什么是一个函数
摘要：vue 组件的data为什么是一个函数 组件可能被多次使用 组件的data是个函数可以确保每个组件实例的data有独立的作用域 组件实例之间的data数据不会相互污染 实现了数据隔离 new Vue 实例里，为什么data可以直接是一个对象 new Vue生成的是根实例，只有一个 只有一个实例，就不
阅读全文
7.2 前端工程化是一张蓝图
摘要：类比到建筑行业 需求设计：要几个房间，几个卫生间，房间面积 架构设计：按照需求，设计地基，设计墙体结构 工程化：工人按照架构图进行建设 前端工程化 是一张服务开发人员的蓝图 开发人员是工程体系的用户 以用户为中心设计整个流程和流程中的各个细节 构建功能可能弱化但是不可或缺 随着浏览器对ECMAScr
阅读全文
7.1 前端工程师未来的定位
摘要：前端工程师定位的变化 从切图仔到大前端，改变的是负责的技术范围，不变的是前端产出的对象永远是客户 不同的前端工程师出身，决定了不同的发展方向 ui 出身的，偏向用户，发展方向是前端+设计，以css和动画见长 服务器出身的，偏向技术，发展方向是前端+服务器，以js和逻辑见长 随着前端越来越规范，前端+
阅读全文
6.3 持续集成和持续交付
摘要：持续集成和持续交付和持续部署 是目前软件开发领域探索的自动化模式 从web开发整体流程的角度，前端工程化还没有实现持续集成 最终目标是实现web整体工程化的持续集成和持续交付和持续部署 持续集成 将开发人员提交的代码，快速集成，实现自动构建和自动单元测试 持续交付 自动部署到测试环境和仿真环境中 持
阅读全文
6.2 云平台工作流
摘要：云平台工作流 将因个体差异产生问题的功能模块（比如构建，部署），放在云平台 目标是实现功能的集中管理 工作人员角色严格划分 开发人员负责一线的开发工作 开发负责人汇总开发人员的分支合并到dev分支 云平台管理人员负责项目的发起和控制部署队列 自动构建和自动部署 自动构建，最常用的方案是和git管理平
阅读全文
6.1 本地工作流
摘要：本地工作流 是本地工具链阶段的前端工程体系所对应的工作模式 这个阶段，各个功能模块都是由开发人员在本机环境下执行 前端工程体系搭建十分方便 开发完成后将其发布到npm仓库，再通过npm工具将其安装到本地 便利的安装方式和功能集成在本地的工作模式 二次构建的隐患 本地工作流的问题：测试通过之后，要针对
阅读全文
5.2 流程之外：前端静态资源的部署策略
摘要：前端和其他领域的部署差异 部署流程，不仅仅适用前端，也适用其他开发领域 前端部署的是静态文件，最特殊的是html 协商缓存和强制缓存 html文件是web站点的唯一入口 所有其他资源必须通过html被引用 html只能使用协商缓存，其他资源更适合强制缓存 因为，这样能获取到最新的html，其他静态资
阅读全文
5.1 部署流程的设计原则
摘要：小团队小项目的部署 将文件传输到指定服务器上 交给运维人员发布上线即可 但是产品用户量庞大和多分支体系的技术团队，部署工作必须综合考虑协作，速度，安全等因素。不是仅仅上传文件，而是一套完整的流程 部署到测试机 开发人员部署，指的是将文件部署到测试机 出于安全考虑，发布上线是交给专业的运维人员负责 测
阅读全文
js的数据属性和访问器属性
摘要：参考文章 https://www.jb51.net/article/91698.htm js有两种属性类型 数据属性：一般用于存储数据数值 访问器属性：一般进行get和set操作，不能直接存储数据数值 属性的特性 es5中，我们为了描述属性（property）的各种特征，定义了特性（attribut
阅读全文
浏览器的回流
摘要：参考文章 https://blog.csdn.net/songlf521/article/details/115181445 浏览器渲染的过程 解析html生成dom树 解析css生成cssom树 将dom树和cssom树结合在一起，生成渲染树renderTree 根据渲染树，计算节点的位置和大小，
阅读全文
发布订阅模式和观察者模式
摘要：参考文章 https://www.mianshigee.com/note/detail/55937pjh/ 设计模式 是一种解决方案，是一种思想 不局限于软件行业 《设计模式》是一本介绍软件好的设计的书 观察者模式 当一个对象发生改变，所有依赖它的对象都会改变，自动更新 观察者和被观察者之间是直接通
阅读全文
4.3 mock服务
摘要：mock服务 针对的是前后端协作层面的问题 模拟后端数据，解决对后端接口的依赖 实现前后端分离和并行开发 前后端约定接口的规范 比如请求方法，参数，返回值 后端按照规范，实现接口 前端按照规范使用mock数据，编写前端代码 声明变量作为假数据 直接在业务代码中声明变量，代替接口返回的数据 非常方便，
阅读全文
vue 的生命周期
摘要：参考文章 https://blog.csdn.net/weixin_39820136/article/details/111135835 https://blog.csdn.net/m0_57138227/article/details/120833797 https://blog.csdn.net
阅读全文
vue 2的数据双向绑定
摘要：参考文章 https://baijiahao.baidu.com/s?id=1678787660555400574&wfr=spider&for=pc https://blog.csdn.net/weixin_40712618/article/details/126232040 vue双向绑定的核心
阅读全文
mvc
摘要：App干啥 就是将数据展示给用户看 处理用户的一些界面操作 MVC model：数据模型层，提供数据。提供接口给controller进行访问。 view：视图层，渲染数据 controller：控制层，调用数据渲染视图。 负责将model的数据用view的视图展示出来。 view接收数据，contr
阅读全文
mvvm
摘要：view 是视图层，就是用户界面 主要由html和css构成，来展示model的数据 model 是数据模型，就是从后端操纵的数据 ViewModel 是视图数据层 封装从后端获取model数据，生成符合view层的视图数据模型，让数据更容易管理和使用 视图的状态和行为都封装在ViewModel里，
阅读全文
es6 拓展运算符
摘要：拓展运算符 就是三个点... 作用：拆解字符串和数组 替代push和concat方法 arr2.push(...arr1) arr3=[...arr1,..arr2] 拷贝数组和对象 arr2=[...arr1] obj2={...obj1} 与解构赋值一起使用 let arr=[1,2,3,4,5
阅读全文
es6 解构赋值
摘要：解构赋值 按照一定的模式，从数组和对象中提取值，对变量进行赋值 左右两边的模式要相同 数组解构，注意顺序层次相同 对象解构，注意属性名字相同 let [a,b,c]=[1,[2,3,4],5] let {x,y}={y:123,x:456} 连续结构赋值+重命名 const obj={a:{b:1}
阅读全文
es6 模板字符串
摘要：可以直接使用变量 以前是用大量“”和+拼接起来的 let name='zsf' let str=`i am ${name}` 多行字符串 换行和缩进都会被保存 let str=`i am zsf i love tutu` ${}中可以放任意js表达式 可以是数学运算 可以是调用函数
阅读全文
浙公网安备 33010602011771号