- 博客(37)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 微服务 ModuleFederationPlugin Vue项目体验
随着公司项目的模块越来越多，每次打包后的项目都非常大，而且每修改一个小的模块，都会将整个项目打包，会非常的麻烦，随着前端的发展，微服务的出现，很好的解决了项目庞大的问题，而且每修改一个模块，可以单独打包发布。项目的公共组件，因为每个单独项目都会有公共的组件，不可能每个项目都复制一份，这样冗余代码太多，也不好维护1、可以通过构建一个项目组件，发布到npm上面npm麻烦的地方，在于每次组件的修改，都需要升级npm的版本号，每个项目需要重新更新新的组件，也挺麻烦的。
2023-02-20 08:11:29
1467
原创 vue列表中为什么要设置key，有什么作用？为什么key最好不要设置为index?
2、当我们在头部插入一个节点，是不是插入的节点就变成0，原来的0、1、2、3、4都加一位，我们来diff比较的时候，是不是每一项又都不一样了，sameVnode返回的都是false，标签不能复用，都要重新创建一个，插入到节点中，这样是不是也全部需要重新渲染，影响性能。3、如果我们列表每一项有一个chekbox元素，勾选的第一项，再插入新元素的时候，是不是你插入的节点被勾选了，这样是不是就不对了，有问题。4、而且每一个元素都替换，是不是特别慢，并且列表需要全部重新渲染，大大的影响的性能。...
2022-07-21 22:22:25
1541
原创 export default 导出的对象，不能解构问题，和module.exports的区别
最近在做项目过程中，遇到一个问题，对一个UI组件，解构出我们需要的组件，进行注册，但是运行的时候报错了，写了一个小例子代码运行编译时候报错了 说没有找到obj和obj2，这是为什么？我们来把代码修改下通过 webpack打包下，然后来看下，打包完以后，在main.js，把index.js打包编译成什么样子 看过webpack打包源码的都知道，通过import导入在打包的时候import会被替换成__webapck_require_方法，去获取，参数1是因为我们现在有两个文件，一个是index.
2022-07-01 14:51:34
4507
原创 什么是BFC？BFC可以解决什么问题
一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发四、BFC可以解决的问题1、解决外边距塌陷的问题1）、父子元素的外边距塌陷问题我们在一个元素内部子元素，设置了一个margi
2022-06-16 19:58:42
9466
原创 JS 的 new 操作符到底做了什么？
2、把这个新的空对象的隐士原型（）指向构造函数的原型对象（）3、把构造函数中的 this 指向新创建的空对象并且执行构造函数返回执行结果4、判断返回的执行结果是否是引用类型，如果是引用类型则返回执行结果，new 操作失败，否则返回创建的新对象...
2022-06-06 17:32:53
1655
原创 手动实现Promise方法（原理）
我们在使用Promise，为了解决异步操作，去实现同步代码的作用平时开发时候，我们很多时候，需要等待接口返回后，去做一些处理，或者借用返回值，再调用，，如果用传统的方法，我们容易陷入回调地狱的问题，代码的可读性也不是很好现在我们来看下Promise的原理，是如何实现的1、Promise是一个类，执行这个类的时候，需要传入一个执行器进去，执行器立即执行class myPromise{ // executor执行器 constructor(executor){
2022-04-23 18:50:06
1180
原创 webpack的构建流程
1、初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数2、开始编译：用上一次得到的参数初始化compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译3、确定入口：根据配置的entry找出所有的入口文件4、编译模块：从入口文件出发，调用所有配置的loader对模块进行编译，再找出该模块依赖的模块，在递归本步骤直到所有入口依赖的文件都经过本步骤的处理5、完成模编译：经过第四步对所有模块的编译以后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系6、
2022-03-06 21:33:04
126
原创 Vue2.0源码（二）模板编译原理
上一篇文章主要介绍了 Vue 数据的响应式原理，今天我们主要说的是模板编译原理，主要涉及到 ast 以及大量正则匹配// Vue实例化new Vue({ el: "#app", data() { return { a: 111, }; }, // render(h) { // return h('div',{id:'a'},'hello') // }, // template:`<div id="a">hello</di.
2021-06-29 17:09:43
370
原创 Vue2.0源码（一）响应式数据原理
Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。之前的jquery想要改变试图，是直接操作DOM来实现。现在我们只需要关心数据的改变会让代码的逻辑变的非常清晰。Vue 内部就有一个机制能监听到数据变化然后触发更新 本篇主要介绍响应式数据的原理1、数据的初始化new Vue({ el: "#app", router, store, render: (h) => h(App),});.
2021-06-24 22:06:57
541
1
原创 Faild to install the app. Please accept all necessary Android SDK licenses using aandroid SDK Manage
在我们react-native项目，通过react-native run android启动项目的时候，报了这样的错误，其实是我们在安装android-sdk时，少了安装了东西，见下图图中画圈的地方，就是我们报错的原因，少了android-sdk 28，打开我们的Android-sdk双击打开我们可以看到android-sdk 28我们没有下载，，我们勾选几个28，，然后install packages可能我们缺少并不只是28版本，，也有可能是别的，我们缺少什么我们就可以去找，然后insta
2020-06-22 19:38:13
3999
4
原创 react-native 选择相册或者拍照，app自动退出问题
我在react-native项目中，运用的第三方插件进行的选择相册图片，在点击的时候，app就自动关闭了react-native-image-crop-picker 对图片的处理ImagePicker.openPicker({ width: 300, height: 300, cropping: true, }).then((image) => { console.log(image); });iOS 10 开始对隐私权限更加严格, 如需使用隐私权限需要
2020-06-09 17:18:41
574
原创 vue自定义指令v-loading
在我们的实际开发中，项目当中需要加载一些信息的时候，且不能操作，这样就需要在上面放个遮罩层显示加载中这就需要我们自定义指令v-loading首先我们创建文件在src文件下建directive文件夹，里面创建index.js，loading文件夹里面创建Loading.vue和index.jsloading.vue组件，用来插入到自定义指令的目标元素中// src/directive/...
2020-02-14 22:23:47
7665
3
原创 Vue项目Axios配置不同baseUrl，请求不同服务器的接口
项目需求最近使用 Vue 开发后台管理系统项目,开发过程遇到一个特别闹心的事情，由于项目没有上线,所有接口地址都是后台人员的电脑做为服务器，这个项目有几个后台同时开发接口，每一个大模块对应的接口地址不一样。这样按照常规写接口地址，只能调用一个模块，这样很不方便，也不符合前端的设计理念下面我们就封装一个可以调用不同服务器的方法第一步、新建一个serviceList.js文件 /src/conf...
2019-12-27 14:53:39
17403
5
原创 在固定框高内图片剧中显示，不变形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
2019-12-05 16:48:37
500
原创 vue引入markdown文件
1. 创建一个vue项目vue create mdVue因为我的示例在整个vue项目中，需要下载相应的依赖yarn add vue-router用到less编写样式yarn add --dev less less-loader用到iview的页面布局yarn add iview可以引入md文件yarn add vue-markdown-loadermain....
2019-11-27 14:02:23
1176
原创 创建一个自己的网站nginx，搭建站点
首先要有自己的服务器和域名登录服务器ssh root@192.168.1.1141、root服务器的用户名，一般默认都是root2、192.168.1.11对应的是服务器的公网IP，这个在购买服务器后台可以查看到输入后，就会让你输入服务器密码显示就是已经登陆上了接下来就是在服务器上安装nginxyum list nginx*运行上面命令，查看服务器上是否有nginx包就会出...
2019-10-21 17:15:19
3340
1
原创 vue项目引入iview,标签语法报错
我们在新建一个vue项目，引入iview，写页面的时候，会遇到页面标签语法报错现象看控制台时候会提示会出现这样的报错但是网上找答案在vscode菜单中，文件->首选项->设置，找到 “vetur.validation.template”: true 将其改为false，关闭eslint的检查-----但是这样设置后，报错还是存在其实在vue项目中加上几行代码就可以了，...
2019-09-09 19:02:32
805
原创 js判断数据类型
判断数据类型我们有几种方式判断1、typeofconsole.log(typeof 123) // numberconsole.log(typeof 'java') // stringconsole.log(typeof true) // booleanconsole.log(typeof undefined) //undefinedconsole.log(typeof nu...
2019-09-02 20:01:50
112
原创 解决canvas绘图模糊问题
先说下为什么会出现模糊的现象canvas 绘图时，会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。当设备像素比为 1 时，一个 1px 的线条实际上占据了两个物理像素（每个像素实际上只占一半），由于不存在 0.5 个像素，所以这两个像素本来不应该被绘制的部分也被绘制了，于是 1 物理像素的线条变成了 2 物理像素，视觉上就造成了模糊我们怎么解决呢我们可以把画布的宽和高...
2019-08-20 15:57:10
2204
1
原创 基于vue的canvas画图并下载到本地
canvas画图的基本步骤html创建一个canvas标签画布<div class="contain"> <canvas id="myCanvas" width="444" height="500" ref="myCanvas"></canvas> </div>canvas的宽高一定要写，因为你不设置他会有一个默认的宽高30...
2019-08-20 15:30:02
4245
原创 Jquery.Validate通过正则表达式自定义验证规则
/** * 手机 * */$.validator.addMethod("isMobile", function (value, element) { var reg = /^((1[3-8][0-9])+\d{8})$/; return this.optional(element) || (reg.test(value));}, "手机格式不正确");/** * 号码...
2018-08-15 16:27:46
702
原创 vue2.0父子组件和非父子组件之间的通信
1、父组件传值给子组件通过props来实现传递数据父组件：<template> <div> <child message="我是父组件传的值"></child><!-- 如果是变量 :message 切标签用-代替驼峰--> </div></template&a
2018-07-23 18:58:44
212
原创 一个不固定宽高的div，垂直水平居中
一、使用flex布局给父元素设置：display:flex; justify-content:center; align-items:center;二、使用CSS3 的 transform父元素设置：position:relative;子元素设置：position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);三、设置dis
2018-03-01 16:09:08
1199
原创 grid布局
网格单元格布局 一、定义一个网格 给父容器的display属性设置为grid或者inline-grid来定义一个网格，使用grid-template-columns和grid-template-rows来创建网格；1、grid-template-columns：100px 100px 100px 100px; 说明：把容器分成了4列，没列的宽度为100px;2、grid-templat
2018-01-16 10:30:22
239
原创 数组的操作汇总
数组的操作汇总//数组去重var arr = ["hello","jiangqing","apple","banana","jiangqing","apple"];//es6var newArr2 = arr.filter((item,index,self)=>{ return self.indexOf(item) == index;});console.log(newArr2);
2018-01-10 17:16:08
156
原创 sticky footer布局
一、sticky footer布局在页面布局时，内容很少的时候，提交按钮在页面的底部，当页面内容很多的时候，提交按钮在内容的底部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> html,body,div,h1,p{mar
2018-01-09 17:08:37
177
原创 迭代方法替代for循环
一、Map 对数组中的每一项运动给定函数，返回每次函数调用的结果组成数组。let arr=[1,2,3,4,5,6];/*item为当前遍历到的项,和arr[i]一样*/arr=arr.map(item=>{return item*2});//[2,4,6,8,10]二、filter 对数组中的每一项运动给定函数，返回函数会返回true的项组成的数组—-过滤。let arr=[1,2,3
2017-12-08 16:27:39
1497
原创 vue组件之间的通信
一、创建新的实例来实现通信1、在src目录下创建一个bus.js import Vue from 'vue'var bus = new Vue()export default busA组件： 1、引入bus.js<template> <button @click="side">点击触发函数</button></template><script> import bus fro
2017-12-05 14:48:32
204
原创 tabs切换划过的效果
tabs切换划过的效果两个按钮，多建一个标签在按钮之前利用animate根据点击按钮的left值进行两个按钮之间的滑动 Title .switch_button{ width:120px; height:30px; padding:3px; background:#f9f9f9; border-radius: 3px;
2017-09-15 15:55:37
655
原创 微信分享功能
一、之前做过几次调取微信功能的公众号，第一次的时候弄了很久才搞出来，主要是配置微信参数这里把人难住了，总是说配置不成功，签名不对等等为题。之前也看过一些别人写的，代码很多，写的很复杂。自己总结了比较简单的几行代码。1、首先要引入weixin的js，相信都知道2、第二步就是配置参数，这个要从后台获取来配置 //要调取分享功能的页面网址，传给后台 var url1 = win
2017-08-18 14:53:27
374
原创 文字垂直居中
有时候我们会在页面上让一段文字垂直居中，在固定的高度的div内当一行文字是居中，两行也是居中.....这个时候有人会想到用vertical-align：center；其实你试过后应该是没有你想要的效果的。光是添加这个属性是没效果的，还要添加别的属性。1、给父元素添加display：table；2、给子元素添加，display：table-cell；vertical-align：cent
2017-08-18 14:14:48
203
原创 validate的表单验证
一、一般情况下表单的验证，错误信息放在表单后面，也是默认的情况，但是在使用的时候，错误的信息会指定放在某个位置1、使用errorPlacement，可以把错误的信息放在指定的标签里面。$("#saveForm").validate({ rules: { name:{ required:true },
2017-08-18 10:25:49
702
原创 多行文字超出部分显示省略号
p{ width:300px; height:200px; line-height:40px; border:1px solid #222222; } 撒旦法撒旦讲课费发送到加快分解，圣诞节疯狂圣诞节疯狂，上岛咖啡接口设计的开发及就坚实的咖啡机了是的， ，水电费开始的接口舒服是的讲课费的数据放到手机看了，放声大锋精精神来得及分类看电视剧发牢骚
2017-08-08 21:58:54
248
原创 forEach和map的用法和区别
语法：都是用来遍历数组的每一项。 forEach:没有返回值，对原数组不会产生影响，但是可以通过数组的索引来改变数组。 var ary = [1,2,4,7,3]; var res = ary.forEach(function (item,index,input) { input[index] = item*10; }) console.log(res);//-->u
2017-03-06 14:23:19
1161
VirtualBox-6.1.0-135406-OSX.dmg.zip
2020-06-22
genymotion-3.1.0.dmg.zip
2020-06-22
android-sdk-macosx.zip
2020-06-22
VirtualBox-6.1.0-135406-OSX.dmg.tar
2020-06-22
genymotion-3.1.0.dmg.tar
2020-06-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人