當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/8/22 编程问答 22 如意码农

生活随笔收集整理的這篇文章主要介紹了编写大型项目web页面从写web登陆页面开始小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

web頁面搭建需要準備什么工具

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

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

<!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登陆页面开始的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：一、centos7更改网卡名称eth0
下一篇： IndexedDB 教程