编写大型项目web页面从写web登陆页面开始

阅读原文时间：2023年07月09日阅读：1

首先我们会和设计师沟通我们需要一些检验设计的工具

ps 自动裁图自动测量工具

（我这里安利一下一个工具我用的cutterman)

sketch 可以使用阿里的工具 marketch

拿到界面不要急着做看看有什么问题

有些我都会问

pc端

ie8问题如果要兼容ie8 我要考虑成本
如果是webapp 一个人办可能会出现时间的问题这个不要惊讶一个人做webapp会不停重构

mobile端

uc问题

除此之外最重要的控制住ui节奏和ui搞好关系告诉他们自己大约什么进度要学会交流不要设计出来自己安排不过来就傻眼了

和后端沟通

咋们这页面怎么和后端配合 ajax怎么测会不会有mockdata

沟通通常前端的位置是定位于前后端桥梁的这个我会在后文多次强调另外咱么这个文章是一系列的每个ui的实现我可能会解读一下w3c文档可能就会占用一篇文章

构建和审查工具

gulp
jshint
等等

技术选型

sass
postcss
typescript 或者 es6

好像貌似很简单不就是一个表单吗

表单简单吗如果简单js会因此流行开来吗

表单当然不简单验证怎么做

先做页面好的这里问题来了

公司有没有前端库呢有的话还简单点没有就只能自己搭了

首先确认一下既然做指南说下兼容目标 ie8 可以看 ie9 可以用
ie8 最后解决 ie8解决问题至少该pc端项目得配两个人

如何给css加ie的hack
ie 的模式

也许有的页面会移动端也用

<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

360的保护
听说标准很值钱 dom4 有classlist奥

开始写

不急我们先规划下
首先node_modules已成为事实上前端包管理目录所以我们要在里面建立一个ui库

我自己一直在稳定更新自己的ui库zhilizhili-ui

ui布局一开始要确定的
color
font

--某个项目静态目录
  -- framework
     -- elements
  -- my module
      -- sass
        _color.scss
        _font.scss

__color.scss

$custom-color: (
        "blue": (
                "500": #0f8ffe,
                "600": #0088ff
        ),
        "red": (
                "600": #f26c4f
        ),
        "green": (
                "600": #d6e9ba
        ),
        "yellow": (
                "600": #ecf82c
        ),
        "purple": (
                "600": #e22cf8
        ),
        "grey": (
                "400": #c2c2c2,
                "500": #898989,
                "600": #464646
        )
) !global;

@function get-custom-color($name, $level: "600") {
  @return map-deep-get($custom-color, $name, $level);
}

_font.scss

@import "../../../../../node_modules/sassstd/src/sassstd";
@import "../../../../../node_modules/sassyjson/stylesheets/SassyJSON";
@import "../../../../../node_modules/scss-zhilizhili-mei/stylesheets/mei";

@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/full-parent";
@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/size";
@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/bem";
@import "../../../../../node_modules/zhilizhili-ui/framework/sass/utils/query-selector";
@import "../../../../../node_modules/zhilizhili-ui/framework/sass/common/sim-querySelector";

@mixin interface-font() {
  .font {
    @content;
  }
}

@mixin use-font() {
  $defaults: (
    ".font": (
    )
  );

  @include interface-font() {
    @include register-hook("font");
    @content;
  }
}

@mixin use-amazeui-font($sel: body) {
  #{$sel} {
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
  }
}

font.scss 使用的是自己整合的sassstd 这是自己搜集的sass库
提供一些string map list的高级方法还有等等啦
scss-zhilizhili-mei 提供了一些简单的设计想法

大家平时一定要遵循dry法则

大家编写样式时尽量使用sass或者postcss写法不要直接写css 这样做目的希望代码可读性增加模块化就算现在只有你一个人如果团队来新人或者你离职代码交给别人维护大家都是程序员何苦为难自己人

_color.scss

$custom-color: (
"blue": (
"500": #0f8ffe,
"600": #0088ff
),
"red": (
"600": #f26c4f
),
"green": (
"600": #d6e9ba
),
"yellow": (
"600": #ecf82c
),
"purple": (
"600": #e22cf8
),
"grey": (
"400": #c2c2c2,
"500": #898989,
"600": #464646
)
) !global;

@function get-custom-color($name, $level: "600") {
@return map-deep-get($custom-color, $name, $level);
}

首先项目一开始会有一个color的基本表述文件定义为sass的一个全局变量
但是一些活动页面会有一些特殊的颜色怎么办呢

