【讀書筆記】讀《編寫高質量代碼—Web前端開發修煉之道》

時間 2019-12-06

原文原文鏈接

　　搬出來以前的學習筆記，我以爲還算能夠的一本基礎書籍。css

　　先弄個這本書的logo——前端

　　目錄結構——node

第一章：從網站重構提及
第二章：團隊合做
第三章：高質量的HTML
第四章：高質量的CSS
第五章：高質量的JavaScript

　　其核心內容以下——編程

　　第一章：從網站重構提及設計模式

/**
 * 1.分離結構、樣式、行爲
 * 2.打造高品質的前端代碼，提升代碼的可維護性——
 *     1>精簡：可讓文件變小，有利於客戶端快速下載；
 *     2>重用：可讓代碼更易於精簡，同時有助於提高開發速度；
 *     3>有序：可讓咱們更清晰地組織代碼，使代碼更易於維護，有效應對變化。
 */

　　第二章：團隊合做瀏覽器

/**
 * 1.一專多能：欲精一行，必先通十行
 * 2.增長代碼可讀性——註釋
 * 3.公共組件和私有組件的維護
 *　　　1>公共組件須要專人來維護，要注意限制「寫」的權限，提供API和演示DEMO；
 *　　　2>私有組件對於修改操做會自由得多，可是必要的註釋仍是須要的
 *　　　3>在組織公共組件時，組織的粒度越大，文件越集中，加載和管理越方便，但無用代碼越多。(如jQuery框架)
 *　　　4>在組織公共組件時，組織的粒度越小，文件越分散，加載和管理越麻煩，但無用代碼越少。(如YUI框架)
 * 　　 5>所以，在「集中」與「分散」上，咱們須要找到不錯的平衡點。
 * 4.磨刀不誤砍柴工——前期構思很重要
 * 　　 1>先根據用戶需求進行分析，先考慮好框架，會讓整個開發過程更有規劃、更流暢，是一個先慢後快的過程。
 *  　　2>構思內容：
 * 　　　　 (1)規範的制定
 *         (2)公共組件的設計
 *         (3)複雜功能技術實現方案
 * 5.制定規範
 *         有效指導團隊成員按照一個統一的標準進行開發，儘可能讓開發過程平滑，減小沒必要要的衝突，提升開發率並保證軟件的質量。
 */

　　第三章：高質量的HTML框架

/**
 * 1.如何肯定標籤語義是否良好
 *         去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性
 * 2.常見模塊
 * 　　1>標題內容模塊
 * 　　2>表單模塊
 * 　　3>表格模塊
 * 3.其餘
 * 　　1>儘量少地使用無語義標籤div和span
 * 　　2>不使用純樣式標籤(如b/font/u等)
 */

　　第四章：高質量的CSS模塊化

/**
 * 1.怪異模式和DTD
 *     1>爲了確保向後兼容，瀏覽器廠商發明了標準模式和怪異模式這兩種方法來解析網頁
 *         標準模式：瀏覽器根據規範表現頁面
 *         怪異模式：一般模擬老式瀏覽器(好比IE4和Netscape Navigator 4)的行爲以防止老站點沒法工做，在該模式下
 *             (1)width包含border和padding
 *             (2)margin: 0 auto;沒法達到居中效果
 *             可用這兩點來判斷瀏覽器是不是處於怪異模式(尤爲是針對IE)
 *     2>DTD：Document Type Definition，即文檔類型定義。DTD是一種保證HTML文檔格式正確的有效方法，
 *         能夠經過比較HTML文檔和DTD文件來看文檔是否符合規範，以及元素和標籤使用是否正確。
 *         一個DTD文檔包含元素的定義規則、元素間關係的定義規則、元素可以使用的屬性、可以使用的實體或符號規則。
 *         若是漏寫DTD聲明，Chrome/Firfox/Safari/Opera仍然會按照標準模式來解析網頁，但在IE中(IE6/7/8)就會觸發怪異模式。
 */

