js的bind方法主要绑定this的指向bind方法也会返回是个bind后的函数。知道它功能我们就可以自定义bind功能letobject={name:'jeff'}functionfn(){console.log(this.name)}//自定band方法Function.prototype._bind=function(context){letthat=this//指定thisreturnfu
一、提升渲染性能 1、对于交互频繁的组件，采用原生封装 2、业务层减少render次数和范围 3、减少不必要的组件属性 二、加载性能优化 1、lazy module lazy Require改造 2、拆分业务包和框架common包 3、Preload Common 或者业务包 三、内存回放 1、定制系统图片内存回收Api 2、新增内存回
平时项目部署在使用Docker来管理，比较方便，然后在Docker编写Dockerfile。首略提一下怎么样编写Dockerfile.Dockerfile用来构建镜像的文件，好比一种Shell执行脚本，将你需要部署项目，需要的依赖软件模块，按命令行编写好，之后docker build -t Dockerfile所在目录已经名字，就可进行构建。介绍Dockerfi
import{mkdir}from"fs"importcopySyncfrom"fs-extra/lib/copy-sync"一、typeScritp的装饰器创建目录mkdirtsProject进入目录中执行npminit初始化项目因为是ts项目所以需要创建ts的的配置文件tsconfig.json执行tscinit如果没有安装tsc编译器我们创建ts使用的
1、实现单例模式letSingleton=function(name){this.name=name;this.instance=null;}Singleton.prototype.getName=function(){console.log(this.name)}Singleton.getInstance=function(name){if(!this.instance){this.instan
1、初始化数据state2、JSX模板3、数据+模板生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实的DOM）（损耗性能）4、用虚拟DOM的结构生成真实DOM来显示<divid="rty"><span>hellojsx</span></div>5、state发生改变6、数据+模板生成新的虚拟DOM(极大提高性能）[
一、Webpack性能优化1、可以减少webpack打包时间2、可以减少webpack打出来包体积优化loader对于Loader来说，影响打包效率首当其冲必属Babel了。因为Babel会将代码转为字符串生成AST，然后对AST继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的优化Loader的文件搜索范围module.exports={module:
因为Webpack是以模块化的JavaScript文件为入口的，所以内置了对模块化JavaScript的解析功能，支持AMO,CornmonJSSystemJSES6parser属性可以更细粒度地配置哪些模块语法被解析、哪些不被解析。同noParse配置项的区别在于，parser可以精确到语法层面，而noParse只能控制哪些文件不被解析。parse的使用方法如下：module:{rules:[t
axios的拦截器可以在请求或者返回被Then或者是catch处理之前对他们进行拦截。拦截器的作用。主要是在发送请求之前做一些操作，比方说可以对对一些数据进行处理。比如给每个请求都给添加token或者给。或者是在相应之前请求拦截器。可以对返回的数据进行二次加工。例如在发送请求前相应进行操作axios.interceptors.request.use((config)=>{returnconf
在实际项目开发中，我们经常需要在项目构建文件监听，已备在项目的源码发生变化时候时，自动重构出新的输出文件。配置代码如下：webpack.config.jsmodule.export={watch:true,watchOption:{ignored:/node_modules///忽略不需要监听的文件aggregationTimeout:300,poll:1000//默认每秒访问1000}}在执行时
consttype=obj=>{vartoString=Object.prototype.toString;varmap={'[objectArray]':'array,'[objectObject]':'object'}returnmap[toString.call(obj)]}cosntdeepClone=data=>{var
React使用高阶组件有两种一种是调用传入的组件另外一种是继承传入的组件。高阶组件就是一个函数接受参数组件返回的也是组件1、functionHtight1(componentName){returnclassWrapComponentextendsComponents{render(){return(<componentName...this.props>{this.props.chi
在webpack构建打包中一般利用url-loader加载器处理项目小图片资源。他的工作原理就是会根据内容计算出base64流字符串流注入到代码中，但是当我们的项目有很图片数量很多的时候，应该考虑图片体积不能太大。url-loader在webpack.config.js例如module.exports={module:{rules:[test:/\.png$/,use:[{loader:'url-
第一步安装npmi-Dserviceworker-webpack-plugin。第二步：编写wepack.config.js如下constpath=require('path');constExtracTextPlugin=require('extract-text-webpack-plugin')const{WebPlugin)=require(’web-webpack-plugin’);con
babel实际是上一JavaScript的编译器，能将ES6代码转换成ES5代码，让我们使用最新语言特性而不必要担心兼容性问题，并且可以通过插件的方式满足需求应用。在编译过程中，会从项目的根目录下的.babelrc文件中读取配置。.babelrc是一个JSON格式文件。例如：{"plugins":[["transform-runtime",{"polyfill":false}]
一、webpack关键配置项对构建有所了解的，可直接略过本节此处不会深入介绍相关配置，更多的详细说明与配置参见官方文档，稍作介绍关键配置项铺垫后面内容。entrywebpack查找依赖的入口文件配置，入口文件可以有多个。单页面应用入口配置通常做法配置：vendor.js第三方依赖库，polyfill.js特性填充库，index.js单页面应用入口文件//导出配置module.exports={en
使用webpack工具打包，通过配置Loader加载器中规则rules，更好的实现项目前端工程化。rules具体配置模块的读取和分析规则，通常用来Loader。rules:[]是一个数组，然后通过数组来存放，或则是描述，那些那些规则打包或是处理部分文件。配置一项rules时可以分一下几个条件配置：一、条件匹配：通过test、include(包含那些文件)、exclude（排除那些文件）这三个配置项
一、传统弹性布局主要依赖：1、布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2、这也是我们作为前端开发人员必须掌握的技能2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功
如何使用vuex实现状态管理一、1、安装npminstall--savevuex2、注册使用importVuefrom'vue'importVuexfrom'vuex';注册Vue.use(Vuex)二、什么是Vuex,可以理解为一种解决状态管理的使用方案，类似于React中Reactx或者是angular中ngrx；它包含以下三个重要的部分1、view以声明方式，
/@des防抖函数@paramsfunc@paramswait等待时间@paramsimmedateture(表示立即执行)false表示非要立即///根据其原理无事件触发后的设定时间执行事件，将几次操作合并为一此操作进行。这样一来，只有最后一次操作能被触发。//使用场景搜索输入框，鼠标滚动的mousedown/mousemovefunctiondebounce(func,wait,immedia
一、vue框架用axios完成ajax异步请求用法：this.axios().then().catch()如this.$axios（{URL："服务器地址",methods:'请求方式'，params:{},data:{},header:{}}）.then(responsed=>{}).catch(err=>{})二、vue生命钩子加载顺序1、首先加载newVue()2、beforeC
vue3.0
一、http无状态二、通过cookie在客户端记录状态三、通过session在服务端记录状态四、通过token方式维持状态通过判断当前登录token值来区分是否是当前用户登录页面布局通过Element-UI实现布局el-formel-form-itemel-inputel-ouput
//去掉数组中重复的对象functionremoveResove(arr){for(leti=0;i<arr.length;i++){lettem=arr[i]for(letj=i+1;j<arr.length;j++){if(JSON.stringify(tem)==JSON.stringify(arr[j])){arr.splice(j,1)}}}returnarr;}
一、fetch请求参数fetch('/books',{method:'post',body:'uname=list&pwd=123',headrs:{'Content-Type':"application/x-wwww-form-urlencode"}}).then(res=>{returnres.n
1、Vget(Objectkey)根据键获取值2、Set<K>KeySet()获取所有键的集合3、Collection<V>values获取所有值得集合4、Set<Map.Entry<K,V>>entrySet()获取所有键值对的集合
一、前後端交互模式1、Promise用戶2、接口調用-fetch3、接口調用-axios4、接口調用-async/await5、基於接口案例二、接口調用方式1、原生Ajax2、基於jQuery的Ajax3、fetch4、axios三、Resful形式的URLhttp請求方式1、GET查詢2、POST添加3、PUT修改4、DELETE刪除四、異步調用1、異步效果分析2、ajax例如$.ajax({u
Arrays工具类中有个静态的方法：1、publicstatic<T>ListL<T>asList(T...a):返回指定数组支持的固定大小的列表2、返回的集合不能做曾删改操作，可以做修改操作List接口中有个静态方法1、publicstatic<E>List<E>of(E...element):返回包含任意数量的不可变列表Set接口中有个静态方法2
微信小程序
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
