经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
对象继承深入、call_apply、圣杯模式、构造函数和闭包,企业模块化
来源:cnblogs  作者:麻花的野望  时间:2021/4/6 10:09:19  对本文有异议

一个实现加减乘除的插件:

 

 

原型其实是在构造函数之上的,构造函数变成实例化函数的时候才会有原型,

原型实际上是构造函数的一个属性

 

 

 原型无非就是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到一个数的累加值

原文链接:http://www.cnblogs.com/mahuablog/p/14612298.html

 友情链接: NPS