除了Vue、React、JQuery等第三方js，我们应该怎么写代码呢？

的属性值为text。创建监听队列调度器，保存属性值和对应元素的处理函数。比如上面的元素监听text属性，处理函数为this.textContent=value;创建一个数据模型状态，编写相应属性的set函数，当值发生变化时在dispatcher中执行该函数。示例代码：//指令选择器和对应的处理函数constmap={'x-bind'(value){this.textContent=undefined===value?'':value;}};//创建监听队列并监听data对象属性值得改变，然后遍历执行函数for(constpinmap){forEach(this.qsa(`[${p}]`),dom=>{constproperty=attr(dom,p).split('.').shift();this.dispatcher[property]=this.dispatcher[property]||[];constfn=map[p].bind(dom);fn(this.state[property]);this.dispatcher[property].push(fn);});}for(constpropertyinthis.dispatcher){defineProperty(property);}//监控数据对象属性constdefineProperty=p=>{constprefix='_s_';Object.defineProperty(this.state,p,{get:()=>{returnthis[prefix+p];},set:value=>{if(this[prefix+p]!==value){this.dispatcher[p].forEach(fun=>fun(value,this[prefix+p]));this[prefix+p]=value;}}});};这里不是在操作DOM吗？没关系，我们可以将DOM操作放到基类中，那么业务组件就不用去接触DOM了。总结：这里同样使用了VueJS的数据绑定方式，但是由于数据对象属性只能有一个set函数，所以建立一个监听队列来处理不同元素的数据绑定。这种队列遍历方式与AngularJS的脏值检测机制有些类似，只是触发机制不同，数组长度更小。事件绑定事件绑定的思路比数据绑定简单，直接在DOM元素上监听即可。我们以点击事件为例进行绑定，创建事件绑定命令，如x-click。实现思路：使用DOM选择器查找具有x-click属性的元素。读取x-click的属性值，此时我们需要对属性值进行判断，因为属性值可能是x-click=fn这样的函数名，也可能是函数调用x-click=fn（一，真实）。判断基本数据类型，比如boolean值和string，添加到调用参数列表中。为DOM元素添加事件监听器，当事件触发时调用相应的函数，并传入参数。示例代码：constmap=['x-click'];map.forEach(event=>{forEach(this.qsa(`[${event}]`),dom=>{//获取属性值constproperty=attr(dom,event);//获取函数名constfnName=property.split('(')[0];//获取函数参数constparams=property.indexOf('(')>0?property.replace(/.*\((.*)\)/,'$1').split(','):[];letargs=[];//解析函数参数params.forEach(param=>{constp=param.trim();conststr=p.replace(/^'(.*)'$/,'$1').replace(/^"(.*)"$/,'$1');if(str!==p){//stringargs.push(str);}elseif(p==='真'||p==='假'){//booleanargs.push(p==='真');}elseif(!isNaN(p)){args.push(p*1);}else{args.push(this.state[p]);}});//监听事件on(event.replace('x-',''),dom,e=>{//调用函数并传入参数this[fnName](...params,e);});});});表单控件的双向数据绑定也很容易，即建立数据绑定后修改值，然后建立事件绑定监听输入事件，组件之间进行通信就可以了，解决了映射inte的问题后组件内部的视图和数据，让我们开始解决组件之间的通信问题。组件需要提供一个属性对象来接收参数，我们将其设置为props。Parent=>child,datatransfer父组件要给子组件的props属性传值，需要获取子组件的实例，然后修改props属性。在这种情况下，操作DOM是不可避免的，所以我们考虑将DOM操作方法放在基类中。那么问题来了，如何找出哪些标签是子组件，哪些子组件的属性需要绑定呢？能否通过命名约定和选择获得？比如组件名称以cmp-开头，选择器暂时不支持不用说，这个要求不仅约束了编码命名，而且没有规范保证。简单地说，没有静态检测机制。如果开发者写的组件不是以cmp-开头，在运行时检查数据传输是否失败会很麻烦。所以可以在另一个地方收集组件名称，即注册组件功能。我们通过customElements.define函数注册组件。一种方式是在注册组件时直接重载函数并记录组件名称。但是实现起来比较困难，很难保证修改nativeAPI函数不会引起其他代码。影响。所以折中的办法就是对齐封装，然后使用封装好的函数来注册组件。这样我们就可以记录所有注册的组件名称，然后创建一个实例来获取对应的props。我们已经解决了上面提出的问题。同时在要监控的props对象的属性上写set函数。我们只进行了一半，因为我们还没有将数据传递给孩子。如果我们不想对DOM进行操作，只能使用现有的数据绑定机制，将需要传递的属性绑定到数据对象上。整理一下思路：在写子组件的时候创建一个props对象，把需要传递的属性声明为参数，比如this.props={id:''}。编写子组件时，不要使用原生的customElements.define，而是使用封装好的函数，如defineComponent进行注册，这样就可以记录组件名称和对应的props属性。父组件在使用子组件时，会遍历找到子组件和对应的props对象。将子组件的props对象的属性绑定到父组件的data对象的state属性上，这样当父组件的state属性的值发生变化时，子组件的props属性的值就会被自动修改。示例代码：constcomponents={};/***注册组件函数*@param{string}组件（标签）名称*@param{class}组件实现类*/exportconstdefineComponent=(name,componentClass)=>{//registerComponentcustomElements.define(name,componentClass);//创建组件实例constcmp=document.createElement(name);//存储组件名称和对应的props属性components[name]=Object.getOwnPropertyNames(cmp.props)||[];};//注册子组件classChildComponenttextendsComponent{constructor(){//通过基类创建模板//监听propssuper(template,{id:value=>{//...}});}}defineComponent('child-component',ChildComponent);//注册父组件classParentComponenttextendsComponent{constructor(){super(template);this.state.myId='xxx';}}上面的代码还有很多地方可以进一步优化，具体可以参考文末的示例代码。Child=>Parent,callbackfunction子组件的参数要传回给父组件，可以是回调函数的形式。比较麻烦的时候，调用函数的时候需要用到父组件的作用域。可以将父组件的函数绑定到scope上，然后传入子组件的props对象属性，这样子组件就可以正常调用和传递参数了。因为回调函数和参数的运行方式不同，参数是被动接收的，回调函数是主动调用的，所以需要在声明的时候进行标记，比如引用scope的声明方式AngularJS命令的object属性，使用“&”符号表示回调函数。理清思路：在子组件类中声明props的属性为回调函数，如this.props={onClick:'&'}。父组件初始化时，在模板上传递相应的属性，如。根据子组件的属性值找到对应的父组件函数，然后将父组件函数绑定到作用域中传入。如childComponent.props.onClick=this.click.bind(this)。在子组件中调用父组件函数，比如this.props.onClick(...)。示例代码：//注册子组件classChildComponenttextendsComponent{constructor(){//通过基类super(template,{onClick:'&'})声明回调函数属性;...this.props.onClick(...);}}defineComponent('child-component',ChildComponent);//注册父组件classParentComponenttextendsComponent{constructor(){super(template);}//事件传递放在基类中操作click(data){...}}跨组件层级通信有些组件需要子孙组件进行通信，逐层层传输将需要编写大量额外的代码，因此我们可以通过总线模式来完成。即建立一个全局模块，数据发送方发送消息和数据，数据接收方监听。示例代码//bus.js//监听队列constdispatcher={};/***接收消息*name*/exportconston=(name,cb)=>{dispatcher[name]=dispatcher[name]||[];constkey=Math.random().toString(26).substring(2,10);//将监听函数放入队列，生成唯一的keydispatcher[name].push({key,fn:cb});returnkey;};//发送消息exportconstemit=function(name,data){constdispatchers=dispatcher[name]||[];//轮询监听队列并调用函数dispatchers.forEach(dp=>{dp.fn(data,this);});};//取消监听exportconstun=(name,key)=>{constlist=dispatcher[name]||[];constindex=list.findIndex(item=>item.key===key);//从监听队列中移除监听函数if(index>-1){list.splice(index,1);returntrue;}else{returnfalse;}};//ancestor.jsimport{on}from'./bus.js';classAncestorComponenttextendsComponent{constructor(){super();on('finish',data=>{//...})}}//child.jsclassChildComponenttextendsComponent{constructor(){super();emit('finish',data);}}总结基类的详细代码可以参考文末仓库地址。目前的项目遵循按需添加的原则，只实现了一些基本的操作，并没有写出所有可能的指令。所以称它为“框架”还不够，只是为你提供实现思路和编写原生代码的信心。