Lisong - 博客园

[置顶] eslint+prettier+husky+lint-staged 统一前端代码规范

摘要： eslint+prettier+husky+lint-staged 统一前端代码规范遵循编码规范和使用语法检测，可以很好的提高代码的可读性，可维护性，并有效的减少一些编码错误。 1、终极目标团队中的所有开发人员用一套代码规范规则，并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具，帮阅读全文

posted @ 2021-08-14 22:32 Lisong 阅读(1318) 评论(0) 推荐(1) 编辑

2022年8月11日

基于vue2.0原理-自己实现MVVM框架之computed计算属性

摘要：基于上一篇data的双向绑定，这一篇来聊聊computed的实现原理及自己实现计算属性。一、先聊下Computed的用法写一个最简单的小demo，展示用户的名字和年龄，代码如下： <body> <div id="app"> <input type="text" v-model="name"><b 阅读全文

posted @ 2022-08-11 10:42 Lisong 阅读(646) 评论(3) 推荐(3) 编辑

2022年7月4日

vue2.0 双向绑定原理分析及简单实现

摘要： Vue用了有一段时间了，每当有人问到Vue双向绑定是怎么回事的时候，总是不能给大家解释的很清楚，正好最近有时间把它梳理一下，让自己理解的更清楚，下次有人问我的时候，可以侃侃而谈😄。一、首先介绍Object.defineProperty()方法 //直接在一个对象上定义一个新属性，或者修改一个已经阅读全文

posted @ 2022-07-04 10:55 Lisong 阅读(1572) 评论(0) 推荐(3) 编辑

2021年8月13日

React Class组件生命周期

摘要：一、react组件的两种定义方式 1、函数组件，简单的函数组件像下面这样，接收Props，渲染DOM，而不关注其他逻辑 function Welcome(props) { return <h1>Hello, {props.name}</h1>;} 函数组件无法使用State，也无法使用组件的生命周期阅读全文

posted @ 2021-08-13 22:34 Lisong 阅读(759) 评论(0) 推荐(1) 编辑

2019年12月13日

基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用

摘要：一、解决什么问题 1、html中img引入的图片地址没有被替换，找不到图片 2、html公共部分复用问题，如头部、底部、浮动层等二、html中img引入图片问题解决 1、在index.html插入img，引用图片<img src="../../assets/img/test.jpeg"> 2、np 阅读全文

posted @ 2019-12-13 14:24 Lisong 阅读(1399) 评论(2) 推荐(1) 编辑

2019年12月11日

基于webpack实现多html页面开发框架七引入第三方库如jquery

摘要：一、解决什么问题 1、如何引入第三方库，如jquery等二、引入jquery方法 1、下载jquery.min.js放到assets/lib下面 2、安装copy-webpack-plugin，将已经存在的单个文件或整个目录复制到构建目录。命令：npm install copy-webpack-p 阅读全文

posted @ 2019-12-11 09:39 Lisong 阅读(762) 评论(0) 推荐(1) 编辑

2019年12月10日

基于webpack实现多html页面开发框架六提取公共代码

摘要：一、解决什么问题 1、如果a.js和b.js都引用了common.js，那在打包的时候common.js会被重复打入到a.js和b.js，造成重复打包 2、单独打包common.js对性能有帮助，浏览器下载一次后会缓存下来，不会重复下载二、未抽取公共代码的状况基于之前代码，测试如下： 1、在as 阅读全文

posted @ 2019-12-10 14:24 Lisong 阅读(658) 评论(0) 推荐(0) 编辑

2019年12月4日

基于webpack实现多html页面开发框架五开发环境配置 babel配置

摘要：一、解决什么问题 1、开发环境js、css不压缩，可在浏览器选中代码调试 2、开发环境运行http服务指向打包后的文件夹 3、babel输出浏览器兼容的js代码二、需要安装的包 babel-loader：输出浏览器兼容的js代码；命令：<!--?xml version="1.0" encoding 阅读全文

posted @ 2019-12-04 16:43 Lisong 阅读(541) 评论(0) 推荐(0) 编辑

2019年12月3日

基于webpack实现多html页面开发框架四自动写入多入口，自动插入多个htmlWebpackPlugin插件

摘要：一、解决什么问题 1、手写页面多入口，一个一个输入太麻烦，通过代码实现 2、手写多个htmlWebpackPlugin插件太麻烦，通过代码实现二、多入口代码实现修改module.exports的入口entry，注释掉原来手写的代码，改成上面的方法如下：三、多htmlWebpackPlugin插阅读全文

posted @ 2019-12-03 20:17 Lisong 阅读(666) 评论(1) 推荐(1) 编辑

2019年11月22日

基于webpack实现多html页面开发框架三图片等文件路径替换、并输出到打包目录

摘要：一、解决什么问题 1、图片路径替换、并输出到打包目录 2、输出目录清理二、需要安装的包 file-loader：html、css中图片路径替换，图片输出到打包目录；命令：npm install --save-dev file-loader url-loader：<!--?xml version=" 阅读全文

posted @ 2019-11-22 16:52 Lisong 阅读(703) 评论(0) 推荐(0) 编辑