基于React开发范式的思考：写在Lesx发布之际
|
例子：lesx-example 一些背景现在前端框架已经呈现出React、Angular、Vue三足鼎立的局势，对于三者的对比以及技术选型的思考与争论也被讨论了非常多，比如知乎上的这个问题：react.js,angular.js,vue.js学习哪个好？，对于这个问题我们不再做过多赘述。但不管怎么样，现在github上star数最多、npm上安装量最大的还是 JSX的模板范式没有选择HTML模板，而是完全基于JS的，同时提供了一种JSX的语法糖，方便用户的开发。这样做是有几种考虑的，首先React是跨平台跨终端的，不仅可以在Web browser中运行，还可以基于RN在移动端APP、服务端基于SSR来运行，基于虚拟DOM的实现让他可以轻松地做到以上几点，另外，完全基于JS的开发可以不用掌握类似Vue/angular的指令式的语法，而是更多的偏向于使用纯js的语法开发范式，一次学习终身受益，而不用每次在开发的过程中还要去查看API文档。 但是，React的这种开发模式也带来了一个额外的问题，就是jQuery时代尊崇的 Lesx的诞生基于上面的思考，于是有了Lesx这个
在这样的背景下，我花了两天时间，早起晚睡、憋屎憋尿的完成了基于React做到 基于Lesx的开发模式Lesx作为webpack的loader存在，使用类似Vue的单文件的开发范式，方便开发者的代码组织与开发： index.lesx: <style>
a {
color: red;
}
</style>
<template>
<div>
<a onClick={this.func}>点我</a>
{console.log(this.props)}
<If condition={ this.props.valid }>
<div>{this.state.name}</div>
</If>
<Button type="primary" onClick={() => {
alert('I am an antd button!');
$setState({
name: 'new name'
});
}}>antd button</Button>
<My />
</div>
</template>
<script>
module.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三个标签，内部分别存放他们对应的内容代码。
后面我们还会做一些其他的更高级的便利性扩展，比如：接入axios的异步操作，React的forceUpdate便利性机制等等。
对于异步处理部分，默认可以直接调用 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(<App
axios={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库之后，无需做任何工作就可以直接在 <script>
<Button type="primary" onClick={() => {
alert('I am an antd button!');
$setState({
name: 'new name'
});
}}>antd button</Button>
</script>
Lesx不仅会自动帮你打包你使用到的组件，同时，还会自动帮你把组件的样式引入；另外，基于babel的插件： 开发者不需要书写React的组件生成代码因为我们把React Component生成的过程全部放在了AOT里实现，所以开发者无需写 目前前端的资源是极度缺乏的， 同时，为了可扩展性，我们做了一些额外的处理。除了可以给Lesx DSL转成的Component传递属性然后可以在Lesx文件使用之外，当我们确实需要第三方或者自己之前基于React原生模式开发的组件需要拿过来直接使用的时候，我们提供了 import React,{ Component } from 'react';
import { render } from 'react-dom';
import My from './My';
import App from './index.lesx';
console.log('App:',App);
render(<App
components={{
My,document.querySelector('#root'));
在上面我们引入了自己开发的 <style>
{ /** style代码 */ }
</style>
<template>
<div>
<a onClick={this.func}>点我</a>
<My />
</div>
</template>
<script>
{ /** 逻辑代码 */ }
</script>
其实，基于这种开发范式针对不同的场景可以有不同的代码组织模式。如果你的界面不是很复杂，或者是比较典型的中后台应用场景(增删改查这种)，你可以完全基于一个 怎么样，有没有那么一点点的打动你的心呢？^_^ 如果有的话，不妨去体验下Lesx，相信会带给你不一样的开发体验。 例子：lesx-example （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |