我真菜呀-优快云博客

原创如何使用自己的webpack

前言前端模块化编程思想是很重要的，优秀的模块化打包工具比如webpack、rollup、vite都可以用来进行模块编程。那么如何实现自己的打包工具呢？这里我们模仿webpack的底层打包思想来实现自己的打包工具。准备如何在全局下定义自己的打包命令以使用自己的打包工具？我们需要准备一个文件夹(自定义名字)，这里我以mypack命名，目录结构参考下图。注意package.json里面的"bin"的属性值的’mypack’是命令(后面会使用npm link，然后就可以在全局下使用这个命令了)mypa

2021-10-04 00:33:24 241 2

原创手写前端必须要掌握的api

花了一天时间手写了前端必须要知道的api,供大家参考。new、instenceof <script> function myNew(fn){ let obj={} obj.__proto__=fn.prototype; let result=fn.call(obj) return result instanceof Object?result:obj; }

2021-09-17 20:31:33 304 2

原创 vue3响应式原理

以下代码是使用rollup打包出来的./vue.js(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (global = ty

2021-09-11 19:04:36 259 1

原创如何使用正则命令

<!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>Doc

2021-09-11 18:36:00 338 1

原创使用git命令管理项目

git init 初始化本地仓库git clone 远程仓库克隆远程仓库(这里克隆时，默认是克隆master分支上的仓库，并且将本地仓库和远程仓库进行了关联)git status查看状态git branch 查看分支(默认是在master分支上)git add .将修改内容添加到暂存区git commit -m ‘添加了新功能’git checkout -b login 创建新分支，并切换到login分支上(这里是两个命令的结合:git branch是创建分支,git checkout 是切

2021-09-11 18:07:21 120 1

原创发布组件到npm上

将自己写的组件发布到npm上，分为两个步骤:1.打包一下自己的组件2.发布组件打包一下自己的组件首先需要用webapck搭建好一个基本的框架(不需要脚手架)项目目录结构如下图:在components中写上以.vue文件结尾的vue组件<template> <fieldset> <legend>2021的组件</legend> <h2>{{msg}}</h2> <h2 class="maket

2021-09-01 13:54:56 953 1

原创 react复习笔记

js创建虚拟dom和jsx创建虚拟domjs创建虚拟dom  <div id="test"></div>  <script type="text/javascript" src="../js/react.development.js"></script>  &lt

2021-08-29 17:03:38 258 1

原创移动端适配原理

1.Web app/混合app/native appweb appweb app是前端人员接触的最多的东西，wep app要部署html,css,js等静态文件。页面和数据都存放在服务端，用户需要通过网络访问web app。wep app开发快成本低，版本迭代快。web app只需要更改服务端的数据和页面，不需要让用户重新安装app。wep app性能低，页面都要通过网络去访问和加载。混合app既有web app,也有native app。混合app将不需要更改的页面写死，经常需要改变的页面放在服务

2021-08-26 15:12:19 700 1

原创手写一个简易的MVVM

index.html<!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"> <t

2021-08-18 01:45:47 389 1

原创使用jsonp实现跨域

什么是jsonpJSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互的一种解决方法它的基本思想是，网页通过添加一个平时用到了jsonp如果我们是在服务器中的页面中通过script标签引入cdn的js文件，其实这里就用到了jsonp,只不过对方的服务器设置了跨域而已关于使用jsonp(这里的页面我是用live server打开的)普通的jsonp请求方式这种方法只能发起一次请求，我们可以在按钮的点击事件中动态创建script标签发起请求这里在button的

2021-06-25 00:21:15 141 1

原创关于vue文件样式生效问题

关于vue的样式生效问题组件生成的时候，其根标签和里面的子标签会被加上类似data-v-xxx的属性值子组件的根标签中被加的属性值会带上其所在父组件中生成的属性值，然后还有自己生成的属性值最后生成的样式会带有[data-v-xxx]的属性选择器进行样式添加根据这个可以知道，我们在不同的vue文件中是可以用同样的类名和id名的,但是同一vue文件里还是和之前一样的。。。...

2021-06-10 15:30:20 569 2

原创关于cookies,session,token的使用

关于cookies,session,token的使用可以使用postman测试数据！cookies的使用 // 把请求头中的cookie解析到req.cookies中 var cookieParser = require('cookie-parser'); app.use(cookieParser()); //获取cookie //在服务端获取cookie：当浏览器保存了cookie之后，再次请求的时候，会自动把cookie放在请求头中发送给服务端 //方式一：req.

2021-06-09 01:31:27 252 2

原创关于跨域问题

jsonp解决跨域问题原理：动态生成script标签，通过src加载不支持post中间服务器代理通过中间服务器请求服务器和得到响应结果CORS跨域资源共享，服务器端进行配置，对响应头进行处理app.use(function(req, res, next){ //设置跨域访问 res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Conten

2021-06-09 01:17:02 139 2

原创关于Promise,async,await

ES6中的Promise关于new Promise()Promise是构造函数，可以用new Promise()来创建对象Promise有状态(pedding,fulfilled,reject),如果状态pedding—>fulfilled/reject后，状态是不会再次改变的，还有个承诺的值如果状态是fulfilled会执行then中的第一个方法，如果是reject会调用then中的第二个方法如果new Promise()参数函数中返回的是Promise，那么返回的Promise决定了

2021-06-08 11:29:02 316 2

m0_45114231的博客