/**
 * 2.如何組織CSS
 *     將網站內的全部樣式，按照職能分紅3大類：base、common、page
 *     1>這三者是層疊結構
 *     2>base層：提供CSS reset功能和力度最小的通用原子類。
 *         這一層與具體UI無關，不管何種風格的設計均可以引用它，因此base層要力求精簡和通用。
 *     3>common層：位於中間，提供組件級的CSS類。
 *         將頁面內的元素拆分紅一小塊一小塊功能和樣式相對獨立的小「模塊」；
 *         common是網站級的，不一樣的網站有不一樣的common層
 *     4>page層：非高度重用的模塊    
 *         page層位於最高層，提供頁面級的樣式。    
 */

/**
 * 3.模塊化CSS
 *     1>單一職責
 *         (1)模塊與模塊之間儘可能不要包含相同的部分，若是有相同部分，應將它們提取出來，拆分紅一個獨立的模塊；
 *         (2)模塊應在保證數量儘量少的原則下，作到儘量簡單，以提升重用性。
 *     2>命名空間
 *         css命名空間的概念
 *             <div class="box">
 *                 <div class="box-hd"></div>
 *                 <div class="box-bd"></div>
 *                 <div class="box-ft"></div>
 *             </div>
 *         能夠將這裏的box命名理解爲一個類的類名稱(也就是模塊名稱)，而這裏的hd/bd/ft正是box裏面的(私有)變量，
 *         box內部樣式的修改並不會影響box模塊外的樣式，能夠理解爲這裏的box起到了命名空間的做用。
 *     3>多用組合、少用繼承
 *         (1)可以大大減小類的數量，提升了可維護性；
 *         (2)使類的職責更單一，彈性更強，增長了類的重用性，提升了開發效率。
 *         固然，這種方式會讓HTML標籤看起來過於臃腫，可是它帶來的好處確實不容忽視的，推薦掛多了class的方式
 *     4>處理上下margin
 *         若是不肯定模塊的上下margin特別穩定，最好不要將它寫到模塊的類裏，而是使用類的組合，
 *         單獨爲上下margin掛用於邊距的原子類。模塊最好不要混用margin-top和margin-bottom，
 *         統一使用margin-top或margin-bottom。
 */

/**
 * 4.常見問題
 *     1>爲了保證樣式容易被覆蓋，提升可維護性，CSS選擇符需保證權重儘量低。
 *     2>CSS sprite
 *         在網站流量限制及維護性上找到一個平衡點
 *     3>CSS編碼風格(一行式、多行式)
 *         筆者傾向於一行式，我的傾向於多行式
 *     4>class和id
 *         儘可能使用class，少用id
 *     5>CSS hack(IE條件註釋法、選擇符前綴法、樣式屬性前綴法)
 *         我的傾向於樣式屬性前綴法
 *     6>display: inline-block和haslayout
 *         可以觸發IE6/IE7(其自己並不支持display: inline-block)行內元素的haslayout.
 *     7>relative、absolute、float
 *         (1)position: relative;會保留本身在z-index:0層的佔位，
 *             其left/right/top/bottom值是相對於本身在z-index:0層的位置
 *         (2)position: absolute;會徹底脫離文檔流，再也不在z-index:0層保留佔位符，
 *             其left/right/top/bottom值是相對於本身最近的一個設置了position: relative;或
 *             postion: absolute;的祖先元素，若是發現沒有，那麼就相對於body元素了。
 *         (3)float: left/right;屬性不會讓元素「上浮」到另外一個z-index層，它仍然讓元素在z-index層排列，
 *             float會改變正常的文檔流排列，影響到周圍元素。
 *     8>水平居中和垂直居中
 *     9>網格佈局(grid-xxx-xx、layout-xxx-xx、content-xxx-xx)
 *     10>z-index和IE6下的select元素
 *         
 */

　　第五章：高質量的JavaScript函數

