04 2021 档案
摘要：注意:写的是ts文件,但是要执行 tsc,转为js文件,index.html引入的也是js文件 类包含两种属性 实例属性:直接定义的属性是实例属性,需要通过对象的实例去访问 静态属性:使用static开头的属性也是静态属性(类属性),可以直接通过类去访问 静态的只读属性 : static reado
阅读全文
摘要：注意执行以下命令安装包 npm init -y npm i typescript npm i ts-loader npm i webpack -g npm i webpack-cli -g npm html-webpack-plugin npm webpack-dev-servernpm @babe
阅读全文
摘要：{ /* 用来指定哪些ts文件需要被编译 ** 表示任意目录 * 表示任意文件 */ "include":[ "./src/**/*" ], /* 不需要被编译的文件 */ "exclude":[ "./src/hello/**/*" ], "compilerOptions": { /* 用来指定t
阅读全文
摘要：1.初次尝试 /* 注意: 声明一个变量,同时指定它的类型为number */ let a : number a=10 a=35 /* a = 'hello' 此行代码会报错,因为变量a的类型是number 不能赋值字符窜 注:即使报错, 但是还是编译通过,但是编译后控制台会提示错误内容 */ 2.
阅读全文
摘要：1. 解决typescript Cannot redeclare block-scoped variable 解决: 在ts文件顶端加上 export {}文件编译后 "use strict" exports.__esModule = true 原理:会把整个文件当成一个模块来处理
阅读全文
摘要：1.下载node.js 2.安装node.js 3.使用npm全局安装typescript (vscode 实际环境已经有typescript了,所以不需要执行这一步) .进入命令行 . 输入:npm i -g typescript 3.1:以上步骤不需要执行 1.创建一个文件,然后 tsc --i
阅读全文
摘要：总结: 1/ts就是包含javascript所有的内容,同时扩展了新特性,js有的ts都有 2/能够编译所有版本的js(es3) ,简介解决了兼容性问题 TypeScript是什么? TypeScript增加了什么?
阅读全文
摘要：optimization:{ splitChunks:{ chunks:'all', //以下这些默认值不用写 minSize:30*1024 ,//分割的chunk最小为30kb maxSize:0,//最大没限制, minChunks: 1 , //要提取的chunk最受被引用1次, maxAs
阅读全文
摘要：mode:'development', devServer:{ //运行代码的目录 contentBase:resolve(__dirname,'build'), //监视 contentBase 目录下的所有文件,一但文件变化就会 reload (重新打包,重新加载浏览器) watchConten
阅读全文
摘要：devServer:{ }, //解析模块的规则 resolve:{ //配置解析模块路径别名:优点:简写路径 缺点:路径没有提示了 alias:{ $css:resolve(__dirname,'src/css') }, //配置省略文件路径的后缀名 extensions:['.js','.jso
阅读全文
摘要：module:{ rules:[ //loader配置 { test:/\.css$/, //多个loader用use use:['style-loader','css-loader'] }, { test:/\.js$/, exclude:/node_modules/, //只检查 src 下的j
阅读全文
摘要：module.exports = { entry:'./src/index.js' output: { //文件名称(指定名称+目录) filename:'js/[name].js' //输出文件目录(将来所有资源输出的公共目录) path:resolve(__dirname,'build'), /
阅读全文
摘要：entry: 入口起点 1. string --> './src/index.js' 打包形成一个chunk,输出一个bundle文件 此时chunk的名称默认是main 因为没有制定输出的名字 output: {filename: '[name].js',path:resolve(__dirnam
阅读全文
摘要：## 开发环境性能优化 *优化打包构建速度 HMR *优化代码调试 source-map ##生产环境性能优化 #优化打包构建速度 *oneOf *babel缓存 *多进程打包 *externals *dll #优化代码运行的性能 *缓存(hash-chunkhash-contenthash)<文件
阅读全文
摘要：这里与webpack(21)的内容差不多 但是思路不一样 webpack(21) 是cdn优化,是不打包node_module,然后引入cdn访问地址 这里是先将node_module先打包一次,后面不需要再打包,直接引用打包好的文件就行,这里的直接引用,还需要以下配置,否则就会出现用的不是打包的j
阅读全文
摘要：这里的知识点就是常说的cdn优化 在webpack(22)的内容,和这个差不多,只是说cdn被本地的包文件替换了 externals: 外部的,用户忽略 npm包 前提: 在index.js中引入jquery包,但是打包的时候,就算引入了还是不会进行打包,所以需要用到 cdn引进来 module.e
阅读全文
摘要：第一步: npm i thread-loader -D 第二步: module.exports ={ /* 开启多线程打包. 进程启动大概为600ms,进程通信也有开销 只有工作消耗时间比较长,才需要多进程打包 */ module:{ use: [ //'thread-loader' { loade
阅读全文
摘要：PWA:渐进式网络开发应用程序(离线可访问) workbox > workbox-webpack-plugin 操作步骤 第一步: npm i workbox-webpack-plugin 第二步:在webpack.config.js中使用 const WorkboxWebpackPlugin =
阅读全文
摘要：懒加载和预加载有什么区别的吗? 懒加载,是在进入这个方法时才加载,文件test进行第一次加载并执行里面的代码 预加载:会在使用之前加载js文件(js文件先加载了,但是并不会去执行代码) 当点击按钮进入该方法时,加载的是该文件的缓存,同时去执行test文件的内容 正常加载: 可以认为是并行加载(同一时
阅读全文
摘要：第一种方式:单入口和多入口 注: 单入口,只会输出一个文件, 多入口,就会输出多个文件 前提: index.js 引入 print.js文件,若是配置单个入口,就会把两个文件打包成一个文件 index.js引入print.js文件,若是配置多个路口文件,就会把两个文件分别打包成一个文件(共有两文件)
阅读全文
摘要：开发和生产环境皆可 tree shaking:去除无用代码 前提: 1.必须使用es6模块 2.开启production环境 作用:减少代码体积 在package.json中配置 "sideEffects":false 所有代码都没有副作用(都可以进行tree shaking) 问题: 可能会把cs
阅读全文
摘要：开发环境和生产环境皆可 缓存的原理是什么? 在之前我们讲到HMR(hot module replacement) 热模块替换很像,若有一个js改动,其他的js文件不需要重新加载,但是HMR只能在devServer环境下,但是生产环境不需要devServer 在第一次的时候,会将之前编译(打包)的文件
阅读全文
摘要：开发环境和生产环境皆可 oneOf的作用: 以下loader只会匹配一个 比如 这是css文件,在处理后,就不会再往下走 去验证是否是less.js,图片的内容,这样就加快了打包速度 //注意:不能有两个配置处理同一种类型文件 问题:为什么oneOf上面为什么还有一个js的loader处理呢? 因为
阅读全文
摘要：开发环境和生产环境皆可 source-map: 一种提供源代码到构建后代码映射技术(如果构建后代码出错了,通过映射可以追踪源代码的位置) [inline-|hidden-|eval-] [nosources-] [cheap-[module-]] sourcce-map source-map 外部
阅读全文
摘要：这里只能对 开发环境有效 1.开发环境性能优化 *优化打包构建速度 (项目体积越来越庞大,代码量太多,就会越来越慢) *优化调试代码 2.生产环境性能优化 *优化打包构建速度 *优化代码运行的性能 HRM是需要在devServer环境下的,而生产环境是没有这个环境的,所以在生产环境无法使用HRM 为
阅读全文
摘要：未测试,只是记录下来而已 const {resolve} = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin =
阅读全文
摘要：语法检查 1/需要在pageage.json中配置eslintConfig 2/需要执行一下命令: npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import 3/ // eslint-disable-next-
阅读全文
摘要：生产环境:能让代码优化上线运行的环境 提问:css打包在js文件中会出现什么情况? 答:css在js中,这样js文件体积变得非常大,下载就会非常慢,因为是先加载js,先执行js代码,然后创建style标签加载在页面中,那么页面就会出现闪屏现象,所以需要将css文件内容从js中提取出来 需要做哪些优化
阅读全文
摘要：重点:开发环境只需要能让代码运行起来即可 提问:为什么没有css文件打包呢? 答:因为css文件内容打包到了built.js文件中,会自动加内容加载在index.html中的 提问:css打包在js中会出现闪屏现象吗?为什么? 答:css在js中,这样js文件体积变得非常大,下载就会非常慢,因为是先
阅读全文
摘要：注意:很可惜,页面一直在加载中,没成功,目前在做webpack之(9)的时候问题已经进行分析 常见的问题: 需要优先安装一下包 npm i webpack-dev-server -D 但是发现项目根本无法运行而报错,具体看报错问题 npm i webpack -D npm i webpack-cli
阅读全文
摘要：webpack5的版本 后面有版本会单独出一篇文章 通过load打包其他文件资源 注意内容 在这里用到了文字图片,下载iconfont,然后在index.js引入css文件 然后开始打包,注意打包的验证采用排除 exclude 关键字 记住:.html文件并没有引入,因html-webpack-pl
阅读全文
摘要：模块定义和使用 在commonjs中,一个文件就是一个模块.定义一个模块导出通过exports 或者 module.exports挂载即可 exports.count = 1; 导入一个模块 const {resolve} = require('path') CommonJS的模块主要由原生modu
阅读全文
摘要：webpack5的版本 后面有版本会单独出一篇文章 通过load打包img文件 注意内容 url-loader 和 file-loader是一起的,若是less里面用到了图片那就没关系 若是html中用了img标签引用图片,那么打包后就会出现问题,图片显示不出来,这个问题一直都存在,不知如何解决 h
阅读全文
摘要：webpack5的版本 后面有版本会单独出一篇文章 通过load打包html文件 注意:在打包html文件时,因为资源在打包的时候会自动引入 若index.js有包含css/less文件,就需要配置module中的rules 也就是 loader 第一步:下载html-webpack-plugin插
阅读全文
摘要：webpack5的版本 后面有版本会单独出一篇文章 通过load打包css文件 第一步:需要下载各种loader 第二步:在index.html中需要引入打包好的文件built.js /* webpack.config.js webpack 的配置文件 作用:指示webpack干哪些活(当你运行we
阅读全文
摘要：npm i webpack webpack-cli -g 分析语句 运行指令: 开发环境 webpack ./src/index.js -o ./bulid --mode=development webpack会以./src/index.js 为入口文件开始打包,打包后输出到./bulid/buil
阅读全文
摘要：环境参数 node.js 10版本以上 webpack 4.26版本以上 预备技能 基本node.js知识和npm命令 熟悉 es6语法 1.1webpack是什么? webpack是一种前端资源构建工具,一个静态模块打包器 什么是构建工具? less 需要 一个小的构建工具 转为 css文件 es
阅读全文
摘要：注意点:在创建项目时,一定要注意名字,可以取 zmztya-ui 第一步:新创建一个demo项目 1/将src变为examples 2/添加一个packages文件,用于存放控件,然后fonts也放入其中 第二步: 添加vue.config.js const { resolve } = requir
阅读全文
摘要：vue3新特性1/数据响应式原理重新实现(ES6 proxy 代替了ES5的Object.defineProperty) Vue.set() 解决了:例如数据更新检测bug vue2的push,shift 不是原生js的方法,vue二次封装了 大大优化了响应式监听的性能(可以监听复杂的数据类型)2.
阅读全文
摘要：参考地址 https://forum.vuejs.org/t/vue-router-3-0-1-router-addroutes/33181/20 https://blog.csdn.net/qq_41912398/article/details/109231418 vue路由守卫next()/ne
阅读全文
摘要：参考文章地址:https://mp.weixin.qq.com/s/cVYtYWOB2mie-bjZmSw9AQ
阅读全文
摘要：看到这的时候真的很蒙蔽,天呐,这是啥,没见过呀,怎么办,怎么学习,好烦,看不下去了.但是,当静下心来去查资料,去敲案例时,原来可以这么简单 回顾: 1.写组件时,会常常遇到父组件的数据传递给子组件,有时也需要子组件去触发父组件的事件,有以下三种解决办法: (1)通过props的方式向子组件传递,$e
阅读全文
摘要：官方消息: 以下三个过时的生命周期会带来不安全的编码实战 componentWillMount componentWillReceiveProps componentWillUpdate 这几个生命周期经常被误解和滥用,预计,在异步渲染中,潜在的调用问题可能更大,所以在发布的版本中为这些生命周期添加
阅读全文
摘要：设计模式是一种解决问题的思路,而非固定的公式 定义: 是一对多的关系依赖关系,当被依赖的对象的状态发生变化了,那么所有依赖他的对象都会得到通知 观察者模式有主体和观察者组成.主体负责发布事件,观察者负责订阅这些事件来观察主体.主体并不知道观察者的任何事情,观察者知道主体能注册事件的回调函数 优点：
阅读全文
摘要：一.生命周期(旧) 总结: 初始化阶段: 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() > 常用 一般在这个钩子中做一些初始化的事,例如:开启定时器,发送网络请求,订阅消息 更新阶段:由组件内部this
阅读全文
摘要：数据柯里化的作用是什么? 在处理表单时,可以通过ref的三种方式都可以获取表单控件数据,但是若是很多控件,都去定义一个ref(过多的使用会有性能问题),或者定义多个函数,那么就太臃肿了,那么数据柯里化可以解决 高阶函数: 若一个函数符合下面两个规范中的一个,该函数就是高阶函数 1.若a函数,接受的参
阅读全文
摘要：React 之 组件实例的三大核心属性 (state props ref) 为什么用到事件处理(事件委托)? 在react中,官方提示:请勿过度使用ref , 所以可以通过事件委托来处理 /* 1.通过onXxx属性指定事件处理函数(*注意大小写) a.React使用的是自定义(合成)事件,而不是使
阅读全文
摘要：第一天: 1)虚拟DOM的两种创建方式 函数组件 和 类组件 2)jsx语法规则 3)react 如何定义组件 通过完整的类组件的写法,还有简写形式 4)组件实例三大属性1_state 1.理解类中this的指向问题 2.理解简写形式 3.不能直接修改state,而是通过setState来修改 4.
阅读全文
摘要：扩展: 在React中,构造函数仅用于以下两种情况 1)通过给this.state 赋值对象来初始化内部 state 2)为事件处理函数绑定实例 在构造函数中注意事项: 在为ReactComponent子类实现构造函数时,应该其他语句之前调用super(props).否则this.props在构造函
阅读全文
摘要：什么是组件? 用来实现局部功能效果的代码和资源的集合(html/css/image等等) 为什么要使用组件? 作用:复用编码,简化项目编程,提高运行效率 官方提供了两种定义组件的方式 1.函数式组件 特点:适用于[简单组件]的定义 一.函数式组件 // 创建函数式组件 function MyComp
阅读全文
摘要：vue全家桶 vue vue-router axios vuex 什么是vue? 渐进式javascript框架 学习vue需要引入四个文件 vue.min.js 写一个简单的demo <div id="box"> <p>iPad</p> <p>单价: {{ price }}</p> <p>库存:
阅读全文
摘要：1)全称:javascript xml 2)react定义的一种类似xml的js扩展语法:js + xml 3)本质是React.createElement(component,props,...children)方法的语法糖 4)作用:用来简化创建虚拟dom a. 写法: var ele = <h
阅读全文
摘要：react 全家桶 React基础 React-Router PubSub Redux Ant-Design等 什么是React ? 用于构建用户界面的javascript库,可以说:react 是一个将数据渲染为html视图的开源javascript库 学习react 需要引入四个文件 babel
阅读全文
摘要：svg是一种基于XML语法的图像格式,全称是可缩放矢量图(scalable vector Graphics),本质是文本文件,体积较小,放多大都不会失真. svg使用过吗? 方式一:项目小,只有几个时,svg标签直接用来设置 方式二:由于项目中比较大时,
阅读全文
摘要：1.认识特性 本质:就是一个类,继承自Attribute
阅读全文
摘要：学习课件资料:https://www.bilibili.com/video/BV1J54y1B74C?p=26 exe/dll(主要区别:exe有文件入口) metadata(元数据:描述exe/dll文件的一个数据清单) 反射(Reflection)用来操作获取元数据 注:clr/jit也需要读取
阅读全文
摘要：1.javascript 字符串凭借性能分析? 考察两个点: (1)浏览器兼容问题 (2)字符串拼接问题的处理 参考地址:https://blog.csdn.net/hugh77/article/details/45973395 解答:在现在主流的浏览器中 +=的操作性能最佳,Array.join(
阅读全文
