对象继承深入、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({})

作业：

打印一个参数之内能够被3或5或7整除的数

打印斐波那契数列的第N位

打印从0到一个数的累加值

巴特西

对象继承深入、call_apply、圣杯模式、构造函数和闭包，企业模块化

最新文章

热门文章