編寫大型項目web頁面從寫web登錄頁面開始

時間 2019-11-06

標籤編寫大型項目 web 頁面登錄開始欄目 HTML 简体版

原文原文鏈接

web頁面搭建須要準備什麼工具

首先咱們會和設計師溝通咱們須要一些檢驗設計的工具

ps 自動裁圖自動測量工具css

（我這裏安利一下一個工具我用的cutterman)html

sketch 可使用阿里的工具 marketch 前端

拿到界面不要急着作看看有什麼問題 vue

有些我都會問node

pc端android

ie8問題若是要兼容ie8 我要考慮成本程序員
若是是webapp 一我的辦可能會出現時間的問題這個不要驚訝一我的作webapp會不停重構es6

mobile端web

uc問題ajax

除此以外最重要的控制住ui節奏和ui搞好關係告訴他們本身大約什麼進度要學會交流不要設計出來本身安排不過來就傻眼了

和後端溝通

咋們這頁面怎麼和後端配合 ajax怎麼測會不會有mockdata

溝通一般前端的位置是定位於先後端橋樑的這個我會在後文屢次強調另外咱麼這個文章是一系列的每一個ui的實現我可能會解讀一下w3c文檔可能就會佔用一篇文章

構建和審查工具

gulp
jshint
等等

技術選型

sass
postcss
typescript 或者 es6

登錄頁面簡單嗎

好像貌似很簡單不就是一個表單嗎

表單簡單嗎若是簡單js會所以流行開來嗎

表單固然不簡單驗證怎麼作

先作頁面好的這裏問題來了

公司有沒有前端庫呢有的話還簡單點沒有就只能本身搭了

首先確認一下既然作指南說下兼容目標 ie8 能夠看 ie9 能夠用
ie8 最後解決 ie8解決問題至少該pc端項目得配兩我的

如何給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]-->

ie 的模式

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

也許有的頁面會移動端也用

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

360的保護

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

據說標準很值錢 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;
  }
}

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>

沒什麼好說的就是一些表單元素

編寫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 組件我會寫幾篇文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

編寫大型項目web頁面 從寫web登錄頁面開始