成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript高級-unit10 DOM

kohoh_ / 2355人閱讀

摘要：在瀏覽器中，對象是繼承自類型的一個(gè)實(shí)例，表示整個(gè)頁面。一致性檢測屬性提供相應(yīng)信息和功能的對象，與瀏覽器對的實(shí)現(xiàn)直接對應(yīng)。在中，標(biāo)簽名始終都以全部大寫表示而在有時(shí)包括，標(biāo)簽名始終與源代碼中的保持一致。設(shè)置的特性名統(tǒng)一轉(zhuǎn)為小寫。

簡介

DOM描述了一個(gè)層次化的節(jié)點(diǎn)樹，允許開發(fā)人員添加、移除和修改頁面。

節(jié)點(diǎn)

根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)

每個(gè) HTML 元素是元素節(jié)點(diǎn)

HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)

每個(gè) HTML 屬性是屬性節(jié)點(diǎn)

注釋是注釋節(jié)點(diǎn)

每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)的類型。并不是所有節(jié)點(diǎn)類型都受到Web瀏覽器支持，最常用的事元素和文本節(jié)點(diǎn)。

Node.ELEMENT_NODE(1); // 元素
Node.ATTRIBUTE_NODE(2); // 屬性
Node.TEXT_NODE(3); // 文本
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8); // 注釋
Node.DOCUMENT_NODE(9); // 文檔
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

因?yàn)镮E沒有公開Node類型的構(gòu)造函數(shù)，所以確定節(jié)點(diǎn)類型如下：

// nodeType 是只讀的
if (someNode.nodeType == 1) {
    alert("Node is an element");
}
Node類型

1、nodeName 和 nodeValue 屬性

// 使用前先檢查節(jié)點(diǎn)類型，確認(rèn)是否是一個(gè)元素，對于元素節(jié)點(diǎn)
// nodeName 保存的是標(biāo)簽名（節(jié)點(diǎn)的名稱），nodeValue = null （節(jié)點(diǎn)的值）;
if (someNode.nodeType == 1) {
    value = someNode.nodeName;    // nodeName的值是元素的標(biāo)簽名
}

2、 節(jié)點(diǎn)關(guān)系

每個(gè)節(jié)點(diǎn)都有一個(gè) childNodes 屬性，保存著一個(gè) NodeList 對象。

是一個(gè)數(shù)組對象，保存一組有序的節(jié)點(diǎn)，可以通過位置訪問節(jié)點(diǎn)。有l(wèi)ength屬性，但不是數(shù)組實(shí)例。

基于DOM結(jié)構(gòu)動(dòng)態(tài)執(zhí)行查詢結(jié)果，結(jié)構(gòu)的變化能夠自動(dòng)反應(yīng)著NodeList對象中。

可以用 item() 方法訪問其中的節(jié)點(diǎn)。

var firstChild  = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1); 

// 將NodeList對象轉(zhuǎn)化為數(shù)組
function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(node,0);    // 針對非 IE 瀏覽器
    } catch {
        array = new Array();
        for (var i=0, len=nodes.length; I < len; i++) {
            array.push(nodes[I]);
        }
    }
    return array;
}

parentNode 屬性：指向文檔樹中的父節(jié)點(diǎn)

父節(jié)點(diǎn)的 firstChild 和 lastChild 屬性指向第一個(gè)和最后一個(gè)

previousSibling: 上一個(gè)同胞節(jié)點(diǎn)

nextSibling: 下一個(gè)同胞節(jié)點(diǎn)

hasChildNodes(): 節(jié)點(diǎn)包含一個(gè)或多個(gè)子節(jié)點(diǎn)返回 true

ownerDocument: 指向表示整個(gè)文檔的文檔節(jié)點(diǎn)

document.documentElement - 全部文檔

document.body - 文檔的主體

3、操作節(jié)點(diǎn)

以下方法都需要取得父節(jié)點(diǎn)（使用 parentNode 屬性）

appendChild(): 向 childNodes 列表末尾添加一個(gè)節(jié)點(diǎn)。如果已存在，從原來位置移動(dòng)到新位置

