![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
amurocrash
这个作者很懒,什么都没留下…
展开
-
读源码(七)—— ejs
ejs是一个轻量的模板渲染引擎,通过简单的<%%>标签就能实现简单的模板渲染。本文仅针对<%%>和<%=%>两个常用标签进行分析。 入口代码,api保持了与ejs完全一致 const ejs = require('./ejs') const html = '<%if(test){%><div><%=user.firstName%></div><%}else{%><%=user.lastName%>&原创 2022-04-12 16:08:18 · 673 阅读 · 0 评论 -
170行写一个vuex
Vuex源码不多,1000多行,排除各种报错,兼容,语法糖和拓展功能,其实就干了两件事: 1、把外部传入的store对象组织成了一棵树型的数据结构 2、把state和getters的数据变成响应式,保证界面中可以双向绑定 按照这个需求,结合vuex的实现思路自己写了个vuexx,个人一直不太接受vuex3里的面向对象组织形式,深入源码可以看到state和action、mutation等的组织方式是不太一样的,比如state.module.type 和 dispatch(‘module/type’),太蛋疼了原创 2021-06-29 21:28:50 · 141 阅读 · 0 评论 -
读源码(六)—— Vue响应式
例子: <template> <div id="app"> <img src="../assets/logo.png"> <div v-if="flag"> {{msg}} </div> <div v-else> {{msg1}} </div> <button @click="change">change</button>原创 2020-12-19 22:53:34 · 180 阅读 · 0 评论 -
读源码(五)—— new Vue
标准Vue HelloWorld的例子(内容简化): // main.js new Vue({ el: '#app', render: h => h(App) }) // App.vue <template> <div id="app"> <img src="./assets/logo.png"> <hello-world></hello-world> </div> </template&g原创 2020-12-15 10:59:05 · 105 阅读 · 0 评论 -
前端日常tips记录
持续更新… 一、div嵌套的事件拦截 网上能查到的大多是拦截冒泡,但下面的例子是拦截事件往内部传递,在外部就拦截掉 <div class="outer" @click.capture="outerClick($event)"> <div class="inner" @click="innerClick($event)"></div> </div> outerClick(event) { console.log('outer') event.s原创 2020-12-02 18:29:04 · 205 阅读 · 3 评论 -
读源码(四)—— js Promise
写了一些示例还有仿源码自己实现一个简单的MyPromise,主要内容都在代码注释中: class PromiseTest { static test1() { const p = new Promise((resolve, reject) => { // resolve('result1') reject(new Error('error1')) }) p.then(result => { console.log(result)原创 2020-07-04 21:56:07 · 182 阅读 · 0 评论 -
自己写代码理解Vue的数据双向绑定
重要代码的作用都写在代码注释中了。 核心点: 1、Object.defineProperty(),相当于给相关属性在取值和赋值时增加proxy,可以执行proxy中的功能,这里就是在get是进行双向绑定 2、Compiler的本质就是遍历html文档,把按照vue规范定的字段找出来做处理。比如{{deep.a}}取出来之后,从vm实例中拿出真实的值把{{deep.a}}替换掉。 <!DOCT...原创 2020-02-14 13:11:14 · 155 阅读 · 0 评论