快速構建App介面的框架(●'◡'●) -----SalutJs
前言
滷煮在公司之初接觸到的是一個微信APP應用。前端技術採用的是Backbone+zepto等小型JS類庫。在專案開發之初，這類中小型的專案採用這兩種庫可以滿足基本的需求。然而，隨著迭代的更新和業務的增加，成堆的程式碼被覆蓋到專案中去了，使得這樣一種技術架構方式變得異常的臃腫，很多介面變得異常的難以維護，因此滷煮打算重構公司前端架構。
滷煮的想法是：採用非同步模組的載入方式，將不同微信選單進入的介面分成若干的模組檔案，這樣的好處是按照需求載入介面，而且每個介面都單獨成模組，便於維護和獨立開發。於是滷煮花了大概一個月的時間重構了前端。也就是從那時起以backbone的框架為基礎，封裝成一套配置框架。就這樣，專案經過改良，變得比較容易維護，滷煮也從其中學到了若干經驗，積累了一些有用的程式碼，最後逐步經過改進，在經過實踐的考驗（用此框架完成了其他兩個中小專案），整理成了一套自己的小型框架出來，滷煮將之命名為SalutJs
架構思路
如滷煮之前說的那樣，隨著業務和介面的增加，程式碼回變得越來越難以維護。碰到此類問題，第一件想到的事情就是一個字“分”。但如何分呢？這個問題滷煮考慮了許久。滷煮做的微信開發，一個線上的點餐專案，它包含如下功能：點餐，會員中心，優惠，砍價，呼叫等等十幾個，這些功能裡面，每個功能裡面進去會有相關的若干介面。可以想見，如果把所有的介面業務程式碼放在一個檔案裡面，整個專案會變得異常的臃腫最後奔潰。滷煮考慮的是將每個功能裡面的若干介面的程式碼放到同一份js裡面，這樣，當用戶使用其中一個功能的時候只需要載入一個js而不是十幾個介面程式碼。當我們需要從一個功能裡面的介面切換到另外一個功能模組裡面的介面時，我們運用requirejs的非同步載入方式，非同步載入需要載入的檔案。這樣便解決了程式碼耦合和臃腫的問題了。值得一提的是我們結合介面的原則是根據業務需求來的。滷煮舉個例子：在點菜功能裡面有若干介面，但點菜功能不一定會需要會員卡功能介面，所以，我們在寫點菜功能檔案的時候，是不需要把會員卡介面業務包含進去的。
html模板
在渲染功能上，滷煮沒有做何改變，沿用的是underscore的template方法渲染。由於介面的業務已經分開，那麼html結構也對應的可以分開。不必要一開始就將不必要的html程式碼放入我們的主體檔案中。滷煮載入html模板的原則是跟js有些一樣的，方法則是用ajax講html以文字的形式下載下來，然後渲染到介面中去。在require的時候，我們會去伺服器拉去對應的模板檔案，也就是說我們實現不同大功能之間的跳轉需要請求兩個檔案，一個是xx.js,另外一個是xx.html。實際開發過程中，你不需要自己去呼叫這些檔案，使用route.myNavigate方法，框架會自動幫助你去下載js和html檔案:
目錄結構
在使用Salut的時候需要按照既定的一些目錄規則來建立檔案結構。我們的專案大致分為若干目錄：
construction:配置檔案以入口檔案
css：樣式檔案
fonts：字型檔案
img：存放路徑
js：存放所有基礎架構js和業務程式碼以及模板檔案
node：執行測試專案node檔案（實際開發中請無視）
page_main.html：主題html檔案
run.js: node檔案，執行即可將專案跑起來
js資料夾下面又分了若干資料夾，存放了不同的js檔案
base：salut的核心程式碼
core：backbone和zepto等底層程式碼
plugins：若干外掛
tpl：模板檔案
use：每個功能的業務程式碼檔案
config：配置檔案
map.html：需要用到的地圖檔案
入口：
page_main.html是整個專案的html，如果沒有其他特殊的業務需求，所有的單頁面都在此html中實現，不會有url的跳轉。它的最外層是一層div包裹著的，作為最外層的容器。然後是用require引入的入口js的檔案：
<body> <!-- 最外層容器 --> <div id="pageWindow"></div> <!-- 引入require 載入入口檔案 --> <script data-main="construction/app" src="construction/require.js"></script> </body>
我們看到，只要當介面一開始載入，然後開始引入了app.js檔案，在app.js中，我們會判斷當前介面的地址，配置好require的預設配置，引入自定義配置，開始拉取對應的介面業務程式碼下來:
命名規則
Salut的命名有自己的一套規則：主要體現在檔案命名上：在命名業務檔案上採用大寫字母開頭，而在命名html檔案上規則是tpl加小寫字母開頭的對應js業務檔案。在為每個節目註冊路由時，路由的名稱為大寫字母開頭，介面名則為小寫字母開頭，但名稱都是一樣的。每次你建立一個新功能的時候，必須去config裡配置這個功能模組檔案的名字和裡面對對應的介面名稱的關係，在github的例子中你會看到。這樣做的原因就是js沒有讀取本地檔案的能力，所以你必須把其他功能檔案中的介面寫在配置檔案裡面，這樣，當需要去load另外一個介面的時候，才知道我們是需要載入哪一個js。
路由規則
Salut並沒有改變backbone的路由規則，它沿用了之前的hash做法，在backbone原始碼中，你可以看到有多種方式實現路由推動事件，他們是hash、pushstate、和定時函式。Salut的初衷也是分介面，每一個路由對應著每一個介面，在位址列中改變hash值（#號後面那部分，對應不同介面）從而跳轉不同的介面。這個滷煮在之前的博文中已經講到過了，這裡就不再提。路由的名稱是和介面模組的名稱有關係的，在命名規則裡面我們也已經提到過了。
總結
Salut在構建類似以上提到的類似微信app的應用時非常適合，也非常簡單。它對於中小型的app應用來說是比較合適的。學會規則後幾乎只要簡單的配置就能完成加入一個介面到專案中的工作。滷煮自己考慮後續把requirejs這樣的模板載入檔案替換掉（已經寫完），最後把backbone底層框架也換調，把他做成一套完全自主的js框架。不過這是一條比較漫長的道路了。滷煮已經把相關的文件上傳到了github上，裡面有一整套demo，註釋也寫得比較詳盡。諸君如果有興趣，請關注一下。海納百川，有容乃大。Saultjs作為初生的一套輕框架存在或多或少的問題，也由於他的實踐經驗不多，要求它不斷的在實踐中不斷地進步完善。當然，憑藉滷煮一人之力，實在微不足道，為此特將其開源，希望諸君為它添磚加瓦，使得它更加強大。或者可以提供自己的意見，也非常歡迎貢獻程式碼。總而言之，滷煮在此並不是推廣自己的框架，只是分享一下工作中總結起來的一些程式碼工具而已。如果你什麼疑問，請發郵件到[email protected]或者在部落格評論區留下你的意見，滷煮看到後會及時回覆的。
唔。。。。。凌晨一點半寫完，諸君能看到這裡給個推薦吧。
遇到問題或者建議加群：461636182
相關推薦
快速構建App介面的框架(●'◡'●) -----SalutJs
前言 滷煮在公司之初接觸到的是一個微信APP應用。前端技術採用的是Backbone+zepto等小型JS類庫。在專案開發之初，這類中小型的專案採用這兩種庫可以滿足基本的需求。然而，隨著迭代的更新和業務的增加，成堆的程式碼被覆蓋到專案中去了，使得這樣一種技術架構方式變得異常的臃腫，很多介面變得異常的難以維護，
快速構建APP
布局 進一步 快速構建 wce 可能 註冊 視頻 地址 排行榜 如何快速搭建一個APP模型出來，很快很快那種； 登陸，註冊 推送 分享 個人信息，手機號，身份證，職業，地址，省市區，郵箱， 掃描，圖片上傳 各種繪圖，理財對比，以及歷史信息，柱狀圖，。。。。。註意日期，
一個快速開發APP的框架：AndroidQuick
AndroidQuick Android快速開發程式碼庫 專案簡介 AndroidQuick專案旨在提供一套讓能Android開發者快速開發APP的框架。 AndroidQuick從開發一個APP所涉及到的架構、UI、網路、資料庫、工具等方面
快速構建MMO伺服器框架（七）高併發TCP網路框架
忙活了一個多星期，差不多把基於TCP的高併發連線網路架構測試穩定了。 目的：利用多執行緒把網路連線及資料包壓縮/解壓、加密/解密等等耗時的操作分流（asio對這些沒有原生的支援），順帶提供執行緒池框架。只對遊戲邏輯層暴露出單執行緒的外觀，隔離底層多執行緒的複雜度。 結構如下圖
快速構建SPA框架SalutJS--專案工程目錄 二
目錄結構 上面這張圖是salut的目錄文件，從github上將其下載後直接執行node run和 node json 可以直接啟動專案。下面逐個介紹每個目錄的存放的檔案和作用。 construction 該目錄下存放著工程檔案，grunt配置檔案以及幾本requireJS，在此處執行npm in
快速構建SPA框架SalutJS--專案工程目錄 三
配置檔案 在開始我們的第一個介面之前，我們需要把初始的html和config檔案配置好。html非常簡單，只需要一個div作為最外部的容器包裹著所有介面即可： <!DOCTYPE html> <html lang="en"> <head> <meta
快速構建SPA框架SalutJS--專案工程目錄 一
起因 剛進公司那會兒，接的是一個微信APP應用，SPA是前人搭起來的，用到的技術主要是backbone和zepto。後來那人走了，就滷煮一個人把專案接了下來。專案越是到後面，越發覺了諸多弊端，不停的增加介面和業務使得整個應用看起來臃腫不堪。於是覺得是時候重構了。那時也巧是正好認識requireJS，認為介面
NET快速資訊化系統開發框架 V3.2 ->WinForm部分全部重構為Dev風格介面
RDIFrameowrk.NET V3.2以前的版本WinForm部分使用的介面控制元件是DotNetBar，介面也是非常的美女，但相比現在市面上用得非常多功能強大的Dev控制元件還是略顯遜色，V3.2版本花了大量功夫對框架全系介面做了升級重構，全面採用Dev風格的控制元件。介面更加高大上好看。
NET快速資訊化系統開發框架 V3.2 -> “使用者管理”主介面使用多表頭展示、增加列印功能
RDIFrameowrk.NET 使用者管理是使用非常頻繁的模組，由於需要展示的欄位比較多，以前的展示方式顯得不是太規範，現3.2版本使用者管理主介面進行了全新的設計，資料列表展示使用了Dev家族全新的GridControl控制元件。對列的展示進行使用了多表頭展示的方式，同時新增了列印使用者
.NET快速資訊化系統開發框架 V3.2 -> WinForm“組織機構管理”介面組織機構許可權管理採用新的介面，操作許可權按模組進行展示
對於某些大型的企業、資訊系統，涉及的組織機構較多，模組多、操作許可權也多，對使用者或角色一一設定模組、操作許可權等比較繁瑣。我們可以直接對某一組織機構進行許可權的設定，這樣設定後，同一組織機構的使用者就可以擁有相應的模組訪問許可權，操作許可權了，這樣也能減輕管理人員的負擔。 要啟用組織
.NET快速資訊化系統開發框架 V3.2 -> Web 使用者管理模組編輯介面-組織機構選擇支援級聯選擇
下拉框級聯選擇功能非常的實用，框架使用者管理編輯介面對組織機構的選擇在3.2版本中新增了級聯選擇的支援，讓組織機構的選擇更加的方便與高效，也不容易出錯。 我們框架的組織機構結合實際分成了5種類型，分別為：公司、分公司、部門、子部門、工作組。不同的企業可以根據實際需要進行取捨。使用者編輯
.NET快速資訊化系統開發框架 V3.2->Web版本“產品管理”事例編輯介面新增KindEditor覆文本編輯控制元件
KindEditor是一套開源的HTML視覺化編輯器，主要用於讓使用者在網站上獲得所見即所得編輯效果，相容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。KindEditor使用JavaScript編寫，可以無縫的於Java、.NET、PHP、ASP等程式接合。Ki
RDIFramework.NET ━ .NET快速資訊化系統開發框架 V3.2->Web版本工作流部分業務處理介面與檢視介面全新展示
RDIFramework.NET工作流程元件是以RDIFramework.NET框架為支撐，根據我們多年的專案經驗和專案實踐，結合國內各大工作流產品的特點研發的一套流程管理元件。該元件不僅考慮到從零搭建業務系統，也考慮到與現有業務系統的整合。從零搭建系統我們可以使用RDIFramework.
微信小程式（看文件寫例項三）微信小程式課堂寶APP實現整體介面框架及首頁佈局
一、首頁佈局簡單思路 回顧上一篇博文，首頁的內容主要有輪播圖，橫向滑動選單以及選單對應的view，橫向滑動選單有簽到、課堂測試、模擬測試、課堂提問、答問記錄五個選項，當點選選項時更新顯示view。由於素材和時間有限，所以佈局做得相對簡單，主要是側重思路及程式碼邏輯。 二、輪播圖 檢視文件
如何使用MUI框架開發移動APP介面
首先百度搜索MUI，找到MUI官網，點選進入。 2 在MUI官網，點選右上角的新手指南，可以檢視MUI框架如何搭建。 3 點選右上角的‘文件’，檢視MUI開發文件，在開發文件中，可以看到日常常用的基礎的開發元件。 4 MUI提供的文件中，主要包括UI元件和
Qt Quick Lession1 (體驗快速構建動態效果介面)
自2005年Qt4釋出以來，Qt已經為成千上萬的應用程式提供了框架服務，現在Qt已經基本上支援所有的開發平臺了，這裡面既包含了桌面、嵌入式領域，也包括了Android、IOS、WP等移動操作平臺，甚至支援最新的Ubuntu Phone。 Qt Quick是一個UI技術組，Qt Quick本身主要
window使用 create-react-app 快速構建 React 開發環境
1.需要先安裝node,下載連結 https://nodejs.org/en/ ，下載完成後直接安裝就可以了，下載lts版本就行（current是最新版），安裝完成後開啟命令列檢視安裝的版本 C:\U
筆記九 ：快速建立基本介面 + Egret製作轉盤效果（基於通用MVC框架）
前言： 快速基本介面的編寫直接跳到步驟二。 轉盤效果是對egret白鷺引擎動畫的功能進行一次應用，實現轉盤效果可以對動畫功能更好的理解，遊戲的隨機事件可以用轉盤效果來進行實現。 演示效果： 步驟一：製作好素材，包括一個指標，一個按鈕，一個轉盤（隨手畫實
使用 Apollo Client 快速構建一個支援 GraphQL 的 React App
這篇文章主要介紹 GraphQL 在 Client 的使用，為了方便，本文會直接使用 React 建立一個 Web demo 去介紹 Apollo 在 React 中的使用方法，當然在 ReactNative 中用法幾乎一模一樣。Apollo Client 是一個 GraphQL C
.NET快速資訊化系統開發框架 V3.2 -> WinForm“組織機構管理”介面組織機構許可權管理採用新的介面，操作許可權按模組進行展示
對於某些大型的企業、資訊系統，涉及的組織機構較多，模組多、操作許可權也多，對使用者或角色一一設定模組、操作許可權等比較繁瑣。我們可以直接對某一組織機構進行許可權的設定，這樣設定後，同一組織機構的使用者就可以擁有相應的模組訪問許可權，操作許可權了，這樣也能減輕管理人員的負擔。 要啟用組織機構許可權，需