Идеи компонентов sfc для удаленной загрузки Vue

Vue.js

вопрос

В нашем проекте vue (особенно в бэкэнд-системе) всегда будут сценарии, требующие нескольких бизнес-направлений для совместной разработки одного и того же проекта.Если каждая бизнес-команда предоставляет проекту какие-то общие бизнес-компоненты, но эти компоненты нельзя объединить с Упаковывать проект, потому что проект не может быть повторно собран и выпущен из-за частых изменений в приватном модуле.

^_^ Не рекомендуется использовать в продакшене, код содержит eval

идеи

В этом сценарии нам нужно развернуть общедоступные бизнес-компоненты на сервере, а клиент будет запрашивать и отображать компоненты.

Сервер анализирует файл .vue

Используйте синтаксический анализатор шаблонов vue-template-compiler для анализа SFC (однофайловый компонент)

const compile = require('vue-template-compiler')

// 获取sfc组件的源码
const str = fs.readFileSync(path.resolve(__dirname, `../components/sfc.vue`), 'utf-8')

// vue-loader内置，现在用来解析SFC（单文件组件）
let sfc = compile.parseComponent(str)

// 获取sfc组件配置
let sfcOptions = getComponentOption(sfc)

getComponentOption Получить конфигурацию компонента sfc

import { uuid } from 'utilscore'
import stylus from 'stylus'
import sass from 'sass'
import less from 'less'
const getComponentOption = sfc => {
    // 生成data-u-id 
    const componentId = uuid(8, 16).toLocaleLowerCase()    
    // 标签添加data-u-id属性    
    const template = sfc.template ? tagToUuid(sfc.template.content, componentId) : ''   
    // 转化style（less、sass、stylus）    
    let styles = []    
    sfc.styles.forEach(sty => {        
        switch (sty.lang) {            
            case 'stylus':                
                stylus.render(sty.content, (err, css) => styles.push(formatStyl(sty, css, componentId)))                
                break;            
            case 'sass':            
            case 'scss':                
                styles.push(formatStyl(sty, sass.renderSync({ data: sty.content }).css.toString(), componentId))                
                break;            
            case 'less':                
                less.render(sty.content, (err, css) => styles.push(formatStyl(sty, css, componentId)))                
                break;        
        }    
    })    
    let options = {        
        script: sfc.script ? $require(null, sfc.script.content) : {},        
        styles,        
        template    
    }    
    return JSON.stringify(options, (k, v) => {
        if(typeof(v) === 'function') {
            let _fn = v.toString()
            return /^function()/.test(_fn) ? _fn : fn.replace(/^/,'function ')
        }
        return v
    })
}

tagToUuid добавляет data-u-id к тегу в шаблоне

const tagToUuid = (tpl, id) => {    
    var pattern = /<[^\/]("[^"]*"|'[^']*'|[^'">])*>/g    
    return tpl.replace(pattern, $1 => {        
        return $1.replace(/<([\w\-]+)/i, ($2, $3) => `<${$3} data-u-${id}`)    
    })
}

formatStyl обрабатывает стили в ограниченной области

const formatStyl = (sty, css, componentId) => {    
    let cssText = css    
    if (sty.scoped) {        
        cssText = css.replace(/[\.\w\>\s]+{/g, $1 => {            
        if (/>>>/.test($1)) return $1.replace(/\s+>>>/, `[data-u-${componentId}]`)            
        return $1.replace(/\s+{/g, $2 => `[data-u-${componentId}]${$2}`)        
        })    
    }    
    return cssText
}

$require выполняет в нем код JavaScript и возвращает значение

const $require = (filepath, scriptContext) => {
    const filename = path.resolve(__dirname, `../${filepath}`);    
    const module = { exports: {} }    
    let code = scriptContext ? scriptContext : fs.readFileSync(filename, 'utf-8')    
    let exports = module.exports    
    code = `(function($require,module,exports,__dirname,filename){${code}})($require,module,exports,__dirname,filename)`    
    eval(code)    
    return module.exports
}

Клиент запрашивает компонент и отображает его

Инкапсулируйте внешний удаленный компонент-remote.vue

<template>  
    <component :is="remote" v-bind="$attrs" v-on="$listeners"></component>
</template>
<script>
import Vue from "vue";
export default {  
    data() {    
        return {      
            remote: null    
        }
    },  
    props: {    
        tagName: {      
            type: String,      
            defualt: "componentName"    
        }  
    },  
    created() {    
        fetch("http://localhost:3000/getComponent/"+this.tagName)
            .then(res => res.json())      
            .then(sfc => {        
                let options = this.parseObj(sfc);        
                options.styles.forEach(css => this.appendSty(css));        
                this.remote = Vue.extend({ 
                    ...options.script,          
                    name: options.script.name || this.tagName,          
                    template: options.template        
                });      
            });  
     },  
     methods: {    
        isObject(v) {      
            return Object.prototype.toString.call(v).includes("Object");    
        },    
        parseObj(data) {      
            if (Array.isArray(data))  return data.map(row => this.parseObj(row));      
            if (this.isObject(data)) {        
                let ret = {};        
                for (let k in data) {          
                    ret[k] = this.parseObj(data[k]);       
                 }        return ret;      
            }      
            try {        
                let pattern = /function ([\w]+)\(\) \{ \[native code\] \}/;        
                if (pattern.test(data)) {          
                    return window[pattern.exec(data)[1]];        
                } else {          
                    let evalData = eval(`(${data})`);          
                    return typeof evalData == "function" ? evalData : data;        
                }      
            } catch (err) {        
                return data;      
            }    
        },    
        appendSty(css) { // 生成组件样式      
            let style = document.createElement("style");      
            style.setAttribute("type", "text/css");      
            var cssText = document.createTextNode(css);      
            style.appendChild(cssText);      
            var head = document.querySelector("head");     
            head.appendChild(style);    
        }  
}};
</script>

Практика удаленных компонентов

Компоненты sfc на стороне сервера, обратите внимание, что блок javascript должен быть экспортирован с использованием module.exports, а скрипт импорта должен использовать $require

<template>  
    <div class="test">    
        <div>      
            <p @click='$emit("handleClick",'点我')'>远程组件--{{msg}}--{{text}}</p>    
            </div>  
        </div>
</template>
<script>
// 加载js脚本
let {a} = $require('utils/test.js') 
module.exports = {  
    data: function() {    
        return {      
            msg: "remote component",
            ...a,
        }  
    },  
    props: {    
        text: {      
            type: Boolean,      
            default: true    
        }  
    },
    mounted:function(){
        console.log('prop text is',this.text)
    }
};
</script>
<style lang="stylus" scoped>
.test {  
    .test2 {    
         color: red;  
    }  
    p{    
         color:red  
    }
}
</style>

рендеринг на стороне клиента

// temolate
<remote text='123456' @handleClick='handleClick'/>

// script 
methods:{
  handleClick(v){
     console.log(v) // 点我  }
}


Категории