编写大型项目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 教程