【js】vue 2.5.1 源码学习 （十一） 模板编译compileToFunctions渲染函数
1. compileToFunctions定位
==> createCompiler = createCompilerCreator(function beasCompile(){}) // 创建编译器的编译器 编译器的爷爷。
==> beasOptions 编译器默认预留选项
==> createCompiler(beasOptions) 创建一个编译器。返回一个对象
==> { compile: function{} ,conpileToFunctions:function{} }
==> compileToFunctions(template,{用户配置和兼容},this)
==> createCompilerCreator(beasCompile){
return function createCompiler(beasOptions){
function compiler(template,options){
// 编译器核心方法
}
return {
compile: compiler,
conpileToFunctions: createComilpeToFunctionFn(compiler)
}
}
}
==> createComilpeToFunctionFn(compile){
// 缓存对象 存储 编译结果
var cache = Object.create(null)
return function comilpeToFunctions(template,options,vm) {
try{
new Function('return 1')
}catch(e){
if(e.toString().match(/unsafe-eval|csp/)){
console.error('您当前的环境禁止不安全评估的内容安全策略，模版编译无法在此环境中工作')
}
}
var key = template
// 缓存作用，编译过后不重复编译
if(!cache[key]){
return cache[key]
}
var compiled = compile(template,options)
/// comilped.errors 错误信息 compiled.tips 提示信息
if（）{} if(){}
var res = {}
var fnGenErrors = []
res.render = createFuntion(compiled.render,fnGenErrors);
res.staticRenderFns = compiled
return res; }
}
==> compiler(template,options){
finalOptions =
errors = [] tips = []
// if(options) 检测用户有那些自定义配置，最终扩展到 finalOptions
var compiled = beasCompile(template,finalOptions)
errors tips
return compiled;
}
==> beasCompile(template,options){
// 把模版解析成抽象的语法树(AST) parse 函数
// 根据给点的AST 生成目标平台需要的代码 “函数题的字符串” generate() 函数new Function()
var ast = pares()
var code = generate(ast,options); // 函数体字符串
return {
// ast:ast,
render:code.render, // 渲染函数
// staticRenderFns: code.staticRenderFns }
}
==> createFuntion(code,error){
try{
new Function(code)
}catch(){ }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第九课</title>
</head>
<body>
<div id="app">
<!-- <huml></huml> --> </div>
<script src="vue.js"></script>
<!-- <script src="vue2.5.1.js"></script> -->
<script type="text/javascript">
var componentA = {
el: "#app"
}
var vm = new Vue({
el:"#app",
data: {
message: "hello Vue",
key: "wodow",
test: 1, list: {
b:1
},
aa:{
b: [1,2,3]
}
},
beforeCreate: function(){
console.log('我钩子函数beforeCreate') },
mounted: function(){
this.url = 'eeeee'
},
components:{
humle: componentA
}
})
vm.test = 2;
// console.log(vm.aa)
</script>
</body>
</html>
如有问题或者疑惑，欢迎评论。
【js】vue 2.5.1 源码学习 （十一） 模板编译compileToFunctions渲染函数的更多相关文章
- 【js】vue 2.5.1 源码学习 （十） $mount 挂载函数的实现
大体思路(九) 本节内容: 1. $mount 挂载函数的实现. // 将Vue.prototype.$mount 缓存下来 ==>mountComponet(this,el) { // 组建挂 ...
- 如何实现全屏遮罩（附Vue.extend和el-message源码学习）
[Vue]如何实现全屏遮罩(附Vue.extend和el-message源码学习) 在做个人项目的时候需要做一个类似于电子相册浏览的控件,实现过程中首先要实现全局遮罩,结合自己的思路并阅读了(饿了么) ...
- 【js】 vue 2.5.1 源码学习（十二）模板编译
大体思路(十) 本节内容: 1. baseoptions 参数分析 2. options 参数分析 3. parse 编译器 4. parseHTNL 函数解析 // parse 解析 parser- ...
- 【js】vue 2.5.1 源码学习 （九） 响应数组对象的变
大体思路(八) 本节内容: 1.Observe 如何响应数组的变化 代理原型 数组变异方法 shell cacheArrProto methods 新添加的数组需要加到显示系统里面,拦截 push等的 ...
- 【js】Vue 2.5.1 源码学习 （八）响应式入口observe
大体思路(七) 本节内容: deps 依赖收集的数组对象 => Dep 构造函数 /** ==> observe() * var ob * ==> if --isObject * = ...
- 【js】vue 2.5.1 源码学习 （七） 初始化之 initState 响应式系统基本思路
大体思路(六) 本节内容: 一.生命周期的钩子函数的实现 ==> callHook(vm , 'beforeCreate') beforeCreate 实例创建之后 事件数据还未创建 二.初始化 ...
- 【js】 vue 2.5.1 源码学习（六） initProxy initLifeCycle 渲染函数的作用域代理
大体思路 (五) 1. initProxy 渲染函数的作用域代理 ==> es6 如果支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty() prox ...
- 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- 【js】 vue 2.5.1 源码学习（五） props directives规范化 props 合并策略
大体思路 (四) 上节回顾: A: 对于生命周期函数将父子组件的函数放到一个数组里面,特定时间点调用,保证父子组件函数都调用到. B: 对于directive,filters,components 等 ...
随机推荐
- 【心有猛虎】react-lesson
这个项目标识:构建一套适合 React.ES6 开发的脚手架 项目地址为:https://github.com/ZengTianShengZ/react-lesson 运行的是第一课,基本上可以当作是 ...
- JFinalConfig
概述 基于JFinal的web项目需要创建一个继承自JFinalConfig类的子类,该类用于对整个web项目进行配置. JFinalConfig子类需要实现六个抽象方法,如下所示: public c ...
- awss3
import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.io ...
- Directx11教程(59) tessellation学习(1)
原文:Directx11教程(59) tessellation学习(1) 在D3D11管线中,新增加了3个stage, Hull shader, Tessellator, Domain s ...
- Directx11教程(50) 输出depth/stencil buffer的内容
原文:Directx11教程(50) 输出depth/stencil buffer的内容 有时候,我们需要查看depth/stencil buffer的内容,比如上一章中,我们要查看sten ...
- 利用UIWebView打造一个炫酷的视频背景视图（OC & Swift）
http://www.cocoachina.com/ios/20151023/13860.html 2015-10-6更新:适配 Swift2.0 如有需要,可以通过pjin.elvin@gmail. ...
- 关于serialize() FormData serializeArray()表单序列化
serialize() FormData serializeArray()都是序列化表单,实现表单的异步提交 但是serialize()和serializeArray()都是只能序列化表单中的数据 ...
- hdu1536 sg打表
标记数组用bool型防止超时.输入的f[ ]要排序. #include<stdio.h> #include<string.h> #include<algorithm> ...
- [***]沙雕低错集（算起来因为低错挂掉的分快够我AK三场了……）
由于沙雕错太多了所以不想写了,看着就难受…… 各种沙雕错(自从上次考试开始各种犯沙雕低错……): !!!sort是不稳定的排序,如果排序结构题只按其中一个关键字排序,那么在关键字相等时,排序多次的结果 ...
- 【ToReadList】六种姿势拿下连续子序列最大和问题，附伪代码（以HDU 1003 1231为例）（转载）
问题描述: 连续子序列最大和,其实就是求一个序列中连续的子序列中元素和最大的那个. 比如例如给定序列: { -2, 11, -4, 13, -5, -2 } 其最大连续子序列为{ 11, ...