在正文开始之前，先了解vue基于源码构建的两个版本，一个是 runtime only ，另一个是 runtime加compiler 的版本，两个版本的主要区别在于后者的源码包括了一个编译器。 什么是编译器，百度百科上面的解释是 简单讲，编译器就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。一个现代编译器的主要工作流程：源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (...
?“ 本文主要梳理一下vue代码的目录，以及vue代码构建流程，旨在对vue源码整体有一个认知，有助于后续对源码的阅读。” 一、目录结构上图是对vue的代码的所有目录进行的梳理，其中源码位于src目录下，下面对src下的目录进行介绍。 compiler 该目录是编译相关的代码，即将 template 模板转化成 render 函数的代码。 vue 提供了 render 函数，render 函数作用是用来创建 VNode，但在平时开发中，绝大多数情况下使用 template 来创建 ...
接下来重点来看Vue的数据响应系统。我看很多文章在讲数据响应的时候先用一个简单的例子介绍了数据双向绑定的思路，然后再看源码。这里也借鉴了这种方式，感觉这样的确更有利于理解。数据双向绑定的思路1. 对象先来看元素是对象的情况。假设我们有一个对象和一个监测方法：const data = {a: 1 }; /** * exp[String, Function]: 被观测的字段 * fn[Function]: 被观测对象改变后执行的方法 */ function watch (exp, fn) {}我们可以调用...
变量---->局部变量和全局变量, 作用域：在某个空间范围内，可以对数据进行读写操作 局部作用域和全局作用域 js中没有块级作用域—一对括号中定义的变量,这个变量可以在大括号外面使用 函数中定义的变量是局部变量 作用域链:变量的使用,从里向外,层层的搜索,搜索到了就可以直接使用了 层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错在 JavaScript 中, 对象和函数同样也是变量。 在 JavaScript 中, 作用域为...
不像 express 中在末尾处注册一个声明为 (err, req, res, next) 中间件的方式，koa 刚好相反，在开头进行注册。 app.use(async (ctx, next) => {try {await next();} catch (err) {ctx.status = err.status || 500;ctx.body = err.message;ctx.app.emit("error", err, ctx);} }); 这样程序中任何报错都会收敛到此处。此时可以方便地将错误打印到页面，开发时非常便捷。 + ctx.app.emit(error, err, ctx);koa 也建议通过 app 来派...
Vue的响应式系统Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身，而不用手动处理数据到视图的渲染，避免了繁琐的 DOM 操作，提高了开发效率。 vue 的响应式系统依赖于三个重要的类：Dep 类、Watcher 类、Observer 类，然后使用发布订阅模式的思想将他们揉合在一起（不了解发布订阅模式的可以看我之...
一,介绍与需求 1.1,介绍 1, officegen 模块可以为Microsoft Office 2007及更高版本生成Office Open XML文件。此模块不依赖于任何框架，您不需要安装Microsoft Office，因此您可以将它用于任何类型的 JavaScript 应用程序。输出也是流而不是文件，不依赖于任何输出工具。此模块应适用于支持Node.js 0.10或更高版本的任何环境，包括Linux，OSX和Windows。 2, textract 文本提取节点模块。 3, pdf2json 是一个节点。js模块解析和转换...
最近在学Vue，感觉很难理解，学不懂。昨天晚上开始第一个页面的搭建，脑子感觉通了一点，大概知道该怎么做了。 在放置轮播图时，要调用很多图片，图片路径在data的一个数组里，用v-for循环（因为还不会做轮播图，从网上找的代码）图片路径是对的，但是不显示，就用普通img标签放了个图片看了一下，这样网页上却变成了这样于是我把每个图片都放了一次，把每个解析后的地址都粘贴在数组里，成了但是这种方法也太蠢了，以后不能也这样...
本文实例讲述了JavaScript解析机制与闭包原理。分享给大家供大家参考，具体如下： js解析机制： js代码解析之前会创建一个如下的词法环境对象（仓库）：LexicalEnvironment{ } 在扫描js代码时会把： 1、用声明的方式创建的函数的名字; 2、用var定义的变量的名字存到这个词法环境中; 3、同名的时候：函数声明会覆盖变量，下面的函数声明会覆盖上面的同名函数; 4、函数的值为：对函数的一个引用; 变量的值为undefined; 5、如果用函数...
前言 在 Web 开发中，有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。下面话不多说了，来一起看看详细的介绍吧 开始创建一个以下内容的 HTML 文件，并在浏览器中打开。 <html><head><title>JavaScript URL parsing</title></head><body><script>// 激动人心的代码即将写在这里</script></body> </html>如果你想尝试本文中的任何内容，可以将其放在 <script> 标记中，保存，重新加载页面，看看会发生什么！ 在本...
大家都知道vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看vuex下面的工作流程图通过官方文档提供的流程图我们知道，vuex的工作流程， 1、数据从state中渲染到页面； 2、在页面通过dispatch来触发action； 3、action通过调用commit,来触发mutation； 4、mutation来更改数据，数据变更之后会触发dep对象的notify，通知所有Watcher对象去修改对应视...
Decorator 提供了一种独特的抽象逻辑，可在原有代码基础上，零侵入添加新功能特性。商业代码总是多种交织并存的，在日常开发中，除了实现业务功能之外，我们还需要考虑诸如：异常处理、性能分析、日志等额外的需求。未经设计的的开发方法会倾向于将各种需求耦合组成一个功能模块，比如： class Math{static add(num1,num2){try{console.time(some label);log(log for something);const result= num1+num2;console.timeEnd(some lab...
本文实例讲述了微信小程序使用map组件实现解析经纬度功能。分享给大家供大家参考，具体如下： 声明 bug： 页脚的详细地址在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！ 解决办法：将该文本视图采用cover-view，放在map中。 感谢： 感谢Lrj_estranged指出问题！ 效果图实现原理 1. map组件实现定位标记或者指定定位标记，并保存location。 2. 采...
一、前置知识在理解koa-bodyparser原理之前，首先需要了解部分HTTP相关的知识。 1、报文主体HTTP报文主要分为请求报文和响应报文，koa-bodyparser主要针对请求报文的处理。 请求报文主要由以下三个部分组成： 报文头部空行报文主体而koa-bodyparser中的body指的就是请求报文中的报文主体部分。 2、服务器端获取报文主体流程HTTP底层采用TCP提供可靠的字节流服务，简单而言就是报文主体部分会被转化为二进制数据在网络中传输，所以服...
什么是AST 在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。 Virtual Dom Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点) 本文通过对源...