标签：路径 == let 检查 code 存储 脚手架 http 重定义
接上回
一些本质
本质上，去脚手架也好，读取vue文件也好，无非是维护options，每个Vue对象的初始化配置对象不触及Vue内部而言，在外部想怎么改都是可以的，只要保证options的正确，一切都不是问题。
读取
读取不用再聊了，一句话，远程请求，只要服务器答应，这个不麻烦。
读取之后的处理
上回，忙着把他渲染出来，所以都没想过其他事情，那可做的事情其实很多。
例如
1. 放到localstrage里面存起来，这对于复用组件是会提速很多的不用http协议传输，只在本地读取一个字符串
2. 或者在本地存成vue文件，随时读取都可以
3. 更异想天开的可以组织好options发回服务器，下次一次性读上来，也没问题，似乎触及了某些编译的原理，想想罢了，再研究。
因为
想法很多，还是不要好高骛远，js 对对象序列化这一部分，我还没来得及百度，也不知道对象的方法要如何存储，只有整篇vue存起来，现在看还是比较简单的。
为了极大的简化（偷懒）vue文件的编制工作，import 什么的不如一步到位都省略掉，开发者无需关心组件的加载问题，只要写好关联即可，就像这样
<template>
<div>
<p>this is father,he has a son</p>
<p>{{msg}}</p>
<button @click="say">say</button><button @click="saytoson">saytoson</button>
<son :msgfromfather = msgtoson></son>
<hr></hr>
</div>
</template>
<script>
{
name:‘father‘,
data:function(){return{
msg:"",
msgtoson:""
}},
methods:{
say:function(){
this.msg="father said:Hello there!"
},
saytoson:function(){
this.msgtoson = "father said to son:hi,son"
}
},
components:[‘components/son‘]
}
</script>
<style>
</style>
script部分，不再有任何涉及到调用组件方法的部分，把 components属性变成数组，直接存储目标的路径即可，在解析过程中自动替换成包含 子组件对象的对象即可
转换完应该类似components:{{name:‘son‘,methods ... .}}这样的对象，想法到了，一切都是顺其自然的，因为代码实际上是最简单的部分。
新鲜出炉的插件就像下面这样。
var vcl = { install: function(Vue, Options) { Vue.create = function(options) { importCpts(options) return new Vue(options) } importCpts = function(options) { //存在组件列表 if(options.components) { //组件列表是数字 if(options.components instanceof Array) { var tmpCpts = options.components options.components = {} tmpCpts.forEach(function(item) { var newCptOption = LoadFile(item) options.components[newCptOption.name] = newCptOption }) } } } LoadFile = function(url) { var url1 = window.location.href + url + ‘.vue‘ var context = "" var result = {} var stg = localStorage.getItem(url1) if(stg) { context = stg } else { RequestVue(url1, function(r) { context = r localStorage.setItem(url1,context) }) } if(context) { var script = GetTagContext(‘script‘, context) var options = eval("(" + script + ")") importCpts(options) options.template = GetTagContext(‘template‘, context) result = options } return result } function RequestVue(url, cb) { let request = new XMLHttpRequest() request.user = ‘‘ request.open(‘GET‘, url, false) request.send(null) if(request.status === 200) { cb(request.responseText) } } function GetTagContext(tag, str) { var reg = new RegExp("<" + tag + ">([\\s\\S]*)<\/" + tag + ">") var matchs = reg.exec(str) return matchs[1] } } } Vue.use(vcl)
直接把 new Vue也包装起来，所有optinos在使用之前，都去importCpts一下，去检查有没有子组件components存在，有就load一下，没有就过。清晰明了
并且，如果需要加载，也先去localstrage去看一眼，有的化就不用远程加载了，省事了。
重定义的一些东西
因为插件的原因，对vue文件，和项目重新定义了一些格式上的规范
1. 入口
Vue.create() 方法，该方法接受一个options，也可以简写成 Vuecreate({el:‘#xxx‘ .. ...})
2. vue文件中 <script> 部分，直接{...} 无需加载组件
3. components变成数组 like components:[‘subcomponentspath‘] , 该数组存储子组件的路径，路径的格式是 目录/文件名，无后缀，所有组件是从根目录开始的，懒，没研究相对路径，先这么写吧
4. 其他的，自己去发现吧，想不起来了。
未完待续，后面再去便利化，是唯一的目标。
标签：路径 == let 检查 code 存储 脚手架 http 重定义
原文地址：https://www.cnblogs.com/allofalan/p/9668265.html
