基於layui的框架模版，採用模塊化設計，接口分離，組件化思想

時間 2019-11-21

標籤基於 layui 框架模版採用模塊化設計接口分離組件思想简体版

原文原文鏈接

代碼地址以下：
http://www.demodashi.com/demo/13362.htmljavascript

1. 準備工做

編輯器vscode，須要安裝liveServer插件在前端開啓靜態服務器
或者使用hbuilder的自帶服務器css

概述

因爲公司業務比較複雜，而且有不少重複性的功能，因此儘可能採用高可複用的原則，該系統採用徹底分離的開發方式，全部數據採用接口調用，因此因爲功能模塊較多，爲了維護容易，採用api分模塊管理，不一樣模塊api彼此隔離，按需引用，這避免了以前將全部api接口放到一個文件中很差維護的問題，因爲系統列表比較多，單獨抽離出table模塊，將datatable進行二次封裝，儘可能採起約定大於配置的思想，儘量將通用的配置設爲默認，若是有個性的需求，則經過傳配置的方式進行變動，同時也封裝了一些其餘模塊，也是一樣的思想html

代碼結構

代碼講解

目錄介紹

js/modules

這裏存放公用的模塊化工具，模塊化思想，這裏主要包括如下模塊

簡要講解一下
#### api
api包存放後臺的接口，採用模塊化管理api，一個功能模塊建一個xxx-api.js,頁面引用的時候，按需引用，依賴那幾個模塊的api就用哪幾個api前端

優勢

避免衆多模塊若是寫在一個js中進行管理，難以維護，由於頁面用的時候是根據api對象的key值獲取對應url，寫在一塊兒須要各個模塊起名要避免重複，分模塊管理能夠不一樣模塊key值相同，起名時候方便java

代碼解釋

首先是base-url.js,全部api都繼承於這個模塊，baseurl主要存放公用的url和獲取url的方法，好比請求下拉框接口通常會通用一個接口，這樣的就能夠放在baseurl中，其餘模塊繼承於他，獲取下拉框url時候就直接調用getUrl('getKeyValue')就能夠，而沒有必要再在相應的api模塊中在定義一遍
如下是base-url的代碼：jquery

/**
 * 基類配置api，其餘的api全繼承於此
 * @author nabaonan
 */
layui.define(function(exports) {
    var AjaxUrlConfig = {

        baseUrl:window.top.getWebName()+ "/json/", //根目錄
        "datatables/language": {
            url:"../frame/datatables/language/chs.json"//這個url是相對baseUrl的
        },
        //下拉框和radio，checkbox接口
        "getKeyValue": {
            url: "../key-value.json"
        },

        getUrl: function(urlKey) {
            var url, type;
            try {
                url = this[urlKey].url;
                type = this[urlKey].type;
            } catch(e) {
                console.log("urlkey錯誤，請配置：", urlKey);
            }
            var namespace = this.namespace||'';
            return {
                url: (this.baseUrl + namespace + url),
                type: type || "get"
            };

        },
        getAbsoluteUrl:function(urlKey){
            return this[urlKey].url;
        }


    };

    exports("base-url", AjaxUrlConfig);//這個輸出的key至關因而應用的時候的名字
});

爲了便於理解，只上一個簡單的登陸模塊api，web

/**
 * 登陸api
 */
var requireModules =[
    'base-url'
];
window.top.registeModule(window,requireModules);//這個方法是爲了解決不一樣頁面可能屢次引用相同模塊報錯，方法的效果就是若是引用了就再也不次引用

layui.define(requireModules, function(exports) {
    
    var $ = layui.jquery;
    var baseApi = layui['base-url'];
    var url = {
        namespace:'login/',
        'validLogin': {
            url: '../true.json'
        },
        'login': {
            url: 'login.json'
        },
        'logout': {
            url: '../true.json'
        },
        'getValidImg': {
            url:'../../image/v.png'
        }
    }
    
    var result = $.extend({},baseApi, url);

    exports('login-api', result);

});

頁面使用api

var webName = getWebName();

layui.config({
    base: webName + '/js/modules/' //這個路徑以頁面引入的位置進行計算
});

var requireModules = [
    'request',
    'role&authority-api',
];

//參數有順序
layui.use(requireModules, function(
    ajax,
    authorityApi,// 這個名字能夠自定義，就是一個形參
) {
            ajax.request(authorityApi.getUrl('updateAuthority'), data,  function() {
                
            });
})

js/controller

該模塊下對應頁面的js，命名和頁面相同，用來操做頁面ajax

views

存放全部頁面json

frame

存放公共類庫，好比datatables，ztree，jqueryapi

css

公共樣式

json

本地模擬數據

組件化思想

因爲本項目頁面有許多頁面須要公用，好比查看分中心頁面，一個頁面須要有好幾部分，歷史記錄，基本信息，審覈記錄，並且這些信息其餘頁面也有涉及，因此採用組件化加載，就是把他們拆分紅一個個小頁面，經過jquery的load進行加載頁面，拼成一個完整的頁面
上代碼：
這個

renderPage: function() {
            this.loadBranchCenterInfo();
            this.loadContractInfo();
            e.tabChange('auditList', 'audits-1');
            e.tabChange('recordsList', 'records-1');
        },

如下是加載相應頁面，經過jquery.load

//本期合同記錄
        loadContractRecords: function($container) {
            window.isHistory = false;
            window.layFilter = 'recordsList';
            var url = ajax.composeUrl(webName + '/views/contract/contract-records-list.html', data);
            $container.load(url);
        },