整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
用 CSS 最困難的部分之一是處理CSS的權(quán)重值，它可以決定到底哪條規(guī)則會(huì)最終被應(yīng)用，尤其是如果你想在 Bootstrap 這樣的框架中覆蓋其已有樣式，更加顯得麻煩。不過(guò)隨著 CSS 層的引入，這一切都發(fā)生了變化。 這個(gè)新功能允許您創(chuàng)建自己的自定義 CSS 層，這是有史以來(lái)第一次確定所有 CSS 代碼權(quán)重的層次結(jié)構(gòu)。 在本文中，我將剖析這對(duì)您意味著什么，它是如何工作的，以及您今天如何開(kāi)始使用它。
什么是層(Layers)
創(chuàng)建您自己的自定義圖層是 CSS 的新功能，但圖層從一開(kāi)始就存在于 CSS 中。 CSS 中有 3 個(gè)不同的層來(lái)管理所有樣式的工作方式。
瀏覽器（也稱(chēng)為用戶(hù)代理）樣式 - user agent style
用戶(hù)樣式 - User Styles
作者樣式 - Author Styles
瀏覽器樣式是應(yīng)用于瀏覽器的默認(rèn)樣式。這就是為什么 Chrome 和 Safari 中的按鈕看起來(lái)不同的原因。在瀏覽器層中找到的樣式在瀏覽器之間是不同的，并且給每個(gè)瀏覽器一個(gè)獨(dú)特的外觀(guān)。
下一層是用戶(hù)樣式，這并不是您真正需要擔(dān)心的事情。這些通常是用戶(hù)可以編寫(xiě)并注入瀏覽器的自定義樣式，但瀏覽器不再真正支持這些樣式。用戶(hù)可能會(huì)更改一些瀏覽器設(shè)置，這些設(shè)置會(huì)向該圖層添加樣式，但在大多數(shù)情況下，可以完全忽略該層。
最后，我們來(lái)到作者層。這是您最熟悉的層，因?yàn)槟帉?xiě)的每一段 CSS 代碼都屬于這一層。
這些層分開(kāi)的原因是因?yàn)樗梢院苋菀椎馗采w瀏覽器樣式和用戶(hù)樣式中定義的代碼，因?yàn)閷佣x了自己的層次結(jié)構(gòu)，完全忽略了權(quán)重的影響。
這 3 個(gè) CSS 層是有序的（瀏覽器樣式、用戶(hù)樣式、然后是作者樣式），后面層中的每個(gè)樣式都將覆蓋前一層的任何樣式。這意味著即使瀏覽器樣式定義了一個(gè)超級(jí)特定的選擇器，例如#button.btn.super-specific，并且您的作者樣式定義了一個(gè)超級(jí)通用的選擇器，例如按鈕，您的作者樣式仍然會(huì)覆蓋瀏覽器樣式。
這實(shí)際上已經(jīng)是您可能一直在使用而沒(méi)有意識(shí)到的東西。
* {
box-sizing: border-box;
}上面的選擇器沒(méi)有權(quán)重，因?yàn)?* 符號(hào)對(duì)權(quán)重沒(méi)有貢獻(xiàn)。 這意味著例如使用 p 作為選擇器的 p 標(biāo)簽的瀏覽器樣式在技術(shù)上比 * 選擇器更具體，權(quán)重更高。 但是，這一切并不重要，因?yàn)樽髡邩邮轿挥诒葹g覽器樣式層晚的層中，因此您的代碼將始終覆蓋瀏覽器樣式。
理解這一點(diǎn)至關(guān)重要，因?yàn)槭褂眠@個(gè)新的圖層 API，您可以在作者圖層中創(chuàng)建自己的圖層，從而更輕松地處理特定性。
如何創(chuàng)建你自己的層
下面來(lái)看個(gè)例子：
很明顯，這是我們正常理解的CSS， ID設(shè)置的顏色權(quán)重更高，所以按鈕顯示為紅色。讓我們使用@layer給它們加上兩個(gè)層，看看是什么效果：
按鈕變成藍(lán)色。為什么會(huì)這樣？
我們給兩條CSS分別建立了base和utilities層，很明顯，后面創(chuàng)建的層的樣式覆蓋了前面層的樣式，盡管前面層的樣式有更高的權(quán)重。這就是層的默認(rèn)工作原理。當(dāng)然層的順序是可以指定的，
@layer utilities, base;
@layer utilities, base;
您需要做的就是編寫(xiě)@layer 關(guān)鍵字，后跟以逗號(hào)分隔的層列表。 這將按從左到右的順序定義所有層，其中列出的第一層到最后一層的權(quán)重是依次增加的。 然后，您可以稍后使用普通的@layer 語(yǔ)法向每個(gè)層添加代碼，而不必?fù)?dān)心定義層的順序，因?yàn)樗鼈兌荚谶@一行中定義。 需要注意的是，這行代碼必須在定義任何層之前出現(xiàn)，所以我通常將它作為我的 CSS 文件中的第一行。如上圖，通過(guò)指定層的順序，我們讓base層應(yīng)用在utilities層之后，所以按鈕又顯示為紅色。
導(dǎo)入層
上面這兩種方式都是導(dǎo)入bootstrap框架的CSS，并且把他們放在framework層中，這樣你如果想要覆蓋它已有的樣式，只需要新建一個(gè)自己的層，放置在framework層后面就行。像下面這樣。
匿名層
匿名層不常用，但它寫(xiě)在后面可以覆蓋其他層的樣式，像下面可以把按鈕設(shè)為橙色。
不在層里的樣式
不在層里的樣式會(huì)有更高的權(quán)重，下面這個(gè)列表會(huì)讓你看得更清楚覆蓋是怎么發(fā)生的
層還可以重疊設(shè)置，不過(guò)很少用。具體的用法可以查閱相關(guān)文檔。
瀏覽器支持
自從IE死了以后，所有主流瀏覽器都已支持這一特性。大家請(qǐng)放心使用。
前置知識(shí)
絕大多數(shù)的程序語(yǔ)言，他們的內(nèi)存生命周期基本一致：
對(duì)于所有的編程語(yǔ)言，第二部分都是明確的。而第一和第三部分在底層語(yǔ)言中是明確的。
但在像JavaScript這些高級(jí)語(yǔ)言中，大部分都是隱含的，因?yàn)镴avaScript具有自動(dòng)垃圾回收機(jī)制（Garbage collected）。
因此在做JavaScript開(kāi)發(fā)時(shí)，不需要關(guān)心內(nèi)存的使用問(wèn)題，所需內(nèi)存分配和無(wú)用內(nèi)存回收，都完全實(shí)現(xiàn)自動(dòng)管理。
1.概述
像C語(yǔ)言這樣的高級(jí)語(yǔ)言一般都有底層的內(nèi)存管理接口，比如 malloc()和free()。另一方面，JavaScript創(chuàng)建變量（對(duì)象，字符串等）時(shí)分配內(nèi)存，并且在不再使用它們時(shí)“自動(dòng)”釋放。 后一個(gè)過(guò)程稱(chēng)為垃圾回收。這個(gè)“自動(dòng)”是混亂的根源，并讓JavaScript（和其他高級(jí)語(yǔ)言）開(kāi)發(fā)者感覺(jué)他們可以不關(guān)心內(nèi)存管理。 這是錯(cuò)誤的。 ——《MDN JavaScript 內(nèi)存管理》
MDN中的介紹告訴我們，作為JavaScript開(kāi)發(fā)者，還是需要去了解內(nèi)存管理，雖然JavaScript已經(jīng)給我們做好自動(dòng)管理。
2.JavaScript內(nèi)存生命周期
2.1 分配內(nèi)存
在做JavaScript開(kāi)發(fā)時(shí)，我們定義變量的時(shí)候，JavaScript便為我們完成了內(nèi)存分配：
var num = 100; // 為數(shù)值變量分配內(nèi)存
var str = 'pingan'; // 為字符串變量分配內(nèi)存
var obj = {
name : 'pingan'
}; // 為對(duì)象變量及其包含的值分配內(nèi)存
var arr = [1, null, 'hi']; // 為數(shù)組變量及其包含的值分配內(nèi)存
function fun(num){
return num + 2;
}; // 為函數(shù)（可調(diào)用的對(duì)象）分配內(nèi)存
// 函數(shù)表達(dá)式也能分配一個(gè)對(duì)象
someElement.addEventListener('click', function(){
someElement.style.backgroundColor = 'blue';
}, false);
另外，通過(guò)調(diào)用函數(shù)，也會(huì)分配內(nèi)存：
// 類(lèi)型1. 分配對(duì)象內(nèi)存
var date = new Date(); // 分配一個(gè)Date對(duì)象
var elem = document.createElement('div'); // 分配一個(gè)DOM元素
// 類(lèi)型2. 分配新變量或者新對(duì)象
var str1 = "pingan";
var str2 = str1.substr(0, 3); // str2 是一個(gè)新的字符串
var arr1 = ["hi", "pingan"];
var arr2 = ["hi", "leo"];
var arr3 = arr1.concat(arr2); // arr3 是一個(gè)新的數(shù)組（arr1和arr2連接的結(jié)果）
2.2 使用內(nèi)存
使用內(nèi)存的過(guò)程實(shí)際上是對(duì)分配的內(nèi)存進(jìn)行讀取與寫(xiě)入的操作。
通常表現(xiàn)就是使用定義的值。
讀取與寫(xiě)入可能是寫(xiě)入一個(gè)變量或者一個(gè)對(duì)象的屬性值，甚至傳遞函數(shù)的參數(shù)。
var num = 1; num ++; // 使用已經(jīng)定義的變量，做遞增操作
2.3 釋放內(nèi)存
當(dāng)我們前面定義好的變量或函數(shù)（分配的內(nèi)存）已經(jīng)不需要使用的時(shí)候，便需要釋放掉這些內(nèi)存。這也是內(nèi)存管理中最難的任務(wù)，因?yàn)槲覀儾恢朗裁磿r(shí)候這些內(nèi)存不使用。
很好的是，在高級(jí)語(yǔ)言解釋器中，已經(jīng)嵌入“垃圾回收器”，用來(lái)跟蹤內(nèi)存的分配和使用，以便在內(nèi)存不使用時(shí)自動(dòng)釋放（這并不是百分百跟蹤到，只是個(gè)近似過(guò)程）。
3.垃圾回收機(jī)制
就像前面提到的，“垃圾回收器”只能解決一般情況，接下來(lái)我們需要了解主要的垃圾回收算法和它們局限性。
3.1 引用
垃圾回收算法主要依賴(lài)于引用的概念。
即在內(nèi)存管理環(huán)境中，一個(gè)對(duì)象如果有權(quán)限訪(fǎng)問(wèn)另一個(gè)對(duì)象，不論顯式還是隱式，稱(chēng)為一個(gè)對(duì)象引用另一個(gè)對(duì)象。
例如：一個(gè)JS對(duì)象具有對(duì)它原型的引用（隱式引用）和對(duì)它屬性的引用（顯式引用）。 注意：
這里的對(duì)象，不僅包含JS對(duì)象，也包含函數(shù)作用域（或全局詞法作用域）。
3.2 引用計(jì)數(shù)垃圾收集
這個(gè)算法，把“對(duì)象是否不再需要”定義為：當(dāng)一個(gè)對(duì)象沒(méi)有被其他對(duì)象所引用的時(shí)候，回收該對(duì)象。這是最初級(jí)的垃圾收集算法。
var obj = {
leo : {
age : 18
};
};
這里創(chuàng)建2個(gè)對(duì)象，一個(gè)作為leo的屬性被引用，另一個(gè)被分配給變量obj。
// 省略上面的代碼
/*
我們將前面的
{
leo : {
age : 18
};
};
稱(chēng)為“這個(gè)對(duì)象”
*/
var obj2 = obj; // obj2變量是第二個(gè)對(duì)“這個(gè)對(duì)象”的引用
obj = 'pingan'; // 將“這個(gè)對(duì)象”的原始是引用obj換成obj2
var leo2 = obj2.leo; // 引用“這個(gè)對(duì)象”的leo屬性
可以看出，現(xiàn)在的“這個(gè)對(duì)象”已經(jīng)有2個(gè)引用，一個(gè)是obj2，另一個(gè)是leo2。
obj2 = 'hi'; // 將obj2變成零引用，因此，obj2可以被垃圾回收 // 但是它的屬性leo還在被leo2對(duì)象引用，所以還不能回收 leo2 = null; // 將leo變成零引用，這樣obj2和leo2都可以被垃圾回收
這個(gè)算法有個(gè)限制：
無(wú)法處理循環(huán)引用。即兩個(gè)對(duì)象創(chuàng)建時(shí)相互引用形成一個(gè)循環(huán)。
function fun(){
var obj1 = {}, obj2 = {};
obj1.leo = obj2; // obj1引用obj2
obj2.leo = obj1; // obj2引用obj1
return 'hi pingan';
}
fun();
可以看出，它們被調(diào)用之后，會(huì)離開(kāi)函數(shù)作用域，已經(jīng)沒(méi)有用了可以被回收，然而引用計(jì)數(shù)算法考慮到它們之間相互至少引用一次，所以它們不會(huì)被回收。
實(shí)際案例：
在IE6，7中，使用引用計(jì)數(shù)方式對(duì)DOM對(duì)象進(jìn)行垃圾回收，常常造成對(duì)象被循環(huán)引用導(dǎo)致內(nèi)存泄露：
var obj;
window.onload = function(){
obj = document.getElementById('myId');
obj.leo = obj;
obj.data = new Array(100000).join('');
};
可以看出，DOM元素obj中的leo屬性引用了自己obj，造成循環(huán)引用，若該屬性（leo）沒(méi)有移除或設(shè)置為null，垃圾回收器總是且至少有一個(gè)引用，并一直占用內(nèi)存，即使從DOM樹(shù)刪除，如果這個(gè)DOM元素含大量數(shù)據(jù)（如data屬性）則會(huì)導(dǎo)致占用內(nèi)存永遠(yuǎn)無(wú)法釋放，出現(xiàn)內(nèi)存泄露。
3.3 標(biāo)記清除算法
這個(gè)算法，將“對(duì)象是否不再需要”定義為：對(duì)象是否可以獲得。
標(biāo)記清除算法，是假定設(shè)置一個(gè)根對(duì)象（root），在JS中是全局對(duì)象。垃圾回收器定時(shí)找所有從根開(kāi)始引用的對(duì)象，然后再找這些對(duì)象引用的對(duì)象...直到找到所有可以獲得的對(duì)象和搜集所有不能獲得的對(duì)象。
它比引用計(jì)數(shù)垃圾收集更好，因?yàn)椤坝辛阋玫膶?duì)象”總是不可獲得的，但是相反卻不一定，參考“循環(huán)引用”。
循環(huán)引用不再是問(wèn)題：
function fun(){
var obj1 = {}, obj2 = {};
obj1.leo = obj2; // obj1引用obj2
obj2.leo = obj1; // obj2引用obj1
return 'hi pingan';
}
fun();
還是這個(gè)代碼，可以看出，使用標(biāo)記清除算法來(lái)看，函數(shù)調(diào)用之后，兩個(gè)對(duì)象無(wú)法從全局對(duì)象獲取，因此將被回收。相同的，下面案例，一旦 obj 和其事件處理無(wú)法從根獲取到，他們將會(huì)被垃圾回收器回收。
var obj;
window.onload = function(){
obj = document.getElementById('myId');
obj.leo = obj;
obj.data = new Array(100000).join('');
};
注意： 那些無(wú)法從根對(duì)象查詢(xún)到的對(duì)象都將被清除。
3.4 個(gè)人小結(jié)
在日常開(kāi)發(fā)中，應(yīng)該注意及時(shí)切斷需要回收對(duì)象與根的聯(lián)系，雖然標(biāo)記清除算法已經(jīng)足夠強(qiáng)壯，就像下面代碼：
var obj,ele=document.getElementById('myId');
obj.div = document.createElement('div');
ele.appendChild(obj.div);
// 刪除DOM元素
ele.removeChild(obj.div);
如果我們只是做小型項(xiàng)目開(kāi)發(fā)，JS用的比較少的話(huà)，內(nèi)存管理可以不用太在意，但是如果是大項(xiàng)目（SPA，服務(wù)器或桌面應(yīng)用），那就需要考慮好內(nèi)存管理問(wèn)題了。
#
4.內(nèi)存泄露（Memory Leak）
#
4.1 內(nèi)存泄露概念
在計(jì)算機(jī)科學(xué)中，內(nèi)存泄漏指由于疏忽或錯(cuò)誤造成程序未能釋放已經(jīng)不再使用的內(nèi)存。內(nèi)存泄漏并非指內(nèi)存在物理上的消失，而是應(yīng)用程序分配某段內(nèi)存后，由于設(shè)計(jì)錯(cuò)誤，導(dǎo)致在釋放該段內(nèi)存之前就失去了對(duì)該段內(nèi)存的控制，從而造成了內(nèi)存的浪費(fèi)。 ——維基百科
其實(shí)簡(jiǎn)單理解：一些不再使用的內(nèi)存無(wú)法被釋放。
當(dāng)內(nèi)存占用越來(lái)越多，不僅影響系統(tǒng)性能，嚴(yán)重的還會(huì)導(dǎo)致進(jìn)程奔潰。
4.2 內(nèi)存泄露案例
未定義的變量，會(huì)被定義到全局，當(dāng)頁(yè)面關(guān)閉才會(huì)銷(xiāo)毀，這樣就造成內(nèi)存泄露。如下：
function fun(){
name = 'pingan';
};
var data = {};
setInterval(function(){
var render = document.getElementById('myId');
if(render){
render.innderHTML = JSON.stringify(data);
}
}, 1000);
var str = null;
var fun = function(){
var str2 = str;
var unused = function(){
if(str2) console.log('is unused');
};
str = {
my_str = new Array(100000).join('--');
my_fun = function(){
console.log('is my_fun');
};
};
};
setInterval(fun, 1000);
定時(shí)器中每次調(diào)用fun，str都會(huì)獲得一個(gè)包含巨大的數(shù)組和一個(gè)對(duì)于新閉包my_fun的對(duì)象，并且unused是一個(gè)引用了str2的閉包。
整個(gè)案例中，閉包之間共享作用域，盡管unused可能一直沒(méi)有調(diào)用，但my_fun可能被調(diào)用，就會(huì)導(dǎo)致內(nèi)存無(wú)法回收，內(nèi)存增長(zhǎng)導(dǎo)致泄露。
var ele = {
img : document.getElementById('my_img')
};
function fun(){
ele.img.src = "http://www.baidu.com/1.png";
};
function foo(){
document.body.removeChild(document.getElementById('my_img'));
};
即使foo方法將my_img元素移除，但fun仍有引用，無(wú)法回收。
4.3 內(nèi)存泄露識(shí)別方法
通過(guò)Chrome瀏覽器查看內(nèi)存占用：
步驟如下：
如果內(nèi)存占用基本平穩(wěn)，接近水平，就說(shuō)明不存在內(nèi)存泄漏。
反之，就是內(nèi)存泄漏了。
命令行可以使用 Node 提供的process.memoryUsage方法。
console.log(process.memoryUsage());
// { rss: 27709440,
// heapTotal: 5685248,
// heapUsed: 3449392,
// external: 8772 }
process.memoryUsage返回一個(gè)對(duì)象，包含了 Node 進(jìn)程的內(nèi)存占用信息。該對(duì)象包含四個(gè)字段，單位是字節(jié)，含義如下。
判斷內(nèi)存泄漏，以heapUsed字段為準(zhǔn)。
公眾號(hào)：前端自習(xí)課
前言
該項(xiàng)目為前后端分離項(xiàng)目的前端部分，后端項(xiàng)目mall地址：傳送門(mén)。
項(xiàng)目介紹
mall-admin-web是一個(gè)電商后臺(tái)管理系統(tǒng)的前端項(xiàng)目，基于Vue+Element實(shí)現(xiàn)。 主要包括商品管理、訂單管理、會(huì)員管理、促銷(xiāo)管理、運(yùn)營(yíng)管理、內(nèi)容管理、統(tǒng)計(jì)報(bào)表、財(cái)務(wù)管理、權(quán)限管理、設(shè)置等功能。
項(xiàng)目演示
項(xiàng)目在線(xiàn)演示地址：http://39.98.190.128/index.html
項(xiàng)目布局
src -- 源碼目錄 ├── api -- axios網(wǎng)絡(luò)請(qǐng)求定義 ├── assets -- 靜態(tài)圖片資源文件 ├── components -- 通用組件封裝 ├── icons -- svg矢量圖片文件 ├── router -- vue-router路由配置 ├── store -- vuex的狀態(tài)管理 ├── styles -- 全局css樣式 ├── utils -- 工具類(lèi) └── views -- 前端頁(yè)面 ├── home -- 首頁(yè) ├── layout -- 通用頁(yè)面加載框架 ├── login -- 登錄頁(yè) ├── oms -- 訂單模塊頁(yè)面 ├── pms -- 商品模塊頁(yè)面 └── sms -- 營(yíng)銷(xiāo)模塊頁(yè)面
搭建步驟
https://github.com/macrozheng/mall-admin-web
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
