【js】vue 2.5.1 源码学习 (十一) 模板编译compileToFunctions渲染函数
2024-08-31 15:40:15
大体思路(九)
本节内容:
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(){ }
}
2. compileToFunctions 作用
3. 模版编译代码组织结构
本节将新内容分开写到compileToFunctions 分析学习后,在合并到vue.js,如下是compileToFunctions.js
compileToFunctions.js
index.html代码如下
<!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>
如有问题或者疑惑,欢迎评论。
最新文章
- [原创]java WEB学习笔记108:Spring学习---基于配置文件的形式实现AOP
- linux-10 基本命令之查看内存使用情况- free,history,who,last
- Android二维码识别 开源项目ZXing的编译
- OmniPlan文档链接
- thinkphp框架验证码验证一次
- ZMQ 在linux进程 和分布式之间的通信
- python基本数据结构-字典-方法
- 第一个简单的DEMO
- js设计模式(8)---享元模式
- ubuntu 映射网络驱动器到本地
- Linux 命令 - jobs: 显示后台作业的状态信息
- 【HDOJ】1239 Calling Extraterrestrial Intelligence Again
- Linux安装Jdk,CentOS安装Jdk
- prototype vs __proto__ 之间关系
- 深入理解C指针之五:指针和字符串
- NHibernate Session-per-request and MiniProfiler.NHibernate
- /etc/rc.local 与 /etc/init.d Linux 开机自动运行程序
- [原创]iFPGA-USB2.0 FT2232H USB &; UART开发板使用说明
- [原]CentOS 7.2 1511部署L2TP/IPsec服务器及客户端
- Springmvc 整合 jetbrick 实例
热门文章
- 【风马一族_Android】无线连接|调试Android手机
- vsync信号产生与分发
- JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
- 【JZOJ4755】【NOIP2016提高A组模拟9.4】快速荷叶叶变换
- TZOJ4777: 方格取数
- 重磅!容器集群监控利器 阿里云Prometheus 正式免费公测
- 杨柳目-杨柳科-Info-新闻:让中国人焦虑的杨絮背后,隐藏着“拯救”北京的秘密!
- hdu1564 简单博弈
- 利用IDEA构建springboot应用-如何优雅的使用mybatis
- postman post 数据格式