物件繼承深入、call_apply、圣杯模式、建構式和閉包，企業模塊化

一個實作加減乘除的插件：

原型其實是在建構式之上的，建構式變成實體化函式的時候才會有原型，

原型實際上是建構式的一個屬性

 原型無非就是2個字：繼承

原型中繼承父類所有方法是很不合理的，因為沒有實際的必要

針對call、apply方法都只是借用指定函式的一個借用this的指向，而不會繼承指定函式的原型

下面的優化是針對Student.prototype()=Teacher.prototype,這樣就不會繼承Teacher的方法，并能使用Teacher.prototype的屬性與方法：

但這就形成了公共的原型更加不合理了

圣杯模式：

企業級解決繼承的方法 ：中間的空物件的prototype指向我們需要的xxx.prototype，使用中間的空物件來進行變換值不會讓xxx.prototype的值進行變換

CSS中也有圣杯模式、雙飛翼

圣杯布局：

 HTML：

 CSS:

<style>
//清除浮動 在main里面添加進去
.clearfix::after{
 content:"";
 display:table;
 clear:both;
}

.wrap{
width:700px;
margin:0 auto;
}

.top ,.foot{
    height:50px;
    background-color:#000;
 }

.main {
    padding:0 100px;
overflow:hidden;
}

.main .left ,
.main .right{
background-color:green;
}


.main .left ,
.main .content,
.main .right{
float:left;
positin:releative;
background-color:green:
margin-bottom:-2000px;
padding-bottom:2000px;
}

.main .left{
width:100px;
}

.main .content{
wdith:100%;
margin-left:-100;
background-color:red;
}

.main .right{
 left:100px;   
 width:100px;
 margin-left:-100px;
}
</style>     

效果：中間誰占的高，旁邊的也會升高，

圣杯的布局方式：主要邏輯是通過賦值在進行布局

進行圣杯模式的一個封裝:

剛開始：

封裝后：  （super_class超級繼承源）

對于閉包形成的私有變數的一個定義：如下面num只能通過add來去訪問，那么num就是add方法的私有變數

函式的閉包：

 建構式的閉包： 

這里如果return原始值沒有影響的，但是不能回傳一個啥陣列，物件，針對的是原始值是沒有影響的，如果是參考值的化就會報錯

將圣杯模式用閉包來實作：

將其封裝成一個立即執行函式：（曾經雅虎在yos3實作的一個方法）

這樣是模塊化開發的一種形式，多人開發是這樣做的

 一個很牛逼的案例：

企業級的圣杯模式的具體代碼：

      var inhert = (function () {
        var Buffer = function () {}
        return function (Target, Orgin) {
          Buffer.prototype = Orgin.prototype
          Target.prototype = new Buffer()
          Target.prototype.constructor = Target
          Target.prototype.sup_class = Orgin
        }
      })()

      var InitProgrammer = (function () {
        var Programmer = function () {}
        Programmer.prototype = {
          name: '程式',
          tool: '計算機',
          work: '撰寫應用程式',
          duration: '10個小時',
          say: function () {
            console.log(
              '我是一名' +
                this.myName +
                this.name +
                ',我的作業是用' +
                this.tool +
                this.work +
                ',我每天作業' +
                this.duration +
                ',我作業需要用到' +
                this.lang.toString() +
                '，'
            )
          },
        }

        var FrontEnd = function () {}
        var BackEnd = function () {}
        inhert(FrontEnd, Programmer)
        inhert(BackEnd, Programmer)
        FrontEnd.prototype.lang = ['HTML', 'CSS', 'JavaScript']
        FrontEnd.prototype.myName = '前端'
        BackEnd.prototype.lang = ['NODE', 'java', 'Python']
        BackEnd.prototype.myName = '后端'

        return {
          FrontEnd,
          BackEnd,
        }
      })()

      var frontEnd = new InitProgrammer.FrontEnd()
      var backEnd = new InitProgrammer.BackEnd()

      frontEnd.say()
      backEnd.say()

企業級的協同開發：

模塊化開發：

  //模塊化開發

      //這樣是按需執行
      window.onload = function () {
        init()
      }

      function init() {
        initCompute()
        initFunctions()
      }

      var initCompute = (function () {
        var a = 1,
          b = 2
        function add() {
          console.log(a + b)
        }
        function minus() {
          console.log(a - b)
        }
        function mul() {
          console.log(a * b)
        }
        function div() {
          console.log(a / b)
        }
        return function () {
          add(), minus(), num()
        }
      })()

      var initFunctions = (function () {})()

 插件化開發：

      //   插件化開發
      ;(function () {
        var Silder = function (opt) {}
        Slider.prototype = {}
        window.Slider = Slider
      })()

      var slider = new Slider({})

標籤：JavaScript

上一篇：周愛民帶你深入剖析JavaScript核心原理

下一篇：「免費開源」基于Vue和Quasar的前端SPA專案crudapi后臺管理系統實戰之docker部署（八）