- 博客(178)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Vue.js - 模拟Vue.js响应式原理（2/2）
项目仓库：xxxxx一. 类的说明Vue类 ：保存传入的选项数据，把选项data中的成员注入vue实例（可用this.msg访问），调用observer对象监听数据变化，调用compiler对象解析指令和差值表达式。Observer类：把data选项中属性转换成响应式数据（若data某个属性是对象，该对象的属性也具有响应式），数据变化发送通知。Compiler类：负责编译模板并解析指令和差值表达式，负责页面视图首次渲染，以及数据变化后的重新渲染。Dep类：观察者模式中的发布者，用
2021-04-15 21:57:12
319
原创 Vue.js - Vue.js响应式原理（1/2）
一. 数据驱动数据响应式：数据改变，则视图改变，避免频繁的Dom操作，提高运行效率双向绑定：数据改变，则视图改变；视图改变，则数据也随之改变数据驱动：开发过程中只需关注数据本身，不用关心数据如何渲染出视图二. Vue.js 数据响应式原理2.1Vue2数据响应式原理 - Object.defineProperty - 兼容IE9及以上<html><head></head><body> <h1>Vue响应式..
2021-04-14 21:35:22
313
原创 Vue.js - VueRouter的Hash与History模式 / 手写VueRouter
一.Hash与History模式 Hash模式 History模式 url地址外观 http://localhost:8081/#/about http://localhost:8080/about 原理 基于锚点，监听锚点变化时触发的onhashchange事件 基于HTML5的 history.pushState()方法，该方法会向浏览器历史记录中加入一条数据，会改变当前地址栏的地址，但不去加载新地址 兼容性 对于IE，IE10及以...
2021-03-26 17:20:00
300
原创 规范化标准 - ESLint 结合 Git Hooks（阻止不规范的代码提交）
一. 什么是 Git Hooks如同其他许多的版本控制系统一样，Git也具有在特定事件发生之前或之后执行特定脚本代码功能。Git Hooks就是那些在Git执行特定事件（如commit、push、receive等）后触发运行的脚本。按照Git Hooks脚本所在的位置可以分为两类：1.本地Hooks，触发事件如commit、merge等。2.服务端Hooks，触发事件如receive等。钩子都被存储在项目的.git（是隐藏目录）目录下的hooks子目录中，即项目中的.git/hoo...
2021-01-03 14:22:57
2485
原创 规范化标准 - ESLint
一. 规范化介绍1.为什么要有规范化标准软件开发需要多人协同，不同开发者有不同的编码习惯和喜好，不同的喜好增加项目维护成本，每个项目或团队需要明确统一的标准。2.哪里需要规范化标准代码、文档、设置提交日志，开发过程中人为编写的成果物，其中代码标准化规范最为重要。3.实施规范化的方式编码前认同标准约定、通过工具实现 Lint（对代码进行规范化，统称 Lint）。二. ESLint 介绍ESLint 是目前最主流的 Javascript 代码的 Lint 工具，可以很容易地...
2021-01-03 12:30:59
381
原创 其他打包工具 - Rollup 和 Parcel
一. Rollup 一款小巧高效的 ES Module 打包器项目网址：https://gitee.com/big-right-right/rollup-sample# Rollup 一款小巧高效的 ES Module 打包器默认支持 ESM 模块的打包# 配置 rollup.config.js1. 入口文件 input2. 输出文件或文件夹 output3. 插件 plugins - 插件是Rollup的唯一拓展方式4. 加载非 ESM 规范的模块需要插件：n...
2020-12-29 17:14:45
177
原创 Webpack5 - 打包输出文件名hash
一. 打包输出文件名hashfilename: '[name]-[hash].bundle.css'filename: '[name]-[chunkhash].bundle.css'filename: '[name]-[contenthash:8].bundle.css'[hash] - 本应用中任意文件更新，都会导致所有输出包名变化[chunkhash] - 本应用中有几个模块更新，导致几个模块包名变化[contenthash:8] - 本应用打包输出文件级别的更新，导致输出.
2020-12-27 21:29:51
1842
原创 Webpack5 - 多入口打包和优化（适用于多页应用）
一. 配置多入口打包webpack.config.js:module.exports = { mode: 'none', entry: { index: './src/index.js', album: './src/album.js', }, output: { filename: '[name].bundle.js', path: path.join(__dirname, 'output')
2020-12-27 21:27:35
1877
原创 Webpack5 - 打包代码分包 Code Splitting
一. 代码分包的意义对于应用程序而言，非首屏渲染所需的资源，都可以后续加载（按需加载），以避免网络资源的浪费，同时加快首屏速度。二. 可通过动态导入模块实现分包动态导入的模块，会在打包时自动分包方式，在脚本中：import('./posts/posts').then({ default: posts } => { document.body.appendChild(posts)})// 用魔法注释设置包名document.getElementById('btn'
2020-12-27 20:48:56
1087
原创 Webpack5 - 打包优化 Tree Shaking
一. Tree Shaking 是什么Tree Shaking中文含义是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包结果。二. 如何开启 webpack 的 Tree Shakingwebpack在生产模式（mode: 'production'）下，不会打包进未引用的代码（dead-code）。1. 开启 Tree Shakingwebpack.config.js:module.exports = { optimization: { us
2020-12-27 20:41:49
1759
原创 Webpack5 - 区分开发和生产环境配置
一. webpack 不同环境的配置对于项目的开发和生产打包，这两种情况下，我们通常需要不同的webpack配置。有如下两种方法，可以针对不同环境 应用不同的 webpack 配置。二. 方法一 根据环境不同导出不同的配置webpack.config.js:module.exports = (env, argv) => { const config = {...} if(env && env.production) { con.
2020-12-27 19:07:58
1243
原创 Webpack5 - Source Map选择
一. Source Map 源代码地图Source Map - 源代码地图，可解决源代码与编译后的代码不同而导致的调试困难的问题。使用方式：在 编译后的js文件末尾添加 引入 sourceMap 文件的注释：//# sourceMapURL = jquery-3.1.4.min.map二. webpack 中开启source map 生成webpack.config.js:module.exports = { // 开启 source map // 开发中推荐使用 'c
2020-12-27 18:54:33
1182
原创 Webpack5 - 开发服务器 webpack-dev-server
一.Webpack5 - 开发服务器的作用二.Webpack5 - 开发服务器安装和使用三.开发服务器配置
2020-12-27 18:47:07
3090
原创 Webpack5 - 自定义一个插件 MyPlugin
一个插件（Plugin）必须是一个函数 或者 一个 包含 applay 方法的对象。此处自定义一个插件 MyPlugin, 去除以mode为none模式打包后 bundle.js文件中的 /******/ 字符串。webpack.config.js ：// 自定义一个插件 MyPlugin, 去除打包后bundle.js文件中的 /******/ 字符串class MyPlugin { apply(compiler) { console.log('MyPlugin 启动')
2020-12-26 22:20:09
1170
原创 Webpack5 - 常用Plugin（插件）
一. Webpack的插件是什么webpack的插件，可以增强webpack的自动化能力，使用插件，可以完成自动清空目录、拷贝资源文件、压缩输出代码等功能。webpack的一个个插件，就是在 webpack生命周期的钩子上挂载的一个个任务。一个插件（Plugin）必须是一个函数 或者 一个 包含 applay 方法的对象。二. 常用的Webpack插件常用的Webpack插件 作用 clean-webpack-plugin 在每次打包开始 清除打包
2020-12-26 22:08:45
960
原创 Webpack5 - 自定义一个Loader-来加载markdown(.md)文件
项目网址：https://gitee.com/big-right-right/webpack-my-markdonw-loader# 介绍webpack自定义一个Loader， 用于加载markdown文件资源。项目中把markdown文件转换为html并显示在网页中。# 步骤1. cnpm init -y2. cnpm i -D webpack webpack-cli3. 新建 src 目录，下面建 main.js 、content.md 、markdown-loader.js、.
2020-12-26 21:41:11
920
原创 Webpack5 - 常用Loader（资源加载器）
一. Webpack的Loader是什么Loader是webpack的核心特性，借助Loader 就可以加载（打包）任何类型的资源。webpack 只是打包平台，必须借助加载器来编译转换代码。另：webpack 仅能处理 ES2015+中的 import 和 export， 对于其它 es6+ 的新特性是无额外处理的，额外处理需要babel-loader。二. 常用的Webpack Loader 常用的 webpack loader 作用 babel-l.
2020-12-26 19:15:00
642
原创 Webpack5 - 基本使用
一. webpack有何作用webpack是一个Javascript应用程序的模块打包器。它可以递归地构建一个应用程序的模块依赖关系图，然后将所有模块打包在一起。为什么需要模块打包器：现在的应用程序模块文件很多，如果不打包会造成频繁的网络请求，不适用于生产环境；同时模块规范如ES Modules仍存在兼容问题。模块打包工具做什么：编译代码的新特性，把各种不同类型的资源模块打包。二. webpack安装和使用1. 安装cnpm install --save-dev webpack
2020-12-26 18:40:41
509
1
原创 Javascript 模块化开发
一 什么是模块化开发模块化是最重要的前端开发范式之一。前端应用日益复杂，项目代码膨胀，我们需要更好的方式来组织和管理代码。模块化就是一种主流的代码组织方式，它通过把复杂代码划分为易于单独维护的模块，来提高开发效率，降低维护成本。二 模块化开发的演进过程1. Stage1 - 文件划分的方式 index.html index.js index.css detail.html detail.js detail.css 特点：会污染全局作用域、...
2020-12-13 14:43:07
509
原创 构建工具 - gulp (2/3 用gulp构建项目)
项目网址（牛人）：https://github.com/zce/zce-gulp-demo项目网址：https://gitee.com/big-right-right/gulp-sample/tree/master/zce-gulp-demo一. gulp构建项目用gulp以及其丰富的插件，可以实现强大的项目构建功能，比如scss编译、js编译、文件压缩、开发中热更新、打包等功能。二. 构建项目要点1. 编译样式文件(scss、less等)2. 编译js文件(用babel转换es6.
2020-12-05 22:00:47
179
原创 构建工具 - gulp (1/3 gulp的基本使用)
一. gulpgulp是目前最流行的构建工具之一，利用gulp以及其丰富的插件，可以实现强大的项目构建功能，比如scss编译、js编译、文件压缩、开发中热更新、打包等功能。本文仅简单介绍一下gulp定义任务的几种方式。后续文章专门记录一下gulp来实现项目构建的具体做法。二. 使用gulp定义任务（单任务、串行任务、并行任务）并执行1. 初始化package.json:npm init -y2. 安装gulp为开发依赖：cnpm install gulp --save-de
2020-12-05 21:40:35
108
原创 构建工具 - grunt（用grunt及其插件定义css编译、js编译、文件监听等任务）
项目网址：https://gitee.com/big-right-right/grunt-sample.git# grunt-samplegrunt已经不再流行 但鉴于其构建工具鼻祖的地位 还是有必要学习一下使用grunt及其插件，可以定义编译scss为css，用babel编译最新版本js等任务## npm init -y## cnpm install grunt --save-dev## touch gruntfile.js## 定义同步、异步、默认gr...
2020-12-01 21:46:49
255
原创 脚手架 - 直接用node环境搭建一个简单脚手架
项目网址：https://gitee.com/big-right-right/scaffolding-sample一. 一个简单的node脚手架在需要的目录下执行本脚手架命令(scaffolding-sample)，可接收用户输入，并根据用户输入生成模板文件。二. 步骤1. 初始化package.json文件:yarn init2. 在package.json中，新增如下 bin 属性:"bin": "cli.js",package.json文件：{ "...
2020-11-29 18:53:00
603
原创 脚手架 - 用Plop工具生成项目中的组件
一. Plop简介Plop是一个小工具，它提供了一种简单的方法用一致的方式生成代码或任何其他类型的文件。比如在项目中，每个组件的初始化文件内容基本一致，则可用plop来生成组件，避免每次手动生成的繁琐。链接：https://plopjs.com/二. 用Plop生成项目中的组件1. 安装 plop 模块为开发依赖:yarn add plop --dev2. 项目根目录下创建组件的模板文件 plop-templates/component.hbs:export def.
2020-11-29 18:31:22
316
原创 脚手架 - 用Yeoman生成一个自己的项目框架
项目网址：https://gitee.com/big-right-right/plop-mysample.git一. Yeoman简介Yeoman是一个通用的脚手架工具（比vue-cli、create-react-app等更加灵活通用，不限制于某种开发语言或框架。）它可以帮助开发人员快速构建web应用程序的工具和框架。Yeoman可以定义项目生成模块（Generator），再通过执行生成模块来生成项目。定义一个Generator模块，实质上就是定义一个npm模块。二. 用Yeo.
2020-11-29 18:08:48
264
原创 什么是前端工程化
一.什么是工程化一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。工程化是为了解决问题。工程化并不等于某个工具，工程化应包含规划一个项目的整体工作流架构。一些成熟的前端工程化的集成：create-react-app、 vue-cli、 angular-cli、 gatsby-cli，它们都约定了项目的文件结构，提供了热更新、自动编译、模块文件支持、代码校验等功能。二.前端工程化要解决的问题传统语言、语法的弊端无法使用模块化/组件化重复的机械式工作代码风.
2020-11-29 12:25:51
683
原创 JavaScript代码性能优化
一.内存管理内存：由可读写单元组成，是一片可操作空间管理：人为地区操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理过程：申请-使用-释放在Js中，内存空间的申请是自动的，声明一个变量或方法等就会自动申请。内存的使用就是访问变量。可以通过把变量赋值为null来释放这片空间。二.JavaScript中的垃圾回收（GC）算法GC算法：GC是一种机制，就是垃圾回收器如何完成具体的工作，工作内容就是查找垃圾释放空间、回收空间，算法就是工作时查找和回收.
2020-11-23 22:08:35
195
原创 TypeScript 一种强类型的前端语言
一. 认识TypeScript（简称TS）TypeScript语言是Javascript语言的超集, 最终会编译成Javascirpt。TypeScript = Javascript + 类型系统 + ES6+。相比Flow, TS作为一门完整的编程语言，功能更强大、生态更健全。Angular Vue.js3 都开始使用TypeScript。TS非常适合用于大型、长期项目的开发，对于短期小项目而言，增加的开发成本得不偿失。二. TypeScript的使用1.TypeScript.
2020-11-20 19:57:21
1742
原创 Flow 一个JavaScript静态类型检测器
项目网址：https://gitee.com/big-right-right/flow_-a_-static_-type_-checker_-for_-java-script## 介绍Flow (一个 JavaScript 静态类型检测器)## Flow开发工具插件 (Flow Language Support)在vscode中安装插件 Flow Language Support，则不符合类型检查的代码都会被标记出来## 安装和检查1. 通过如下步骤安装 flow-...
2020-11-16 22:16:20
196
原创 Javascirpt是一种弱类型、动态类型的语言
一. 从编程语言的分类来看Javascript1. 该语言是否允许随意的隐式类型转换？ 允许随意的隐式类型转换：弱类型（Javascript） 不允许随意的隐式类型转换：强类型2. 该语言是否允许随意地修改变量的类型？ 允许随意地修改变量类型：动态类型（Javascript） 不允许随意地修改变量类型：静态类型 动态类型的语言，直到运行阶段才能确定变量的类型，变量的类型还可以随时发生变化。 3. Javascript是一门弱类型、动态类型的语言...
2020-11-16 22:08:22
293
原创 ECMAScript新特性-学习笔记
一. ECMAScript概述1. ECMAScript与Javascript直接的关系ECMAScript只提供最基本的语法，而Javascirpt还包含运行平台提供的API。在浏览器环境中的 Javascript相当于：ECMAScript 加上 Web APIs(BOM、DOM)。在node环境中的 Javascript相当于： ECMAScript 加上 Node APIs(fs net etc.)。2. ECMAScript（ES）版本迭代从2015年开始ES开始保持每年一个版
2020-11-15 14:20:45
168
原创 异步编程-学习笔记
一、认识异步编程1.同步模式和异步模式Javascript设计初衷是为了在浏览器里满足网页交互的需要，所以设计为单线程模式，简单、安全，但如果某段代码执行很费时，就会造成后面代码的延迟执行（页面假死）。于是Js将任务的执行模式分成两种：同步模式、异步模式。同步模式的执行顺序就是排队执行，前面的执行完毕，后面的再执行。异步模式则是开启一个任务后，不会等待任务执行完毕才开始下一个任务，而是开启一个任务后就开始下一个任务。同步或异步是说，执行环境提供的API是以同步还是异步的模式去工作。2
2020-11-11 17:58:27
536
原创 函数式编程-学习笔记
一、.认识函数式编程函数式编程的思想：把现实世界中事物与事物的联系抽象到程序中。即把数据处理的运算过程抽象出来。函数式编程的思想与面向对象编程的思想是并列的，面向对象编程思想是把现实世界中的事物抽象成程序世界中的类和方法。函数式编程中的函数指的是数学概念中的映射关系。函数式编程的好处是：抛弃this、打包过程中更好的利用tree shaking过滤无用代码、方便测试和并行处理、有丰富的库的支持如lodash ramda folktale。二、函数相关概念1.函数是一等公民函数可以
2020-10-31 20:47:30
169
原创 手写常用的正则
1. 匹配数字var reg = /[0-9]+/gi'123'.match(reg) // ["123"]'123abc456de8'.match(reg) // ["123", "456", "8"]reg.test(123)// truereg.test('123abc456de8')// true'123abc456de8'.replace(reg...
2020-04-02 15:54:27
288
原创 Javascript判断是否iphone全面屏手机
Javascript判断是否iphone全面屏手机：function testUA (str) { return navigator.userAgent.indexOf(str) > -1}// 判断是iphoneX及以后的iphone手机（即iphone带全面屏的手机）var isNewIphone = window && testUA('iPhone') &a...
2020-02-12 10:20:04
3671
原创 vue-cli3配置rem
1.安装cnpm i postcss-pxtorem --save2.项目根目录下新建 postcss.config.js 文件postcss.config.js 内容：module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 7'], ...
2019-11-28 11:59:56
1043
原创 async await使用小例
async, await是啥，有什么用？参考博文：https://segmentfault.com/a/1190000013292562思考：1. async 是一个关键字，相当于一个形容词，用来形容或者说修饰一个javascript function。 如：async function f1() { return 1 } 它的作用是让这个function的返回值变成一个 P...
2019-07-08 12:08:24
203
转载 mac如何安装mySql
1.安装参考：https://blog.csdn.net/catstarxcode/article/details/789403852.安装后连接报错：mac下MySql启动连接报错：Authentication plugin ‘caching_sha2_password’ cannot be loaded: dlopen(/usr/local/mysql/lib/plugin/cachin...
2019-07-06 12:51:39
110
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人