- 博客(73)
- 收藏
- 关注
RSS订阅原创 webpack理解与使用
最早的时候，我们通过文件划分的方式实现模块化，也就是将每个功能及其相关状态数据都放在一个JS文件中，约定每个文件就是一个独立模块，再将这些JS文件以script标签引入到页面中。但是这种方式弊端很明显，每个模块都是在全局中工作，大量模块成员污染环境，模块之前没有依赖、维护困难、没有私有空间等问题。后来出现了命名空间的方式，规定每个模块只暴露一个全局对象，模块的所有内容都挂载到这个对象上，但是这种方式也没有解决模块之间的依赖问题。入口文件，其余用到的模块可以通过代码控制，按需加载进来。
2025-04-17 10:58:46
145
原创 算法与数据结构
算法是一组定义明确的指令或步骤，用于解决特定问题或执行某项任务，它可以是简单的计算过程，也可以是复杂的逻辑运算。算法是计算机科学的核心，它能帮助计算机高效地处理数据、执行任务和解决问题。
2025-04-15 10:45:51
222
原创 git、npm命令合集
版本回退 git reset --hard commit的记录id git push -f 从主分支合并到子分支 git checkout 主分支 git checkout 子分支 git pull origin 子分支 git merge --no-ff 主分支
2023-07-14 14:31:06
267
转载 原型和原型链
一、构造函数构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。另外就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。 function Person(name, age, gender) { this.name = name this.age
2021-06-29 10:54:21
157
转载 JS继承的7种方式
一、原型链继承 function Person(){ this.name = 'Hello world'; } Person.prototype.getName = function(){ console.log(this.name); } function Child(){ } Child.prototype =
2021-06-24 14:11:33
165
原创 vue改变data，视图未实时更新问题
方法一：如果操作的data是数组或对象，可以使用$set方法进行修改this.$set('userInfo',name,'小红');
2021-06-18 14:50:50
459
原创 axios的拦截器
axios的拦截器主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为01.请求拦截:将当前城市信息放入请求头中axios.interceptors.request.use(config => { config.headers.cityCode = window.sessionStorage.cityCode //
2020-07-06 13:54:03
367
原创 前端性能优化的几种方式
前端性能优化的方式：1.封装组件把所有需要复用的功能或网页模板封装成组件，在需要的时候调用它。2.图片压缩图片的质量，或者使用打包工具来压缩图片的质量，当图片过小时（小于12k）可以把它转成base64（代码图片，转成base64的好处：减少http请求），或者使用 sprites（精灵图）把网页中需要用的到图片整合到一张图片中，减少http请求的次数。3.压缩html，js减小大小，去除空白4.懒加载(lazy load)网页不拖动时，未展示的栏目不去(加载)请求，良好的利用.
2020-07-03 15:21:14
2199
1
原创 vue路由的钩子函数
在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化1.全局路由钩子router.beforeEach 注册一个全局前置守卫router.beforeEach((to, from, next) => { //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了 console.log('beforeEach') console.log(to,from) next()...
2020-07-01 10:49:59
515
转载 js实现简单的双向绑定
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通
2020-07-01 10:35:47
504
原创 路由匹配404页面
为了更好的用户体验，需要在用户访问某个路由的时候，如果匹配不上就跳转到另外一个页面。也就是通常所见的404页面。方式一：在路由的匹配规则最后加入*，必须放在最后const routes = [ {path:'/',redirect:'/home'}, { path: '/home', name: 'Home', component: Home }, { path: '/about', name: 'About', componen
2020-07-01 10:33:23
1432
原创 vuecli3全局引入jquery
1.下载jquerycnpm i jquery2.在根目录下新建vue.config.js并如下配置vuecli3中修改webpack配置const webpack = require("webpack");module.exports = { configureWebpack: { //支持jquery plugins: [ new webpack.ProvidePlugin({ $:"
2020-06-29 11:05:59
1603
原创 keep-alive保存组件状态
Vue.js的keep-alive用法 一、问题提出 在我们用Vue.js做移动端开发的时候，经常会遇到这样的应用场景： 首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。 很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。 这种场景往往会碰到一个问题，当我每一次从详情组件退回到列表组件的时候，列表组件会重新发出ajax请求。考虑到下面2条原因，总觉得这么不好。 1.列表组件上的数据不会在短短几分钟之内
2020-06-29 10:03:50
528
2
原创 防抖和节流
1.防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟//防抖debounce代码：function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候
2020-06-28 15:17:59
189
原创 利用jquery封装全局函数
方式一：(function($){ $.extend({ cookie: function() { var cookie = { //参数分别是cookie的名称，cookie的值，cookie的有效时间 setItem : function(key ,value, time) { let date = new Date(); let e...
2019-11-15 13:48:54
929
转载 vue-cli 4.0安装及项目搭建
安装1.卸载旧版本vue-clinpm uninstall -g vue-cli如果卸载有问题，检查C:\Users\用户\.npmrc文件，删除以下代码cache=C:\Program Files\nodejs\node_cacheprefix=C:\Program Files\nodejs\node_global2.安装新版本node版本必须在10.0.0以上才支...
2019-11-07 16:41:29
13515
原创 jquery
按属性查找var email = $('[name=email]'); // 找出<??? name="email">var passwordInput = $('[type=password]'); // 找出<??? type="password">按属性查找还可以使用前缀查找或者后缀查找：var icons = $('[...
2019-10-12 21:19:46
142
原创 AJAX
如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。这就是Web的运作原理：一次HTTP请求对应一个页面。如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用Java...
2019-10-12 18:01:01
135
原创 表单操作
提交表单JavaScript可以以两种方式来处理表单的提交方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单：<form id="test-form"> <input type="text" name="test"> <...
2019-10-12 17:08:08
511
原创 DOM操作
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。创建节点document.createElement() 创建元素节点document.createTextNode() 创建文本节点document.cloneNode() 克隆节点 参数为true克隆所有后代...
2019-10-12 13:14:35
129
转载 CSS浏览器兼容问题
目前，最为流行的浏览器共有五个：分别是ie,Edge浏览器（属于微软），火狐，谷歌（chrome）Safari和Opera五大浏览器。Trident内核：IE ，360，，猎豹，百度；Gecko内核：火狐----------->这个浏览器内核是开源的浏览器内核，插件非常多，-------------->缺点：打开速度慢（加载flash插件）<-----额外介绍-----&...
2019-10-10 11:37:30
573
原创 Vuex
VueX概念：Vuex是vue配套的 公共数据管理工具，它可以把组件之间一些共享的数据，保存在vuex中，方便整个程序中的任何组件直接获取或修改我们的公共数据只有组件之间要共享的数据，才有权利放到vuex中安装：1.安装vuexcnpm i vuex -S2.导入vueximportVuefrom'vue'importVuexfrom'vuex'3....
2019-10-06 11:13:19
149
原创 Vue缩略图预览插件
Vue缩略图预览插件1.安装vue-previewcnpm i vue-preview -S2.导入pluginimportVuePreviewfrom'vue-preview'Vue.use(VuePreview)3.使用方法https://github.com/LS1231/vue-preview...
2019-10-06 11:08:43
1050
原创 禁用webpack严格模式
1.安装babel-plugin-transform-remove-strict-modecnpm i babel-plugin-transform-remove-strict-mode -D2.找到.babelrc文件，如下配置{ "plugins":["transform-remove-strict-mode"]}
2019-10-06 11:07:57
333
原创 Promise解决回调地狱
Promise解决回调地狱constfs=require('fs')constpath=require('path')//当new一个Promise实例是，就是立即执行这个异步操作中的代码functiongetFileByPath(fpath){varpromise=newPromise(function(resolve,reject){...
2019-10-06 11:07:05
478
原创 普通文件读取及下载方法
普通读取文件方法constfs=require('fs')constpath=require('path')functiongetFileByPath(fpath,succCb,errCb){fs.readFile(fpath,'utf-8',(err,datastr)=>{ //异步方法，主程序直接把fs.readfile方法放入队列...
2019-10-06 11:04:54
325
原创 使用git托管代码
使用git托管代码1.在根目录下新增.gitignore文件并配置node_modules.idea.vscode.git2.在根目录下新增README.md文件3.复制MUI的LICENSE文件到根目录下4.使用git命令打包托管git init 初始化打包项目git status 查看文件状态git add . 添加文件跟踪git commit...
2019-10-06 11:02:00
295
原创 使用Mint-Ui
1.安装mint-uicnpm i mint-ui -S2.全局导入组件//导入mint-uiimportMintUIfrom'mint-ui'import'mint-ui/lib/style.css'Vue.use(MintUI)3.按需导入组件：能够缩小项目体积(1)安装babel-plugin-component插件，帮助引用需要的组件cnpm i ...
2019-10-06 10:58:34
164
原创 vue项目抽离路由模块
抽离路由模块1.在src目录下新建router.js文件2.把main.js中的所有导入路由模块剪切进router.js//导入Account.vueGoodslist.vue组件importaccountfrom'./main/Account.vue'importgoodslistfrom'./main/Goodslist.vue'//导入Account的...
2019-10-06 10:56:47
491
原创 webpack中如何使用vue开发
1.安装vue cnpm i vue -S2.在main.js中导入vue.js方式一：importVuefrom'vue/dist/vue.js'方式二：importVuefrom'vue' //主要用法，使用.vue时不需要以下配置配置webpack.config.js中module.exports的resolve属性resolve:{ al...
2019-10-06 10:54:03
226
原创 ES6语法笔记
1.多行字符串 用反引号 ``表示： `abc`相当于 'abc'2.字符串连接时使用变量 使用${变量名}直接引用字符串变量var name = '小明';var age = 20;var message = `你好, ${name}, 你今年${age}岁了!`;alert(message);3.字符串方法：不会改变原有字符串的内容，而是返回一个新字符串toUpp...
2019-10-04 16:49:15
871
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人