/**
 * 1.防止JS衝突
 *     1>用匿名函數(自執行)將腳本抱起來，能夠有效控制全局變量，避免衝突隱患。
 *     2>讓JS不產生衝突，須要避免全局變量的泛濫，合理使用命名空間以及爲代碼添加必要的註釋。
 * 
 * 2.JS分層思想
 *     1>base層
 *         位於三層中的最底端，具備兩個職責。其一，封裝不一樣瀏覽器下JavaScript的差別，提供統一的接口。
 *         其二，擴展JavaScript語言底層提供的接口，讓它提供更多更爲易用的接口。
 *     2>common層
 *         位於三層的中間，依賴於base層提供的接口。common層提供可供複用的組件，它是典型的MVC模式中的M，
 *         和頁面內的具體功能沒有直接關係。common層的功能是給page層提供組件。
 *     3>page層
 *         位於三層的頂端。這一層和頁面裏的具體功能需求直接相關，是MVC模式中的C。
 *         page層依賴於base層和common層。page層的功能是完成頁面內的功能需求。
 *         拿YUI2和jQuery組件庫舉例子：
 *             YUI2自己分紅三大部分：Core、Utilities、Widget，其對應分層以下
 *                 Core         --> base層
 *                 Utilities    --> common層
 *                 Widget       --> common層
 *             jQuery自己分紅兩大部分：jQuery核心文件和jQuery UI文件，後者依賴於前者，其對應分層以下
 *                 jQuery核心   --> base層
 *                 jQuery UI　　--> common層
 * 
 * 3.編程實用技巧
 *     1>彈性
 *         思考如何讓本身的代碼具有很高的擴展彈性，思考讓本身的代碼更具應對需求變化。
 *     2>多用className進行功能類似點的程序掛鉤而不是標籤名
 *     3>用hash對象來替代相似於test(3, null, null, 5)傳遞參數的方式，就不用過於遵循參數傳遞的順序及個數問題
 *         一概用hash映射方式進行傳參，應用接收參數的時候可讀性也增長了一些。總體而言更加靈活。
 */

/** 
 * 4.面向過程編程
 *     1>這種編程方式將程序分紅了「數據」和「處理函數」兩個部分，程序以「處理函數」爲核心，
 *         若是要執行什麼操做，就將「數據」傳給相應的「處理函數」，返回咱們須要的結果。這種編程方式就是面向過程編程。
 *     2>這種編程方式存在的問題以下：
 *     (1) 數據和處理函數之間沒有直接的關聯，在執行操做的時候，咱們不但要選擇相應的處理函數，
 *         還要本身準備處理函數須要的數據，也就是說，在執行操做的時候，咱們須要同時關注處理函數和數據。
 *     (2) 數據和處理函數都暴露在同一個做用域內，沒有私有和公有的概念，整個程序中全部的數據和處理函數均可以相互訪問，
 *         在開發階段初期也許開發速度很快，但到了開發後期和維護階段，因爲整個程序耦合得很是緊，
 *         任何一個處理函數和數據都有可能關聯到其餘地方，容易牽一髮而動全身，從而加大了修改難度。
 *     (3) 面向過程的思惟方式是典型的計算機思惟方式——輸入數據給處理器，處理器內部執行運算，處理器返回結果。
 *         也就是說面向過程的思惟方式是在描述一個個「動做」。
 *         而現實生活中的一個個「物件」(如人{姓名，狀態})很難用面向過程的思惟方式進行描述。
 *     (4) 當代碼量很大的時候，「數據」和「處理函數」之間的耦合度大大增長，不利於維護。
 */
//面向過程編程的典型例子
//定義電話本
var phonebook = [
    {name: 'adang', tel: '1111'},
    {name: 'king', tel: '2222'}
];

//查詢電話
function getTel(phoneBook, name) {
    var tel = '';
    for (var i = 0; i < phoneBook.length; i++) {
        if (phoneBook[i].name === name) {
            tel = phoneBook[i].tel;
            break;
        }
    }
    return tel;
}

//調用函數
getTel(phonebook, 'king');

