大体思路(九)
本节内容:
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>

如有问题或者疑惑,欢迎评论。

 

最新文章

  1. [原创]java WEB学习笔记108:Spring学习---基于配置文件的形式实现AOP
  2. linux-10 基本命令之查看内存使用情况- free,history,who,last
  3. Android二维码识别 开源项目ZXing的编译
  4. OmniPlan文档链接
  5. thinkphp框架验证码验证一次
  6. ZMQ 在linux进程 和分布式之间的通信
  7. python基本数据结构-字典-方法
  8. 第一个简单的DEMO
  9. js设计模式(8)---享元模式
  10. ubuntu 映射网络驱动器到本地
  11. Linux 命令 - jobs: 显示后台作业的状态信息
  12. 【HDOJ】1239 Calling Extraterrestrial Intelligence Again
  13. Linux安装Jdk,CentOS安装Jdk
  14. prototype vs __proto__ 之间关系
  15. 深入理解C指针之五:指针和字符串
  16. NHibernate Session-per-request and MiniProfiler.NHibernate
  17. /etc/rc.local 与 /etc/init.d Linux 开机自动运行程序
  18. [原创]iFPGA-USB2.0 FT2232H USB &amp; UART开发板使用说明
  19. [原]CentOS 7.2 1511部署L2TP/IPsec服务器及客户端
  20. Springmvc 整合 jetbrick 实例

热门文章

  1. 【风马一族_Android】无线连接|调试Android手机
  2. vsync信号产生与分发
  3. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
  4. 【JZOJ4755】【NOIP2016提高A组模拟9.4】快速荷叶叶变换
  5. TZOJ4777: 方格取数
  6. 重磅!容器集群监控利器 阿里云Prometheus 正式免费公测
  7. 杨柳目-杨柳科-Info-新闻:让中国人焦虑的杨絮背后,隐藏着“拯救”北京的秘密!
  8. hdu1564 简单博弈
  9. 利用IDEA构建springboot应用-如何优雅的使用mybatis
  10. postman post 数据格式