YS前端架构

YS前端架构是一种开发模式。简单、易用、高效、实现配置化开发。
让开发者专注请求数据前和拿到之后的业务处理,不用去关心请求数据的过程,这过程让YS前端架构来实现。

YSng


YSng基于angular1的单页面应用架构,css采用Amaze UI框架,是YS前端架构的angular版本。
定位:前后端完全分离的企业产品后台管理系统、没有seo需求的模块。
demo地址 前端分享群: 222671803

下载文件

Git仓库地址

YSplugin

快速上手

1、下载YSng代码包,cmd进入YSng目录,执行以下代码进行安装。
注:如果没有安装过node,gulp;请先百度安装node和全局安装gulp工具;

npm install
gulp

2、浏览器输入:http://localhost:8080

目录结构说明

说明:该脚手架已经集成了:
js合并压缩、image压缩、雪碧图、css合并压缩,开启web服务

YSng根目录
├─src                   YSng开发目录
│  ├─css                项目css文件(生产版)
│  ├─dev                开发版css,js,images文件
│  │  ├─js              开发版js
│  │  │  ├─app.js              写业务逻辑js
│  │  │  ├─fac.js              公共函数js
│  │  ├─css             开发版css
│  │  ├─images          开发版images
│  │  ├─spites          雪碧图源文件
│  ├─fonts              项目字体
│  ├─html               项目模块静态页面
│  │  ├─A.html            模块B
│  │  ├─B.html            模块A
│  ├─images             项目图片(生产版)
│  ├─js                 项目js(生产版)
│  │  ├─global.js       合并后的js
│  │  ├─global.min.js   压缩后的js,项目引用这个js
│  ├─json               项目测试json文件
│  ├─YSplugin           YSplugin集成第三方js插件
│  ├─index.html         项目入口文件
├─.jshintrc.js          JSHint配置文件
├─gulpfile.js           gulp工具配置文件
├─package.json          模块依赖以及项目的配置信息
├─README.md             使用说明

约定

这里的约定,是本架构的核心规则,包含了前端和后端交互具体内容:传参,放在params里面,拿到的数据放在data里面,传之前的before处理,拿到数据之后用done函数处理;

开始使用

第一步、在main里面写模块业务逻辑js代码 第二步、在A.html中使用

结束,是不是觉得少了点什么??没错,这个架构就是要达到这种效果;其实我们拿到数据就算已经写完,可以结束战斗了

3、ctrl初始化控制器,开发者不需要关注

4、自定义指令及用法

以下指令需要去看下源码和demo范例才容易理解
方法 html写法 说明
ysenter
< input ng-model='YS_plista.params.keyword' ysenter="YS_plista" />
公共指令:input输入内容,按回车去请求YS_plista 接口
yschkall
< input type="checkbox" yschkall="YS_plista.data.datalist"/>
公共指令:checkbox全选
ysadd
< input type="button"  ysadd='YS_plista.data.datalist'/>
公共指令:增加一行
ysselrun
< select  ysselrun="YS_plista.params.pid">
select 选中赋值给YS_plista.params.pid,并去请求YS_plista接口
yssel
< select  yssel="YS_plista.params.pid">
select 选中赋值给YS_plista.params.pid
ysdel
< button type="button" ysdel='YS_plista.data.datalist' delkey="id">
公共指令,删除1或多条;delkey标记根据id删除
ysselone
< button type="" ysdelone='id'>
公共指令,删除一条;根据id删除
//公共指令 ============================================================================
//回车,就去请求某个接口
app.directive('ysenter', function(){ 
return { 
link: function(sco, iElm, iAttrs) {
        iElm.on("keyup",function(e){ 
           e.keyCode==13&&sco.fetch(iAttrs.ysenter);
        });
     }
};
}); 
//自定义指令 ============================================================================
//全选自定义指令
app.directive('chkall', function(){ 
return { 
link: function(sco, iElm, iAttrs) {
        iElm.on("click",function(e){ 
           
        });
     }
};
});

fac.js公共方法介绍

方法 示例 说明
hashToobj var obj = YSfac.hashToobj('a=1&c=3') 把地址栏的参数转成对象 a=1&c=3 > {a:1,c:3}
time var timesmapt = YSfac.time('2010-12-12') 返回日期的时间戳;无参数为空则返回当前时间戳;
load YSfac.load(1) 显示加载中,0未隐藏,1为显示
fetdata YSfac.fetdata(sco,key) 控制器获请求后端取数据的方法,该架构所有请求都是调用此方法
setstore YSfac.setstore(key,value) 将字符串或者对象,存入本地存储
getstore YSfac.getstore(key) 从本地存储取出字符串或者对象
unsetstore YSfac.unsetstore(key) 删除key值得本地存储
setCookie YSfac.setCookie(name,value) 写cookies
getCookie YSfac.getCookie(name) 读cookies
delCookie YSfac.delCookie(name) 删除cookies

YSvue


YSvue基于vue框架,是YS前端架构的vue版本。
定位:公众号、web移动端。

开发中,敬请关注!

YSrn


YSrn基于react-native框架,是YS前端架构的react-native版本。
定位:安卓、ios APP开发。

开发中,敬请关注!

YSreact


YSreact基于react框架,是YS前端架构的react版本。
定位:PC端企业后台管理系统、web移动端。

开发中,敬请关注!

YSplugin


YSplugin集成多个常用的JS插件,通过seajs实现按需加载,助你快速搭建项目的第三方js插件集合
定位:按需加载js第三方插件的项目。