新寫法-slide的總結

總結:

1.匿名函式使用

(function(global){})(window) //封裝外掛,避免全域性變數
(function(global,$){})()
複製程式碼

擴充套件:$(function(){ ... }) jqeruy中的寫法等於js中window.onload = funtion(){ ... } 2.ES6中的CLASS使用

class Slide{
    constructor(opts){
        this.x = opts.x;
        ...
        this.init();
    }
    init(){
        ...
    }
}
var slide = new Slide(opts); //例項化
複製程式碼

2.1

utils.js中的var utils 使用es6的語法 export default utils

slide_2.js中呼叫import utils from "./utils.js"

ps:原生的瀏覽器是不知道import的,chrome 64版本後支援不過需要使用時,如:<script type="module" src="./slide_2.js"></script> 新增type="module"

3.嚴格模式的使用"use strict"

4.生命週期寫法具體實現:

(function(global,utils){
    'use strict';
    var Slide = funtion(opts){
        this.x = opts.x;
        ...
        this.initialization();
    }
    //只要可能操作的節點
    Slide.Eles = {
        body : 'body',
        pre : '#pre',
        ...
    }  
    //陣列物件生成dom樹
    Slide.getDom = {
        {tag:'div',class:'slide-wrapper',children:[
            {tag:'div',class:'slide-viewport',children:[
                {tag:'ul',class:'slide-panel'}
            ]}
        ]}
    } 
    //通過原型使用
    Slide.prototype = {
        constructor : Slide,//保證原型鏈指向正確
        initialization : () => {
            this.setDom = utils.domTree(Slide.getDom); //obj生成Element節點
            this.option();                             //繪製Element時進行配置
            this.drawHTML(this.id);                    //繪製Element到HTML中
            this.bindEvent(this.fun);                  //繫結節點事件
        }
        option : () => { ... },
        drawHTML : () => { ... },
        bindEvent : function(e){
            this.initializeElements();                 //Slide.Eles的迴圈生成obj屬性
            e.pager && this.pagerEvent();
            e.direction && this.directionEvent();
            e.autoPlay && this.autoPlayEvent();
        },
        initializeElements : function () {
            let eles = Slide.Eles;
            for(let name in eles){
                if(eles.hasOwnProperty(name)){
                    this[name] = utils.$(eles[name]);
                }
            }
        }
    }
    
    global.Slide = Slide;//window全域性變數
})(window,utils)
複製程式碼

生命週期寫法的一種思考:通過class 中 oop 寫法(slide_1.html) 和新的寫法 (slide_2.html)進行對比明顯可擴充套件性和可讀性更加高,靈活性也更好一點,不過對於小的外掛或者輪子寫起來也相對麻煩

這次寫slide其實就複雜化了

4.1 陣列物件生成無限深度節點

在utils.js可以看到domTree的使用

    //物件型別
    Slide.getDom = [
    	{tag:'div',class:'slide-wrapper',children:[
            {tag:'div',class:'slide-viewport',children:[
                {tag:'ul',class:'slide-panel'}
            ]}
        ]}
    ]
    //主要函式
    domTree : function(getDom){
        let fragDom = document.createDocumentFragment(),middle;
        let wx = function(ele,node){
            let tsElement = document.createElement(ele.tag);
            tsElement.className = ele.class;
            if(!middle){
                fragDom.append(tsElement);
                middle = true;
            }else{
                node.append(tsElement)
            };
            if(ele.hasOwnProperty('children')){
                for (let x of ele.children) {
                    if(!x.hasOwnProperty('node')){x.node = tsElement;}
                    wx(x,tsElement);
                }
            }else{
                return false;
            }
        }
        for (let setEles of getDom) {
            wx(setEles);
            middle = false;
        }
        return fragDom;
    }
    
複製程式碼

其中if(!x.hasOwnProperty('node')){x.node = tsElement;} 為關鍵點

新寫法-slide的總結

相關文章