开发一款框架之前，首先确认的就是采用哪种结构？从哪里入手？开发完成后是否会健壮？带着这些问题，我们一起可以看看常规开发一款框架需要具备哪些固定的结构模式。

框架的开发，涉及的先决定条件很多，采用哪种语言？选择共建还是自主研发？是服务于业务型还是纯公共支撑等等。辅助手段也不少，使用哪种自动化测试方案和规则？选择哪些脚手架做底座？选择哪些插件作为助力？使用哪些IDEA作为开发利器等等。以上这些都不是笔者所谈论的框架设计的固定结构和模式，本篇所谈部分内容可能很多小伙伴不会在使用，但笔者期望读者们能够了解原理，拓展自己的思路。那么我们一起看看都有哪些重点要素吧。

命名空间

为什么把命名空间放到了第一，这也是笔者认为很重要的要素，在常规的原生JS开发过程中，伴随项目越来越大，你不知道哪里会重名冲突，哪里会将你的方法或者变量覆盖。面对这种情况，往往解决方案都是率先找到命名空间的方式，去管理和分配各个模块，各个模块之间的交流都通过指定的命名头进行交流，让信息到位更准确，也避免命名泛滥的问题。以上只是工程级别的解决方案，但在框架当中，往往也是这样，那么如何去做？ · Object对象进行扩展 常规对象扩展模式Nv.tool Nv.tool.moment 等,这种扩展方式常见于项目应用中去使用，包含项目中各个模块的变量共享和对外暴露方法调用方式。但框架在使用扩展的时候常规是基于Prototype 的原型扩展，但在多库共存年代，往往框架库重名那就是灾害性的，只能被迫修改源码或者转换其他框架。 · ES6 和 CommonJS 模块的划分方式可以说带来了便利性，将各个模块拍平，哪怕重名也可以再引入的时候进行别名替换，目前工程级别和框架都在使用

import {

baseCompile,

baseParse,

CompilerOptions,

CodegenResult,

ParserOptions,

RootNode,

noopDirectiveTransform,

NodeTransform,

DirectiveTransform

} from '@vue/compiler-core'

import { parserOptions } from './parserOptions'

import { transformStyle } from './transforms/transformStyle'

import { transformVHtml } from './transforms/vHtml'

import { transformVText } from './transforms/vText'

import { transformModel } from './transforms/vModel'

import { transformOn } from './transforms/vOn'

import { transformShow } from './transforms/vShow'

import { transformTransition } from './transforms/Transition'

import { stringifyStatic } from './transforms/stringifyStatic'

import { ignoreSideEffectTags } from './transforms/ignoreSideEffectTags'

import { extend } from '@vue/shared'

对象扩展

这种方式其实就是针对命名空间的一种补充方法，传统的方案就是直接在命名空间上进行添加对应的名称，这也会在多人协作中出现命名冲突的现象，如何避免就是需要使用工具类进行申请。

最简单的拓展方法

function extend(dest,source){

for(let item in source){

dest[item] = source[item];

}

return dest;

}

比较健全的拓展方法

---

更多精彩能容，请登录知识星球进行查看