insertBefore(): 插入節(jié)點(diǎn)，接受兩個(gè)參數(shù)，要出入的節(jié)點(diǎn)和參考節(jié)點(diǎn)（誰的前面）

replaceChild(): 替換節(jié)點(diǎn)，接受兩個(gè)參數(shù)，要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)

removeChild(): 移除節(jié)點(diǎn)

以下兩個(gè)方法是所有類型的節(jié)點(diǎn)都有

cloneNode(): 創(chuàng)建節(jié)點(diǎn)的副本，參數(shù)為true，復(fù)制節(jié)點(diǎn)及整個(gè)子節(jié)點(diǎn)樹，false只復(fù)制節(jié)點(diǎn)本身，沒有父節(jié)點(diǎn)，需要用上面方法添加到文檔中

normalize(): 處理文檔樹中的文本節(jié)點(diǎn)?？赡軙?huì)出現(xiàn)文本節(jié)點(diǎn)不包含文本，或者接連出現(xiàn)兩個(gè)文本節(jié)點(diǎn)。調(diào)用這方法，如果找到空文本，則刪除；找到相鄰文本節(jié)點(diǎn)，則合并為一個(gè)

Document 類型

JavaScript通過 Document 類型表示文檔。在瀏覽器中，document 對象是 HTMLDocument（繼承自 Document 類型）的一個(gè)實(shí)例，表示整個(gè)HTML頁面。而且 document 也是 window 對象的一個(gè)屬性，因此可以將其作為全局對象來訪問。通過這個(gè)文檔對象，不僅可以取得與頁面有關(guān)的信息，而且還能操作頁面的外觀及其底層結(jié)構(gòu)。

nodeName 的值為 “#document”;

nodeValue 的值為 null；

parentNode 的值為 null；

ownerDocument 的值為 null；

其子節(jié)點(diǎn)可能是一個(gè) DocumentType(最多一個(gè))、Element(最多一個(gè))、ProcessingInstruction 或 Comment。

1、文檔的子節(jié)點(diǎn)

內(nèi)置的訪問子節(jié)點(diǎn)的快捷方式：

documentElement 屬性：始終指向HTML頁面的元素

childNodes 列表訪問文檔元素

作為內(nèi)置的HTMLDocument對象，document 對象有一個(gè) body 屬性，直接指向 元素。

// 所有瀏覽器都支持
var html = document.documentElement;    // 取得對對引用
var body = document.body;    // 取得對對引用

用不著在 document 對象上調(diào)用 appendChild()、removeChild()和replaceChild()方法，因?yàn)槲臋n類型（如果存在）是只讀的，而且它只能有一個(gè)元素子節(jié)點(diǎn)（通常早存在）。

2、文檔信息

document 對象還有一些標(biāo)準(zhǔn)的Document對象所沒有的屬性。這些對象表現(xiàn)的網(wǎng)頁的一些信息。

// 取的文檔標(biāo)題
var originalTitle = document.title;
// 設(shè)置文檔標(biāo)題
document.title = "New page title";

// 取得完成的URL
var url = document.URL;
// 取的域名
var domain = document.domain;
// 取的來源頁面的URL
var referrer = document.referrer;

只有 domain 可以設(shè)置，如果包含子域名，不能設(shè)置為URL中不包含的域。

由于跨域安全限制，來自不同子域的頁面無法通過 Javascript 通信，可以將每個(gè)頁面的document.domain設(shè)置為相同值，就可以互相訪問對方包含的JavaScript對象了。

如果域名一開始是“松散的”，就不能設(shè)為“緊繃的”，設(shè)為“wrox.com”，就不能設(shè)為“p2p.wrox.com”。

3、查找元素

取得特定的某個(gè)或某組元素的引用，然后執(zhí)行一些操作。

getElementById(): 要獲取的元素 id，返回第一個(gè)出現(xiàn)的，如果沒找到返回 null

getElementsByTagName(): 參數(shù)（要取得元素的標(biāo)簽名），返回包含零個(gè)或多個(gè)元素的 NodeList。在HTML文檔中，返回一個(gè) HTMLCollection 對象，作為動(dòng)態(tài)集合。傳入“*”，取得文檔中的所有元素

getElementsByName(): 返回給定 name 特性的所有元素。最常用取得單選按鈕（單選按鈕必須具有相同的 name 特性）

