- 博客(36)
- 收藏
- 关注
RSS订阅原创 JS取消事件默认行为和移动端触屏事件
在写一些特殊的页面时候可能会需要取消事件的默认行为，例如取消鼠标滚轮的默认滚动window.addEventListener('mousewheel',function(e){ console.log('滚动了'); e.preventDefault() }, { passive: false }) //火狐用DOMMouseScroll绑定滚轮事件 window.addEventListener('DOMMouseScroll', function
2022-02-18 22:12:47
1215
原创 解决原生JS鼠标移入事件多次触发的问题
在原生JS的onmouseover事件中，一般使用的期望是在鼠标移入的时候触发一次，但是当绑定事件的元素有子元素时候，鼠标在元素和子元素中切换时候会多次触发鼠标移入事件，但是不会触发鼠标移出事件，基于上述特性，可以在事件触发的处理函数前加个判断content_list.addEventListener('mouseover',function(){ if(!this.flag){ this.flag=true this.className=t
2022-02-18 19:23:44
2899
1
原创 JS焦点事件和事件冒泡
焦点事件JS中focus事件获得焦点，blur失去焦点，这些事件默认情况下只有表单可以触发，如果想让div等元素触发需要加tabindex属性<div class="list" :class="{change:isclick}" @blur="listBlur" tabindex="-1">当属性值为其他时候可以像其他表单一样用tab键切换，当属性值为-1时不能用tab切换blur和focus不能事件冒泡事件冒泡事件冒泡是...
2022-02-17 20:43:50
1565
原创 JS如何获取异步函数的执行结果
function fn(){ setTimeout(function(){ let mes='hello' },1000)}像这个代码，希望可以对异步函数执行的mes数据做处理，不能直接用return方法return数据，因为异步函数由于执行时间有延迟，所以无法得到返回值，这时候需要用回调函数获取数据function fn(callback){ setTimeout(function(){ let mes='hello' cal
2022-02-05 15:19:41
1131
原创 node框架express
路由的概念路由就是一个映射关系，匹配访问的对象和执行的函数，在生活中路由器有一个网线和若干个输出，当连接路由器的用户需要网络时，路由器会根据不同的用户匹配，然后将数据传递给用户，路由也是这样，当收到请求时，根据路由的映射关系，执行不同的函数，返回不同的内容。路由通过访问方法，访问路径，和处理函数三个方法确定static静态资源托管express提供use方法实现静态资源托管，可以通过指定目录名访问另一个指定目录下的所有文件，两个目录名可以不同const express=require('expres
2022-02-04 21:31:55
254
原创 vue前端路由
在前端的发展中经历了模板引擎渲染，ajax渲染和前端路由三个进程模板引擎后端渲染在最开始用户向服务段发起访问请求时，后端拿出请求的页面和相关的数据，用一套模板引擎，将需要替换的内容做特殊标记，然后通过正则找到并且替换为需要的数据，此时后端直接渲染好了整个页面，然后将该页面传递用户端，这样的好处是用户一次可以拿到整个页面，也有利于SEO优化ajax当ajax技术出现后，以ajax为核心的无刷新部分内容渲染开始变得主流，当用户向后端发起访问请求时，后端会根据不同URL传递不同的页面，然后在加载过程中用a
2022-01-23 17:38:49
860
原创 webpack插件plugin
版权插件很多代码会在开头声明使用的开源协议以及作者，这个就要用到plugin，在webpack中调整配置，先引入webpack，然后设置
2022-01-21 15:12:16
274
原创 脚手架新建vue项目时候Runtime Only和Runtime+Compiler的区别
在vue脚手架新建vue项目vue init webpack+项目名称的时候，会有很多配置选项，其中有一个是询问要用Runtime Only还是Runtime+Compiler，虽然后者介绍是most use，但是相对于后者，runtime only不论是性能还是占用内存大小都优于runtime+compiler。而这两个方式创建的vue项目只在./src/main.js里有区别这是runtime only的这是runtime+compiler的runtime+compiler中new vue中传
2022-01-21 14:45:53
592
原创 webpack配置使用vue
引入引入vue等JS文件时一般有三种方式，一种是直接粘贴源码，第二种是CMD引入，第三种就是使用npm安装npm install vue --save因为vue是运行时依赖，所以后缀应为–saveimport vue from 'vue';const app=new vue({ el:'#app', data:{ message:'hello vue' }})在JS中import form关键字引入vue，但是直接打包的话会报错，所以需要在webpa
2022-01-19 23:27:29
242
原创 webpack中loader
在webpack打包中会有css等非JS文件，这些文件也可以用require关键字写到入口文件中，最后打包成一个文件这里在入口函数中引入css文件，但是打包报错，原因是缺少相关的loader，配置loader可以参考webpack官网，但是下载loader时候要注意版本问题，只打包css需要加载两个loader，css-loader和style-loader，注意这两个loader都是开发时依赖，在webpack.config.js中按官网所示配置就好打包时候的加载顺序应该是先加载CSS，然后渲染
2022-01-19 15:21:14
673
原创 初识webpack
为什么需要webpack预处理在前端开发中，会有很多浏览器不能直接解析的文件，比如less，ts，ES6等，这些都是不能直接放到服务器上的，这时候就需要有个工具将所有文件预处理并且生成新的文件，这就需要用到webpack模块化在前端模块化开发中，会出现很多模块的导入和导出，这就需要在最后打包时候所有包的依赖需要有工具处理，webpack会处理这些依赖关系，并且可以对模块化做底层支持如果项目中使用模块化开发，而且相互依赖性非常强，就可以用webpackwebpack的使用使用webpack依赖n
2022-01-19 14:22:38
393
原创 webpack的简单配置
安装版本webpack安装需要依赖node环境中的npm工具，这里用的是webpack3.6.0版本，在终端中输入命令npm install [email protected] [email protected]表示版本号为3.6.0，-g表示安装为全局变量中一般会在文件夹中新建一个src和一个dist文件，src是开发时的源文件，dist中放开发好后打包的文件，上线时讲dist中的文件放到服务器上，打包命令在终端中输入 webpack ./src/main.js ./dist/built.js这行代码表示将./s
2022-01-19 14:11:00
369
原创 JS深拷贝与浅拷贝
深拷贝与浅拷贝是一个针对数组和对象的概念，由于在JS中数组或对象存储的都是一个地址值，地址指向的才是存储数组或对象的内存空间，所以如果直接为数组或对象赋值的话赋值的为地址值，当改变一个新赋值的对象时，由于指向的是同一个实际对象，所以当改变一个对象的值所有的都会改变浅拷贝浅拷贝可以用Object对象自带的assign方法拷贝，但是只能拷贝第一层的值，值有对象或数组，拷贝来的为地址值深拷贝深拷贝用for in循环和递归函数实现function deepCopy(newobj,obj){
2022-01-18 17:31:06
164
原创 JS表单验证之正则表达式
正则表达式正则表达式用于匹配相应的字符，在JS种以对象的形式存在，可以用new实例化，也可以直接定义，有test()方法可以验证字符串是否匹配，如果匹配成功返回布尔值true，否则返回false。 let reg=/abc/;这行代码表示定义reg为为正则表达式，字符串中要有abc才能判定成功正则表达式中的限定符^表示以该字符串开头，$表示以该字符串结尾当同时用时只有字符串中只有该字符串才判定成功let reg=/^abc$/;只有当验证字符串为abc时才返回true，其他均
2022-01-18 15:30:39
975
原创 为什么谷歌打开网页快
基于v8引擎有这样一种说法：“谷歌浏览器打开网页比火狐和IE快”，这是因为谷歌解析JavaScript的内核V8引擎可以直接将JavaScript代码转换成二进制，二进制是计算机可以直接识别的，其他浏览器则会吧JavaScript转换成字节码交给浏览器编译。node的来历以前JavaScript只能在浏览器端运行，这是因为JavaScript设计之初是为了控制网页中的html和CSS，后来才想到用JavaScript做更多的事情，node开发者就用C++ 根据v8引擎开发了nodejs...
2021-12-13 18:26:18
852
原创 node中require加载规则
优先从缓存下载在node中，require执行一次后会将require的文件缓存下来，当再次执行require时不在执行文件内容，而直接返回文件返回对象，如果一个文件在执行代码过程中被require多次，那么里面的代码只会执行一次。require加载规则当require中使用相对路径时，会定位相对路径下的JS文件，当没有路径时，会先查询是否是核心模块，如果是的话则引入核心模块，如果不是核心模块就按照第三方模块处理。需要npm下载的是第三方模块引入第三方文件会先从当前文件夹下的node_module
2021-12-07 22:18:18
514
原创 重定向状态码301和302的区别
对于URL来讲，可以用状态码301或302改变URL地址值实现重定向，重定向是指向服务器发送重定向的数据，服务器返回新的URL地址值跳转301永久重定向301为永久重定向，重定向一次后浏览器会保存数据，下次访问时会直接跳转到上次重定向的地址，不再会向服务器端发起请求，清除浏览器数据后才会再次发起请求，适合场景例如访问主页时的地址跳转302临时重定向302为临时重定向，每次重定向都会向服务器发送请求，适合场景例如发表评论后跳转到首页...
2021-12-07 20:05:30
409
原创 node模块中module.exports对象
在node模块化中，可以用exports.方式挂载需要导出的变量或方法，但是当直接为exports赋值时，会出现意想不到的结果exports.a=1;exports={a:10};// 此时require结果为{ a: 1 }这是因为在node模块中默认会创建个module对象，module中有个exports对象，当模块中的代码执行完毕后返回module.exports对象//代码执行前创建module对象// var module={// exports:{// }
2021-12-07 18:28:13
1175
原创 node初体验
node.js是什么node.js既不是语言也不是框架，node是一个运行JavaScript的环境，他提供了服务器级别的API，让JavaScript可以在服务器端运行node中没有BOM和DOM，所以在node中没有window和document对象node中只有EcmaScript中JavaScript基础语法部分模块化node没有全局作用域概念，每个文件都是一个单独的作用域，要想只能用‘require’关键字来执行另一个文件中的内容，这样的好处是不会污染全局作用域node提供了expor
2021-12-05 16:31:34
294
原创 IP地址和端口号
IP地址在浏览器的URL中，只认IP地址，像www.baidu.com这种域名地址最终会被解析为IP地址，IP地址决定网络请求发送到哪个计算机，一个IP地址只会对应一台计算机端口号当网络请求发送到计算器中时，还不能确定要到哪个应用程序中，可能是微信，QQ，Apache或者任何其他应用程序，这时候就需要有一个端口号确定哪个应用程序接收数据，在同一个计算机中，每个需要进行网络通信的应用程序都会有自己的端口号，一个端口号也只能对应一个应用程序...
2021-12-01 21:00:24
3619
原创 vscode无法将webpack项识别为 cmdlet、函数、脚本文件或可运行程序的名称
在学webpack时，用webpack ./src/main.js ./dist/bundle.js打包会报错，无法识别webpack解决方法：右键要打包的文件夹，选择在集成终端打开，在webpack前加一个npx
2021-11-30 16:59:14
684
1
原创 ES6中的模块化
对于前端模块化开发，ES6提供了新语法 <script src="./aaa.js" type="module"></script> <script src="./bbb.js" type="module"></script>用了type="module"属性的script标签引入的JS文件会在一个块级作用域中，变量只会存在于自己的作用域中，不会污染全局变量，使用export关键字导出变量const a=10;//导出后依然为const类
2021-11-30 14:52:06
562
原创 前端模块化雏形
在前端开发中，经常需要多个人一起开发JS文件，当所有JS文件都在全局变量中的时候，会存在问题// 这是aaa.jslet a=10console.log(a);// 这是bbb.jsconsole.log(a);let a=20;// 报错，因为在aaa已经定义过a变量console.log(a);上面的bbb.js中定义的a变量会报错，这是由于浏览器在编译时发现全局变量中有一个let定义的a变量，这就为前端开发带来很多不方便，所以提出前端模块化开发雏形最初用的闭包函数// 这是
2021-11-30 14:14:35
575
原创 vue插槽作用域问题
作用域父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译var app = new Vue({ el: '#app', data: { message:"hello", name:"ton" }, methods: {}, components:{ cpn:{ template:'#cp
2021-11-29 22:18:08
203
原创 vue组件之插槽
slot自定义内容vue自定义组件时，使用的组件为双标签，但当双标签内部写html内容时却不会显示，只有当定义组件时使用slot标签才会显示匿名插槽当组件中slot标签没有name属性时为匿名标签，此时组件内部的html内容会取代组件中slot标签的内容，slot定义时候可以在里面写html内容作为默认html结构<div id ="app"> <cpn> <h1>我是匿名插槽的标题</h1>
2021-11-29 20:32:52
375
原创 JS登录界面禁止输入空格
在做登录界面时存在用户输入无效字符的情况，可以用JS键盘输入事件keypress监听输入字符，当字符无效时执行JS回调函数字符串方法一开始打算监听键盘输入事假时，当输入无效字符时删除字符value值最后一位字符，删除字符串有三种方式substring()结果发现使用该方法后出现意想不到的bug，经过断点调试后发现keypress的执行顺序为先执行监听事件中的回调函数，当所有回调函数执行完毕后才会键入字符input.addEventListener('keypress',function(e){
2021-11-19 12:56:04
1205
原创 JS实现登录页面跳转后保存用户信息
本地存储信息打算写一个带有注册登录页面的练习时，发现页面跳转html页面之后无法传递用户信息，百度了一下，发现JS有个window.sessionStorage方法可以实现本地存储信息// 设置方法sessionStorage.setItem(key,value);// 获得数据方法console.log(sessionStorage.getItem(key));// 删除数据方法sessionStorage.removeItem(key);// 清空数据方法sessionStorage.
2021-11-18 21:45:50
4102
原创 原生JS实现ajax函数封装
对于ajax进行封装在jQuery中，使用ajax异步对象时只需要调用ajax函数即可使用，并且使用对象接收所有的参数，可以让使用者无需在意传递参数的顺序。// obj接收所有参数 function ajax(obj){ const xhr=new XMLHttpRequest(); // 判断请求类型，当请求类型为get时拼接url if(obj.type=='get'){
2021-11-16 17:08:31
1196
原创 C++判断字符串字典序
C++判断字符串结束位置char s1[10001];cin >> s1;if (s1[1] == '\0' || s1[1] == NULL || s1[1] == 0) { cout<<"这个位置字符为空"<<endl; }当字符为空字符的时候，字符的ASCLL码为0要输出字符ASCLL码，可以用(int)s1[1]强制转换cout<<(int)s1[1]<<endl;define用法#define MAX 1000
2021-04-28 17:27:45
450
原创 双击文本不选中
关于双击文本不选中写网页时经常会有某些元素点击后发生一些JS事件，但是当点击过快时文本会被选中，影响体验，可以在CSS中设置双击不选中user-select: none;
2021-04-27 23:44:01
362
原创 滚动事件和鼠标滚轮禁用
鼠标滚轮事件element.onmousewheel!火狐例外，火狐需要用DOMMouseScroll，并且用addEventListener来绑定e.wheelDelta判断方向,向上是正，向下是负！火狐例外，火狐上下对应的正负相反当鼠标滚轮滚动时默认页面滚动，此时需要禁用默认在函数最后返回false可以使页面滚动失效var h = document.querySelector('#h'); h.onmousewheel = function(e) {
2021-04-26 20:06:08
369
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人