整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx</title>
<style>
.title{
background-color: orange:
width: 200px;
}
</style><!--定義個樣式，也可以寫在CSS文件里，引入進來-->
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
</body>
<script type="text/babel">
const myid= "lOVE you"
const mydata= "hellO jsx"
const VDOM = ( // <!--h2標簽引入樣式，用className,span標簽引入內(nèi)聯(lián)樣式的時候，不是用雙引號，而是雙花括號，-->
<div>
<h2 className="title" id={myid.toLowerCase()}>
<span style={{color:'red',fontSize:'29px'}}>{mydata.toLowerCase()}</span>
</h2>)// <!--標簽中混入JS表達式時要用花括號{},如這里mydata取值 -->
//jsx中只能有一個根標簽，比如這里的h2，可以在h2的外面包一層div，就可以寫兩個h2
<h2 className="title" id={myid.toUpperCase()}>
<span style={{color:'red',fontSize:'29px'}}>{mydata.toLowerCase()}</span>
</h2>)
//標簽首字母若是小寫字母，則將該標簽轉為html中同名元素，若html中無該標簽對應的同名元素，則報錯
//標簽首字母若是大寫字母，react就去渲染對應的組件，若組件沒有定義，則報錯
</div>
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</html>
<script type="text/babel">
const data=['A','B','C']
const VDOM = (
<div> //js表達式會產(chǎn)生一個值。js語句（代碼）,有if，for，switch判斷，
<h1>jsx框架</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
}) //item拿到data里面對應的值，map遍歷的第二個值是索引值，
}
</ul>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>對應的網(wǎng)頁如下：
模塊是向外提供特定功能的js程序，一般就是一個js文件。
組件比模塊更高一級，比如實現(xiàn)一個網(wǎng)頁的頭部的html，字體，css，js，圖像這些元素組合在一起，就形成了頭部這個組件。
函數(shù)式組件：
<script type="text/babel">
function MyComponent(){
return <h2>show the function component</h2>
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
//<MyComponent/>要寫上標簽，函數(shù)定義首字母需要大寫
</script>執(zhí)行了ReactDOM.render(<MyComponent/>。。之后，React解析組件標簽，找到MyComponent組件，發(fā)現(xiàn)組件是使用函數(shù)定義的，隨后調(diào)用該函數(shù)，將返回的虛擬DOM轉為真是DOM，隨后呈現(xiàn)在頁面中。
類式組件：
作為程序員的我們，經(jīng)常要用到文件的上傳和下載功能。到了需要用的時候，各種查資料。有木有..有木有...。為了方便下次使用，這里來做個總結和備忘。
最原始、最簡單、最粗暴的文件上傳。
前端代碼：
//方式1
<form action="/Home/SaveFile1" method="post" enctype="multipart/form-data">
<input type="file" class="file1" name="file1" />
<button type="submit" class="but1">上傳</button>
</form>
【注意】
后臺代碼：
public ActionResult SaveFile1()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Request.Files[0].FileName);
return Content("保存成功");
}
return Content("沒有讀到文件");
}
雖然上面的方式簡單粗暴，但是不夠友好。頁面必然會刷新。難以實現(xiàn)停留在當前頁面，并給出文件上傳成功的提示。
隨著時間的流逝，技術日新月異。ajax的出現(xiàn)，使得異步文件提交變得更加容易。
下面我們利用jquery.form插件來實現(xiàn)文件的異步上傳。
首先我們需要導入jquery.js和jquery.form.js
前端代碼：
<form id="form2" action="/Home/SaveFile2" method="post" enctype="multipart/form-data">
<input type="file" class="file1" name="file1" />
<button type="submit" class="but1">上傳1</button>
<button type="button" class="but2">上傳2</button>
</form>
//方式2（通過ajaxForm綁定ajax操作）
$(function () {
$('#form2').ajaxForm({
success: function (responseText) {
alert(responseText);
}
});
});
//方式3（通過ajaxSubmit直接執(zhí)行ajax操作）
$(function () {
$(".but2").click(function () {
$('#form2').ajaxSubmit({
success: function (responseText) {
alert(responseText);
}
});
});
});
后臺代碼：
public string SaveFile2()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
return "保存成功";
}
return "沒有讀到文件";
}
原理：
我們很多時候使用了插件，就不管其他三七二十一呢。
如果有點好奇心，想想這個插件是怎么實現(xiàn)的。隨便看了看源碼一千五百多行。我的媽呀，不就是個異步上傳的嗎，怎么這么復雜。
難以看出個什么鬼來，直接斷點調(diào)試下吧。
原來插件內(nèi)部有iframe和FormData不同方式來上傳，來適應更多版本瀏覽器。
iframe這東西太惡心。我們看到上面可以利用FormData來上傳文件，這個是Html 5 才有的。下面我們自己也來試試吧。
前端代碼：
<input id="fileinfo" type="file" class="notFormFile" />
<button type="button" class="btnNotForm">上傳4</button>
//方式4
$(".btnNotForm").click(function () {
var formData = new FormData();//初始化一個FormData對象
formData.append("files", $(".notFormFile")[0].files[0]);//將文件塞入FormData
$.ajax({
url: "/Home/SaveFile2",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});
});
后面的代碼：（不變，還是上例代碼）
public string SaveFile2()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
return "保存成功";
}
return "沒有讀到文件";
}
我們看到，F(xiàn)ormData對象也只是在模擬一個原始的表單格式的數(shù)據(jù)。那有沒有可能利用表單或表單格式來上傳文件呢？答案是肯定的。（下面馬上揭曉）
前端代碼：
<input type="file" id="file5" multiple>
<button type="button" class="btnFile5">上傳5</button>
//方式5
$(".btnFile5").click(function () {
$.ajax({
url: "/Home/SaveFile4",
type: "POST",
data: $("#file5")[0].files[0],
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});;
});
后臺代碼：
public string SaveFile4()
{
//這里發(fā)現(xiàn)只能得到一個網(wǎng)絡流，沒有其他信息了。（比如，文件大小、文件格式、文件名等）
Request.SaveAs(Server.MapPath("~/App_Data/SaveFile4.data") + "", false);
return "保存成功";
}
細心的你發(fā)現(xiàn)沒有了表單格式，我們除了可以上傳文件流數(shù)據(jù)外，不能再告訴后臺其他信息了（如文件格式）。
到這里，我似乎明白了以前上傳文件為什么非得要用個form包起來，原來這只是和后臺約定的一個傳輸格式而已。
其實我們單純地用jq的ajax傳輸文本數(shù)據(jù)的時候，最后也是組裝成了form格式的數(shù)據(jù)，如：
$.ajax({
data: { "userName": "張三" }
在知道了上面的各種上傳之后，我們是不是就滿于現(xiàn)狀了呢？no，很多時候我們需要傳輸大文件，一般服務器都會有一定的大小限制。
某天，你發(fā)現(xiàn)了一個激情小電影想要分享給大家。無奈，高清文件太大傳不了，怎么辦？我們可以化整為零，一部分一部分的傳嘛，也就是所謂的分片上傳。
前端代碼：
<input type="file" id="file6" multiple>
<button type="button" class="btnFile6">分片上傳6</button>
<div class="result"></div>
//方式6
$(".btnFile6").click(function () {
var upload = function (file, skip) {
var formData = new FormData();//初始化一個FormData對象
var blockSize = 1000000;//每塊的大小
var nextSize = Math.min((skip + 1) * blockSize, file.size);//讀取到結束位置
var fileData = file.slice(skip * blockSize, nextSize);//截取 部分文件 塊
formData.append("file", fileData);//將 部分文件 塞入FormData
formData.append("fileName", file.name);//保存文件名字
$.ajax({
url: "/Home/SaveFile6",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
success: function (responseText) {
$(".result").html("已經(jīng)上傳了" + (skip + 1) + "塊文件");
if (file.size <= nextSize) {//如果上傳完成，則跳出繼續(xù)上傳
alert("上傳完成");
return;
}
upload(file, ++skip);//遞歸調(diào)用
}
});
};
var file = $("#file6")[0].files[0];
upload(file, 0);
});
后臺代碼：
public string SaveFile6()
{
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"];
//創(chuàng)建一個追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
//讀取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//將文件留轉成字節(jié)數(shù)組
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//將字節(jié)數(shù)組追加到文件
bw.Write(bytes);
}
}
return "保存成功";
}
相對而言，代碼量多了一點，復雜了一點。不過相對于網(wǎng)上的其他分片上傳的代碼應該要簡單得多（因為這里沒有考慮多文件塊同時上傳、斷點續(xù)傳。那樣就需要在后臺把文件塊排序，然后上傳完成按序合并，然后刪除原來的臨時文件。有興趣的同學可以自己試試，稍候在分析上傳插件webuploader的時候也會實現(xiàn)）。
效果圖：
【說明】：如果我們想要上傳多個文件怎么辦？其實H5中也提供了非常簡單的方式。直接在input里面標記multiple，<input type="file" id="file6" multiple>，然后我們后臺接收的也是一個數(shù)組Request.Files。
只能說H5真是強大啊，權限越來越大，操作越來越牛逼。
前端代碼（拖拽上傳）：
<textarea class="divFile7" style="min-width:800px;height:150px" placeholder="請將文件拖拽或直接粘貼到這里"></textarea>
//方式7
$(".divFile7")[0].ondrop = function (event) {
event.preventDefault();//不要執(zhí)行與事件關聯(lián)的默認動作
var files = event.dataTransfer.files;//獲取拖上來的文件
//以下代碼不變
var formData = new FormData();//初始化一個FormData對象
formData.append("files", files[0]);//將文件塞入FormData
$.ajax({
url: "/Home/SaveFile2",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});
};
后臺代碼：
略（和之前的SaveFile2一樣）
前端代碼（粘貼上傳 限圖片格式）：
//方式8
$(".divFile7")[0].onpaste = function (event) {
event.preventDefault();//不要執(zhí)行與事件關聯(lián)的默認動作
var clipboard = event.clipboardData.items[0];//剪貼板數(shù)據(jù)
if (clipboard.kind == 'file' || clipboard.type.indexOf('image') > -1) {//判斷是圖片格式
var imageFile = clipboard.getAsFile();//獲取文件
//以下代碼不變
var formData = new FormData;
formData.append('files', imageFile);
formData.append('fileName', "temp.png");//這里給文件命個名（或者直接在后臺保存的時候命名）
$.ajax({
url: "/Home/SaveFile8",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});
}
};
后臺代碼：
public string SaveFile8()
{
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"];
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(filePath);
return "保存成功";
}
return "沒有讀到文件";
}
效果圖：
已經(jīng)列舉分析了多種上傳文件的方式，我想總有一種適合你。不過，上傳這個功能比較通用，而我們自己寫的可能好多情況沒有考慮到。接下來簡單介紹下百度的WebUploader插件。
比起我們自己寫的簡單上傳，它的優(yōu)勢：穩(wěn)定、兼容性好（有flash切換，所以支持IE）、功能多、并發(fā)上傳、斷點續(xù)傳（主要還是靠后臺配合）。
官網(wǎng)：http://fex.baidu.com/webuploader/
插件下載：https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
下面開始對WebUploader的使用
第一種，簡單粗暴
前端代碼：
<div id="picker">選擇文件</div>
<button id="ctlBtn" class="btn btn-default">開始上傳</button>
<!--引用webuploader的js和css-->
<link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript">
var uploader = WebUploader.create({
// (如果是新瀏覽器 可以不用 flash)
//swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服務端。
server: '/Webuploader/SaveFile',
// 選擇文件的按鈕。可選。
// 內(nèi)部根據(jù)當前運行是創(chuàng)建，可能是input元素，也可能是flash.
pick: '#picker'
});
$("#ctlBtn").click(function () {
uploader.upload();
});
uploader.on('uploadSuccess', function (file) {
alert("上傳成功");
});
</script>
后臺代碼：
public string SaveFile()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
return "保存成功";
}
return "沒有讀到文件";
}
第二種，分片上傳。和我們之前自己寫的效果差不多。
前端代碼：
var uploader = WebUploader.create({
//兼容老版本IE
swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服務端。
server: '/Webuploader/SveFile2',
// 開起分片上傳。
chunked: true,
//分片大小
chunkSize: 1000000,
//上傳并發(fā)數(shù)
threads: 1,
// 選擇文件的按鈕。
pick: '#picker'
});
// 點擊觸發(fā)上傳
$("#ctlBtn").click(function () {
uploader.upload();
});
uploader.on('uploadSuccess', function (file) {
alert("上傳成功");
});
后臺代碼：
public string SveFile2()
{
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName);
//創(chuàng)建一個追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
//讀取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//將文件留轉成字節(jié)數(shù)組
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//將字節(jié)數(shù)組追加到文件
bw.Write(bytes);
}
}
return "保存成功";
}
我們看到了有個參數(shù)threads: 1上傳并發(fā)數(shù)，如果我們改成大于1會怎樣？前端會同時發(fā)起多個文件片上傳。后臺就會報錯，多個進程同時操作一個文件。
那如果我們想要多線程上傳怎么辦？改代碼吧（主要是后臺邏輯）。
前端代碼：
//并發(fā)上傳（多線程上傳）
var uploader = WebUploader.create({
//兼容老版本IE
swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服務端。
server: '/Webuploader/SveFile3',
// 開起分片上傳。
chunked: true,
//分片大小
chunkSize: 1000000,
//上傳并發(fā)數(shù)
threads: 10,
// 選擇文件的按鈕。
pick: '#picker'
});
// 點擊觸發(fā)上傳
$("#ctlBtn").click(function () {
uploader.upload();
});
uploader.on('uploadSuccess', function (file) {
//上傳完成后，給后臺發(fā)送一個合并文件的命令
$.ajax({
url: "/Webuploader/FileMerge",
data: { "fileName": file.name },
type: "post",
success: function () {
alert("上傳成功");
}
});
});
后臺代碼：
public string SveFile3()
{
var chunk = Request.Form["chunk"];//當前是第多少片
var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(Request.Files
if (!Directory.Exists(path))//判斷是否存在此路徑，如果不存在則創(chuàng)建
{
Directory.CreateDirectory(path);
}
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = path + "/" + chunk;
//創(chuàng)建一個追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
//讀取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//將文件留轉成字節(jié)數(shù)組
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//將字節(jié)數(shù)組追加到文件
bw.Write(bytes);
}
}
return "保存成功";
}
/// <summary>
/// 合并文件
/// </summary>
/// <param name="path"></param>
/// <returns></returns>
public bool FileMerge()
{
var fileName = Request.Form["fileName"];
var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(fileName);
//這里排序一定要正確，轉成數(shù)字后排序（字符串會按1 10 11排序，默認10比2小）
foreach (var filePath in Directory.GetFiles(path).OrderBy(t => int.Parse(Path.GetFileNameWithoutExtension(t))))
{
using (FileStream fs = new FileStream(Server.MapPath("~/App_Data/") + fileName, FileMode.Append, FileAccess.Write))
{
byte[] bytes = System.IO.File.ReadAllBytes(filePath);//讀取文件到字節(jié)數(shù)組
fs.Write(bytes, 0, bytes.Length);//寫入文件
}
System.IO.File.Delete(filePath);
}
Directory.Delete(path);
return true;
}
到這里你以為就結束了嗎？錯，還有好多情況沒有考慮到。如果多個用戶上傳的文件名字一樣會怎樣？如何實現(xiàn)斷點續(xù)傳？還沒實現(xiàn)選擇多個文件？不過，這里不打算繼續(xù)貼代碼了（再貼下去，代碼量越來越多了），自己也來練習練習吧。
提供一個思路，上傳前先往數(shù)據(jù)庫插入一條數(shù)據(jù)。數(shù)據(jù)包含文件要存的路徑、文件名（用GUID命名，防止同名文件沖突）、文件MD5（用來識別下次續(xù)傳和秒傳）、臨時文件塊存放路徑、文件是否完整上傳成功等信息。
然后如果我們斷網(wǎng)后再傳，首先獲取文件MD5值，看數(shù)據(jù)庫里面有沒上傳完成的文件，如果有就實現(xiàn)秒傳。如果沒有，看是不是有上傳了部分的。如果有接著傳，如果沒有則重新傳一個新的文件。
之前我一直很疑惑，為什么上傳文件一定要用form包起來，現(xiàn)在算是大概明白了。
最開始在javascript還不流行時，我們就可以直接使用submit按鈕提交表單數(shù)據(jù)了。表單里面可以包含文字和文件。然后隨著js和ajax的流行，可以利用ajax直接異步提交部分表單數(shù)據(jù)。這里開始我就糾結了，為什么ajax可以提交自己組裝的數(shù)據(jù)。那為什么不能直接提交文件呢。這里我錯了，ajax提交的并不是隨意的數(shù)據(jù)，最后還是組裝成了表單格式（因為后臺技術對表單格式數(shù)據(jù)的支持比較普及）。但是現(xiàn)有的技術還不能通過js組裝一個文件格式的表單數(shù)據(jù)。直到H5中的FormData出現(xiàn)，讓前端js組裝一個包含文件的表單格式數(shù)據(jù)成為了可能。所以說表單只是為了滿足和后臺“約定”的數(shù)據(jù)格式而已。
相關推薦
demo
以下是一個標準的html結構
html復制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- 頁面標題不能為空 -->
<title>京東商城:商家后臺</title>
<!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 樣式文件 以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內(nèi)容區(qū)域，比如：菜單頭</header>
<div class="content">主內(nèi)容區(qū)域</div>
<footer>頂部頁尾區(qū)域，比如：備案號</footer>
</div>
<!-- js文件 在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多個框架混合使用，在同一個工程里面要保持主框架的一致性，多框架同時使用會造成代碼混亂，后期會變得越來越難維護。
1、全局樣式禁止使用!important
2、避免使用導入式引入css樣式文件；
css復制代碼<style type="text/css">
@import url(./demo.css);
</style>
歷史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要將依賴的js文件刪除，避免資源加載浪費
開啟Gzip壓縮功能， 可以使網(wǎng)站的css、js 、xml、html 文件在傳輸時進行壓縮，提高訪問速度
在開發(fā)過程中，發(fā)現(xiàn)無用字段占傳輸比例30%以上時，請進行返回數(shù)據(jù)的刪減，加快數(shù)據(jù)請求速度
上傳圖片之前一定要做圖片的無損壓縮，節(jié)省網(wǎng)絡流量,推薦網(wǎng)站tinypng
html復制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索，不強制使用 -->
<meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
<meta name="Description" Content=”頁面描述″>
<!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 推薦手動引入指定路徑 favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 樣式文件必須以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
<!-- 內(nèi)聯(lián)樣式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 頁面標題不能為空 -->
<title>頁面標題</title>
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內(nèi)容區(qū)域，比如：菜單頭</header>
<div class="content">主內(nèi)容區(qū)域</div>
<footer>頂部頁尾區(qū)域，比如：備案號</footer>
</div>
<!-- JavaScript 文件在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
原生 HTML 標簽元素小寫使用，自定義組件使用小駝峰命名（自定義標簽避免和原生標簽同名）
html復制代碼<!-- 錯誤 ? -->
<DIV></DIV>
<SPAN></SPAN>
<!-- 正確 ? -->
<div></div>
<p></p>
<!-- 自定義組件 -->
<shareDialog><shareDialog/>
禁止在行內(nèi)元素中嵌套塊級元素??
html復制代碼<!-- 錯誤的嵌套 ? -->
<span><div></div></span>
<i><p></p></i>
<!-- 正確的嵌套 ? -->
<div><span></span></div>
<p><i></i></p>
更多標簽使用規(guī)則介紹請查看尾部附錄
定義屬性賦值時，使用雙引號，禁止單雙引號混用
html復制代碼<!-- 錯誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標題">
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">
除自閉合標簽外，所有標簽都需正確的編寫閉合標簽
常用自閉合標簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
ID 和 Class 取通用且有意義的名字；
使用連字符 - 作為 ID、Class 名稱界定符 ，不要駝峰命名法和下劃線；
避免選擇器嵌套層級過多，盡量少于 3 級；
使用命名空間防止命名沖突，利于維護；
css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
css復制代碼/* 標準的聲明順序 */
.declaration-order {
/* 布局屬性 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型屬性 */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* 文本屬性 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* 視覺屬性 */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* 其他屬性 */
cursor: pointer;
}
<img/>標簽守則
html復制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
尺寸 小于 50 ×?50 的請使用 字體圖標（iconfont）或者 將多個圖標合成一張大圖使用（雪碧圖） 尺寸大于 50 ×?50 的圖片，引入前先使用 在線壓縮 對其進行壓縮 ，圖片大小盡量控制在 300kb 以內(nèi)
PC端、移動端 推薦使用 2倍圖 (@2x），避免設備分辨率過高，圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景，可使用 3倍圖（@3x）
html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍圖： 圖片展示區(qū)域大小 : 圖片實際尺寸 = 1 ：2
無論使用幾倍圖，圖片大小都需遵守上條限制
如遇圖片倍圖問題，可咨詢 @UI童鞋
js復制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName('li')
1個頁面中建議CSS文件不要超過3個（1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式）； JS文件不要超過5個（1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件）。
縮進使用 2個空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號
保持一定的代碼潔癖，尤其在大型項目中
性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具，主要用于改進網(wǎng)絡應用的質(zhì)量。Lighthouse會對各個測試項的結果打分，并給出優(yōu)化建議，這些打分標準和優(yōu)化建議可以視為Google的網(wǎng)頁最佳實踐。
Chrome拓展程序 谷歌商店安裝lighthouse后，在右上角或者菜單里點擊圖中圖標，Options可以配置測試項目，點擊Generate report即可測試。
命令行
js復制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態(tài)HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help
檢測結果
標簽 | 語義 | 嵌套常見錯誤 | 常用屬性 |
<a></a> | 超鏈接/錨 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 塊級容器 | ||
<p></p> | 段落 | 不能嵌套塊級元素 | |
<span></span> | 內(nèi)聯(lián)容器（行內(nèi)元素） | 不可嵌套塊級容器 | |
<form></form> | 表單 | action,target,method,name | |
<input /> | 輸入框 | 不可嵌套元素 | type,name,value,checked,disabled,maxlength,readonly,accesskey |
<textarea></textarea> | 多行文本輸入控件 | name,accesskey,disabled,readonly,rows,cols | |
<img /> | 圖像 | 不可嵌套元素 | alt,src,width,height |
<label></label> | 標簽（常用input元素定義標注） | 不可嵌套塊級容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主體 | 只能嵌套在table內(nèi) | |
<thead></thead> | 表頭 | 只能嵌套在table內(nèi) | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的單元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的標題單元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按鈕 | 不可嵌套表單、表格等塊級元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
<option></option> | select中的一個選項 | 只能嵌套在select內(nèi) | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 無序列表 | 只能嵌套li | |
<li></li> | 無序列表項 | 只能嵌套在 ul 或 ol 內(nèi) | |
<iframe></iframe> | 內(nèi)嵌一個網(wǎng)頁 | frameborder,width,height,src,scrolling,name | |
<br /> | 換行 | ||
<link /> | 引用樣式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文檔信息 | 只用于head內(nèi) | content,http-equiv,name |
<script></script> | 引用腳本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用樣式 | 不可嵌套任何元素 | type,media |
<title></title> | 文檔標題 | 只用于head內(nèi) |
點贊收藏支持、手留余香、與有榮焉，動動你發(fā)財?shù)男∈謫眩兄x各位大佬能留下您的足跡。
作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