// 取得頁面中所有的元素，并返回一個(gè)HTMLCollection
var images = document.getElementsByTagName("img");
alert(images.length);    // 圖像的數(shù)量
alert(images[0].src);    // 第一個(gè)圖像元素的src特性
alert(images.item(0).src);    // 第一個(gè)圖像元素的src特性

HMTLCollection 對象

有一個(gè) namedItem() 方法，可以通過元素的 name 特性取得集合中的項(xiàng)

支持按名稱訪問項(xiàng)


var myImage = images.namedItem("myImage");

var myImage = images["myImage"];

4、特殊集合

除了屬性和方法，document 對象還有一些特殊的集合，都是 HTMLCollection對象，

document.anchors ,包含文檔中所有帶 name 特性的 元素；

document.applets ,所有的 元素，不建議使用；

document.forms ,文檔中所有的

元素；

document.images ,文檔中所有的 元素；

document.links ,文檔中所有帶 href 特性的 元素。

5、DOM一致性檢測

document.implementation 屬性提供相應(yīng)信息和功能的對象，與瀏覽器對 DOM 的實(shí)現(xiàn)直接對應(yīng)。
規(guī)定一個(gè)方法：hasFeature（），接受兩個(gè)參數(shù)：要檢測的 DOM 功能名稱及版本號

var hasXmlDom = document.implementation.hasFeature("XML","1.0");

6、文檔寫入

write(): 原樣寫入

writeln(): 在字符串的末尾添加一個(gè)換行符（n）

open(): 打開網(wǎng)頁的輸出流

close(): 關(guān)閉網(wǎng)頁的輸出流

// 用 write() 和 written() 動(dòng)態(tài)地包含外部資源


    document.write() Example


    ");

嚴(yán)格型 XHTML 文檔不支持文檔寫入。

Element 類型

Element 類型用于表現(xiàn) XML 或 HTML 元素，提供了對元素標(biāo)簽名、字節(jié)點(diǎn)及特性的訪問。

nodeType 的值為 1；

nodeName 的值為元素的標(biāo)簽名；

nodeValue 的值為 null；

parentNode 可能是 Document 或 Element；

其子節(jié)點(diǎn)可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference；

訪問元素標(biāo)簽名，可以是使用 nodeName 屬性或者 tagName 屬性。


var div = document.getElementById("myDiv");
alert(div.tagName);    // "DIV"
alert(div.tagName == div.nodeName);    // true

在 HTML 中，標(biāo)簽名始終都以全部大寫表示；而在 XML（有時(shí)包括 XHTML），標(biāo)簽名始終與源代碼中的保持一致。

if (element.tagName.toLowerCase() == "div") {    // 適用于任何文檔
    // ...
}

1、HTML 元素

所有的 HTML 元素都由 HTMLElement 類型表示。每個(gè) HTML 元素都存在的下列標(biāo)準(zhǔn)特性。

id，元素中文檔中的唯一標(biāo)識符

title，有關(guān)元素的附加說明信息，一般通過工具提示條現(xiàn)實(shí)出來

lang，元素內(nèi)容的語言代碼

dir，語言的方向，值為“l(fā)tr”（左到右），或“rtl”（右到左）

className，與元素的 class 特性對應(yīng)，即為元素指定的CSS類。（是 ECMAScript 的保留字）

// 上述這些屬性都可以用來取得或修改相應(yīng)的特性值


var div = document.getElementById("myDiv");
alert(div.id);
div.id = "someOtherId";
alert(div.className);
div.className = "ft";

2、取得特性

每個(gè)元素都有一或多個(gè)特性，這些特性的用途是給出相應(yīng)元素或其內(nèi)容的附加信息。

getAttribute(): 取得特性，傳遞的特性名與實(shí)際的特性名相同，可以是自定義的特性。

setAttribute(): 設(shè)置特性。設(shè)置的特性名統(tǒng)一轉(zhuǎn)為小寫。

removeAttribute(): 不僅會(huì)清除特性值，也會(huì)從元素中完成刪除特性。

有兩類特殊的特性：

style: 通過getAttribute()訪問返回特性值中包含的文本，通過屬性來訪問返回一個(gè)對象。

