編寫大型項(xiàng)目web頁面從寫web登陸頁面開始

騫諱護(hù) 發(fā)布于2019-08-28 18:27 / 2932人閱讀

摘要：頁面搭建需要準(zhǔn)備什么工具首先我們會和設(shè)計(jì)師溝通我們需要一些檢驗(yàn)設(shè)計(jì)的工具自動裁圖自動測量工具我這里安利一下一個(gè)工具我用的可以使用阿里的工具拿到界面不要急著做看看有什么問題有些我都會問端問題如果要兼容我要考慮成本如果是一個(gè)人辦可能會出現(xiàn)時(shí)間的

web頁面搭建需要準(zhǔn)備什么工具 首先我們會和設(shè)計(jì)師溝通我們需要一些檢驗(yàn)設(shè)計(jì)的工具

ps 自動裁圖自動測量工具

（我這里安利一下一個(gè)工具我用的cutterman)

sketch 可以使用阿里的工具 marketch

拿到界面不要急著做看看有什么問題

有些我都會問

pc端

ie8問題如果要兼容ie8 我要考慮成本

如果是webapp 一個(gè)人辦可能會出現(xiàn)時(shí)間的問題這個(gè)不要驚訝一個(gè)人做webapp會不停重構(gòu)

mobile端

uc問題

除此之外最重要的控制住ui節(jié)奏和ui搞好關(guān)系告訴他們自己大約什么進(jìn)度要學(xué)會交流不要設(shè)計(jì)出來自己安排不過來就傻眼了

和后端溝通

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

溝通 通常前端的位置是定位于前后端橋梁的 這個(gè)我會在后文多次強(qiáng)調(diào) 另外咱么這個(gè)文章是一系列的 每個(gè)ui的實(shí)現(xiàn) 我可能會解讀一下w3c文檔 可能就會占用一篇文章

構(gòu)建和審查工具

gulp
jshint
等等

技術(shù)選型

sass
postcss
typescript 或者 es6

登陸頁面簡單嗎

好像貌似很簡單不就是一個(gè)表單嗎

表單簡單嗎如果簡單js會因此流行開來嗎

表單當(dāng)然不簡單驗(yàn)證怎么做

先做頁面好的這里問題來了 公司有沒有前端庫呢有的話還簡單點(diǎn) 沒有就只能自己搭了

首先確認(rèn)一下既然做指南說下兼容目標(biāo) ie8 可以看 ie9 可以用
ie8 最后解決 ie8解決問題至少該pc端項(xiàng)目得配兩個(gè)人

如何給css加ie的hack

ie 的模式

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

360的保護(hù)

聽說標(biāo)準(zhǔn)很值錢 dom4 有classlist奧

開始寫

不急我們先規(guī)劃下
首先node_modules已成為事實(shí)上前端包管理目錄所以我們要在里面建立一個(gè)ui庫

我自己一直在穩(wěn)定更新自己的ui庫zhilizhili-ui

ui布局一開始要確定的
color
font

--某個(gè)項(xiàng)目靜態(tài)目錄
  -- 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 提供了一些簡單的設(shè)計(jì)想法

大家平時(shí)一定要遵循dry法則

大家編寫樣式時(shí)盡量使用sass或者postcss寫法不要直接寫css 這樣做目的希望代碼可讀性增加模塊化就算現(xiàn)在只有你一個(gè)人如果團(tuán)隊(duì)來新人或者你離職代碼交給別人維護(hù) 大家都是程序員何苦為難自己人

_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);
}

首先項(xiàng)目一開始會有一個(gè)color的基本表述文件定義為sass的一個(gè)全局變量
但是一些活動頁面會有一些特殊的顏色怎么辦呢

$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顏色如果當(dāng)前頁面有特殊顏色需求就這么解決

一個(gè)標(biāo)準(zhǔn)的項(xiàng)目準(zhǔn)備開始我們需要什么呢我們可以看張圖

這是android material design的設(shè)計(jì) 下篇文章我們把前端樣式這邊梳理一下

編寫頁面代碼

    
        
            
                
                    
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    
                        
                    
                
                
                    
                
                
                    
                        
                            
                                
                                
                            
                        
                        
                            keep me logged in

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

編寫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驗(yàn)證時(shí)一件很重要的事通常需要解決輸入時(shí)檢測提示提交時(shí) 監(jiān)測提示

這里我的想法是提供一種通用寫法具體實(shí)現(xiàn) 可以不一樣

假設(shè)整個(gè)項(xiàng)目有一個(gè)通用的validator的對象這個(gè)實(shí)現(xiàn)不強(qiáng)求
我用的是validator.js if 后面是觸發(fā)事件名稱 do 是驗(yàn)證方法
這種在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:)[sw(),|]+/g)[0].replace("do:", "").split("|").map(function(item) {
            var args = [];
            var reg = /(?:()[ws,]+/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);"

如果有多個(gè)驗(yàn)證就是用分隔符隔開多個(gè)驗(yàn)證第一次錯(cuò)誤時(shí)就退出

任何驗(yàn)證都要提供 regex-error 和 regex-success 兩個(gè)方法

再說組件每個(gè)html 組件目前我是用vue實(shí)現(xiàn)的但是我決定用angular2做了所以不怎么說了

框架的validtor 需要保留每個(gè)待驗(yàn)證的方式以便使用submit提交時(shí)可以驗(yàn)證以便實(shí)現(xiàn)組件于頁面邏輯的結(jié)構(gòu)

form 組件我會寫幾篇文章

GPU云服務(wù)器云服務(wù)器 Web頁面信息多頁面web web前端頁面 Web錯(cuò)誤處理頁面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111237.html

發(fā)表評論

登陸后可評論

0條評論

騫諱護(hù)

男|高級講師

我要關(guān)注我要私信

TA的文章

【手把手帶你刷好題】——21.一道筆試題（非力扣）

閱讀 2527·2021-11-22 09:34
HostUS：洛杉磯VPS年付16美元起,可選洛杉磯等8個(gè)機(jī)房

閱讀 3146·2021-10-25 09:43
Python 3.10 發(fā)布帶來諸多改進(jìn)

閱讀 2063·2021-10-11 10:59
主機(jī)標(biāo)識怎么查-主機(jī)標(biāo)識怎么看？

閱讀 3487·2021-09-22 15:13
年薪30萬的軟件測試工程師需要具備的實(shí)力有哪些?

閱讀 2398·2021-09-04 16:40
extjs6.0 treepanel設(shè)置展開和設(shè)置選中

閱讀 477·2019-08-30 15:53
詳細(xì)了解 offsetWidth、Height、Top、Left 以及偏移基準(zhǔn) offsetPar

閱讀 3261·2019-08-30 11:13
前端面試?？贾R點(diǎn)---CSS

閱讀 2665·2019-08-29 17:30

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

編寫大型項(xiàng)目web頁面從寫web登陸頁面開始

相關(guān)文章