JS
关注
分享
扫一扫
合法的咸鱼
我太懒了
展开
-
函数副作用side effect
如果一个函数没有副作用,且函数的返回结果仅依赖参数, 则该函数叫做纯函数(pure function)副作用: 在函数运行过程中,可能会对外部环境造成影响的功能如果函数中包含以下代码,则该函数具有副作用异步代码localStorage对外部数据的修改...原创 2022-02-17 14:59:24 · 255 阅读 · 0 评论 -
webpack常用插件(loader/plugin)和内置插件
clean-webpack-plugin清除打包生成的目录html-webpack-plugin自动生成Html常用配置template: “相对路径 ./public/index.html”chunks: “all”, //默认值all 接收 [“home”] home是chunk名称,接收多个filename: “”, //文件名生成多个html,就在plugin中多次new HtmlWebpackPlugin()copy-webpack-plugin复制文件到出口文件夹原创 2022-02-11 16:34:24 · 659 阅读 · 0 评论 -
webpack dev 服务器
webpack-dev-server安装npm i -D webpack-dev-server运行npx webpack-dev-server默认地址 localhost:8080proxyproxy: { "/api": { //当请求路径中包含 "/api" (/api会被放入正则表达式) target: "https://www.baidu.com", //匹配成功后将主机名更改 changeOrigin: true, //有的服务器需要验证请求头中的Host和origin,原创 2022-02-11 14:22:20 · 278 阅读 · 0 评论 -
webpack其他配置
contextcontext: path.resolve(__dirname, "src") // 改变当前执行路径outputlibrary与libraryTargetoutput: { library: "abc", //将打包后的自运行结果暴露給abc libraryTarget: "var", //abc的暴露方式,具体值参考文档}targettarget: "node", //打包后运行的环境设置为noderesolveresolve: { modules: ["no原创 2022-02-11 11:02:41 · 272 阅读 · 0 评论 -
webpack的loader配置
module.exports = { module: { rules: [ { test: /\.js$/, //文件名称匹配规则 use: [ { loader: "./loader/loader1.js", //此路径会被webpack使用require调用 options: { //会被传入编辑的Loader中 此例是loader1.js a: 1 } } ], //完整写法 use: [原创 2022-02-09 13:09:44 · 1052 阅读 · 0 评论 -
webpack出入口配置
入口单入口module.exports = { // entry: "./src/index.js" 默认值 相当于 entry: { main: "./src/index.js" }}多入口,多模块module.exports = { entry: { main: "./src/index.js", more: ["./src/more/index1.js", "./src/more.index2.js"] }}出口常用配置与规则var path = r原创 2022-02-09 10:22:03 · 878 阅读 · 0 评论 -
node路径的小知识点
./代表的含义在模块化代码中, ./代表当前文件所在的目录在node路径处理中, ./代表运行node命令时所在的目录2举例//假设cmd命令行处于D:\test//需要执行的文件在D:\test\node\index.js//执行 D:\test> node ./node/index.js//则在index.js中使用的./ 表示D:\test , 而不是D:\test\node__dirname无论什么情况都代表当前文件所在的目录...原创 2022-02-09 08:56:43 · 322 阅读 · 0 评论 -
webpack安装及基础(1)
安装webpacknpm install webpack webpack-cli --save-dev配置文件webpack 打包时会默认读取webpack.config.js,其内容运行在Node环境,遵循commomjsmode 当前环境module.exports = { mode: "development" // "production" 二选一 会被命令覆盖(webpack --mode=development)}entry 入口文件默认./src/ind.原创 2022-02-08 15:18:24 · 215 阅读 · 0 评论 -
代理Proxy,观察者模式
代码<!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>原创 2022-01-17 11:19:40 · 343 阅读 · 0 评论 -
JS生成器
//定义一个生成器函数,不可与async同时使用, *调用时不会执行函数体*function* test() { console.log("1"); yield 1; console.log("2"); yield 2; console.log("3"); return 3;}const re = test(); //得到一个Generator生成器, 此时不会打印"1"//每次调用生成器的next方法, 执行到下一个yeild位置re.next(); //返回(对象)数据1, 打原创 2022-01-13 14:52:40 · 587 阅读 · 0 评论 -
Promise手写
实现Promise A+大部分规范const PENDDING = "pendding";const FULFILLED = "fulfilled";const REJECTED = "rejected";/** * 创造一个微队列 * @param {Function} callback 回调函数 */function runMicroMask(callback) { if (this.MutationObserver) { //浏览器环境 const obse.原创 2022-01-12 13:05:47 · 202 阅读 · 0 评论 -
ES6类相关知识与继承
文章目录传统构造函数的问题类类的基本使用类的特点类的其他书写方式可计算属性名getter与setter静态成员字段初始化器传统构造函数的问题属性与原型方法定义相分离,降低了可读性原型成员可以被枚举默认情况下,构造函数仍然可以被当做普通函数使用类类的基本使用class Person { constructor(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } say(words) {原创 2021-12-30 09:40:21 · 418 阅读 · 0 评论 -
ES6new.target与箭头函数
文章目录new.target箭头函数new.target当函数被new调用,new.target值为函数本身,否则值为undefined箭头函数//完整语法let a = (参数1, 参数2, ...) => { //函数体}//当参数只有一个 可以省略小括号let b = 参数1 => { //函数体}//如果函数只有一条语句返回,可以省略花括号和returnlet c = () => 1+1//注意: 当此条语句为对象时let d = () =>原创 2021-12-29 14:01:09 · 428 阅读 · 0 评论 -
ES6码元与码点,字符串api
文章目录码元码点字符串API码元码元能表示16位二进制字符码点由1-2个码元组成,正则匹配添加/^$/u,则表示使用码点查看一个字符的码点text.codePointAt(0); //得到码点function is32Bit(char, i) { return char.codePointAt(i) > 0xffff;}function getStringPointLength(str) { let length = 0; for (let i=0; i < st原创 2021-12-27 15:27:14 · 368 阅读 · 0 评论 -
ES6声明变量
let声明变量不会挂载到全局对象(window)不允许在相同作用域重复声明变量在花括号内形成块级作用域不会产生变量提升底层实现上let也会有变量提升,但是会被放入"暂时性死区",访问"死区"内的内容会报错,当代码运行到该变量声明行时会将其移出"暂时性死区".在循环中,let声明变量会做特殊处理,每次循环生成一个作用域,并将循环变量绑定到该作用域,循环结束后,循环变量会被销毁const与let基本一致,只是在初始化时必须赋值,且不可被更改注意:常量不可变,只得是保存常量的原创 2021-12-27 14:41:50 · 371 阅读 · 0 评论 -
mock.js文档详解8(demo展示)
<!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>dem原创 2021-12-10 15:18:45 · 239 阅读 · 0 评论 -
mock.js文档详解7及下载(数据占位符,setup方法)
Mock.Random 是一个工具类，用于生成各种随机数据//数据占位符 @+Random的函数名console.log( Mock.mock("@cname"), //生成随机的中文姓名 Mock.mock("@natural(1, 5)"), //生成1-5的自然数 Mock.mock("@ctitle(5)@guid"), //可以连续使用 Mock.mock("@ctitle(5)@guid 123"), //以空格分隔可以接字符串);//setup函数.原创 2021-12-10 14:29:06 · 743 阅读 · 0 评论 -
mock.js文档详解6及下载(Random中的Helper,Miscellaneous种类函数)
Mock.Random 是一个工具类，用于生成各种随机数据var Random = Mock.Random目录HelperMiscellaneousmockjs下载,日期2021-12-07Helper/** 1. * @function Random.capitalize( word ) * @param {string} word 英文字符串 * @returns {string} * @description 首字母大写 */Random.capitalize("he.原创 2021-12-10 13:15:47 · 602 阅读 · 0 评论 -
mock.js文档详解5及下载(Random中的Name,Web,Address种类函数)
Mock.Random 是一个工具类，用于生成各种随机数据var Random = Mock.Random目录NameWebAddressmockjs下载,日期2021-12-07Name/** 1. * @function Random.first() * @returns {string} * @description 随机生成英文名 */Random.first() // hellen/** 2. * @function Random.last() * @re.原创 2021-12-10 10:42:02 · 293 阅读 · 0 评论 -
mock.js文档详解4及下载(Random中的Image,Color,Text种类函数)
Mock.Random 是一个工具类，用于生成各种随机数据var Random = Mock.Random目录ImageColorTitlemockjs下载,日期2021-12-07Image/** 1. * @function Random.image( size?, background?, foreground?, format?, text? ) * @param {string} size 默认从下面数组中随机取一个 * [ * '300x250', '2.原创 2021-12-09 16:26:57 · 624 阅读 · 0 评论 -
mock.js文档详解3及下载(Random中的Date种类函数)
Mock.Random 是一个工具类，用于生成各种随机数据var Random = Mock.RandomDate格式化描述示例yyyy4位数表示的年份2008yy2位数表示的年份(取后两位)08y2位数表示的年份(取后两位)08MM表示月份,补零03M表示月份,不补零3dd表示日期,补零05d表示日期,不补零5HH24小时制时间,补零02H24小时制时间,不补零2hh12小时制.原创 2021-12-08 16:08:05 · 1066 阅读 · 0 评论 -
mock.js文档详解2及下载(Random中的Basic种类函数)
Mock.Random 是一个工具类，用于生成各种随机数据var Random = Mock.RandomBasic/** 1. * @function Random.boolean( min?, max?, current? ) * @param? {number} min=1 最小值 默认值 1 * @param? {number} max=1 最大值 * @param? {boolean} current true 或者 false * @returns {boolean}.原创 2021-12-08 14:52:16 · 345 阅读 · 0 评论 -
mock.js文档详解1及下载(数据模板)
作用: 生成随机数据,拦截Ajax请求 // mock数据模板的书写规则: // "属性名|规则": 属性值 // 规则共有七种 /** * 1. "name|min-max": value //针对value的不同类型会有不同意义 * 2. "name|count": value * 3. "name|min-max.dmin-dmax": value * 4. "name|min-max.dcount": value * 5. "name|count.dmin-dmax".原创 2021-12-07 15:41:36 · 673 阅读 · 2 评论 -
cookie特点,属性,设置方法,及其封装
cookie特点cookie不可跨域cookie存储在浏览器中cookie存在数量以及大小限制(50个左右,4KB左右)cookie的存储时间非常灵活cookie不光服务端可以设置,客户端也可以设置cookie的属性name cookie的名字,具有唯一性(重复定义同一个名字会覆盖)value cookie的值domain cookie生效的域path cookie的路径expires cookie过期的时间(接受GMT格式的时间,new Date(),不设置时原创 2021-11-25 10:46:32 · 843 阅读 · 0 评论 -
那些年我所犯的错1(网络)
Web前端应该从哪些方面来优化网站性能 a. 减少页面体积，提升网络加载 ■ 静态资源压缩合并，（JS/css代码压缩合并，雪碧图） ■ 静态资源缓存 ■ 使用CDN加载资源更快 b. 优化页面渲染 ■ css放在前面，js放后面 ■ 懒加载 ■ 减少dom操作http与https的区别● 为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。● http是超文本传原创 2021-11-24 16:39:10 · 294 阅读 · 0 评论 -
JSONP原理
jsonp完成跨域,主要是利用src属性可以进行跨域请求的原理,而具有src标签且用在这里最合适的标签就是script标签,浏览器会认为script标签请求回来的东西就是js文件进行解析执行<script src="xxxxxxx?callback=functionName"></script><!-- 返回值 functionName(真正的json内容) 返回后 浏览器会直接执行functionName函数 --><script> f.原创 2021-11-24 15:24:57 · 386 阅读 · 0 评论 -
跨域发生阶段
一个跨域请求请求会被正常发出服务端可以正常接收,正常处理,正常返回浏览器也能接收服务端返回的数据接收之后发现当前域与所请求的域不同,所以判定为跨域浏览器判定为跨域,不会将代码返回给我们...原创 2021-11-24 14:13:33 · 804 阅读 · 0 评论 -
GET与POST请求方式的区别
基于的前提不同则代表的意义不同1. 没有前提,不使用任何规范,仅考虑语法和理论上的HTTP协议GET和POST几乎没有什么区别,只有名字不同RFC规范: 简言之就是某机构或某组织提出一种规范或者对某规范提出某些见解,有一个组织会收纳或审核这些规范,最终决定是否录入RFC规范2. 基于理论上的RFC规范(Specification)GET和POST具有相同的语法,但有不同的语义.get是用来获取数据的,post是用来发送数据的,其他方面没有区别3. 基于实现上的RFC规范(Impleme原创 2021-11-24 09:46:26 · 257 阅读 · 0 评论 -
HTTP协议
请求: Request请求方式 路径 协议版本请求方式: get post等响应: Response原创 2021-11-23 16:08:11 · 203 阅读 · 0 评论 -
五层网络模型
物理层规定传输时间等规则数据链路层mac地址网络层IP地址 — IP协议运输层TCP协议/ UDP协议TCP协议是安全的/可靠的UDP协议是不安全的/不可靠的应用层软件所用到的协议 http协议 dns协议原创 2021-11-23 16:07:43 · 392 阅读 · 0 评论 -
域名与DNS解析
域名解析终成IP地址计算机逐一访问路由器是否能解析该域名当访问到城市级别的路由器时,通过DNS服务器解析如果城市级别的DNS服务器无法解析,则继续向上查询DNS服务器,最终总是可以解析为IP地址...原创 2021-11-23 15:45:23 · 675 阅读 · 0 评论 -
IP 地址
IP地址的格式XXX.XXX.XXX.XXX 四个网段每个网段0~255,由8个0或1组成IP地址的分类IP地址分为两个部分: 网络ID 主机IDA类: 0.0.0.0 ~ 127.255.255.255(一个网络能有1600W+台主机)B类:128.0.0.0~ 191.255.255.255C类:192.0.0.0~223.255.255.255D类: (多播地址)E类:...原创 2021-11-23 15:21:08 · 667 阅读 · 0 评论 -
js 防抖
防抖函数防抖就是在函数需要频繁触发情况时,只有足够空闲的时间, 才执行一次. 好像公交司机会等人都上车后才出站一样function debounce(handler, time) { let timer = null; return function () { let that = this; let _arg = arguments; clearTimeout(timer); timer = setTimeout(function () { handler.apply(t原创 2021-11-23 09:42:12 · 208 阅读 · 0 评论 -
js 节流
节流函数节流就是预定一个函数只有在大于等于执行周期时财智星,周期内调用不执行.好像水滴攒到一定重量才会落下一样.场景窗口调整页面滚动抢购疯狂点击function throttle(handle, time) { let lastTime = 0; return function () { let nowTime = +new Date(); if (nowTime - lastTime > time) { handle.apply(this, arguments)原创 2021-11-23 09:25:25 · 271 阅读 · 0 评论 -
array.reduce
let someInitValue = ""; //初始值可以是任意类型的任意值/* *array 为任意数组 *@ prevValue 定义: 上一次函数执行的返回值 初始值: someInitValue *@ item 定义: 每次循环的当前值 *@ index 定义: 每次循环的索引 *@ selfArray 定义: 代表整个数组, 不考虑循环次数 *此循环不改变原数组 */array.reduce(function (prevValue,item,index,selfA原创 2021-11-22 13:17:46 · 64 阅读 · 0 评论 -
web前端 属性与特性
以Input举例<input type="text" id="input" class="input" data="something">特性指标签与生俱来的属性如 id,class,type等标签特性与DOM对象程一一对应关系,相互影响var oInput = document.getElementById("input");console.log(oInput.id); //inputoInput.id = "change"; //<input id="chang原创 2021-11-19 10:17:47 · 228 阅读 · 0 评论 -
JS基础 预编译 与 AO对象
预编译发生在函数执行的前一刻预编译在函数执行的前一刻完成function pre(a) { console.log(a); // ? var a = 100; console.log(a); // ? console.log(b); // ? var b = function() {console.log("函数b")} console.log(b); // ? function a() {console.log("函数a")} console.log(a); // ? func原创 2021-11-11 11:20:22 · 365 阅读 · 1 评论 -
关于vue2无法监听数组的问题
此做法可以改变数组,但是无法触发视图更新data() { return { test:[1,2,3] }}methods: { changeTest() { this.test[0] = 4; }}解决办法changeTest() { this.$set(this.test,0,4); //三个参数分别为 目标,索引,值 //此方法也可更改对象,具体做法请参...原创 2020-05-06 14:11:03 · 762 阅读 · 0 评论