- 博客(14)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 cheeio常见用法学习笔记
cheeio是jquery核心功能的一个快速灵活而又简洁的实现，主要是为了用在服务器端需要对DOM进行操作的地方官方文档cheeio主要用于在服务端处理dom，例如一个get请求请求回来一个html页面，这个时候想要从这个页面中提取出来信息就可以用cheeioconst cheerio = require('cheerio'), $ = cheerio.load('<h2 class = "title">Hello world</h2>');$('h2.title
2021-01-18 23:23:08
971
原创 vue原理简单实现（三）
书接上文组件的依赖收集(watcher的收集) 定义一个watcher类在上一篇中说了组件挂载的一个过程在最后通过调用mountComponent来更新组件当时是直接调用的这个方法而在vue中是将这个方法放到watcher类中所以之前的方法应做相应的改动所以watcher是更新的函数function mountComponent(vm,el){ let updateComponent = ()=>{ vm._update(vm._render())
2021-01-18 00:20:22
184
原创 vue简单实现原理(二)
模板编译渲染模板的时候需要一个方法用数据代替模板中的变量(方法：render)先把模板变成一个render方法 reder(){return _l(3,_c(‘li’,name))}需要去当前实例上取值 width虚拟dom对象=》可描述dom结构 （diff算法）生成真实dom扔到页面中模板编译原理，AST语法树，先表示出html来=>js语法先看实例化的时候有没有el选项，如果有就直接挂载,挂载的时候需要一个方法mountVue.prototype.$moun
2021-01-17 15:26:36
384
原创 vue-router中的钩子函数
router.beforeEach(to,form,next)(全局前置守卫)beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）from: (Route路由对象) 当前导航正要离开的.
2021-01-17 15:22:20
283
原创 前端搜索功能
一般情况下搜索功能都是由后端同学去完成的，这些搜索功能对于后端同学来相对简单，也可以进行模糊搜索，只要用sql语句在数据控中检索一下返回给前端就好了，但是对于前端同学来说搜索功能写起来就比较麻烦了，尤其对于这种多层数据结构的今天把我在项目中遇到的搜索功能做个记录；我的需求是这样的：根据搜索框中输入的文字查找第三层数据所对应的关键字根据关键字将匹配的文字的中关键字高亮显示根据关键字所在层级将之所对应的第一集和第二集拼接起来数据结构的大概样式{ "code": "10", "t.
2021-01-15 19:00:27
2783
原创 flex相关知识及前端经典布局的实现记录
flex学习容器属性flex-direction属性:主轴方向，即项目的排列方向row:行，即横向排列 row-reverse:翻转排列顺序，column:列，纵向排列 column-reverse:反正列的排列顺序flex-wrap属性:用来定义主轴上一行或一列排列不下的换行方式nowrap:不换行wrap:换行wrap-reverse: 换行，第一行在下方flex-flow属性:属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row n
2020-12-27 22:26:27
102
原创 常用emmet语法笔记
div#test效果如下<div id="test"></div>div.test效果如下<div class="test"></div>节点 子节点：> 兄弟节点：+ 上级节点 ^div>ul>li>p<div> <ul> <li> <p></p> </li> </ul>.
2020-12-26 23:56:47
107
原创 vue原理简单实现(一)
书接上文点这里首先来说vue是个类，当实例化这个类的时候会传入一个对象例如：new Vue({ el:"#app", data(){ return { a:1 } }})这种传参的方式叫做options api在真实的vue中由于考虑到方便类的扩展问题，所以vue采用的是用构造函数的方式来写的function Vue(options){ this._init(options)// 入口方法，用来做数
2020-12-12 22:45:43
728
原创 vue原理前期准备工作之rollup
1.vue的打包工具vue的源码打包工具用的是一款专门用来打包js的工具rolluprollup的常见配置如下和webpack的配置也类似@bable/preset-env配置参考import babel from "rollup-plugin-babel"import serve from "rollup-plugin-serve"export default { input:'./src/index.js', // 入口文件 output:{ form
2020-12-11 13:05:36
542
原创 前端模块化中的各种规则及理解
转载地址模块作用域模块之间不需要考虑全局命名空间冲突的问题模块之间的通讯规则首先各个模块之间是相互依赖，相互关联的，例如cpu需要读取内存中的数据来进行计算，然后把计算结果交给了我们的操作系统既然相互关联，那么模块之间肯定可以相互通讯模块之间的相互通讯，也就意味着存在输入和输出模块通讯规则ES6出现之前就已经出现了js的模块加载规则，最主要的是AMD、CMD、commonjs；而commonjs主要应用于服务器端（nodejs）实现同步加载 AMD主要应用于浏览器端（requ
2020-12-09 10:12:08
212
1
原创 webpack常见用法（二）
path的区别和联系主要说的是output中的path、publicPath和devServer中的path、publicPath的区别output->path :打包后静态文件的输出目录output->pubicPat :插入到模板（index.html）中的文件（路径：publicPath+filename）有可能是cdn等devServer->path :告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从
2020-12-02 23:15:01
160
原创 webpack常见用法（三）
引入第三方插件1.直接引入 比较麻烦2.插件引入（ProvidePlugin） 不能在全局下使用new webpack.ProvidePlugin({ '_':"ladash",})3.expose-loader{ test:require.resolve('lodash'), loader:'expose-loader', options:{ exposes:{ globalName: "_",
2020-12-02 23:12:57
442
原创 前端常用的校验规则
身份证号校验规则 /** 身份证15位编码规则：dddddd yymmdd xx p* dddddd：6位地区编码* yymmdd: 出生年(两位年)月日，如：910215* xx: 顺序编码，系统产生，无法确定* p: 性别，奇数为男，偶数为女** 身份证18位编码规则：dddddd yyyymmdd xxx y* dddddd：6位地区编码* yyyymmdd: 出生年(四位年)月日，如：19910215* xxx：顺序编码，系统产生，无法确定，奇数为男，偶数为女* y: 校验码
2020-12-01 19:49:54
3355
原创 webpack常见用法（一）
webpack的简介https://www.webpackjs.com/concepts/ 中文官网webpack是一个现代化js应用程序的静态模块打包器,在处理应用程序时他会递归构建一个依赖关系图,包含应用程序所需的每个模块然后将这些模块打包成一个活多个bundlewebpack的配置是作为一个模块导出的webpack的基本配置项包括:一个项目的入口、出口、loader、插件、模式入口 entry 构建内部依赖图的开始位置module.exports = { entry:'./s
2020-11-25 19:19:24
110
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人