離開 nodejs Vue 插件，自動加載vue文件

時間 2019-12-08

標籤離開 nodejs vue 插件自動加載文件简体版

原文原文鏈接

接上回vue

一些本質數組

　　本質上，vue，無非是維護options，每一個Vue對象的初始化配置對象不觸及Vue內部而言，在外部想怎麼改都是能夠的，只要保證options的正確，一切都不是問題。服務器

讀取this

　　讀取不用再聊了，一句話，遠程請求，只要服務器答應，這個不麻煩。url

讀取以後的處理spa

　　上回，忙着把他渲染出來，因此都沒想過其餘事情，那可作的事情其實不少。插件

例如code

　　1. 放到localstrage裏面存起來，這對於複用組件是會提速不少的不用http協議傳輸，只在本地讀取一個字符串component

　　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)