前端
aeipyuan
渣渣一枚,请多指教。。。。。。
展开
-
vite基本实现
vite基本实现1. 设置入口并链接全局编写入口文件// /bin/www.js#! /usr/bin/env nodeconsole.log('入口调用成功!!!')配置package.json{ "name": "yuan-vite", "version": "1.0.0", "description": "", "main": "index.js", "bin": { "yuan-vite": "./bin/www.js" }, "key原创 2020-12-18 21:58:39 · 1046 阅读 · 1 评论 -
npm包发布流程
1. 初始化运行npm init生成配置文件{ "name": "aeip_add",/* 包名字 */ "version": "1.0.0",/* 版本 */ "description": "a add function",/* 描述 */ "main": "index.js",/* 入口文件 */ "scripts": {/* 脚本命令 */ "test": "echo \"Error: no test specified\" && exit 1" }原创 2020-10-25 11:18:35 · 237 阅读 · 0 评论 -
webpack简单实现
webpack简单实现1. 注册命令行指令(可以直接通过mypack指令打包)项目根目录创建mypack文件夹npm initnpm初始化,并修改bin为主文件路径{ "name": "mypack", "version": "1.0.0", "description": "", "main": "index.js", "bin": { "mypack": "bin/mypack.js" }, "scripts": { "test": "ec原创 2020-08-15 23:09:49 · 198 阅读 · 0 评论 -
使用directives设置自定义图片懒加载指令
1. 使用方式<section v-for="(item,index) in imgSrc" :key="index"> <img class="img" v-lazyImg="item"></section>2. 注册指令directives: { lazyImg},3. 实现方式img标签inserted事件发生后,对组件进行监听,并将占位图src赋值,记录真实src到data_src上let lazyImg = { inserted(e原创 2020-08-09 21:07:53 · 144 阅读 · 0 评论 -
优化js定时器准确性
思路:使用时间戳,计算延迟时间,用延迟时间抵消一部分定时器的时长不做优化let cnt = 0;let start = Date.now();// 耗时任务setInterval(() => { let num = 100000000; while (num--) { }});setInterval(() => { cnt++; console.log("延迟:" + (Date.now() - (start + cnt * 1000)));}, 1000);原创 2020-08-03 21:39:48 · 920 阅读 · 0 评论 -
浏览器的进程和线程
1. 浏览器进程概念:进程是操作系统分配资源的最小单位,每个进程之间有独立的地址空间浏览器中存在以下进程:浏览器进程:负责页面显示、用户交互、子进程管理等功能渲染进程:将HTML、CSS、JS转化为可交互网页,默认每个Tab标签都有一个渲染进程GPU进程,为了实现页面绘制和动画效果而开发的进程网络进程,负责页面网络资源加载插件进程,每个插件对应一个进程,防止崩溃影响浏览器使用2. 浏览器线程概念:线程是程序执行的最小单位,一个进程下的所有线程共享该进程的地址空间GUI渲染.原创 2020-07-05 16:23:05 · 428 阅读 · 0 评论 -
webpack打包速度优化
配置resolve.moduleswebpack默认顺序是在当前模块的node_modules目录下,没找到再去上级目录寻找,一般一个项目只有一个根目录下的node_modules,配置指明存放第三方模块的绝对路径可以减少寻址module.exports = { resolve: { modules: [ path.resolve(__dirname, 'node_modules') ] }}配置loaders的include原创 2020-06-23 19:57:10 · 807 阅读 · 0 评论 -
前端性能优化小结
一. 浏览器渲染优化1. 构建DOM树过程:将字节转换为字符集 -> 根据w3c规定的token令牌进行词法解析生成结点 -> 根据嵌套规则生成DOM树形结构2. 构建CSSOM过程:与HTML类似3. 渲染树4. 总步骤处理HTML标记,生成DOM树处理CSS标记,生成CSSOM树将DOM树和CSSOM树融合成渲染树根据生成的渲染树计算确切位置和大小,又叫回流(重排)根据渲染树以及回流结果,得到绝对像素,进行绘制5. 优化方案语义化标签,如果不是w3c原创 2020-06-20 12:34:13 · 149 阅读 · 0 评论 -
axios和fetch的封装
axiosimport axios from 'axios';import qs from 'qs';/* 全局默认 */switch (process.env.NODE_ENV) { case 'production': axios.defaults.baseURL = "api.abcdef.com"; break; case 'test': axios.defaults.baseURL = "192.168.20.21";原创 2020-06-17 20:53:22 · 248 阅读 · 0 评论 -
浅学virtualDom和diff算法
浅学virtualDom和diff算法virtual Dom创建virtual Dom/* 实现 */class Element { constructor(type, props, children) { this.type = type; this.props = props; this.children = children; }}function createElement(type, props, children) {原创 2020-05-12 10:18:49 · 195 阅读 · 0 评论 -
跨域问题的多种解决方案
1. jsonp原理:script标签不受同源策略的影响,把链接挂在script标签上,通过回调函数传递数据优点:兼容性好,前后端分离缺点:仅支持get请求,安全性较差,容易引发xss攻击/* server.js */const express = require('express');const app = express();app.get('/say', (req, res)...原创 2020-04-29 23:23:35 · 424 阅读 · 0 评论 -
Vuex简单实现
Vuex简单实现1. 实现this.$store全局访问const install = (vue) => { Vue = vue; Vue.mixin({ beforeCreate() { /* 获取根组件传递$store */ if (this.$options && this.$optio...原创 2020-04-22 18:23:10 · 224 阅读 · 0 评论 -
闭包&作用域链&let
1. 概念闭包函数:声明在一个函数中的函数,叫做闭包函数。闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)之后。2. 特点可以实现在外部访问函数内部变量。可以避免全局污染。局部变量常驻内存,会造成内存泄漏。3. 作用域链在js中,常见作用域分为全局作用域、函数作用域、块级作用域,作用域有上下级关系,上下级关系的确定就看函数是在哪...原创 2020-04-09 12:33:21 · 198 阅读 · 0 评论 -
vue单元测试学习笔记
import { expect } from 'chai'import { mount } from '@vue/test-utils'import Vue from 'vue'import HelloWorld from '../../components/HelloWorld.vue'import Count from '../../components/Count.vue'des...原创 2020-04-08 16:58:51 · 163 阅读 · 0 评论 -
Vue自定义属性实现输入框相关组件显示与隐藏
directives: { clickOutside: {/* 指令生命周期 */ bind(el, binding, vnode) { /* 把事件绑定在document上 看节点是否在当前元素内部 */ let handler = (e) => { /* 判断是否在div...原创 2020-04-08 08:59:01 · 2763 阅读 · 0 评论 -
Vue3响应式的简单实现
vue3与vue2响应式的区别1.vue2响应式数据在data中注册,编译时直接将data中的所有数据绑定监听利用Object.defineProperyty()监听数据的get和set用Observe,Dep,Watcher三个类实现依赖收集缺点:对于在html中未使用的数据也设置了监听,需要对每一个基本数据类型都要设置劫持,defineProperty监听不到数组/对象内部变化,...原创 2020-04-06 20:19:36 · 645 阅读 · 0 评论 -
javascript面向对象总结
js面向对象一.js类的生成方式1.工厂模式function Person(options) { var obj = new Object(); obj.name = options.name; obj.age = options.age; obj.say = function () { console.log("工厂模式"); } return ob...原创 2020-04-06 00:09:22 · 2260 阅读 · 7 评论 -
事件循环&nextTick原理&异步渲染
事件循环机制众所周知,js是单线程的,只能按顺序执行任务,在遇到setTimeout这样的耗时任务时,会让浏览器原创 2020-04-02 16:14:50 · 565 阅读 · 0 评论 -
Vue响应式原理
如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter,每一个属性都有一个自己对应的Dep订阅器。在对’#app’里面的子元素进行编译时,会对每一个需要获取key的位置创建一个订阅者watcher(1)构造时将这个watc...原创 2020-04-01 12:39:47 · 128 阅读 · 0 评论 -
简单实现Vue功能及原理总结
Vue类获取数据并对各个工具类进行调度,通Object.defineProptert实现vm[key]=vm.$data[key]这一代理功能和computed、methods代理调用/* 调度 */class Vue { constructor(options) { this.$el = options.el; this.$data = option...原创 2020-03-31 22:03:03 · 269 阅读 · 2 评论 -
nodejs简单仿apache页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index of {{...原创 2020-03-26 13:39:24 · 135 阅读 · 0 评论 -
HTML 5 Web Workers
什么是 Web Worker?当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。/*--------------worker.js---------------*//...原创 2020-03-23 20:54:39 · 154 阅读 · 0 评论 -
解决低版本浏览器HTML5和CSS3兼容问题
html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。respond.min:让不支持css3Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,故这两种方案还是需要的,下面是两个解决方法的cdn地址写法:<!--[if...转载 2020-03-22 10:01:56 · 531 阅读 · 0 评论 -
CSS清除浮动的几种有效方法
CSS清除浮动的几种有效方法父级div定义overflow:hidden 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 优点:简单,代码少,浏览器支持好 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏 结尾处加空div标签clear:both 原理:添加一个空div,利用css提...原创 2020-03-22 09:35:11 · 172 阅读 · 0 评论 -
vscode同步插件 sync(配置gist Id和access token)
vscode同步插件 sync(gist,token)网上很多同步教程,按照教程操作upload时一直报错:sync:invalid gist ID查找问题很久才知道 gist和token是两个东西。下面重新梳理下:一、下载安装插件 Setting sync二、github上生成gist 进入 your gists随便给自己的gist起个名,添加内...转载 2020-03-21 12:51:55 · 3571 阅读 · 0 评论 -
git与github
一、Git基础1、Git介绍Git是目前世界上最先进的分布式版本控制系统。2、Git与Github2.1、两者区别Git是一个分布式版本控制系统,简单的说其就是一个软件,用于记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的软件。Github(https://www.github.com)是一个为用户提供Git服务的网站,简单说就是一个可以放代码的地方(不过可以放的当...转载 2020-03-21 12:04:16 · 153 阅读 · 0 评论 -
Vue电商管理项目
Vue电商管理项目 添加路由守卫 如果用户没有登录,不能访问/home,如果用户通过url地址直接访问,则强制跳转到登录页面 打开router/index.js //挂载路由导航守卫,to表示将要访问的路径,from表示从哪里来,next是下一个要做的操作router.beforeEach((to,from,next)=>{ //获取token const tok...原创 2020-03-20 22:40:58 · 213 阅读 · 0 评论 -
git码云项目托管教程
注册码云账号 安装git(http://www.git-scm.com.cn/d),命令行输入git --version可测试是否成功 创建公钥,ssh-keygen -t rsa -C "xxx@xxx.com"(注册的邮箱帐号)选择都选y 创建位置的.ssh文件夹下面即为公钥和私钥 打开id_rsa.pub文件,复制文件中的所有代码,点击码云中的 设置->SSH公钥,将生成的公钥...原创 2020-03-20 20:49:17 · 303 阅读 · 0 评论 -
解决vue项目中eslint报错问题
废话不多说直接上代码,把.eslintrc.js换为下面这个,完美解决module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential' // '@vue/standard' ], parser...原创 2020-03-18 20:46:21 · 1236 阅读 · 4 评论 -
用Promise+async/await 封装wx-request防止回调地狱
promise的优点是什么?promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外) 并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据 代码风格,容易理解,便于维护 多个异步等待合并便于解决 async/await结合promise可以进一步简化,省去.then(),使函数类似同步的方式执行 //微信小程序wx-req...原创 2020-03-11 12:46:43 · 1506 阅读 · 2 评论 -
var、let区别(变量提升、作用域)
1.var作用范围:函数作用域,存在变量提升,即实际解析顺序与编码位置无关(赋值前预解析)。2.let作用范围:块级作用域,不存在变量提升,与大多数后端语言一样。例1:for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0);}//输出3 3...原创 2020-03-07 22:47:00 · 308 阅读 · 0 评论 -
Javascript--防抖与节流
1.防抖多用于搜索框输入即时发送请求频率控制,可以实现输入停顿指定时间后发送网络请求的功能,无操作n秒后发送请求,遵循的规则是先等待,后执行。2.节流多用于解决下拉加载等操作时防止重复操作的需求,第一次操作立即执行,等待n秒后才会继续执行新的操作(等待时间内的操作被忽略),遵循的规则是先执行,后等待。<!-- 防抖 触发后在n秒只执行一次,n秒内再次触发则重新计算...原创 2020-03-07 21:41:29 · 157 阅读 · 0 评论 -
JavaScript中call和apply的区别
call()方法和apply()方法的作用相同,他们的区别在于接收参数的方式不同。对于call(),第一个参数是this值没有变化,变化的是其余参数都直接传递给函数。(在使用call()方法时,传递给函数的参数必须逐个列举出来。使用apply()时,传递给函数的是参数数组)如下代码做出解释:function add(c, d){return this.a + this.b + c + d;}...原创 2020-03-04 15:53:21 · 92 阅读 · 0 评论 -
Vue学习笔记----事件修饰符
Vue事件修饰符stop停止冒泡,不触发父元素 self只支持本身触发,子元素触发无效 once只触发一次 prevent阻止默认事件 capture捕获事件触发机制,由外到内触发 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件修饰符&...原创 2019-10-27 23:43:02 · 135 阅读 · 0 评论 -
Ajax两种方式封装及举例
function myAjax(obj){ if(obj.textType=="Jsonp"){ myAjaxAcross(obj);//跨域访问 }else{ myAjaxNormal(obj);//普通访问 }}function myAjaxNormal(obj){ //初始对象 var defaults={ type:"post", url:"#",...原创 2019-10-20 15:36:57 · 146 阅读 · 0 评论