onclick: 通過 getAttribute()返回相應(yīng)代碼的字符串，訪問屬性時(shí)返回函數(shù)。

div.setAttribute("id","someOtherId");

3、attributes 屬性

attributes 屬性包含一系列節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)的 nodeName 就是特性的名稱，而節(jié)點(diǎn)的 nodeValue 就是特性的值。
包含一個(gè) NamedNodeMap，“動(dòng)態(tài)”集合。

getNamedItem()：返回 nodeName 等于 name 的節(jié)點(diǎn)

removeNamedItem()：從列表中移除 nodeName 屬性等于 name 的節(jié)點(diǎn)

setNamedItem()：向類表添加節(jié)點(diǎn)，以節(jié)點(diǎn)的 nodeName 屬性為索引

item(pos)：返回位于數(shù)字pos 的節(jié)點(diǎn)

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;

遍歷元素的特性，attributes 屬性可以派上用場。

function outputAttributes(element) {
    var pairs = new Array(),
        attrName,
        attrValue,
        y,
        len;
     
     for（y = 0, len = element.attributes.length; y < len; y++) {
         attrName = element.attributes[y].nodeName;
         attrValue = element.attributes[y].nodeValue;
         if (element.attributes[y].specified) {
             pairs.push(attrName + "="" + attrValue + """);
         }
     }
     return pairs.join(" ");
}

// attributes 對象的中的特性，不同瀏覽器返回的順序不同
// IE7 及更早版本會(huì)返回 HTML 元素中所有可能的特性，包括沒有指定的特性。每個(gè)特性節(jié)點(diǎn)都有一個(gè) specified 的屬性，true：在 HTML 中指定來相應(yīng)特性，要么可以通過 setAttribute() 方法設(shè)置了該特性。

4、創(chuàng)建元素

// 接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名
var div = document.createElement("div");

// 也為新元素設(shè)置了 ownerDocument 屬性，還可以操作元素的特性，添加更多的子節(jié)點(diǎn)
div.id = "myNewDiv";
div.className = "box";

// 新元素添加到文檔樹中 appendChild()、insertBefore()、replaceChild()
document.body.appendChild(div);

在 IE 中可以另一種方法，傳入完整的元素標(biāo)簽

