- 博客(23)
- 收藏
- 关注
RSS订阅原创 如何解决跨域问题
通过在请求中指定一个回调函数，服务器返回的数据会作为参数传递给该回调函数，从而实现跨域访问。通过在服务器端设置响应头部，允许指定的域名访问资源，从而实现跨域访问。CORS支持各种类型的HTTP请求，并且不受同源策略的限制。客户端只需要访问自己的服务器，而不直接访问目标服务器，从而避免了跨域问题。像前端本地开发就是用的这种方式。跨域问题是由于浏览器的同源策略导致的。同源策略是一种安全机制，用于防止一个网页的脚本访问另一个来源的资源。浏览器插件：使用浏览器插件拦截后端返回的请求头，来完成cors方法的跨域。
2023-11-26 16:01:55
705
原创 模块化的规范
模块化的规范有CommonJS（2009）、AMD（2010）、CMD（2011）、ES6（2015），这四种规范，那么它们之间的区别是什么？1.CommonJSCommonJS的规范：导入：module.exports = {}、exports.xxx = 'xxx'导出：require(./index.js)查找方式：查找当前目录是否具有文件，没有则查找当前目录的node_modules。再没有，冒泡查询，一直往npm目录查找CommonJS的特点：所有代码在模块作用域内运行，不会污
2021-03-16 23:28:04
303
原创 带你三分钟了解闭包
闭包是指内部函数可以访问外部函数的变量。当通过一个外部函数返回一个内部函数时，即使外部函数已经结束执行了，但是内部函数引用的外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包。简单来讲，在函数A中还有函数B，函数B调用了函数A中的变量，那么B就是函数A的变量。function test(){ let num = 0 return function (){ num++ console.log(num) }}let f = test
2021-03-15 14:49:48
651
原创 JavaScript中箭头函数与传统函数的区别
箭头函数是ES6中新增的特性，下边将介绍它和传统函数的区别。1.没有this、super、arguments和new.target的绑定在箭头函数中，上边的值都有与箭头函数最近的非箭头函数决定。2.不能通过new关键字调用箭头函数没有没有constructorf方法，所以就不能被用作构造函数，如果用new 关键字调用箭头函数，程序会抛出TypeError。let Test = () => 3let b = new Test() //Uncaught TypeError: Test is
2021-01-29 23:05:57
300
1
原创 webpack之常见的loader使用（三）
1.file-loadernpm install file-loader -D主要用来加载静态文件，例如.txt .md .png .word .pdf等等。原理是把打包入口识别的资源模块，移动至输出目录，并返回一个地址名称module: { rules: [{ test: /\.(png|jpe?g|gif)$/, //use使⽤⼀个loader可以⽤对象，字符串，两个loader需要⽤数组 use: { loader: "file-loader", // option
2020-07-28 09:15:58
698
原创 webpack之核心概念（二）
webpack的默认配置文件是webpack.config.js，如果不想使用这个文件，可以在package.json的script中修改命令，方法如下"scripts": { "test": "webpack --config 文件地址.js" },1.webpack.config.js的基本配置module.exports = { entry: "./src/index.js", //打包⼊⼝⽂件 output: "./dist", //输出结构 mode: "pr
2020-07-13 21:44:18
113
原创 webpack之安装与简单使用（一）
webpack是现在的前端工程师必须会使用的工程化工具，它的中文官网是webpack。1.安装创建一个新项目，进入该项目# 安装最新的稳定版本npm i -D webpack# 安装指定版本npm i -D webpack@<version># 安装最新的体验版本，不稳定，尽量不要使用在生产环境npm i -D webpack@beta# 安装webpack V4+版本时，需要额外安装webpack-clinpm i -D webpack-cli#不推荐全局安装we
2020-07-05 23:24:43
197
原创 js事件循环 eventloop
1.什么是事件循环？JavaScript有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。这个模型与其它语言中的模型截然不同，比如 C 和 Java。这是来自MDN的介绍。简单来讲就是js运行处理代码的一套机制。2.微任务Microtasks和宏任务tasks宏任务：一般是指js引擎与宿主环境发生通信产生的回调任务，常见的宏任务有run <script>（同步的代码执行）、setTimeout、setInterval、setImmediate（
2020-06-27 22:36:52
107
原创 常见的web网站攻击
1.XSS跨站脚本攻击XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS重叠，所以只能叫 XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的非本站点HTML标签或JavaScript进行的一种攻击。常见攻击手段：攻击手段：1.利用url参数直接注入：http://localhost/?from=\<script>任意代码\</script>，某些网站会直接将url的参数读取再写入到网页。2.存储到数据库之后再读
2020-06-27 16:05:37
1066
1
原创 Vuex 使用actions中的方法（包括module中的actions）
1.直接store中dispatchexport default { methods: { clickFn() { this.$store.dispatch("sampleFn") //不带参 this.$store.dispatch("withParamFn",param) //带参,param为参数 } }};2.使用mapActions取值import { mapActions } from "vuex";export default {
2020-06-21 16:29:22
4070
原创 浅谈js中的防抖(debounce)与节流(throttle)
在实际应用场景中，我们经常遇见高频调用函数，导致浏览器的消耗，但我们可以根据实际需求使用防抖和节流函数。1.防抖释义：在限定时间内，只执行一次函数。如果事件再次触发，则重新计时，计时完毕再执行函数。 //非立即执行版function debounce(func, wait) { let timeout; return function (event) { // console.log(event) let _this = this le
2020-05-27 20:25:02
209
原创 Vuex 获取getter对象中的值的所有方法（包括module中的getter）
getter取值与state取值具有相似性1.直接从根实例获取// main.js中，把store注册在根实例下，可使用this.$stroe.getters直接取值computed: { testNum1() { return this.$store.getters.testNum1; }}2.使用mapState取值import { mapGetters } from "vuex";export default { computed: { ...mapGet
2020-05-21 22:48:35
9646
原创 Vuex 获取state对象中的值的所有方法（module中的state）
1.直接从store实例取值// main.js中，把store注册在根实例下，可使用this.$stroe.state直接取值export default { computed: { testNum() { return this.$store.state.testNum; } }};2.使用mapState取值的多种方法import { mapState } from "vuex";export default { data() { ret
2020-05-17 17:51:08
19454
原创 js 浏览器截屏的两种方式，html2canvas和MediaDevices.getDisplayMedia()
下边提供两种截屏方式，一种是使用常见的html2canvas插件，另一种方法是利用Web Api的MediaDevices.getDisplayMedia() 方法。1.html2canvas// html<div id="canvas"> <!-- 使用了网络图片 --> <img style="width: 1000px;" src="http://pic2.zhimg.com/50/v2-958d33fd4a4de747058adcafdf75
2020-05-11 20:52:16
3854
原创 js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单，就是在canvas上drawImage，然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { //image一定是一个图片对象，不然获取不到宽高 var canvas = document.createElement("canvas"); // 新建canvas对象 canvas.wi...
2020-05-05 16:01:54
1725
原创 解决React在安装antd之后出现的Can't resolve './locale'或者浏览器显示Cannot find module './locale’问题的两种方案
React在安装antd之后出现的Can’t resolve './locale’或者浏览器显示Cannot find module './locale’问题，是因为moment的版本有问题，而react默认使用了最新的moment，但是在moment@2.24.0中是没有问题的。1.第一种解决方法解决方案就是配置webpack的alias,将所有的 moment 路径引用导入到 moment@2.24.0操作步骤安装moment 依赖 npm install moment@2.24.0
2020-05-02 17:58:41
11570
9
原创 Promise、Promise.all(）、Promise.race(）的简单使用
简单介绍一下Promise，就是一个可以进行异步操作的代理对象，在实际工作中有很大的具体实践。下边介绍Promise的几种简单用法1.新建一个Promise对象//新建一个promise对象let testPro = new Promise((resolve, reject) => { var num = Math.random() * 10; if (num >...
2020-04-18 18:53:25
932
原创 关于vue组件化的理解
组件化是Vue的精髓，Vue应用就是由一个个组件构成的。1.定义组件是可复用的 Vue 实例，准确讲它们是VueComponent的实例，继承自Vue。2.优点可以增加代码的复用性、可维护性和可测试性。提高开发效率， 方便重复使用，简化调试步骤，提升整个项目的可维护性，便于协同开发，是高内聚、低耦合代码的实践。3.使用场景通用组件：实现最基本的功能，具有通用性和复用性。例如按钮组件、...
2020-03-07 21:38:31
1880
原创 在vue中使用v-model实现数据双向绑定
用v-model实现数据的双向绑定，主要用于父子组件中，其中可作用于表单元素，如input、textarea、select。1.v-model实现原理v-model其实是语法糖，把背后两个操作合并为一个指令 <input type="text" v-model="value"> <!-- 等同于 --> <input type="text" :value="...
2020-02-22 19:28:10
1373
原创 vue中 .sync 修饰符的使用
父组件使用 .sync 修饰符<template> <div class="Home"> <v-model :text.sync='text' ></v-model> <div>{{text}}</div> </div></template>子组件利用 this.$emi...
2020-02-22 19:25:06
696
2
原创 移动浏览器，使用VUE时， input 输入的文字不断消失，绑定 composition事件可解决。
当时发生问题时vue的版本是2.5.17，发现input框没有绑定composition事件，后来将vue升级到2.6.10就解决了。主要是查看一下input框有没有绑定compositionend和compositionstart事件CompositionEventCompositionEvent触发的时候就是在文本合成系统，换句话说就是在使用输入法输入中文的时候会触发它的三个事件（com...
2019-09-24 14:57:49
3184
原创 一行代码让rem自适应屏幕
rem是一个非常好用的长度单位，但是网上介绍的方法主要是通过js获取屏幕宽度，或者通过CSS的媒体查询来设置html的 font-size的大小，总的来说方法不够优雅1.使用的长度单位rem、vwrem这个单位代表根元素的 font-size大小（一般来说是html元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值。vw1vw就是屏幕宽度的百分之一，...
2019-08-22 13:34:24
4356
原创 ios系统苹果浏览器margin-bttom无效
在去年开发一个移动端的web网页的时候，发现margin-bottom样式在ios页面的底部无效，但是安卓系统没有问题。简单的修改方法就是使用padding-bottom
2019-07-21 18:58:37
367
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人