1.6k 1 分钟

# webpack 中的 plugin Webpack 的另一个核心是 Plugin , Loader 是用于特定的模块类型进行转换用于处理资源文件,而 Plugin 可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。例如:生成 html 文件、将 js/css 文件插入 html 文件中。 # CleanWebpackPlugin CleanWebpackPlugin 的作用就是每次修改了一些配置,重新打包时,自动删除 dist 文件夹。 安装 CleanWebpackPlugin : npm install clean-webpack-plugin -D 配置...
3.7k 3 分钟

# PostCSS 工具 # 什么是 PostCSS PostCSS 是一个通过 JavaScript 来转换样式的工具,这个工具可以帮助我们进行一些 CSS 的转换和适配,比如自动添加浏览器前缀、css 样式的重置。但是实现这些工具,我们需要借助于 PostCSS 对应的插件。主要用来处理浏览器兼容性问题。 安装 PostCss: npm install postcss postcss-cli -D使用:在 webpack 的配置文件中编写相应的 loader 规则,或者直接在命令行中使用。 因为 postcss 是独立于 webpack 的,所以在 webpack.config.js...
3.8k 3 分钟

# 函数 和 JavaScript 一样,TypeScript 函数可以创建有名字的函数和匿名函数,但是在此基础上 Typescript 支持函数重载。 TypeScript 里的每个函数参数都是必须的。 这不是指不能传递 null 或 undefined 作为参数,而是说编译器检查用户是否为每个参数都传入了值。编译器还会假设只有这些参数会被传递进函数。 简短地说,传递给一个函数的参数个数必须与函数期望的参数个数一致。 JavaScript 里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是 undefined 。 在 TypeScript 里我们可以在参数名旁使用 ?...
5.8k 5 分钟

# webpack 简介 官方说,webpack is a static module bundler for modern JavaScript applications. 翻译过来:webpack 是一个静态的模块化打包工具,为现代的 JavaScript 应用程序; 我们来对上面的解释进行拆解: p 打包 bundler:webpack 可以将帮助我们进行打包,所以它是一个打包工具 静态的 static:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器); 模块化 module:webpack 默认支持各种模块化开发,ES Module、CommonJS、AMD...
3.1k 3 分钟

# 类 typescript 里的类和 javascript 里的类基本一样。 typerscript 扩展了类,它可以通过先声明的方式限制实例属性的类型,并且还引入了类似 C++ 、 Java 的继承权限设定,拥有 public 、 protect 、 private 三种修饰符。若不声明权限则默认为 public 修饰符 外部访问 派生类访问 自身访问 public √ √ √ protected × √ √ private × × √ # public public 修饰的属性可以在外部访问,也可以在派生类和自身实例中访问 class Person {...
1.8k 2 分钟

# 接口 接口是对象的状态 (属性) 和行为 (方法) 的抽象 (描述),本质上是一种对对象的约束。例如我们要求一个对象必须要有 id 这个属性,且属性值必须为 number 。这在 javascript 上是做不到的,但在 typescript 中我们可以利用接口来实现。 // 需求:对象里必须要有 id 这个属性,且属性值为 number 类型// 声明一个接口interface IObj{ // 用 I 开头表示这是一个接口 id:number}let obj1:IObj = { id:1, // ok...
3.1k 3 分钟

# 环境搭建 因为 TypeScript 是无法直接在浏览器上运行的,所以需要先将 Typescript 编译成 Javascript 代码后才能使用 # 安装 TS 全局安装 Typescript : npm install -g typescript 检查安装情况 tsc -v # 手动编译 手动编译仅需在目录下 tsc 文件名.ts ,例如: tsc index.ts # vscode 自动编译 每次都要自行编译很麻烦,在 vscode 情况下我们可以使用监视任务让他自动编译。首先生成 ts 配置文件: // 生成配置文件tsconfig.json tsc...
2.5k 2 分钟

# 数组去重 let arr = [1,21,3,4,5,1,3,1];# 利用 Set 数据结构 function unique(arr){ // 利用 es6 的 set 数据结构 return [...new Set(arr)];}# 利用 Array.prototype.filter 函数 function unique(arr){ return arr.filter((item,index) => { // 判断是否有出现索引号不一致情况,若有则说明有重复 return arr.indexOf(item)...
4.6k 4 分钟

# Vue 高级特性 # 自定义 v-model 当我们需要在自定义的组件上使用 v-model 属性时,就需要自己去实现父子组件里的 v-model 通信了。用 props 传值,子组件将需要改变的值接收,然后使用 model 添加自定义事件将其绑定在标签上。 // 父组件 <template> <p> {{name}} </p> <Son v-model="name"...
620 1 分钟

# 页面优化 一个页面从输入 url 到最终呈现整个流程可以分为资源加载过程和页面渲染过程。优化页面时我们可以从这两个角度去思考得到一些性能调优的思路 # 加载过程 DNS 预取:首先从地址栏输入一个 url 我们需要将 url 地址解析,获取其中的主机地址,然后再对主机地址发送请求获取资源。这里我们先需要进行 DNS 查询,而 DNS 查询这个过程我们可以让浏览器进行 DNS预取 加快查询,电脑主机会先从本机 DNS 缓存中查找域名映射,若没有则会默认进行 DNS递归查询 。 TCP preconnect:tcp 调优、HTTP/2、keep-alive http...