前端了了liaoliao

React元素只读性 Object.freeze方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。Object.freeze() | MDN 1234let element = { name: '邓立' }Object.freeze(element)element.sex = '男'console.log(element); Object.freeze()原理12345678910111213Object.defineProperties(Object, 'freeze', {//数据劫持 value: function (obj) { var i; for (i in object) {//遍历属性和方法 ...

从输入URL地址到看到页面，中间经历了什么？ URL解析 缓存检查 DNS解析 TCP三次握手 数据传输 TCP四次挥手 页面渲染第一步：URL解析地址解析 协议 默认端口号 传输协议 http 80 超文本传输协议 https 443 在http的基础上进行了安全设置（SSL/TSL）证书认证 ftp 21 主要用于客户端电脑和服务器端的文件传输 URL的编码 对于一些特殊字符，我们在客户端和服务器端传递的时候，需要进行解码和编码 encodeURI、decodeURI：对中文、空格等编码解码 encodeURIComponent、decodeURIComponent：对中文、空格 ： / 等编码解码（一般应用于查询字符串中部分参数含有http路径参数等） escape unescape 主要用于客户端不同页面之间的数据传输的时候，信息的编码解码（如：cookie） 第二步：缓存检查 缓存位置： 内存缓存（Memory Cache）、 硬盘缓存（Disk Cache） 打开网页：查找 Disk Cache中是否有匹配，如有则使用，如 ...

背景现在的大多数评分组件是精确到半颗星星的，例如：antd的评分组件但是如果遇到精确细节的产品，他会要求成这样精确到小数位大众点评也是这样的想要做到细致到小数的效果要怎么做呢？我找了大量素材没有找到合适的解决方案，于是决定自己搞下 零·素材准备 一个星星的镂空png图像 (因为是透明的，需要的小伙伴查看源代码可见图片) 两个设计给你的颜色对比值 了解下Css渐变的 壹·逻辑概述 贰·星星评分组件 2.1外部计算组件根据传入参数计算出满星，小数点星星以及灰色星星的个数调用星星渲染函数 满星则100填充高亮 小数点星星传入处理后的渐变百分比 灰色星星则无数据传入 2.2 星星填充组件 根据出入的数字判断是否使用渐变色 div checked-star-box 为相对定位，内部元素绝对定位在统一位置 利用png的透明属性+z-index设置，底部叠加填充渐变色 2.3 使用样式以下是组件内使用的样式 总结我刚开始的时候也没有思路，设计也说要不先按半个星星的方案，因为网上大都是半颗星星，我查询了大多的评分方案，或是上层填色位置移动或是jquery实现的半颗星星，，我想着先 ...

背景最近的你有没有接手的新项目，对这个有什么感觉？我最近接手了一个项目，先不论是否代码行数的多少，仅是思路就很混乱，像是一件衣服在打补丁，而衣服上还有混乱的线网，数据绕来绕去，和断掉的线头，举例说明下 关于补丁 没有对数据进行扩展处理，一个值一个变量。例如：获取数据详情返回的多个对象，便依次存储多个对象，这样在参数变更时，便要不停地补充参数，如果你使用的是react，就会发现大量的state还没有注释它是用来干什么的，不管对于维护者，还是初入者都是不友好的，其实我们可以存储在一个变量里，在使用时直接调用对象的参数 列表的列表项[1，2，3，4，5]的展示，可能会根据权限展示不同的列表，刚开始是1，2，3，根据==1，==2，==3，后来变成1，2，3，4，就。。。。 其实我们根据业务场景是否可以传入一个数组arr=[1,2,3,4],根据includes判断是否在数组内（此处会在列表展示区做详细解释） 关于线网 把父级组件的静态数据number=3，和回调方法传给子类，回调方法里使用的却是，子类传回来的父类的静态数据number 关于断掉的线头 例如使用antd的Tabs:如果只是 ...

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment

使用TS前准备 安装TS (sudo) npm i typescript -g 新建TS项目文件夹，在文件夹下执行tsc --init和npm init -y后生成tsconfig.json和package.json 测试TS运行是否正常，新增测试文件src/index.ts const hello = '可待'console.log(hello); 进行编译 tsc ./src/index.ts成功生成index.js文件 var hello = '可待';console.log(hello); 为了方便使用，不用每次编写都使用tsc手动编译，我们要将项目工程化 工程化安装工程化包 webpack:统一编译 webpack-cli:为了使用webpack的一些命令 webpack-dev-server:更新后不用刷新，自动刷新 ts-loader:ts编译规则 typescript:使用typescript语言特性 html-webpack-plugin:打包的文件直接输出HTML文件 npm i webpack we ...