lcj529-CSDN博客

原创 web项目性能优化

web项目性能优化（关于浏览器端优化）1、压缩源码和图片（压缩源码）JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，（压缩图片）JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，2、合并静态资源包括CSS、JavaScript和小图片，减少HTTP请求3、选择合适的图片格式如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和

2021-02-22 14:16:57 418

原创 webpack核心概念

webpack核心概念Webpack在启动后会从Entry里配置的Module开始，递归解析Entry依赖的所有Module。每找到一个Module，就会根据配置的Loader去找出对应的转化规则，对Module进行转换后，再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组，一个Entry及其所有依赖的Module被分割到一个组也就是一个Chunk。最后，Webpack会将所有Chunk转化成文件输出。在整个流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑。

2021-02-06 17:36:27 167

原创 Echarts插件下载引入

Echarts插件下载引入ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表进入Echarts官网官网： Echarts在下载中选择在线定制：2勾选自己所需要的组件：3之后点击下载：（会自动Build）4将生成的echarts.min.js引入工程静态

2020-11-19 11:07:18 467 1

原创 el-select想在change事件上传递option对象

<el-select v-model="selectedItem" placeholder="请选择" class="marLeft20" @change="changeClass($event)"> <el-option v-for="(item) in areaList" :key="item.id" :label="item.name" :value="item"> </el-option> </el-select>

2020-11-09 23:23:25 3369

原创如何封装星星组件？

如何封装星星组件？子组件<template> <div class="lcjbox">  <input type="hidden" v-model="value" />  <div v-if="readonly">  <img :src="full" v-for

2020-09-29 19:24:15 107

原创封装吸顶组件

封装吸顶组件子组件：html：<template> <div> <div class="nav-bar" :class="{ is_fixed: isFixed }">你好啊，我叫jiejie </div> </div></template>js主要用的是scrolltop的距离来控制是否将组件定位改为fix，只需要用原生js即可实现。我们在vue中

2020-09-28 19:38:51 143

原创弹框组件封装

