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

头像
andypinet
    阅读 8 分钟
    1

    web页面搭建需要准备什么工具

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

    ps 自动裁图 自动测量工具

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

    sketch 可以使用阿里的工具 marketch

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

    有些我都会问

    pc端

    1. ie8问题 如果要兼容ie8 我要考虑成本

    2. 如果是webapp 一个人办 可能会出现时间的问题 这个不要惊讶 一个人做webapp会不停重构

    mobile端

    1. uc问题

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

    和后端沟通

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

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

    构建和审查工具

    gulp
    jshint
    等等

    技术选型

    sass
    postcss
    typescript 或者 es6

    登陆页面简单吗

    图片描述

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

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

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

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

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

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

    1. 如何给css加ie的hack

    <!doctype html>
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]-->

    1. ie 的模式

    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

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

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

    1. 360的保护

    <meta name="renderer" content="webkit">

    1. 听说标准很值钱 dom4 有classlist奥

    <script src="/assets/static/js/dom4.min.js"></script>

    开始写

    不急 我们先规划下
    首先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;
  }
}

    1. font.scss 使用的是自己整合的sassstd 这是自己搜集的sass库
      提供一些string map list的高级方法 还有等等啦

    2. scss-zhilizhili-mei 提供了一些简单的设计想法

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

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

    1. _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>

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

    编写js代码

    在编写代码的之前 解决一些浏览器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 组件我会写几篇文章

    javascripthtmlcss
    andypinet
    1.2k 声望41 粉丝

    求一个常州 无锡 镇江的前端工作

    « 上一篇
    努力加强ie8到ie9 polyfill水平 彻底抛弃老旧浏览器ie8
    下一篇 »
    编写大型项目web页面 样式基础搭建

    引用和评论

    推荐阅读
    头像
    编写大型web应用 终于有了一些体会

    andypinet阅读 2.4k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新