![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
web前端总结
kiki·
这个作者很懒,什么都没留下…
展开
-
web前端学习/工作笔记(十六)
云原生、循环依赖、路由三种模式,es6要不要转es5,unplugin-vue-components的使用,网站被篡改的原因原创 2022-10-10 15:47:08 · 288 阅读 · 0 评论 -
web前端学习/工作笔记(十五)
nginx、eslint规范、漏洞、安全扫描原创 2022-10-10 15:43:10 · 1116 阅读 · 0 评论 -
web前端学习/工作笔记(十四)
降域是通过将不同域的 document.domain 指定为其共同父域从而使其同源的跨域解决方案。cos文件下载,a标签浏览器可以预览的文件会到浏览器预览,doc/excel会直接下载;blog.sch.com、game.sch.com 具有共同的父域 sch.com。靠谱的下载方式是试用后端的下载能力,返回前端流,但是文件大的时候下载会慢。那么将两个域名下的页面的域修改为 sch.com 即可解决跨域问题。wx.invoke不支持,config的beta设为true。h5不能点击按钮分享,小程序可以。原创 2022-10-10 15:36:56 · 172 阅读 · 0 评论 -
web前端学习/工作笔记(十三)
nginx模糊匹配成功不再进行正则匹配。node升级版本(简单)原创 2022-10-10 15:21:52 · 364 阅读 · 0 评论 -
web前端学习/工作笔记(十二)
egg domainWhiteList的匹配规格,全等或以白名单为后缀则视为可信域名。nginx不要随便删日志,如果删日志,要在服务停了之后,否则文件句柄还在。根域名访问cos桶,需要cos桶开启静态网站访问。git命令获取增量和修改的文件。原创 2022-10-10 15:18:33 · 1277 阅读 · 0 评论 -
web前端学习/工作笔记(十一)
38. git add .的意思:https://blog.csdn.net/weixin_42416812/article/details/100093180。40. “target和currentTarget的区别是: target:触发事件的元素。bug: ios bug 没有提前安排在safari浏览器做测试,上239发现有问题,加班分析堆栈信息,对兼容性做处理。39.dom变化后,dom上绑定的事件会失效,可在dom变化后绑定事件。如何拆解任务、任务分配、任务节点、推进问题处理。原创 2022-10-10 15:11:31 · 1705 阅读 · 0 评论 -
web前端学习/工作笔记(九)
18. git误commit,回退到commit之前原创 2022-10-10 15:04:09 · 130 阅读 · 0 评论 -
web前端学习/工作笔记(八)
9.eslint规范:constructor,没有state时,不用显示定义,没有state则推荐使用无状态组件。因为文件引用大小写问题,原因是查找autoComplete时限定了js,改了之后就可以了。10. 有状态组件,用class定义,一般有复杂的内部逻辑。单词Component单词大小写写错。原创 2022-10-10 15:00:31 · 2961 阅读 · 0 评论 -
React组件设计模式与最佳实践
React组件的设计非常灵活,可供选择的方式也很多,如何正确合理地设计组件,在这里总结了一些常用的设计方法和实践原创 2022-05-02 17:14:52 · 2633 阅读 · 0 评论 -
0.1+0.2!=0.3的分析
在JS中进行数字运算时,会有一个叫做 数字运算中的精度缺失的问题。这篇文章,就带着大家了解下JS运算中精度的缺失问题。 现象 我们在js中进行如下运算时 console.log(0.1+0.2) // 结果0.30000000000000004 而不是0.31 可以看到0.1 + 0.2 != 0.3 原因 数...原创 2020-12-19 20:50:24 · 718 阅读 · 1 评论 -
webpack3.0升级4.0
安装/升级依赖devDependencies:"extract-text-webpack-plugin": "^4.0.0-beta.0" "html-webpack-plugin": "^4.0.0-beta.14" "mini-css-extract-plugin": "^0.9.0" "preload-webpack-plugin": "^3.0.0-beta.4" "...原创 2020-03-29 16:32:51 · 3004 阅读 · 0 评论 -
web前端学习/工作笔记(二)
p文本换行display: block; word-wrap: break-word;样式中加变量::style是对象,里面属性是键值对:style="{‘background-image’:‘url(’+item.img+’)’,background:‘red’}"第一个元素与父容器之间的间距用padding而不用margin,margin会撑开当你设置一个元...原创 2020-01-17 23:28:55 · 119 阅读 · 0 评论 -
js事件循环机制和优先级
浏览器的渲染进程是多线程,包括GUI渲染线程js引擎线程事件触发线程定时器触发线程异步http请求线程主执行栈和任务队列所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务,同步任务一般会直接进入到主线程中执行;而异步任务,就是异步执行的任务,比如ajax网络请求,setTimeout 定时函数等都属于异步任务,异步任务会通过任务队列( Event Que...原创 2020-01-28 11:56:04 · 4307 阅读 · 0 评论 -
读书笔记之webpack实战
1.commonjs只会对require的代码执行一次 之后的require只会直接取其导出值2.es6 Module动态映射,CommonJs是值拷贝,前者可以支持一定程度的循环依赖,需要由开发保证导入时,已经设置好正确的导出值3.通过单独加载包内的单独文件,从而减小打包体积4.当第三方依赖较多时,我们可以用提取vendor的方法将这些模块打包到一个单独的bundle中,以更有效地利用客户...原创 2020-01-26 22:58:43 · 289 阅读 · 0 评论 -
快速理解BFC原理
一、常见定位方案在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中...原创 2020-01-26 11:43:36 · 3478 阅读 · 0 评论 -
CSRF攻击与防御(写得非常好)
转载地址:http://www.phpddt.com/reprint/csrf.html CSRF概念:CSRF跨站点请求伪造(Cross—Site Request Forgery),跟XSS攻击一样,存...转载 2020-01-18 14:28:17 · 296 阅读 · 0 评论 -
web前端学习/工作笔记(七)
webstrom gitlab操作拉取项目:gitlab项目页面clone->http复制->粘贴到webstrom(VSC,checkout from ,git)->test成功即可拉取提交代码到dev:找到git branchs或右下角的origin/dev,checkout as dev,本地就有dev分支了,右上角提交就到dev了112.Select组件双向...原创 2020-01-17 23:47:54 · 1474 阅读 · 6 评论 -
web前端学习/工作笔记(六)
跨域CORS 同源策略,浏览器会禁止一些行为同源(协议、域名/域名、端口相同)不限制,任一不同则限制跨域只针对浏览器,后端不存在跨域问题(比如代理)可以发,但是浏览器拒绝接收,http协议拒绝发跨域请求解决跨域:后端给浏览器返回 “Access-Control-Allow”预检请求:当跨域发送非简单请求,会触发预检请求:Options,后端需要响应预检请求来决定是否发送实际请求...原创 2020-01-17 23:46:59 · 278 阅读 · 0 评论 -
web前端学习/工作笔记(五)
全局注册组件,在main.js// 全局注册组件方式一 Vue.component(‘MyHellpWorldE’,{ template:<div>my-componet</div> })//全局注册组件方式二 import loading from ‘./components/’ Vue.use(loading)e.preventDefault();//...原创 2020-01-17 23:36:11 · 138 阅读 · 0 评论 -
web前端学习/工作笔记(四)
对象中添加属性,刷新的问题利用this.$set(this.obj,key,val)table设置圆角border-radius:5px; overflow:hidden;img图片模糊处理办法:切高分辨率图,2倍的需要使用小写的前缀修饰属性或者方法 webkit (谷歌, Safari, 新版Opera浏览器等) moz (火狐浏览器) o (旧版Opera浏览...原创 2020-01-17 23:33:09 · 189 阅读 · 0 评论 -
web前端学习/工作笔记(三)
快捷键控制滚动条 ,注意:① 设置父级的滚动条,给到父级div的ref值,而且父级应设置固定高度或百分比② 用document.getElementById(elementId)获取div不好使(div.scrollTop始终为0),原因来自① ,没选对父级id错了③ 两种方法:④ _this.addShortcutsKey(‘up’, () => {_this.KaTeX...原创 2020-01-17 23:30:40 · 173 阅读 · 0 评论 -
web前端学习/工作笔记(一)
前端工作需要技术点W3c http://www.w3school.com.cn/html、html5、css、css3、javascript 重点http://es6.ruanyifeng.com/ 重点Vue https://cn.vuejs.org/v2/guide/ 重点Vue-router https://router.vuejs.org/zh/ 了解Vuex ...原创 2020-01-17 23:24:51 · 662 阅读 · 0 评论 -
webpack打包原理分析和实现(三)
上一节,获得了modules的对象,打印:{ './src/index.js': { dependencies: { './expo.js': './src\\expo.js' }, code: '"use strict";\n\nvar _expo = require("./expo.js");\n\n(0, _expo.add)(1, 2);\nconsole.l...原创 2019-12-21 18:27:20 · 492 阅读 · 0 评论 -
webpack打包原理分析和实现(二)
上一节,通过@babel/parser将index中的es6代码解析成ast(抽象语法树),接下来,我们可以根据Body里面的分析结果,遍历出所有的引入模块,但是比较麻烦,这里推荐babel的一个模块@babel/traverse,帮我们处理。npm i @babel/traverse --save为了获得模块(文件)的依赖,通过ast可以看到依赖的路径存放在Node下面的resource的v...原创 2019-12-21 17:24:09 · 420 阅读 · 0 评论 -
webpack打包原理分析和实现(一)
首先,新建一个空文件夹,编辑器(webstrom)打开文件夹,执行npm init -y,生成package.json,在根目录新建webpack.config.js,加入如下代码(webpack 4.0的基础配置)const path=require('path');module.exports={ entry:'./src/index.js', mode:'developm...原创 2019-12-21 16:39:42 · 1349 阅读 · 0 评论 -
关于Electron的一些想法
大概2016年的时候了解到js可以写桌面应用,当时正在用wpf/winform开发cs应用,近几年vue和react在前端的火热,以及node.js在中间层和后端的大量应用,js正在往多端,多平台方向渗透,这个对前端来说是好的,大前端的影响力越来越大。 之前开发了一个系统,主要是用cefsharp+vue实现混合开发的,主要利用C#连接硬件的优势,vue的开发效率就不...原创 2019-12-19 23:38:25 · 741 阅读 · 0 评论 -
js原生拖拽的两种方法
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 ...转载 2019-08-20 09:48:56 · 1570 阅读 · 0 评论 -
vue优化之骨架屏
1. 什么是骨架屏如果一个web页面加载内容过多,刷新的时候会有空白页,造成不好的用户体验,但是如果加入骨架屏可以改善这一问题,骨架屏可理解为页面加载前的简单呈现版本,当页面加载完成,骨架屏各个占位区域被实际资源替换,可让用户觉得内容正在加载即将呈现,体验更加流畅。实际应用比较广泛,CSDN,小米商城等很多大型网站都用到了骨架屏方案。2.如何实现不建议: vue框架的原理是替换掉inde...原创 2019-07-01 10:13:29 · 4213 阅读 · 11 评论 -
js深拷贝与浅拷贝
1.区别:深拷贝和浅拷贝的使用场景是在复杂对象里,即对象的属性还是对象; 浅拷贝是指只复制一层对象,当对象的属性是引用类型时,实质复制的是其引用,当引用指向的值改变时也会跟着变化;深拷贝是指复制对象的所有层级。2.深拷贝实现Json序列化与反序列化:function deepClone(obj){ let _obj = JSON.stringify(obj), ...原创 2019-07-03 10:27:51 · 2612 阅读 · 0 评论 -
cefsharp启动优化
1.按需加载,顾名思义,只加载当前需要加载的页面,pos当前采用了这种方式,示例代码 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')expor...原创 2019-07-01 16:05:38 · 4434 阅读 · 0 评论 -
Js性能优化:循环正序和倒序的性能差异,以及for和foreach的性能比较
1.正序和倒序,倒序循环是编程语言中常用的性能优化方法通常不会感觉到性能差异,但是在数据量很大时中,比如下面的代码:var arr=[]for (var i = 0; i < 1000000; i++) {arr[i] = i;}var start = +new Date();for (var j = 0; j < arr.length; j++) {arr[j]...原创 2019-06-21 13:57:46 · 8816 阅读 · 2 评论 -
url protocol启动本地exe,C#和Java都可以
注册表注册文件:新建记事本,后缀改为regWindows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\Webshell]@="WebshellProtocol""URL Protocol"="D:\\HX\\exe4j\\print\\print.exe" //关键的地址,不填不能启动[HKEY_CLASSES_ROOT\Web...原创 2019-05-29 10:34:21 · 3235 阅读 · 1 评论 -
WPF+HTML5混合开发
做wpf和html混合开发也有一段时间了,从传统桌面开发WPF转到web前端,有相通之处,也有差别比较大的地方,xaml到html都是类似xml的结构,style和web的style类似,而业务逻辑,前者一般是C#实现,后者一般是js,加上之前的学习过,使用起来还算顺手,但总的感觉是WPF开放比html开发方便太多,可能是前者接触更久的缘故,毕竟微软的东西,有自己一套成熟的体系,封装...原创 2019-03-24 23:34:00 · 8421 阅读 · 2 评论