封装弹框组件组件内使用，可以使用插槽改变值局部封装html:(父组件）<template> <div> <button @click="btn">封装弹框组件</button> <TanKuang @qd="qd" @qx="qx" v-show="flag"> <h2 slot="title">提示语</h2> <h2 slot="content">弹框的内

2020-09-27 11:24:41 269

原创在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式

在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML

2020-09-25 08:41:51 193

原创优化的了解

优化的了解？比如从客服端着手的？1.压缩代码(JS/CSS)压缩图片；2.合并一些小图片（css sprite）;3.若是打包的代码尽可能切割多个chunk,减少单一chunk过大；4.静态文件采用cdn引入；5.HTTP的缓存头使用的合理；6.减小第三方库的依赖；7.对于代码应该考虑性能来编写，比如使用requestAnimationFrame绘制动画，尽可能减少页面重绘（DOM改变）；8.渐渐升级，引入preload这些预加载资源；9.看情况用service worker来缓存资源（

2020-09-24 11:11:58 76

原创 Vuex的理解？

Vuex的理解？vuex简单理解：全局状态管理工具。作用：可以解决复杂组件通讯问题。Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，她包含着你的应用中大部分的状态（state）五大核心State:(全局状态) 定义了应用状态的数据结构，可以在这里设置默认的初始状态。Getter:(计算属性)允许组件从Store中获取数据，mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性。

2020-09-23 16:06:29 57

原创 vue-router路由模式有几种？

vue-router路由模式有几种？vue-router有3种路由模式：hash，history，adstract.hash:使用URL hash值来做路由。支持所有浏览器，包括不支持HTML5 History Api 的浏览器。hash实现原理：早期的前端路由的实现就是基于location.hash来实现的，location.hash的值就是URL中的#后面的内容，特性：URL中的hash值只是客户端的一种状态，hash值的改变，都会在浏览器的访问历史中增加一个记录，可以通过a标签，并设置

2020-09-22 20:55:23 6559

原创 MVVM与MVC

什么是MVVM？Model-View-ViewModel(MVVM)是一个软件加购设计模式，由WPF和Silverlight的架构Ken Cooper和Ted Peters开发。view层view是视图层，也就是用户界面。前端主要由HTML和CSS来构建。Model层Model是指数据模型，泛指后端进行各种业务逻辑处理和数据操控，对前端来说就是后端提供的api接口。ViewModel层viewModel负责监听Model中数据的改变并且控制视图的更新什么是MVC?Model模型View

2020-09-21 20:48:19 70

原创虚拟DOM

虚拟DOM优缺点？优点1.保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，它的一些DOM操作的实现必须是普适的，它的性能并不是最优的，2.无须手动操作DOM:不需要手动去操作dom,只需写好View-Model的代码逻辑，框架会根据虚拟DOM和数据双向绑定，更新视图，极大的提高我们的开发效率。3.跨平台虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如：服务器渲染，weex开发等等。4.无法进行极致

2020-09-18 20:49:26 111

原创后台管理项目总结

后台管理项目总结电商后台管理系统用于管理用户账号，商品分类，商品信息，订单，数据统计等业务功能项目概述电商后台管理系统整体采用前后端分离分开发模式，其中前端项目是基于Vue技术栈前端技术栈vuevue-viewElement-UlaxiosEchartstable富文本编辑器后端技术栈Node.js项目功能登录/退出功能主页布局用户管理模块权限管理模块参数管理模块商品列表模块订单管理模块数据统计模块这是主要的模块和用到的技术栈这个项目做了做了一个星期

2020-09-17 21:52:27 953

原创 vue3.0 的特性

vue3.0 的特性vue3.0的目标是让Vue核心变得更小，更快，更强大新增特性：（1）监测机制的改变只能监测属性，不能监测对象检测属性的添加和删除检测数组索引和长度的变更支持Map,Set,WeakMap和WeakSet（2）模板模板方面没有大的变更，只改了作用域插槽，2.X的机制导致作用域插槽变了，父组件会重新渲染，而3.0把作用域插槽改成函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能（3）对象式组件声明方式vue2.0X中的组件是通过声明的方式传入一系列opti

2020-09-16 20:33:24 219

原创微信小程序

微信小程序WXML：是框架设计的一套标签语言，结合基础组件，事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。WXSS：是一套样式语言,用于描述wxml的组件样式JS：逻辑处理，网络请求。json:小程序设置，例如：注册页面，页面标题以及taBar里面的主要文件：app.json:这个文件是必须要有的，如果没有这个文件，项目无法运行。这个作为配置文件入口，整个小程序的全局配置app.js: 必须有这个文件app.wxss：这个文件是可选的简述微信小程序流程微信小程

2020-09-15 19:01:34 359

原创 git仓库

git(版本管理和团队开发)git 是一个开源分布式版本控制系统，用于高效处理，任何大小的项目GitHub是一个基于git的代码托管平台为什么要使用Git？个人开发：　　1. 可以回滚　　2. 可以查看项目所有的修改记录，历史版本　　3. 对改动原因进行记录　　4. 老大再也不怕我xjbg出问题了，可以回滚　　5. 不同的分支可以记录不同的状态　团队开发：　　1. 多人合作对同一个项目进行更改时，git能够自动合并冲突的地方，如果自动合并失败，会提示冲突的位置，方便修改。　　2. 历

2020-09-14 19:20:51 96

原创 3D动画效果实现步骤

3D动画效果实现步骤3D呈现（transform-style）3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：transform-style: preserve-3d; //让子盒子位于三维空间里 transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）案例：html部分<body&gt

2020-09-11 19:53:56 652

原创水平居中，垂直居中十种方法

水平居中，垂直居中十种方法**第一种：**通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了**优点：**比较好理解，兼容性好**缺点：**需要知道子元素的宽高**第二种：**也是通过绝对定位的方式 abs

2020-09-09 19:04:41 218

原创图片懒加载

什么是懒加载懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载为什么要懒加载？懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举个栗子：就拿图片来说，一个网站，单个网页的页面上“图片”是构成页面主体的一个极大部分，但是在现在一张图片的大小超过几兆是一件很正常的事，那么就需要注意到一个问题：当用户在访问一个网

2020-09-08 22:42:49 55

原创 ES6新增模板字符串 for...of

ES6新增模板字符串 for…of模板字符串通过反引号未定义变量，其中模板字符串中可以解析普通变量模板字符串取值：${变量}在模板字符串中也能做运算for…offor…of语句讲课迭代对象(包括Array,Map,Set,String,TypeArray,arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语法通常对数组，对象，map set string遍历对象不能用for…of 遍历（但可以通过object.entries来转换成可迭代对象进行

2020-09-07 19:19:44 573

原创普通函数与箭头函数

普通函数与箭头函数普通函数语法 function（）{ }例如：let add = function（）{console.log(1)}add()普通函数：this的指向，是指谁调用了这个函数，this就指向谁箭头函数语法（）=>{ }简写：箭头函数参数，只有一个可以把（）省略，函数体只一句js代码，可以省略掉{ }let add =（）=>{console.log(2)}add()箭头函数中：this的指向，指的就是上下文中的this(是指父函数下和他同级的t

2020-09-04 19:23:48 154

原创 ES6 新特性

ES6新增特性let和constlet 定义变量const 定义常量相同点：都是定义变量区别：1.是否有变量提升 var有变量提升，let没有2.是否能重复定义 var允许重复定义变量，let不允许重复定义3.是否有块级作用域 { }全局作用域：在函数外部定义的范围局部作用域：在函数内部定义的范围块级作用域：在{ }大括号中定义范围symbol：是ES6新增的基本数据类型number,string,boolean,null,undefined,symbol(ES6新增)

2020-09-03 23:50:04 94

原创原型链

原型链原型链会涉及到_ _proto __ prototype应用场景：继承优点：吧相同或类似的方法写在原型上，方便实例化对象复用缺点：不好理解ES6 推出 class extends 来实现继承原型链的概念：对象的_ _ proto _ 指向构造函数的prototype构造函数的prototype的 _ proto _ 指向Object.prototypeObject.prototype的 _ proto _ _指向null原型链通俗讲：在访问一个属性或方法的时候，先从自身里面找，如

2020-09-02 20:15:09 93

原创 vue生命周期

vue中生命周期的理解？beforeCreate 创建前组件实例被创建之初，组件的属性生效之前created 创建之后组件实例已经完全创建，但dom还没有生成，beforeMount 挂载前再挂载开始之前调用。mounted 挂载后挂载到实例之后调用beforeUpdate 更新前组件数据更新之前调用，发生在虚拟dom 之前update 更新后组件数据更新之后beforeDestory 销毁前组件销毁之前调用desto

2020-09-01 19:45:15 72

原创 new的实现原理

new的实现原理new的特点：new一个构造函数，会自动return一个实例对象new完成的实例化对象，_ proto _自动指向构造函数的prototypenew构造函数传参自动赋值给当前实例化对象function objectFactory() {// 创建一个新的对象const obj = {}// 获取第一个参数，arguments是类数组，不可直接调用shift方法//此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数const Construct

2020-08-31 20:05:02 424

原创 promise

promise 是什么？语法 new promise ()含义：他是一种异步编程的解决方案，promise是一个内置的构造函数，自己身上有all，rejected，resolve这几个方法，原型上有then，catch等方法all() 处理多个异步处理时非常有用then()是成功之后执行的一个方法，有2个参数第一个参数是成功之后执行的第二个参数是失败之后回调为什么会有promise?在ES5中处理异步，基本都是选择回调函数的请求方式，在请求到的回调函数里面继续写函数，长期就形成了回调地狱

2020-08-28 19:27:49 80

原创数组内置遍历方法

数组内置遍历方法ES5数组循环forEach() :就是for的升级版，forEach返回值undefinedfilter() :过滤，遍历满足条件的数组元素，返回新数组map(): 对原数组加工处理，得到一个新数组reduce（）归并，将多个值归并成一个值（）作用常用于数组求和（购物车）4个参数：1函数执行后的上一次返回值 2.数组的每一项3.下标4.数组本身some（）循环对比 return 如果有一个符合条件的数据，返回true,都不符合返回falseES6 新增数组fi

2020-08-27 20:59:05 154

原创 v-model实现原理

v-model的实现原理v-model 本质上不过是语法糖，可以用 v-model 指令在表单、及元素上创建双向数据绑定实现原理：Object.defineProperty()组件之间通信（兄弟组件）Bus通信在组件之外定义一个bus.js作为组件间通信，适用于比较小型不需要vuex又需要兄弟组件通信的（1.）bus.js中添加如下import Vue from ‘vue’export default new Vue（2.）组件中调用bus.js通过自定义事件传递数据　3）.兄

2020-08-26 22:11:16 404

原创 vue样式穿梭

vue样式穿梭当你修改你用的插件里面的样式时，修改不了可以使用vue样式穿梭混用本地和全局样式如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。/deep/在使用scss less 的时候使用/deep

2020-08-24 20:07:20 139

原创什么是vuex

什么是vuexvuex是专门针对vue.js程序开发的状态管理工具。vuex辅助函数通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。vuex的五个核心概念state：Vuex的基本数据，用来存储变量getter：相当于state的计算属性mutation：提交数据更新的方法，必需是同步的（如果是异步操作，则需要act

2020-08-21 20:59:49 80

原创 Vue.js 过滤器的使用filter

Vue.js 过滤器的使用filtervue中锅里器分为两种：全局过滤器（vue.filter）局部过滤器(filter)使用全局过虑器示例 {{ msg | msgFormat}} <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function(msg) { // 字符串的 replac

2020-08-20 18:33:22 96

原创 vue脚手架搭建

vue脚手架搭建1.安装最新版本脚手架npm install -g @vue-cli2.创建项目vue create 文件夹名称3.选择自动安装还是手动安装default 自动安装manually 手动安装(建议用)第二种 vue ul 图形界面4.项目开发前环境准备适配环境 rem vw vh flexpx转换为rem格式的svg图标：放大不失真，可以通过css来调整样式1.直接复制svg代码，缺点：代码量比较大 2.直接当作img图片来处理3.svg sp

2020-08-18 19:25:04 119

原创基于webpack搭建vue的开发环境

基于webpack搭建vue的开发环境一、1.安装node.js(查看是不是淘宝镜像，不是改成淘宝镜像）查看npm config list改成淘宝镜像npm config set registry https://registry.npm.taobao.org2.如何创建目录并初始化package.jsonnpm init -y3.安装webpack和webpack-clinpm install webpack webpack-cli --save-dev4.运行webpack测

2020-08-17 20:16:59 85

原创小程序项目总结

微信小程序项目总结最近我们做了天使童装这个项目，因为是团队合作，项目周期一周，因为小程序是刚刚接触，学习，做的不是特别完美，以后多练练相信自己可以的我主要负责的项目是分类页面列表、商品的整体布局以及详情页的商品数据渲染还有加入购物车立即购买等功能的实现1.首先先要进行接口的封装，这样的话请求数据的时候就没有那么麻烦。2.首先是分类页面的整体布局，获取数据然后渲染到页面上。然后调用后台接口，把数据渲染到页面上，然后获取右边商品的数据，左边是侧边栏，点击侧边

2020-08-15 23:31:13 1197

原创 js回顾

js回顾1.变量的作用域作用域分类：全局作用域局部作用域块级作用域全局作用域：（1）在任意位置都可以访问（2）全局变量是自动会追加window对象下局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数的内部起作用调用函数时创建函数作用域，函数执行完毕之后，函数作用域销毁；每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的。块级作用域：块级作用域可以简单理解为是: 包在大括号{}里面的内容, 它可以自成一个作用域, 但ES5中也有大括号, 可ES5

2020-08-14 23:06:20 95

原创微信小程序组件生命周期

微信小程序组件生命周期created 组件实例化，但节点树还未导入，因此这时不能用setDataattached 节点树完成，可以用setData渲染节点，但无法操作节点ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点moved 组件实例被移动到树的另一个位置detached 组件实例从节点树中移除生命周期函数的不同写法Component({properties:{innerText:{type:String}},data:{ },

2020-08-12 23:46:47 294

原创微信小程序登录授权

微信小程序登录授权1.下载项目源码2.需要登录授权页面的必须要传递token例如（商品详情：收藏加入购物车；我的购物车页面）如何获取token？一、 token是什么？前端鉴权的一种方式， token有后端生成，token是有时效性的二、微信小程序如何登录授权，拿到token登录流程参考官方文档前段–>后端—> 腾讯服务wx.login() --> wx.request()–>后端–>腾讯服务器具体实现登录->检测是否注册–&g

2020-08-11 22:53:07 249

原创小程序渲染指令

小程序常用渲染指令有哪些wx : for wx : for" {{ }}" 遍历相当于vue的for循环注：item遍历的每一项 index：每一项的下标；wx:key通常遍历时添加提升遍历性能；wx:for-index 更改下标名wx:for-item ;更改每一项的名称条件渲染wx:if; 相当于v-if true显示 false隐藏满足条件渲染wx:else 相当于vue中的v-else 不满足条件渲染hidden：相当于

2020-08-10 20:07:53 143

原创微信小程序数据缓存和token值从哪来？

微信小程序数据缓存？1、存储wx.setStorageSync(‘属性’，‘值’)2、获取wx.setStorageSync(‘name’)3、删除wx.removeStorageSync(‘name’)4、删除全部wx.clearStorageSync(‘name’)token值从哪里来？一、何为token？前端鉴权的一种方式，token由后端生成，token是有时效性token值:登录令牌,是标识用户信息的唯一标识符,是一个长字符串,不会有两个相同的token值,用户登录成功

2020-08-08 23:56:06 1947

空空如也

空空如也