$custom-color: map-extend($custom-color, (
        "pink": (
                "600": #f54c72
        ),
        "green": (
                "600": #4bbf4a
        ),
        "blue": (
                "600": #5093e1
        ),
        "purple": (
                "600": #442488
        ),
        "grey": (
                "200": #fbfbfb,
                "300": #EDEFF5,
                "400": #EAECEC,
                "500": #A4ADBF,
                "600": #50535E
        )
)) !global;

使用map-extend 就可以修改custom-color颜色如果当前页面有特殊颜色需求就这么解决

一个标准的项目准备开始我们需要什么呢我们可以看张图

这是android material design的设计下篇文章我们把前端样式这边梳理一下

    <div class="center-set">
        <div class="center-set__item">
            <form id="loginForm" action="" class="form login-form">
                <div class="form__group">
                    <div id="email" class="form-field" data-regex="if: input, do: isEmail;"
                         v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess" >
                        <input type="text" placeholder="Email">
                    </div>
                    <div class="tip">
                        <span class="icon"></span>
                    </div>
                </div>
                <div class="form__group">
                    <div id="password" class="form-field" data-regex="if: input, do: min(6) | max(15);"
                         v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess">
                        <input type="password" placeholder="Password">
                    </div>
                    <div class="tip">
                        <span class="icon"></span>
                    </div>
                </div>
                <div class="form__group">
                    <button id="submit" type="submit" class="btn form__btn submit-btn">提交</button>
                </div>
                <div class="form__group">
                    <div class="center-set remeberme-set">
                        <div class="center-set__item">
                            <div class="form-checkbox">
                                <input type="checkbox">
                                <div></div>
                            </div>
                        </div>
                        <div class="center-set__item">
                            <span>keep me logged in</span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

没什么好说的就是一些表单元素

在编写代码的之前解决一些浏览器bug

ie9 input事件bug

// ie9 input 事件polyfill
(function (d) {
    if (navigator.userAgent.indexOf('MSIE 9') === -1) return;
    var elements = [], values = [], ev = d.createEvent('CustomEvent');
    ev.initCustomEvent('input', true, true, {});

    d.addEventListener('selectionchange', function() {
        var actEl = d.activeElement;

        if (actEl.tagName === 'TEXTAREA' || (actEl.tagName === 'INPUT')) {
            var idx = elements.indexOf(actEl), el = elements[idx] || elements.push(actEl);
            if (actEl.type === 'text' || actEl.type === 'password' || actEl.type === 'search') {
                if (el.value !== values[idx]) {
                    values[idx] = el.value;
                    el.dispatchEvent(ev);
                }
            }
        }
    });
})(document);

对于登陆而言 js验证时一件很重要的事通常需要解决输入时检测提示提交时监测提示

这里我的想法是提供一种通用写法具体实现可以不一样

<div id="email" class="form-field" data-regex="if: input, do: isEmail;"
     v-on:regex-error="handleRegexError" v-on:regex-success="handleRegexSuccess" >
    <input type="text" placeholder="Email">
</div>

假设整个项目有一个通用的validator的对象这个实现不强求
我用的是validator.js if 后面是触发事件名称 do 是验证方法
这种在html上写的语句我叫做sml

// 解析sml
utils.sml = (function() {
    function parse(str) {
        var parseobj = {};
        parseobj["event"] = str.match(/(?:if:)\s*\w*/g)[0].replace("if:", "").trim();
        parseobj["regex"] = str.match(/(?:do:)[\s\w\(\),|]+/g)[0].replace("do:", "").split("|").map(function(item) {
            var args = [];
            var reg = /(?:\()[\w\s,]+/g;
            if (item.indexOf("(") > -1 && item.indexOf(")") > -1) {
                var val = item.match(reg)[0].replace("(", "").split(",");
                args = args.concat(val);
            }
            return {
                name: item.trim().replace(reg, "").replace(")", ""),
                args: args
            };
        });
        return parseobj;
    }

    return {
        parse: parse
    }
})();

data-regex="if: input, do: min(6) | max(15);"

如果有多个验证就是用分隔符隔开多个验证第一次错误时就退出

任何验证都要提供 regex-error 和 regex-success 两个方法

再说组件每个html 组件目前我是用vue实现的但是我决定用angular2做了所以不怎么说了

框架的validtor 需要保留每个待验证的方式以便使用submit提交时可以验证以便实现组件于页面逻辑的结构

form 组件我会写几篇文章

手机扫一扫

移动阅读更方便