网站建设网站网页模板,深圳品牌官网,wordpress sso插件开发,南京做网站优化价格例子#xff1a;lesx-example webpack loader: lesx-loader 一些背景 现在前端框架已经呈现出React、Angular、Vue三足鼎立的局势#xff0c;对于三者的对比以及技术选型的思考与争论也被讨论了非常多#xff0c;比如知乎上的这个问题#xff1a;react.js,angular.js,vue.j… 例子lesx-example webpack loader: lesx-loader 一些背景 现在前端框架已经呈现出React、Angular、Vue三足鼎立的局势对于三者的对比以及技术选型的思考与争论也被讨论了非常多比如知乎上的这个问题react.js,angular.js,vue.js学习哪个好对于这个问题我们不再做过多赘述。但不管怎么样现在github上star数最多、npm上安装量最大的还是React阿里巴巴很多团队的技术栈也是基于React的。此篇文章也是基于React的开发范式来进行讨论的。 JSX的模板范式没有选择HTML模板而是完全基于JS的同时提供了一种JSX的语法糖方便用户的开发。这样做是有几种考虑的首先React是跨平台跨终端的不仅可以在Web browser中运行还可以基于RN在移动端APP、服务端基于SSR来运行基于虚拟DOM的实现让他可以轻松地做到以上几点另外完全基于JS的开发可以不用掌握类似Vue/angular的指令式的语法而是更多的偏向于使用纯js的语法开发范式一次学习终身受益而不用每次在开发的过程中还要去查看API文档。 但是React的这种开发模式也带来了一个额外的问题就是jQuery时代尊崇的UI与逻辑分离的最佳实践在JSX时代又有了极大的后退。于是我们一直在思考能不能有一种模式既能享受像Vue那样UI、展示(样式)与逻辑分离方便维护与可扩展又能享受React JSX的语法带来的便利呢 Lesx的诞生 基于上面的思考于是有了Lesx这个构建式的框架。 构建式的框架并不是我们的首创但是这个概念不知道是不是我们第一次正式提出来。业界已经有的AOT(Ahead Of Time)、非侵入式的框架比较知名的是svelte他的开发范式跟Lesx比较相似但是他并不是基于React或者哪个框架的而是自己研发了一套底层组件机制对于模板代码的解析也是基于自己实现的一套AST解析实现语法类似于Handlebars。基于React的开发范式跟Lesx比较相似的还是react-templates他称自己是Lightweight templates for React。他只是把React Class的render部分抽了出来DSL会被编译成React.createElement然后生成一个函数作为React Class的render方法。同时react-templates里还增添了很多类似vue的指令的功能比如rt-ifrt-repeat等这样的框架的问题就是问题解决的并不是很彻底抽出render部分的同时我们还是需要对React创建部分需要大量的代码书写同时对于JSX语法扩展指令的模式增添了开发者的学习成本后面开发中也需要不断地去查看文档如何使用这些指令这是我们极不推崇的。 在这样的背景下我花了两天时间早起晚睡、憋屎憋尿的完成了基于React做到UI、展示(样式)与逻辑分离的构建式开发框架Lesx的初版。 基于Lesx的开发模式 Lesx作为webpack的loader存在使用类似Vue的单文件的开发范式方便开发者的代码组织与开发 index.lesx: stylea {color: red;}
/styletemplatediva onClick{this.func}点我/a{console.log(this.props)}If condition{ this.props.valid }div{this.state.name}/div/IfButton typeprimary onClick{() {alert(I am an antd button!);$setState({name: new name});}}antd button/ButtonMy //div
/templatescriptmodule.exports {props: {valid: true},state: {name: xiangzhong.wxz},func({setState,}) {alert(I am a function!);setState({name: new name});}};
/script 很明显的他有几个特点 UI、样式与逻辑分离 lesx文件有style/template/script三个标签内部分别存放他们对应的内容代码。 style部分我们默认使用跟css完全兼容同时有更多便利性语法的Sass语言后面马上也会支持Less语法。 tenplate部分则完全是React的jsx语法同时由以下几个扩展 我们基于babel插件jsx-control-statements提供了便利性的控制流标签比如IfFor等等语法非常简单一次学习终生高效当然有的同学可能会不认可这种标签扩展控制流的模式此时你也可以继续使用你熟悉的三元运算符、数组map等方式来实现逻辑与展示控制但是我们相信标签控制符是更清晰、更容易维护的开发模式 你可以在DSL里面使用一些辅助性全局变量 $setState: this.setState的简便写法通过改变state值来触发UI渲染 $getRef: React通过组件ref属性获取组件的简便写法 $getProps: 获取React属性的简便性方法相当于this.xxx后面我们还会做一些其他的更高级的便利性扩展比如接入axios的异步操作React的forceUpdate便利性机制等等。 script部分是用于书写前端逻辑处理的地方你可以使用ES6的语法做各种的数据处理只需要最后把一个对象交给module.exports变量即可这个对象可以包含如下内容 state: React Component的state初始值可以是对象也可以是函数 props: React props初始值可以是对象也可以是函数 React组件的生命周期钩子函数: 比如componentDidMount等会被自动挂在到最终生成的React Component Class里面去 其他任意的属性或方法: 均会被挂在到React Component实例(this)上去而且对于方法部分会被自动绑定到this作用域(this.xxx.bind(this)) 。对于异步处理部分默认可以直接调用this.axios.xxx的方法来实现并支持ES7async/await语法 module.exports {async getData(reqArg {}) {const res await this.axios.post(url/post, reqArg);return res;}
}; 同时支持异步请求库可配置可以在loader的配置里配置自己的异步请求库此时会替换掉默认的axios。但这一块功能暂时还没有加入承诺在接下来的一周之内会加上去。目前可以通过组件props传递的方式来使用异步比如 import App from ./index.lesx;
import axios from axios;console.log(App:, App);render(Appaxios{axios}components{{My,}}
/, document.querySelector(#root)); 然后在lesx文件的script里面就可以这样用 module.exports {props: {valid: true},state: {id: 1001,},async getData(reqArg {}) {const res await this.props.axios.post(url/post, reqArg);return res;},clickHandler({setState,}) {const {id,} this.state;const userData this.getData({id,});setState({name: userData.name,});}
}; 开发的极大便利: UI库是我们在开发中重度依赖的部分特别是对于像React这种完全组件化的开发框架来说有个好用的UI框架简直是如虎添翼会让我们的开发效率得到极大地提升所以我们的开发框架默认集成了国内最优秀的React UI库antd当然了你也可以通过loader的配置来更改UI库比如可以使用material-ui等。 在配置了UI库之后无需做任何工作就可以直接在template标签里面使用该UI库的任意组件了比如使用Button组件 scriptButton typeprimary onClick{() {alert(I am an antd button!);$setState({name: new name});}}antd button/Button
/script Lesx不仅会自动帮你打包你使用到的组件同时还会自动帮你把组件的样式引入另外基于babel的插件babel-plugin-import我们做到了按需打包只会把你用到的组件给打包进来保证打包后的文件的最小体积。 开发者不需要书写React的组件生成代码 因为我们把React Component生成的过程全部放在了AOT里实现所以开发者无需写React组件生成、UI库组件引入的操作其实开发者甚至不需要知道React的存在也甚至更不需要学习React唯一需要做的就是在渲染js文件中做一些组件引入以及渲染执行的操作但是就这一块的成本其实是极低的。 目前前端的资源是极度缺乏的整个互联网都缺前端所以我们在考虑如何释放前端人力这个方案的时候我们是否可以考虑如何降低前端的上手成本让后端同学可以上手前端开发做到网后端开发赋能呢其实Lesx的开发范式一开始就是为这个方向考虑的在满足降低前端开发成本、降低前端开发复杂度、提高代码可维护性的同时也可以很方便的提供给后端让后端同学可以轻松上手前端开发从而达到合作共赢的状态。对于前端人手紧缺的公司可以考虑这个方案的落地也许会起到意想不到的效果。 同时为了可扩展性我们做了一些额外的处理。除了可以给Lesx DSL转成的Component传递属性然后可以在Lesx文件使用之外当我们确实需要第三方或者自己之前基于React原生模式开发的组件需要拿过来直接使用的时候我们提供了components属性将任意的第三方组件放在conponents属性对象中既可以直接在DSL中使用如下 import React, { Component } from react;
import { render } from react-dom;
import My from ./My;
import App from ./index.lesx;console.log(App:, App);render(Appcomponents{{My,}}
/, document.querySelector(#root)); 在上面我们引入了自己开发的My组件并放在了Lesx DSL转成的App组件的components属性里于是可以在lesx文件中像下面这样使用 style{ /** style代码 */ }
/styletemplatediva onClick{this.func}点我/aMy //div
/templatescript{ /** 逻辑代码 */ }
/script 其实基于这种开发范式针对不同的场景可以有不同的代码组织模式。如果你的界面不是很复杂或者是比较典型的中后台应用场景(增删改查这种)你可以完全基于一个.lesx文件开发完你所有的页面逻辑更多的则是依赖于第三方的UI库来为你的开发提供便利说白了就是更多的依赖于组件搭积木式的开发范式这个时候template就是开发的重点所在而script跟style只是起到了添砖加瓦的便利性的开发这个时候Lesx的职责就是页面级别的代码组织方式如果是比较复杂的应用比如SPA应用这时我们可以基于Lesx来开发自己的一个个的React组件然后加入vanex、dva等数据流管理框架来方便对大量数据的操作最后通过react-router等router组件进行统一组织然后进行渲染。这个时候Lesx的职责就不一样了变成了组件级别的代码组织。 怎么样有没有那么一点点的打动你的心呢^_^ 如果有的话不妨去体验下Lesx相信会带给你不一样的开发体验。 例子lesx-example webpack loader: lesx-loader
