js
金lin
这个作者很懒,什么都没留下…
展开
-
js控制元素移动,回调写法和自定义事件监听调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-12-21 16:08:43 · 416 阅读 · 0 评论 -
js回调函数模式,简单明了
//给一个回调函数的接口执行,不实现逻辑 function test(asdf, cb) { setTimeout(() => { console.log("test", asdf) //判断存在执行,可以赋值回调参数 cb && cb("参数...arg") }, 1000) } .原创 2021-12-21 10:58:03 · 256 阅读 · 0 评论 -
花裤衩 / vue-element-admin 的项目打包后发现不能跳转页面问题解决
项目install后build打开html文件跳转页面没有反应原因:因为项目中import Cookies from ‘js-cookie’ 使用无法进行页面跳转需要放到web服务上才能运行。解决:把所有Cookies.set(‘sidebarStatus’, 1) ,set和get 都换成localstorage或sessionstorage 其他 Cookies.set('sidebarStatus', 1) localStorage.setItem('sidebarStat原创 2021-10-11 13:48:11 · 2001 阅读 · 0 评论 -
JavaScript 异步编程
拓展并发 指 计算机同时执行多项任务JavaScript是单线程应用,同步是在上个任务执行完成后再执行,容易出现代码阻塞,异步是在同时可以执行多个任务的并行 不会造成代码阻塞单核处理器 通过分配时间段 运行任务切换(进程或线程的的上下文切换context switching )多核处理器可以通过 多个核心运行进行任务的并行...原创 2021-10-05 16:04:04 · 79 阅读 · 0 评论 -
一看就懂,简单了解react
安装使用script标签或者npm包元素渲染js函数生成domReactDOM.render( 元素,绑定挂载到)ReactDOM.render( element, document.getElementById(‘example’) );jsxReact 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX,但它有以下优点:JSX 执行更快,因为它在编译为 JavaScript原创 2021-09-18 12:52:59 · 187 阅读 · 0 评论 -
react设置动态样式实现渐变闪烁效果
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>React 实例</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.o原创 2021-09-17 16:53:48 · 500 阅读 · 0 评论 -
柯里化函数
柯里化函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术功能:创建一个函数,该函数接收一个或多个 func的参数,如果 func 所需要的参数都被提供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数。参数:需要柯里化的函数返回值:柯里化后的函数作用一、参数复用作用二、提前确认作用三、 延迟运行//处理函数function sum(...args){ return args.reduce((m,n)=>m+n)}fun原创 2021-09-10 16:16:44 · 131 阅读 · 0 评论 -
简单使用原生ajax,XMLHttpRequest
var url = 'http://127.0.0.1:3001/hi'; //一个本地页面 function load(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status == 200) { callback(xhr.response); }原创 2021-09-08 15:22:08 · 60 阅读 · 0 评论 -
CommonJS 与 ES6 Module 的区别
这两者的主要区别主要有以下两点:对于模块的依赖,CommonJS是动态的,ES6 Module 是静态的CommonJS导入的是值的拷贝,ES6 Module导入的是值的引用区别一对于模块的依赖,何为动态?何为静态?动态是指对于模块的依赖关系建立在代码执行阶段; 静态是指对于模块的依赖关系建立在代码编译阶段;CommonJS导入时,require 的路径参数是支持表达式的,例如// A.jslet fileName = 'example.js'const bModule = require原创 2021-09-07 14:09:48 · 347 阅读 · 0 评论 -
简单了解js宏任务微任务
简单了解js宏任务微任务时你可以去了解事件循环,消息队列,有助于理解,当然看个实例也可以简单了解<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> 宏任务,微任务 </title> </head> <body> 宏任务:script、setTimeOut、setInterval、setImmediate<br原创 2021-09-07 10:33:52 · 90 阅读 · 0 评论 -
js中的for循环
for循环经常使用,js常用有4中for循环, 普通 for(表达式1;表达式2;表达式3),for( i in obj),for (item of obj),foreach(callback(val,index,arr),thisArg )forfor 语句用于创建一个循环,它包含了三个可选的表达式,这三个表达式被包围在圆括号之中,使用分号分隔,后跟一个用于在循环中执行的语句(通常是一个块语句)。let str = '';for (let i = 0; i < 9; i++) {原创 2021-09-02 10:43:04 · 4808 阅读 · 0 评论 -
js防抖节流
js防抖节流在日常中经常会用到防抖 就是在连续多次触发同一个事件做的优化,最后只执行一次事件响应。节流 就是在连续多次触发同一个事件做的优化,在一定间隔内做出的事件响应。它们都是 防止多次点击触发多次从而产生不必要的响应上代码防抖使用定时器防抖 //防抖debounce代码: function debounce(fn, delay) { //传入要执行的函数和防抖事件间隔 if (typeof fn !== 'function') { //判断是否是函数 th原创 2021-09-01 14:54:05 · 86 阅读 · 0 评论 -
js浅拷贝和深拷贝
js浅拷贝和深拷贝先了解js基本类型基础类型:undefined 、 null、number、string、boolean、symbol引用类型:object对象类型(Object 、Array 、Function 、Data)基础类型存在于栈(stack)中。引用类型的值是同时保存在栈内存和堆(heap)内存中的对象,栈保存的是引用类型的内存地址,数据在堆中保存。浅拷贝js平时正常的拷贝是浅拷贝var obj = { a: 1, b: 2, c: { d: 3原创 2021-08-31 14:35:00 · 66 阅读 · 0 评论 -
二进制,10进制,16进制快速掌握,js语言相互转换
10进制 D表示日常生活常用,满10进101234567899进1=0 ,第十个数进1等10二进制 B 表示二进制计算机常用进制逢二进1用0和1标识和十进制对应的值0=0/00,1=1/012=10 逢二进1 =0进1等103=114=1005=1016=1107=1118=10009=100110=101011=101112=110013=110114=111015=111116=10000…逢二进一16进制 H表示16进制在计算.原创 2021-08-05 12:38:21 · 711 阅读 · 0 评论 -
css+js实现时钟
完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css时钟</title> <style> html { /* background: #282828; */ text-align: center; font-size: 10px; } body { margin: 0; .原创 2021-08-03 10:00:16 · 156 阅读 · 0 评论 -
ES6 模块
在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库)。ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 的模块化分为导出(export) @与导入(import)两个模块。特点ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。每个模块都有自己的上原创 2021-08-02 17:01:09 · 118 阅读 · 0 评论 -
前端监听网速
<script>console.log('是否在线',navigator.onLine)console.log('网速',navigator.connection.downlink,'MB/s')window.addEventListener("online", () => { console.log('网络已连接')});window.addEventListener("offline", () => { console.log('网络已断开')});<原创 2021-08-02 10:23:40 · 433 阅读 · 0 评论 -
js在智能手机上启用振动功能
在智能手机上启用振动window.navigator对象的vibrate()方法可以在移动设备上启用振动模式。window.navigator.vibrate(500);你可以将参数振动时间(以毫秒为单位)传递给方法。或者你甚至可以指定一种模式——振动间隔和暂停的交替。为此,可以向方法传递数字数组。...原创 2021-08-02 10:20:19 · 192 阅读 · 0 评论 -
input输入框 禁止插入(粘贴)文字
禁止插入文字你可能不希望用户在输入字段中粘贴从其他地方复制的文本(仔细考虑是否真的要这样做)。通过跟踪事件paste并调用其方法preventDefault()就很容易完成了。<input type="text"></input><script> const input = document.querySelector('input'); input.addEventListener("paste", function(e){ e.preventD原创 2021-08-02 10:18:33 · 1140 阅读 · 0 评论 -
vue router路由导航守卫设置指定页面验证登录
vue router路由导航守卫可以做很多功能,下面介绍设置指定页面验证登录router的前置守卫router.beforeEach((to, from, next) => {//判断目标路由的meta元字符中是否匹配限制 if (to.matched.some(record => record.meta.requiresAuth)) { //判断是否已登录 if (sessionStorage.getItem("tokenname") == null) { //跳原创 2021-07-31 09:48:45 · 927 阅读 · 0 评论 -
vue打包后去除代码中的console.log输出
vue打包后去除代码中的console.log输出项目上线的时候都不需要看到一些debug输出的内容,所以要去除console.log在vue 2中webpack中在生产环境的插件中添加配置// 代码:plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env原创 2021-07-30 13:25:10 · 870 阅读 · 0 评论 -
web前端兼容性问题
一直以来,Web前端领域最大的问题就是兼容性问题前端兼容性问题分三类:浏览器兼容性屏幕分辨率兼容性跨平台兼容性浏览器兼容性问题IE6、7、8不支持HTML5、CSS3、SVG标准,可被判定为“极难兼容”IE9不支持Flex、Web Socket、WebGL,可被判定为“较难兼容”IE10部分支持Flex(-ms-flexbox)、Web Socket,可被判定为“较易兼容”IE11部分支持Flex、WebGL,可被判定为“较易兼容”IE6、7、8、9可视为“老式浏览器”IE10、11可原创 2021-07-01 17:29:47 · 1340 阅读 · 0 评论 -
各大主流浏览器之间的差异
主流浏览器有 ie ,chrome,Safari,firefox,opera,其他。浏览器最主要的就是引擎,分为渲染引擎(内核)和js引擎(js解释器)渲染引擎”,用来解释网页语法并渲染到网页上四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko常见的js引擎...原创 2021-07-01 14:51:30 · 1211 阅读 · 0 评论 -
创建使用vue2项目模板
拉取 2.x 模板 (旧版本)Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:npm install -g @vue/cli-initvue init 的运行效果将会跟 [email protected] 相同vue init webpack my-project...原创 2021-06-15 17:16:30 · 329 阅读 · 0 评论 -
web pc端鼠标移动事件和,h5移动端触摸移动事件
1、PC端事件onclick 鼠标点击触发onmousedown 鼠标按下触发onmousemove 鼠标移动触发onmouseup 鼠标抬起触发2.移动端事件ontouchstart 手指按下触发ontouchmove 手指移动触发onTouchend 手指抬起触发原创 2021-06-02 17:37:16 · 815 阅读 · 0 评论 -
js检测当前设备是pc还是移动端
if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent) ) { console.log("移动"); } else { console.log("pc"); }原创 2021-06-02 17:31:37 · 231 阅读 · 0 评论 -
自定义包发布npm方法
1.首先创建npm账号2.在组件库项目的根目录下执行npm login3.发布到npm官网npm publish --access public完成原创 2021-06-01 14:51:14 · 112 阅读 · 0 评论 -
vue图片验证组件,直接安装使用
使用该组件,项目中最好使elemnt ui 或者 elemnt ui的 iconnpm安装npm i verify-m-sr -S导入组件使用返回验证结果<template> <div class="hello"> <verifyd @verify="fdd"></verifyd> {{ sd }} </div></template><script>import {verifyd}原创 2021-06-01 14:48:55 · 165 阅读 · 0 评论 -
vue封装(简单)自定义组件使用
1、使用 webpack-simple 模板,没有vue-router的中间件,不需要路由时推荐使用,同时 webpack-simple 没有格式的检测,新建项目vue init webpack-simple然后再 npm install 初始化在新建的项目的src目录下新建一个目录(components)目录下存放自定义组件组件封装好后在组件目录(components)下新建一个index.js文件,为组件库的入口文件src/components/index.js// 导入封装的组件原创 2021-06-01 10:26:58 · 382 阅读 · 0 评论 -
网页图片滑动验证
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>滑动验证</title> <style> * { margin: 0; padding: 0; } body { background-color: #E8E8E8; } .container { overflow: hidde原创 2021-05-27 14:08:10 · 443 阅读 · 0 评论 -
js排序,去重实用算法
可以自己手动试试<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js</title> </head> <body> <h1>数组排序</h1> <h2>array.sort(sortfunction)</h2> Array 对数组的引用。请注意,数组在原数组上进行排序原创 2021-05-27 14:06:30 · 150 阅读 · 0 评论 -
原生ajax请求
###创建请求对象var xmlhttp;if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();}else{ // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}如需将请求发送到服务器,我们使用 XMLHttpRequ原创 2021-05-27 13:52:59 · 133 阅读 · 0 评论 -
自定义js对象扁平化处理
请将以下层层嵌套的source对象转换成扁平的简单对象:{“a.b.c”: “1”, “a.d”: “2”, “e”: “3”}var source = {a: {b: {c: “1”,},d: “2”,},e: “3”,};var newobj = {};function flat(cur, key2) { Object.keys(cur).forEach(function(key) { if (typeof cur[key] != "object") { if (key原创 2021-05-27 13:21:59 · 3564 阅读 · 0 评论 -
盖雅工场前端面试测试题(参考答案)
答案仅供参考// 2.我们知道IE8中的数组没有indexOf方法,因此以下代码会报错,请添加一段代码,让以下代码在所有浏览器中都能正确运行。// var index = [1,2,3].indexOf(2);*var num = [1, 2, 3];function indexd(num) { for (var i = 0; i < num.length; i++) { if (num[i] == 2) { return i; } }}// 3.以下两个样式同时作用于原创 2021-05-27 13:18:52 · 625 阅读 · 0 评论 -
vue-router实用
vue-router是vue的路由工具项目开发的核心之一首先安装路由npm install vue-router使用路由import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)最优路由创建方式const router = new VueRouter({ routes: [{ path: '/foo', component: () => import('@/components/Yu.vu原创 2021-05-20 10:47:25 · 149 阅读 · 0 评论 -
详细一步到位,快速掌握webpack,无缝衔接webpack5
webpack快速使用使用webpack准备1.创建webapck项目2.项目根目录创建webpack.config.js文件创建src文件夹写法规范source-map代码分割PWA(离线使用)externals多进程打包dll可以修改压缩配置入口文件webpack5使用webpack准备首先要安装有node,会使用npm 下载命令(这个非常简单,不会直接百度)1.创建webapck项目npm initnpm i webapck webapck-cli -D 下载webpack和cli2.项目原创 2021-04-22 15:21:32 · 217 阅读 · 0 评论 -
前端开发需掌握的技术
原创 2021-04-02 15:13:34 · 69 阅读 · 0 评论 -
webpack-dev-server 使用出现Cannot find module ‘webpack-cli/bin/config-yargs‘问题
.降级webpack-cli安装npm install webpack-cli@3 -D在次运行webpack-dev-server即可原创 2021-04-01 16:25:11 · 91 阅读 · 0 评论 -
webpack打包html中img,打包资源成功,图片引用错误,不能显示问题
//webpack 配置文件 { test: /\.html$/, //处理html文件中img图片,负责引入img,被url-loaer处理,下载npm i html-withimg-loader -D loader: "html-withimg-loader" }const { resolve } = require('path')const HtmlWebpcakPliugin =原创 2021-04-01 16:21:13 · 692 阅读 · 1 评论 -
uniapp蓝牙使用读写数据
<template> <view class='u-form'> <u-no-network></u-no-network> <u-button :ripple="true" @click="openBluetoothAdapter">开启蓝牙并检索设备</u-button> <u-button :ripple="true" @click="stopBluetoothDevicesDiscovery">关闭检索原创 2021-03-08 11:54:01 · 4449 阅读 · 7 评论