- 博客(63)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 原型和原型链
默认情况下，prototype是一个普通的Object对象，Function原型是一个对象，所以Function原型得隐式原型指向Object原型。//false 因为{}是通过new Object()创建的。猴子补丁：在函数原型中加入成员，以增强其对象的功能，猴子补丁会导致原型污染使用需谨慎。Object是一个对象，是Function new出来的。// 答案：是, new 一个函数返回的就是一个对象。// 答案：是, new 一个函数返回的就是一个对象。// a的构造函数时test还是Object。
2024-05-14 09:19:49
661
原创 格式化ESLint
ESLint是一个针对JS的代码风格工具，当不满足其要求的风格时，会给予警告或错误官网：https://eslint.org/民间中文网：https://eslint.bootcss.com/
2024-05-11 09:04:02
349
原创 代码压缩--性能优化
减少代码体积；破坏代码的可读性，提升破解成本；生产环境UglifyJs和是一个传统的代码压缩工具，已存在多年，曾经是前端应用的必备工具，但由于它不支持ES6语法，所以目前的流行度已有所下降。Terser是一个新起的代码压缩工具，支持ES6+语法，因此被很多构建工具内置使用。webpack安装后会内置Terser，当启用生产环境后即可用其进行代码压缩。因此，我们选择Terser副作用：函数运行过程中，可能会对外部环境造成影响的功能。
2024-05-10 15:14:42
284
原创 打包自动分包
不同与手动分包，自动分包是从出发，从一个更加来控制分包，而一般不对具体哪个包要分出去进行控制因此使用自动分包，不仅非常方便，而且更加贴合实际的开发需要要控制自动分包，关键是要配置一个合理的有了分包策略之后，不需要额外安装任何插件，webpack会自动的按照策略进行分包实际上，webpack在内部是使用进行分包的过去有一个库也可以实现分包，不过由于该库某些地方并不完善，到了webpack4之后，已被取代。
2024-05-10 15:00:02
988
原创 打包手动分包
手动打包的过程开启暴露公共模块用DllPlugin创建资源清单用使用资源清单手动打包的注意事项资源清单不参与运行，可以不放到打包目录中记得手动引入公共JS，以及避免被删除不要对小型的公共JS库使用优点极大提升自身模块的打包速度极大的缩小了自身文件体积有利于浏览器缓存第三方库的公共代码缺点使用非常繁琐如果第三方库中包含重复代码，则效果不太理想。
2024-05-10 14:46:45
269
原创 开发服务器webpack-dev-server
针对webpack-dev-server的配置，参考：https://www.webpackjs.com/configuration/dev-server/这个命令是专门为开发阶段服务的，真正部署的时候还是得使用webpack命令。并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境。命令几乎支持所有的webpack命令参数，如。等等，你可以把它当作webpack命令使用。
2024-05-10 14:21:04
328
原创 热替换 HMR
热替换并不能降低构建时间（可能还会稍微增加），但可以降低代码改动到效果呈现的时间当使用时，考虑代码改动到效果呈现的过程而使用了热替换后，流程发生了变化。
2024-05-10 14:18:12
238
原创 优化loader性能
思路是：对于某些库，不使用loader例如：babel-loader可以转换ES6或更高版本的语法，可是有些库本身就是用ES5语法书写的，不需要转换，使用babel-loader反而会浪费构建时间lodash就是这样的一个库lodash是在ES5之前出现的库，使用的是ES3语法通过或，排除或仅包含需要应用loader的场景如果暴力一点，甚至可以排除掉目录中的模块，或仅转换src目录的模块这种做法是对loader的范围进行进一步的限制，和noParse不冲突，想想看，为什么不冲突。
2024-05-10 11:27:50
350
原创 性能优化概述
因为你在开发的时候，无法完全预知最终的运行性能，过早的关注性能会极大的降低开发效率。构建性能会影响开发效率。构建性能越高，开发过程中时间的浪费越少。传输性能是指，打包后的JS代码传输到浏览器经过的时间。运行性能是指，JS代码在浏览器端的运行速度。它主要取决于我们如何书写高性能的代码。性能优化主要从上面三个维度入手。这里所说的构建性能，是指在。，而不是生产环境的构建性能。
2024-05-10 11:09:23
247
原创 babel插件
遗憾的是，目前vscode无法识别该语法，会在代码中报错，虽然并不会有什么实际性的危害，但是影响观感。只转换那些已经形成正式标准的语法，对于某些处于早期阶段、还没有确定的语法不做转换。上节课补充：@babel/polyfill 已过时，目前被。用于提供一些公共的API，这些API会帮助代码转换。该插件可以让你轻松的为某个方法绑定this。如果要转换这些语法，就要单独使用插件。该插件可以让你在类中书写初始化字段。该插件会移除源码中的控制台输出语句。下面随便列举一些插件。
2024-05-10 10:56:58
239
原创 babel预设
具体的配置见：https://www.babeljs.cn/docs/babel-preset-env#options。需要根据兼容的浏览器范围来确定如何编译，和postcss一样，可以使用文件。由于该预设仅转换新的语法，并不对新的API进行任何处理。可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件。可以在编译结果中注入这些新的API，它的值默认为。，表示不注入任何新的API，可以将其设置为。，表示根据API的使用情况，按需导入API。，该配置的默认值是false。来描述浏览器的兼容范围。
2024-05-10 10:55:03
303
原创 babel预设
具体的配置见：https://www.babeljs.cn/docs/babel-preset-env#options。需要根据兼容的浏览器范围来确定如何编译，和postcss一样，可以使用文件。由于该预设仅转换新的语法，并不对新的API进行任何处理。可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件。可以在编译结果中注入这些新的API，它的值默认为。，表示不注入任何新的API，可以将其设置为。，表示根据API的使用情况，按需导入API。，该配置的默认值是false。来描述浏览器的兼容范围。
2024-05-10 10:53:33
244
原创 babel的安装和使用
babel一词来自于希伯来语，直译为巴别塔巴别塔象征的统一的国度、统一的语言而今天的JS世界缺少一座巴别塔，不同版本的浏览器能识别的ES标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，和古巴比伦一样，前端开发也面临着这样的困境。babel的出现，就是用于解决这样的问题，它是一个编译器，可以把不同标准书写的语言，编译为统一的、能被各种浏览器识别的语言。
2024-05-10 10:43:19
365
原创 抽离css文件
目前，css代码被css-loader转换后，交给的是style-loader进行处理。style-loader使用的方式是用一段js代码，将样式加入到style元素中。而实际的开发中，我们往往希望依赖的样式最终形成一个css文件。该库提供了1个plugin和1个loader。的含义一样，即根据chunk生成的样式文件名。默认情况下，每个chunk对应一个css文件。配置生成的文件名，例如。
2024-05-10 10:06:33
217
原创 css编译器--PostCss
学习到现在，可以看出，CSS工程化面临着诸多问题，而解决这些问题的方案多种多样。如果把CSS单独拎出来看，光是样式本身，就有很多事情要处理。既然有这么多事情要处理，何不把这些事情集中到一起统一处理呢？PostCss就是基于这样的理念出现的。PostCss类似于一个编译器，可以将样式源码编译成最终的CSS代码看上去是不是和LESS、SASS一样呢？但PostCss和LESS、SASS的思路不同，它其实只做一些代码分析之类的事情，将分析的结果交给插件，具体的代码转换操作是插件去完成的。
2024-05-10 09:52:27
823
原创 CSS预编译器
由于官方迟迟不对css语言本身做出改进，一些第三方机构开始想办法来解决这些问题其中一种方案，便是预编译器预编译器的原理很简单，即使用一种更加优雅的方式来书写样式代码，通过一个编译器，将其转换为可被浏览器识别的传统css代码目前，最流行的预编译器有和，由于它们两者特别相似，因此仅学习一种即可（本课程学习LESS）less官网：http://lesscss.org/less中文文档1（非官方）：http://lesscss.cn/
2024-05-10 09:06:07
375
原创 css的类名冲突--css module
通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题。
2024-05-09 16:55:33
648
原创 css类名冲突-css in js
至于如何把样式应用到界面上，不是它所关心的事情，你可以用任何技术、任何框架、任何方式将它应用到界面。css in js 的核心思想是：用一个JS对象来描述样式，而不是css样式表。后续学习的vue、react都支持css in js，可以非常轻松的应用到界面。由于这种描述样式的方式。，自然不会有类名冲突。
2024-05-09 14:51:46
283
原创 css类样式的命名方法-BEM
其他命名方法还有：OOCSS、AMCSS、SMACSS等等。，可以表示：轮播图中，处于选中状态的小圆点。BEM是一套针对css类样式的命名方法。
2024-05-09 14:45:21
326
原创 利用webpack拆分css
要拆分css，就必须把css当成像js那样的模块；要把css当成模块，就必须有一个构建工具（webpack），它具备合并代码的能力而webpack本身只能读取css文件的内容、将其当作JS代码进行分析，因此，会导致错误于是，就必须有一个loader，能够将css代码转换为js代码。
2024-05-09 14:38:47
387
原创 css工程化概述
当你写一个css类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？你会发现，怎么都不好一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题。
2024-05-09 14:27:41
333
原创 webpack 常用插件
默认情况下，CleanWebpackPlugin 会清除输出目录（即 output.path 指定的目录）中的所有文件和子目录。如果您想自定义哪些文件或目录需要被清除，您可以在创建 CleanWebpackPlugin 实例时传递一个选项在这个例子中，cleanOnceBeforeBuildPatterns 选项是一个字符串数组，用于指定需要被清除的文件或目录。在这个例子中，所有文件和目录都会被清除，但是名为 ‘important-file.txt’ 的文件将被排除在清除之外。
2024-04-30 17:22:15
1792
原创 其他细节配置
该配置会影响入口和loaders的解析，入口和loaders的相对路径会以context的配置作为基准路径，这样，你的配置会独立于CWD（current working directory 当前执行路径）这比较适用于一些第三方库来自于外部CDN的情况，这样一来，即可以在页面中使用CDN，又让bundle的体积变得更小，还不影响源码的编写。这样一来，打包后的结果中，会将自执行函数的执行结果暴露给abc。从最终的bundle中排除掉配置的配置的源码，例如，入口模块是。但有了上面的配置后，则变成了。
2024-04-30 14:14:55
311
原创 webpack 区分环境
在开始构建时，webpack如果发现配置是一个函数，会调用该函数，将函数返回的对象作为配置内容，因此，开发者可以根据不同的环境返回不同的对象。在调用webpack函数时，webpack会向函数传入一个参数env，该参数的值来自于webpack命令中给env指定的值，例如。这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。为了更好的适应这种要求，webpack允许配置不仅可以是一个对象，还可以是一个。有些时候，我们需要针对生产环境和开发环境分别书写webpack配置。
2024-04-29 15:18:37
881
原创 plugin
compiler对象是在初始化阶段构建的，整个webpack打包期间只有一个compiler对象，后续完成打包工作的是compiler对象内部创建的compilation。compiler对象提供了大量的钩子函数（hooks，可以理解为事件），plugin的开发者可以注册这些钩子函数，参与webpack编译和生成。即要监听的事件名，即钩子名，所有的钩子：https://www.webpackjs.com/api/compiler-hooks。通常，习惯上，我们会将该对象写成构造函数的模式。
2024-04-29 14:31:13
352
原创 webpack loader
webpack loader： loader本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。loader函数的将在模块解析的过程中被调用，以得到最终的源码。
2024-04-28 16:52:24
201
原创 webpack 入口和出口
node内置模块 - path: https://nodejs.org/dist/latest-v12.x/docs/api/path.html。这里的出口是针对资源列表的文件名或路径的配置。出口通过output进行配置。入口通过entry进行配置。
2024-04-28 16:33:13
131
原创 webpack devtool 配置
为了解决这一问题，chrome浏览器率先支持了source map，其他浏览器纷纷效仿，目前，几乎所有新版浏览器都支持了source map。前端发展到现阶段，很多时候都不会直接运行源代码，可能需要对源代码进行合并、压缩、转换等操作，真正运行的是转换后的代码。这就给调试带来了困难，因为当运行发生错误的时候，我们更加希望能看到源代码中的错误，而不是转换后代码的错误。source map实际上是一个配置，配置中不仅记录了所有源码内容，还记录了和转换后的代码的对应关系。本小节的知识与 webpack 无关。
2024-04-28 15:13:11
467
原创 webpack配置文件
配置文件中通过CommonJS模块导出一个对象，对象中的各种属性对应不同的webpack配置。，但更多的时候，我们会使用更加灵活的配置文件来控制webpack的行为。当命令行参数与配置文件中的配置出现冲突时，以命令行参数为准。webpack提供的cli支持很多的参数，例如。文件作为配置文件，但也可以通过CLI参数。默认情况下，webpack会读取。
2024-04-28 14:30:16
621
原创 webpack的安装和使用
webpack是基于模块化的打包（构建）工具，它把一切视为模块它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。为前端工程化而生：webpack致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给webpack来处理简单易用：支持零配置，可以不用写任何一行额外的代码就使用webpack强大的生态。
2024-04-28 10:08:09
294
原创 浏览器实现模块化
本门课需要的前置知识：ES6、模块化、包管理器、git合适的深度：webpack使用层面很简单，但原理层面非常复杂合适的广度：webpack生态圈极其繁荣，有海量的第三方库可以融入到webpack。
2024-04-28 09:20:39
284
原创 深入理解Vue插槽
slot2: function(msg){} // (这个函数的返回结果是。default: function(){} // (这个函数的返回结果是。slot1:function(){} // (这个函数的返回结果是。子组件ChildComp.vue。父组件App.vue。
2024-04-25 09:53:13
180
原创 this指向
我们说的this指向是一个函数里边的this指向，如果这个this不在函数里边，那this指向取决于环境，如果是浏览器环境，那指向window,如果是node环境，指向空对象。函数中的this指向谁，取决于如何去调用这个函数创建执行上下文的时候就确定了这一次函数调用的this指向谁，执行上下文什么时候创建的，是执行的时候创建的，执行就是调用，所以this的指向就是函数调用的时候确定的2020NaN2063NaN63。
2024-04-23 10:08:29
1071
wire_strands
2014-12-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人