編寫大型項(xiàng)目web頁(yè)面從寫web登陸頁(yè)面開(kāi)始

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

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

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

ps 自動(dòng)裁圖自動(dòng)測(cè)量工具

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

sketch 可以使用阿里的工具 marketch

拿到界面不要急著做看看有什么問(wèn)題

有些我都會(huì)問(wèn)

pc端

ie8問(wèn)題如果要兼容ie8 我要考慮成本

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

mobile端

uc問(wèn)題

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

和后端溝通

咋們這頁(yè)面怎么和后端配合 ajax怎么測(cè) 會(huì)不會(huì)有mockdata

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

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

gulp
jshint
等等

技術(shù)選型

sass
postcss
typescript 或者 es6

登陸頁(yè)面簡(jiǎn)單嗎

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

表單簡(jiǎn)單嗎如果簡(jiǎn)單js會(huì)因此流行開(kāi)來(lái)嗎

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

先做頁(yè)面好的這里問(wèn)題來(lái)了 公司有沒(méi)有前端庫(kù)呢有的話還簡(jiǎn)單點(diǎn) 沒(méi)有就只能自己搭了

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

如何給css加ie的hack

ie 的模式

也許有的頁(yè)面會(huì)移動(dòng)端也用

360的保護(hù)

聽(tīng)說(shuō)標(biāo)準(zhǔn)很值錢 dom4 有classlist奧

開(kāi)始寫

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

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

ui布局一開(kāi)始要確定的
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庫(kù)
提供一些string map list的高級(jí)方法還有等等啦

scss-zhilizhili-mei 提供了一些簡(jiǎn)單的設(shè)計(jì)想法

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

大家編寫樣式時(shí)盡量使用sass或者postcss寫法不要直接寫css 這樣做目的希望代碼可讀性增加模塊化就算現(xiàn)在只有你一個(gè)人如果團(tuán)隊(duì)來(lái)新人或者你離職代碼交給別人維護(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)目一開(kāi)始會(huì)有一個(gè)color的基本表述文件定義為sass的一個(gè)全局變量
但是一些活動(dòng)頁(yè)面會(huì)有一些特殊的顏色怎么辦呢

$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)前頁(yè)面有特殊顏色需求就這么解決

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

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

編寫頁(yè)面代碼

    
        
            
                
                    
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    
                        
                    
                
                
                    
                
                
                    
                        
                            
                                
                                
                            
                        
                        
                            keep me logged in

沒(méi)什么好說(shuō)的就是一些表單元素

編寫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);

對(duì)于登陸而言 js驗(yàn)證時(shí)一件很重要的事通常需要解決輸入時(shí)檢測(cè) 提示提交時(shí) 監(jiān)測(cè) 提示

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

假設(shè)整個(gè)項(xiàng)目有一個(gè)通用的validator的對(duì)象這個(gè)實(shí)現(xiàn)不強(qiáng)求
我用的是validator.js if 后面是觸發(fā)事件名稱 do 是驗(yàn)證方法
這種在html上寫的語(yǔ)句我叫做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)證就是用分隔符隔開(kāi) 多個(gè)驗(yàn)證第一次錯(cuò)誤時(shí)就退出

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

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

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

form 組件我會(huì)寫幾篇文章

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

騫諱護(hù)

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

閱讀 3196·2019-08-30 11:13
前端面試常考知識(shí)點(diǎn)---CSS

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

編寫大型項(xiàng)目web頁(yè)面從寫web登陸頁(yè)面開(kāi)始

相關(guān)文章