var div = document.createElement("
");

5、元素的子節(jié)點(diǎn)

不同瀏覽器看待節(jié)點(diǎn)是不同的。
如果要通過 childNodes 屬性遍歷子節(jié)點(diǎn)，不要忘了瀏覽器之間的區(qū)別，通常先檢查一下 nodeType 屬性

for (var y = 0, len = element.childNodes.length; y < len; y++) {
    // 表示是元素節(jié)點(diǎn)
    if (element.childNodes[y].nodeType == 1) {
        // ...
    }
}

通過特定的標(biāo)簽名取得子節(jié)點(diǎn)或后代節(jié)點(diǎn)

var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li");
Text 類型

文本節(jié)點(diǎn)由 Text 類型表示，包含純文本內(nèi)容，即包含轉(zhuǎn)義后的 HTML 字符，但不包含 HTML 代碼。

nodeType 的值為 3；

nodeName 的值為 “#text”；

nodeValue 的值為節(jié)點(diǎn)所包含的文本；

parentNode 是一個(gè) Element；

不支持（沒有）子節(jié)點(diǎn)；

通過 nodeValue 屬性或 data 屬性訪問 Text 節(jié)點(diǎn)包含的文本。

appendData(text)：將 text 添加到節(jié)點(diǎn)的末尾。

deleteData(offset, count)：從 offset 指定的位置開始刪除 count 個(gè)子符。

insertData(offset, text)：在 offset 指定的位置插入 text。

replaceData(offset, count, text)：用 text 替換從 offset 指定的位置開始到 offset + count 為止的文本。

splitText(offset)：從 offset 指定的位置將當(dāng)前文本節(jié)點(diǎn)分為兩個(gè)文本節(jié)點(diǎn)。

substringData(offset, count)：提取從 offset 指定的位置開始到 offset + count 為止的字符串。

在默認(rèn)情況下，每個(gè)可以包含內(nèi)容的元素最多只能有一個(gè)文本節(jié)點(diǎn)，而且必須確實(shí)有內(nèi)容存在。

// 沒有內(nèi)容，也就沒有文本節(jié)點(diǎn)



// 有空格，因而有一個(gè)文本節(jié)點(diǎn)

 


// 有內(nèi)容，因而有一個(gè)文本節(jié)點(diǎn)

hello world!


// 訪問，先取得引用
var textNode = div.firstChild;  // 獲取 div.childNodes[0]
textNode.nodeValue = "some other message";

在修改文本節(jié)點(diǎn)時(shí)，此時(shí)的字符串會(huì)經(jīng) HTML 編碼（轉(zhuǎn)義）。

1、創(chuàng)建文本節(jié)點(diǎn)

document.createTextNode()：創(chuàng)建文本節(jié)點(diǎn)，接受一個(gè)參數(shù)，要插入的文本，也會(huì)進(jìn)行轉(zhuǎn)義。

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world");
element.appendChild(textNode);

var anotherTextNode = document.createTextNode("Yippee");
element.appendChild(anotherTextNode);

document.body.appendChild(element);

如果兩個(gè)文本節(jié)點(diǎn)是相鄰的同胞節(jié)點(diǎn)，那么這兩個(gè)節(jié)點(diǎn)中的文本會(huì)連起來顯示，中間不會(huì)有空格。

2、規(guī)范化文本節(jié)點(diǎn)

normalize()：在一個(gè)包含兩個(gè)或多個(gè)文本節(jié)點(diǎn)的父元素上調(diào)用，則會(huì)將所有文本節(jié)點(diǎn)合并成一個(gè)節(jié)點(diǎn)。

Comment 類型

nodeType 的值為 8；

nodeName 的值為 “#comment”;

nodeValue 的值是注釋的內(nèi)容；

parentNode 可能是 Document 或 Element；

不支持（沒有）子節(jié)點(diǎn)。

和 Text 類型相似，可以通過 nodeValue 或 data 屬性來取得注釋的內(nèi)容。



// 通過父節(jié)點(diǎn)訪問
var div = document.getElementById("myDiv"); 
var comment = div.firstChild;
alert(comment.data);

使用 document.createComment() 為其傳遞注釋文本也可以創(chuàng)建注釋節(jié)點(diǎn)。

var comment = document.createComment("A comment");

如果要訪問注釋節(jié)點(diǎn)，一定要保證他們是 元素的后代。

DocumentFragment 類型（文檔片段）

在文檔中沒有對應(yīng)的標(biāo)記；

nodeType 的值為 11；

nodeName 的值為 “#document-fragment”;

nodeValue 的值為 null；

parentNode 的值為 null；

不能把文檔片段直接添加到文檔中，但可以作為一個(gè)“倉庫”，保存將來可能添加到文檔中的節(jié)點(diǎn)。如果將文檔中的節(jié)點(diǎn)添加到文檔片段中，就會(huì)從文檔樹移除該節(jié)點(diǎn)，文檔片段本身不會(huì)成為文檔樹的一部分。

// 創(chuàng)建文檔片段 
var fragment = document.createDocumentFragment();

// 為 ul 元素添加3個(gè)列表項(xiàng)
var ul = document.getElementById("myList");
var li = null;

for (var i=0; i < 3; i++) {
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item " + (i+1)));
    fragment.appendChild(li);
}

ul.appendChild(fragment);
Attr 類型

元素的特性在 DOM 中以 Attr 類型來表示。特性就是存在于元素的 attributes 屬性中的節(jié)點(diǎn)。

nodeType 的值 2；

nodeName 的值是特性的名稱；

nodeValue 的值是特性的值；

parentNode 的值為 null；

在 HTML 中不支持子節(jié)點(diǎn)；

在 XML 中子節(jié)點(diǎn)可以是 Text 或 EntityReference。

盡管是節(jié)點(diǎn)，但不是 DOM 文檔樹但一部分。有3個(gè)屬性：

name：特性名稱（與 nodeName 相同）；

value：特性的值（與 nodeValue 的值相同）；

specified：一個(gè)布爾值，區(qū)別特性在代碼中是指定的，還是默認(rèn)的。

// 創(chuàng)建
var attr = document.createAttribute("align");
attr.value = "left";
// 添加到元素中
element.setAttributeNode(attr);

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96607.html

相關(guān)文章

  • 如何正確學(xué)習(xí)JavaScript

    摘要：然而，雖然先生對無所不知，被譽(yù)為世界的愛因斯坦，但他的語言精粹并不適合初學(xué)者學(xué)習(xí)。即便如此，在后面我還是會(huì)建議把當(dāng)做補(bǔ)充的學(xué)習(xí)資源。但目前為止，依然是學(xué)習(xí)編程的好幫手。周正則表達(dá)式，對象，事件，閱讀權(quán)威指南第，，，章。 既然你找到這篇文章來，說明你是真心想學(xué)好JavaScript的。你沒有想錯(cuò)，當(dāng)今如果要開發(fā)現(xiàn)代網(wǎng)站或web應(yīng)用（包括互聯(lián)網(wǎng)創(chuàng)業(yè)），都要學(xué)會(huì)JavaScript。而面對泛...

    canger 評論0 收藏0

  • 持續(xù)集成之測試篇

    摘要：持續(xù)集成單元測試是開源的一個(gè)基于的測試執(zhí)行過程管理工具。表示測試套件，是一序列相關(guān)程序的測試表示單元測試，也就是測試的最小單位。 持續(xù)集成 單元測試（unit） karma Karma 是Google開源的一個(gè)基于Node.js 的 JavaScript 測試執(zhí)行過程管理工具（Test Runner）。該工具可用于測試所有主流Web瀏覽器，也可集成到 CI （Continuous in...

    GraphQuery 評論0 收藏0

  • [譯] 如何恰當(dāng)?shù)貙W(xué)習(xí) JavaScript

    摘要：原文鏈接恰當(dāng)?shù)貙W(xué)習(xí)適合第一次編程和非的程序員持續(xù)時(shí)間到周前提無需編程經(jīng)驗(yàn)繼續(xù)下面的課程。如果你沒有足夠的時(shí)間在周內(nèi)完成全部的章節(jié)，學(xué)習(xí)時(shí)間盡力不要超過周。你還不是一個(gè)絕地武士，必須持續(xù)使用你最新學(xué)到的知識和技能，盡可能地經(jīng)常持續(xù)學(xué)習(xí)和提高。 原文鏈接：How to Learn JavaScript Properly 恰當(dāng)?shù)貙W(xué)習(xí) JavaScript （適合第一次編程和非 JavaSc...

    Jason 評論0 收藏0

  • webpack 4.x學(xué)習(xí)使用總結(jié)

    摘要：最近一周一直都在折騰一些項(xiàng)目中常用的記錄下來，以后免去簡單的配置再去查文檔。常規(guī)入口指示應(yīng)該使用哪個(gè)模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。把代碼轉(zhuǎn)換成，在使用語言中有介紹。擴(kuò)展語法，使用下一代，在使用中有介紹。用于忽略部分文件。 最近一周一直都在折騰webpack,一些項(xiàng)目中常用的記錄下來，以后免去簡單的配置再去查文檔。 常規(guī) 1.入口 指示 webpack 應(yīng)該使用哪個(gè)模塊，來作為構(gòu)建...

    ls0609 評論0 收藏0

  • 網(wǎng)頁動(dòng)畫性能日志（一）

    摘要：當(dāng)用戶滾動(dòng)頁面時(shí)，合成線程會(huì)通知主線程更新頁面中最新可見部分的位圖。但是，如果主線程響應(yīng)地不夠快，合成線程不會(huì)保持等待，而是馬上繪制已經(jīng)生成的位圖，還沒準(zhǔn)備好的部分用白色進(jìn)行填充。 動(dòng)畫做多了，自然就要考慮性能，我打算出一個(gè)系列的日志，詳細(xì)的講解一下網(wǎng)頁動(dòng)畫性能相關(guān)的知識，如果你已經(jīng)可以運(yùn)用css3 canvas來做動(dòng)畫，可以來參考一下。 目前我做的最復(fù)雜的動(dòng)畫就是360搜索中PC端的...

    zhiwei 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<