cyfhshusri-优快云博客

原创 Webpack

WebpackWebpack 是一个前端资源加载/打包的工具。它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。配置文件entry入口让webpack用哪个文件作为项目的入口output出口让webpack把处理打包完成的文件放在哪里module模块要用什么不同的模块来处理各种类型的文件1.建立项目创建项目，并init // cmd 中 mkdir webpack cd webpack npm init新建文件index.

2021-04-14 10:47:32 102

原创前端模块化

模块的理解将一个复杂的程序按照一定的规范封装成几个块或文件，并进行组合块的内部数据和实现是私有的，只是向外部暴露一些接口（方法）模块化的进程全局function模式：将不同的功能封装成不同的全局函数缺点：污染全局命名空间，模块成员间看不出直接关系namespace模式：简单对象封装缺点：数据不安全，外部可以直接修改模块内部数据IIFE模式：匿名函数自调用，引入依赖（闭包）缺点：引入多个script，请求过多，依赖模糊模块化规范CommonJS规范在服

2021-04-12 11:38:51 101

原创前端路由

路由路由这个概念最先是后端出现。浏览器发出请求服务端监听到80端口（或443）有请求过来，并解析URL 路径服务端返回相应信息（.html、.php、json、图片等）浏览器根据数据包的Content-Type来解析数据这就是SSR 服务端渲染，直接返回页面前端路由本质是检测url的变化，截获url地址，然后解析来匹配路由规则。路由hash模式url中# 后面的hash值变化，不会导致浏览器向服务器发出请求，页面不会刷新。通过监听hashchange 事件，检测has

2021-04-09 10:38:07 110

原创原型链

什么是原型链__proto__ 属性组成的链条就叫原型链每一个函数都有一个prototype的属性每一个对象都有一个__proto__的属性实例的__proto__指向所属类（构造函数）的prototype一张图了解原型链

2021-04-06 15:02:39 88

原创深浅拷贝

项目中遇到的问题 const groupList = [{ name: 'lilei', age: '24' }] const echoList = groupList groupList.map(item => { item.name = 'hanmeimei' }) console.log(echoList) // [{name: 'hanmeimei', age: '24'}] 浅拷贝是拷贝引用，拷贝后的引用都指向同一个存放数据位

2021-04-02 15:35:00 147

原创 Vue和React的区别

Vue 和 React 的区别一、相同点都将注意力集中在核心库，而将其他功能如路由和全局状态管理交给相关库。都有自己的构建工具。都有props的概念，允许组件间的数据传递都鼓励组件化的应用，将应用拆分成一个个功能明确的模块，提高复用性二、不同点数据流Vue 默认支持数据的双向绑定React 提倡单向数据流虚拟DOMVue 在渲染过程中，会跟踪每一个组件的依赖关系，从而更快的计算出Virtual DOM 的差异，不需要重新渲染整个组件树React 当应用的状态被

2021-03-31 10:09:18 134

原创关于class

关于classES6 通过class 关键字，可以定义类。新的class写法让对象原型写法更加清晰，更像面向对象编程 class Foo { #prop = 10 static myProp = 42 _count = 0 constructor(x, y) { this.x = x this.y = y this.readProp() } readProp() { console.log(Foo.m

2021-03-30 09:49:28 107

原创 ES5、ES6继承

ES5、ES6继承方式继承的目标：父类公有属性和方法为子类公有属性和方法父类私有属性和方法为子类私有属性和方法1. ES5继承原型继承 // 定义父类 function Parent(){ this.familyName = "Corleone" } Parent.prototype.skill = ()=>{ return "保护家人" } // 定义子类 function Child(){ this.name = "Mi

2021-03-29 11:25:08 178

原创前端缓存策略

前端缓存1. 优点加快网站加载速度，请求更快节省带宽甚至无需网络请求降低服务器压力2. 分类1）强缓存：HTTP的response header 中的cache-control 控制private: 仅浏览器可以缓存public: 浏览器和代理服务器都可以缓存max-age=xxx: 过期时间，精确到秒no-cache: 不进行强缓存no-store: 不进行强缓存也不进行协商缓存2) 协商缓存：Cache-control: no-cache、max-age 过期了

2021-03-26 15:41:35 154

原创从URL 输入到页面展示完整过程

URLURL,统一资源定位符，用于定位互联网上的资源，俗称网址。scheme://host.domain:port/path/filename?params#fragmentscheme：协议如http、https、file等host：主机域 wwwdomain：域名 baidu.com.cnport：端口号 http默认为80，https默认为443path：服务器上的路径，省略表示根目录filename：文档资源的名称params：从?开始到#截止的部分为参数部分，多参数用&am

2021-03-25 15:17:53 214

原创 HTTP的区别

HTTP1.0、HTTP1.1和HTTP2.0区别1. HTTP1.0与HTTP1.11.1 长连接HTTP1.0 需要使用 keep-alive 参数来告知服务器建立长连接。HTTP1.1 默认开启长连接 keep-alive ，在一个 TCP 连接上可以传送多个 HTTP 请求和响应，减少了建立和关闭连接的消耗和延迟。1.2 节约带宽HTTP1.0 存在浪费带宽现象，客户端仅需要对象一部分，服务端却将整个对象传送过来，不支持断点续传功能。HTTP1.1 支持只发送 header 信息

2021-03-25 10:10:37 197

cyfhshusri的博客