/**
 * 面向對象編程
 *     這種編程就是拋開計算機思惟，使用生活中的思惟進行編程的編程方式。面向過程的思惟就是描述一個個「動做」，
 *     而面向對象的思惟就是描述一個個「物件」，客觀生活中的物件，在程序中咱們管「物件」叫作「對象」，
 *     對象由兩部分組成：「屬性」和「行爲」，對應客觀世界中物件的「狀態」和「動做」。
 */
//下面看看面向過程編程和麪向對象編程的區別
//面向過程
var name = 'king',
    state = 'awake';
    say = function (oname) {
        alert('I am ' + oname);
    },
    sleep = function (ostate) {
        ostate = 'asleep';
    };
say(name);
sleep(state);

//面向對象
var king = {
    name: 'king',
    state: 'awake',
    say: function () {
        //在對象內部，對象的屬性和行爲經過this關鍵字關聯起來
        alert('I am ' + this.name);
    },
    sleep: function () {
        this.state = 'asleep';
    }
}
//在對象外部，屬性和行爲能夠用對象的屬性和對象的行爲來調用，從而讓程序有了按真實世界的思惟方式進行描述的能力。
king.say();
king.sleep();
/**
 * 一個典型的OO編程過程應該是先整理需求，根據需求進行OOA(面向對象分析)，將真實世界的客觀物件抽象成程序中的類或對象，
 * 這個過程常常會用到的是UML語言，也稱UML建模，OOA的輸出結果是一個個類或對象的模型圖。接下來要進行OOD(面向對象設計)，
 * 這一步的關鍵是處理類之間的耦合關係，設計類或對象的接口，此時會用到各類設計模式。OOA和OOD是反覆迭代的過程，
 * 他們自己也沒有很是清晰的邊界，是相互影響、制約的。OOA和OOD是面向對象編程的思想和具體語言無關，而OOP(面向對象的程序設計)
 * 是面向對象編程的工具，和選用的語言相關。
 */

/**
 * 5.其餘問題
 * 1.prototype和內置類
 *     1> 咱們能夠經過擴展prototype原型可以擴展內置類的方法，要記住擴展方法中的this表明的是實例化的對象。
 *     2> 咱們不但能夠擴展內置類的方法，還能夠重寫內置類的方法。
 *     3> 修改內置類的原型在多人合做時可能對別人的代碼形成影響，存在衝突隱患
 * 2.標籤的自定義屬性
 *     1> 從兼容性考慮，對於常規屬性，統一使用node.xxx的方式讀取，對於自定義屬性，統一使用node.getAttribute('xxx')讀取
 *     2> 自定義屬性的反序列化
 *         <a id="a" href="http://www.cnblogs.com/jinguangguo/" bloginfo="{name:'king', type:'WEB前端開發'}">my blog<\/a>
 *         <script>
 *            var node = document.getElementById(a);
 *            var info = node.getAttribute('bloginfo');
 *            info = eval('(' + info + ')');
 *            alert(info.name);    //king
 *            alert(info.type);    //WEB前端開發
 *         <\/script>
 *     3> 標籤的內聯事件和event對象
 *         (1)在IE下，event是window對象的一個屬性，是在全局做用於下的，而在Firefox裏，event對象做爲事件的參數存在
 *         (2)代碼段一以下
 *      <a href="#" id="a">連接<\/a>
 *        <script>
 *            document.getElementById('a').onclick = function () {
 *                alert(arguments.length);    //IE：0；非IE：1
 *            };
 *        <\/script>
 *         (3)代碼段二以下
 *         <a href="#" id="a" onclick="handle()">連接<\/a>
 *         <script>
 *            function handle() {
 *                alert(arguments.length);    //all browser：0 
 *            }
 *        <\/script>
 *         (4)代碼段三以下
 *         <a href="#" id="a" onclick="alert(event.type);">連接</a>        //all browser：click
 *     4> 利用事件冒泡機制
 *         冒泡的思路是在祖先節點上監聽事件，有效減少內存開銷
 *     5> 改變DOM樣式的三種方式
 *         (1)直接設置style
 *         (2)添加預先設定的類
 *         (3)添加預先設定的css文件(一般用於全站皮膚設定的相似功能)
 */