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

DevTTL 發布于2019-08-01 14:57 / 1158人閱讀

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

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

ie 的模式

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

360的保護

聽說標準很值錢 dom4 有classlist奧

開始寫

不急我們先規劃下
首先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的設計下篇文章我們把前端樣式這邊梳理一下

編寫頁面代碼

    
        
            
                
                    
                        
                    
                    
                        
                    
                
                
                    
                        
                    
                    
                        
                    
                
                
                    
                
                
                    
                        
                            
                                
                                
                            
                        
                        
                            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驗證時一件很重要的事通常需要解決輸入時檢測提示提交時監測提示

這里我的想法是提供一種通用寫法具體實現可以不一樣

假設整個項目有一個通用的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:)[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);"

如果有多個驗證就是用分隔符隔開多個驗證第一次錯誤時就退出

任何驗證都要提供 regex-error 和 regex-success 兩個方法

再說組件每個html 組件目前我是用vue實現的但是我決定用angular2做了所以不怎么說了

框架的validtor 需要保留每個待驗證的方式以便使用submit提交時可以驗證以便實現組件于頁面邏輯的結構

form 組件我會寫幾篇文章

GPU云服務器云服務器 Web頁面信息多頁面web web前端頁面 Web錯誤處理頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49678.html

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

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

cangck_X 2019-08-19 17:15 評論0 收藏0
編寫大型項目web頁面從寫web登陸頁面開始

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

騫諱護 2019-08-28 18:27 評論0 收藏0
【Java EE】從零開始寫項目【總結】

摘要：目前該功能并未完善，敬請期待。反正每次都會有新的東西補充上去一開始我本來想做的是可以使用微信登陸，也可以使用賬戶郵箱登陸，也可以使用短信登陸的。后來發現微信登陸要企業認證，做不了。從零開發項目概述最近這一直在復習數據結構和算法，也就是前面發出去的排序算法八大基礎排序總結，Java實現單向鏈表，棧和隊列就是這么簡單，十道簡單算法題等等... 被虐得不要不要的，即使是非常簡單有時候繞半...

imtianx 2019-08-16 11:12 評論0 收藏0
編寫大型項目web頁面樣式基礎搭建

摘要：文中的一些方法來源于我的有出售請大家自行拷貝粘貼顏色要使用代詞加數字大小形式數字規格顏色變量不許由或者方法計算得出項目顏色基于配色基礎色庫設計師都會配出來項目色庫需要項目去改變設計師文字和前端頁面開發者文字必須為同一類文中sass的一些方法來源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售請大家自行拷貝粘貼 showImg(ht...

smartlion 2019-08-19 17:15 評論0 收藏0
編寫大型項目web頁面樣式基礎搭建

摘要：文中的一些方法來源于我的有出售請大家自行拷貝粘貼顏色要使用代詞加數字大小形式數字規格顏色變量不許由或者方法計算得出項目顏色基于配色基礎色庫設計師都會配出來項目色庫需要項目去改變設計師文字和前端頁面開發者文字必須為同一類文中sass的一些方法來源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售請大家自行拷貝粘貼 showImg(ht...

Dean 2019-08-28 18:26 評論0 收藏0