FE.FWAngularJS1.x完成进销存系统感悟与深思

背景

作为单页大型运用的mv*框架AngularJS爱好者的我，不完成个大型web运用练练手怎样赶说本身闇练ng，因而尝试完成了大部分erp的进销存功用。本文重要对完成营业需求中碰到的题目以及解决方案举行论述。不确保对其他项目有可移植性。

题目与解决方案

Q:目次构造的设想

├─api //后端接口
└─fw //前端框架
├─angular
├─font-awesome
├─jquery
├─sheetjs
...
├─app
├─css //款式文件
├─html //模板资本
├─img //图片资本
└─js //前端营业逻辑
├─app.js //ng重要配置文件
├─animations.js //ng动效
├─controller.xx.js //营业逻辑文件，xx示意一个营业模块或对象
├─...
├─directives.js //ng指令
├─filters.js //ng数据过滤
├─services.js //ng效劳
├─factories.js //ng工场
├─main.js //在ng前引入的原生js函数└─config.js //ng配置文件
└─config.php //后端配置文件
└─favicon.png //站点图标
└─index.html //站点进口
└─package.json //node-webkit配置文件

Q:必备的组件
1.日期控件（ui-datepicker或jquery封装的derective都有）

2.搜刮控件（select2这类富文本选项的）

3.表格（由于原生的table套btn又是种种指令衬着迥殊慢，只好ui-grid了）

4.庞杂逻辑搜刮（本身完成一下咯，数据校验要很严厉）

5.excel导入与辨认
xlsx.js是个奇异的东西，把excel的读取与导出都放在了前端，给效劳器分管了不少压力，用户守候时候也削减。

6.列表多选
checklist-model运用map比input绑定再遍历要快，当列表有大批数据的时刻差异显著

7.多标签
必不得已用了iframe，Angular忌讳&＃8230;

8.二级菜单
纯css完成，无压力，权限推断与菜单猎取却是废了不少工夫

9.文雅弹窗
纯css完成x2

一些细节
1.守候框

2.右下加载完成提醒

3.左下功用文本提醒

碰到的坑

发明登录猎取菜单权限COOKIE存不下，因而放到localstorage

.factory('localStorage', ['$window', function($window) {
return {
put: function(key, value) { //存储对象，以JSON花样存储
$window.localStorage[key] = JSON.stringify(value);
},
get: function(key) { //读取对象
return JSON.parse($window.localStorage[key] || null);
}
}
}])

挺多人碰到过的题目，链接过滤转换

.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])

坑先写这么多，想到了再更。

感悟深思

angualr 1.x关于疾速开辟完成功用实在是轻易，双向绑定在碰到大批数据的时刻会致使页面衬着卡顿，比方全选或许衬着长表格，由于是数据处置惩罚，此时的css3动效也会卡住，所以要合理设想加载大批数据的时刻，郑重挑选界面的交互体式格局，到达最好的用户体验结果。

本文提到的目次构造只是官方demo的改良版，能够本身增加原生js在ng里挪用，多了配置文件等等，关于一些能用css完成的功用只管用css，能用js前端处置惩罚数据的处所就只管别放到后端，在排序、数据过滤等操纵便可放到前端，如许后端sql排序的时候也能削减，提高了软件的实行效力。

angualr并非没有瑕玷，固然并不想对react，vue举行比较，毕竟每种营业逻辑差别，挑选适合该需求的框架就行。假如比较下来真的没啥适宜的框架，祝贺你能够本身造轮子了~