在第九篇中我们使用路由控制器成功的加载出了welcome.html到页面上
不过welcome是欢迎页，一个软件的制作还是要从工作区开始制作

开始制作工作区

工作区是这个项目的核心，先从核心开始制作，后续的其余功能围绕核心功能来实现
暂时的设想是工作区布局和webstrom布局类似
左侧有一个功能栏目，点击功能栏目中的按钮会弹出一个功能区，中间是编辑区，后面可能会考虑在右边放一个设置区

开发工作区页面

在./src/component中增加layout.html文件

<div class="layout">
    <div class="side-bar"></div>
    <div class="left side-view"></div>
    <div class="center working-view"></div>
</div>

side-bar为最左侧功能栏
side-view为左侧功能栏弹出的功能区
working-view为中间工作区

实现工作区控制器

在./src/controller中增加
layout.controller.ts
woringview.controller.ts
sidebar.controller.ts
这三个文件

// layout.controller.ts
import BaseController from './base.controller';
import * as $ from 'jquery';
import html from '../component/layout.html';
import WorkingviewController from './workingview.controller'
import {pageOption} from '../interface/pageOption.interface'
import SidebarController from "./sidebar.controller";

export default class LayoutController extends BaseController{

    private option: pageOption;

    constructor(option: pageOption) {
        super();
        this.option = option;
        this.init();
    }

    private init(){
        $(this.option.el).html(<string>html);
        let workingView = new WorkingviewController('.working-view');
        let sidebar = new SidebarController('.side-bar');
    }

}

将页面渲染到页面中，不要忘记修改路由配置，让layout.html默认加载到页面中

// routerConfig.class.ts

//...
private static readonly pageList = [
    {name: '/welcome', controll: WelcomeController},
    {name: '/', controll: LayoutController}
];
//...

实现左边功能栏控制器

// sidebar.controller.ts

import BaseController from './base.controller';
import * as $ from 'jquery'
type sidebarItem = {
    name: string,
    controller: any,
    icon: string,
    show: boolean,
}
export default class SidebarController extends BaseController {
    private readonly el:string;
    private targetInstance: any;
    private targetIndex: number;
    public static readonly sidebarItemList:sidebarItem[] = [

    ];
    constructor(el:string){
        super();
        this.el = el;
        this.init();
    }

    private init(){
        
    }

基础代码实现了之后，我们就需要考虑这个功能栏需要有哪些功能了
从功能呢角度分析，左边的功能栏需要有一个可配置的标签数组，这一点在代码中已经有了实现 sidebarItem用来储存配置的功能标签
鼠标移入标签要有一个高亮的效果，点击某一个标签会弹出对应标签的功能区，功能区处于激活状态时标签也要处于高亮状态，鼠标移入的高亮我们可以考虑使用css的hover来实现，点击之后给标签加一个active的class，点击的同时还需要实例化对应功能区的控制器，接下来开始实现具体代码

暂定功能标签有：组件库 图层

• 组件库：包含所有可选组件
• 图层：可以快速分析元素层级关系

在sidebarItem中增加配置

    public static readonly sidebarItemList:sidebarItem[] = [
        {name: '组件库', controller: ItemviewController, icon: 'fa-home', show: true},
        {name: '图层', controller: LayersController, icon: 'fa-files-o', show: true},
    ];

渲染方法

    private renderList(){
        let renderString = '';
        for(let k of SidebarController.sidebarItemList){
            if(!k.show) continue;
            let str = `<div class="side-bar-item">
                    <i class="fa ${k.icon}"></i>
                    ${k.name.split('').map(v => `<span>${v}</span>`).join('')}
            </div>`;
            renderString += str;
        }
        $(this.el).append(renderString);
    }

点击每个标签便签会弹出功能区，也就是说，每个功能区控制器渲染元素是渲染到同一个标签中的，那么控制这个标签弹出收起的方法，我们单独抽离出来

    public openOrCloseSideView(type: 'open' | 'close') {
        if (type === 'open') {
            $('.side-view').css('width', '300px');
        } else if (type === 'close') {
            $('.side-view').css('width', '0px');
        }
    }

接下来给每个元素绑定点击事件

    private bindEvent() {
        let parentNode = $(this.el);
        let sonNode = parentNode.find('.side-bar-item');
        sonNode.each((i, v) => {
            $(v).on('click', () => {
                sonNode.each(function (ii, vv) {
                    $(vv).removeClass('active');
                });
                if (this.targetIndex === i) {
                    this.targetInstance && this.targetInstance.destory();
                    this.targetIndex = -1;
                    this.openOrCloseSideView('close');
                } else {
                    $(v).addClass('active');
                    this.targetInstance && this.targetInstance.destory();
                    this.targetInstance = new SidebarController.sidebarItemList[i].controller('.side-view');
                    this.targetIndex = i;
                    this.openOrCloseSideView('open');
                }
            })
        });
    }

在renderList中调用

    private renderList(){

        // ...
        this.bindEvent(); // 绑定点击事件
    }

这样点击方法就完成了，下一篇我们继续开发左边功能区
放一张现阶段效果图

image.png

---

此致
敬礼~
小旋风

我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243