資訊專欄INFORMATION COLUMN
摘要：背景作為單頁大型應用的框架愛好者的我，不實現個大型應用練練手怎么趕說自己熟練，于是嘗試實現了大部分的進銷存功能。本文主要對實現業務需求中遇到的問題以及解決方案進行闡述。不確保對其他項目有可移植性。
背景
作為單頁大型應用的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禁忌...
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進行比較，畢竟每種業務邏輯不同，選擇適合該需求的框架就行。如果比較下來真的沒啥合適的框架，恭喜你可以自己造輪子了~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81378.html
摘要：項目編號運行環境開發工具數據庫應用服務器開發技術本系統基于技術開發完成一套商品的進銷存管理系統，前端采用開發，界面簡潔大方，用戶體驗較好。 項目編號：BS-XX-054 運行環境： 開發工具：IDEA / ECLIPSE 數據庫：MYSQL5.7 應用服務器：TOMCAT8.5.31 開發技...
摘要：網易跨境電商考拉海購在線筆試現場技術面面。如何看待校招面試招聘，對公司而言，是尋找勞動力對員工而言，是尋找未來的同事。 如何準備校招技術面試 標簽 ： 面試 [TOC] 2017 年互聯網校招已近尾聲，作為一個非 CS 專業的應屆生，零 ACM 經驗、零期刊論文發表，我通過自己的努力和準備，從找實習到校招一路運氣不錯，面試全部通過，謹以此文記錄我的校招感悟。 寫在前面 寫作動機 ...
摘要：下載鏈接提取碼勤哲服務器無限用戶非常好用非常穩定。服務器是一個面向最終用戶的信息系統設計工具與運行平臺，它的作用是幫助我們建立適合需要的管理信息系統，實現管理的信息化。本人親自給企業開發的套系統，第一套系統截圖第二套系統截圖 下載鏈接：https://pan.baidu.com/s/1ds_...
閱讀 3725·2021-09-22 10:57
閱讀 1914·2019-08-30 15:55
閱讀 2699·2019-08-30 15:44
閱讀 1731·2019-08-30 15:44
閱讀 1876·2019-08-30 15:44
閱讀 2244·2019-08-30 12:49
閱讀 1053·2019-08-29 18:47
閱讀 3135·2019-08-29 16:15
