菜鸟笔记-模块化开发

最新推荐文章于 2024-07-27 15:20:55 发布

chiliang8712

最新推荐文章于 2024-07-27 15:20:55 发布

阅读量68

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3281152/blog/846403

版权

    var My=function(){
        //私有代码
        var myName='xxx'
        return{
            //用return返回公共代码段 方法等等
            add: function (x,y) {
                return x+y
            }
        }
    }
    //调用部分
    var myNum=new My();
    console.log(myNum.add(2, 2));

b) 匿名闭包demo:

    (function () {
       //匿名闭包，所有的变量和函数都在这里声明，并且作用域也只在这个匿名闭包中
       console.log('aa')
        //但是这里可以访问全局变量
    }())
    //也可以这样写，但不推荐，这与立即调用函数的表达式有关
    // (function () {
        // console.log('bb')
       //括号写在外面，但是括号必须要有，这是标准
    // })()

c) 引用全局变量：

1.为什么要引用全局变量：

a) Javascript有一个特性叫做隐式全局变量，浏览器会反向遍历作用域链来查找整个变量的var声明，如果没有找到var，浏览器就会假定此变脸为全局变量，这是如果这个变量做了赋值操作且之前不存在的话，浏览器就会创建它。说白了就是在匿名闭包里直接使用一个变量，那么这个变量就是全局变量，虽然这样创建全局变量非常容易，但是想要管理就特别麻烦，尤其是阅读代码的人，他们很难区分哪些代码是局部的，哪些代码是全局的。

所以匿名函数给我们提供了一个又好有清晰的引用全局变量的方法 demo:

	var jQuery=function	(){
		//jQuery功能
	}
    (function ($) {
        //代码段这样我们就可以在匿名闭包中直接使用全局变量了，将要引用全局变量当成参数传入匿名闭包内
        //查看起来清晰而又方便，很多库使用的都是这种方法
    }(jQuery))

d) 如何创建全局变量：

    var my=(function () {
        var my={},myName='xxx'
        function fnContent(){
            //这里是内部代码段
        }
        my.name=myName
        return my
    }())
    console.log(my)//可以通过这种方式return一个全局变量

3.高级用法

a) 松耦合：

不难发现上面这种方法的限制是所有代码都要写在一个文件，其实在一些大项目中，将一个功能分离成多个文件是非常重要的，因为可以利于多人合作开发。那么有没有一种办法改善一下上面的函数让其实现分离呢？答案是肯定的，只要把my当作参数传入函数内，再给它加属性就可以了。

    var someone= (function (my) {
        //私有部分 sayHi
        function sayHi(){
            console.log('hello')
        }
        //私有部分 sayGoodbye
        function sayGoodbye(){
            console.log('goodbye')
        }
        //给对象添加公共内容
        my.sayHi = function () {
            sayHi()
        };
        my.sayGoodbye= function () {
            sayGoodbye()
        }
        return my;
        //这里这么写可以不用创建someone对象，如果没有someone对象就创建一个
    }(someone||{}));
    someone.sayHi()
    someone.sayGoodbye()

b) 那么因为松耦合内部的属性和方法是不能重载的，如果工作中需要重写或修改内部的方法和属性怎么办呢?

紧耦合：

    var someone= (function (my) {
        function sayHi(){
            console.log('hello')
        }
        function sayGoodbye(){
            console.log('goodbye')
        }
        my.sayHi = function () {
            sayHi()
        };
        my.sayGoodbye= function () {
            sayGoodbye()
        }
        return my;
    }(someone||{}));
    //紧耦合
    var elseone=(function (my) {
        var oldone=someone.sayHi
        my.sayHi = function () {
            //这里依然可以调用通过oldone调用旧方法
            oldone()
            //也可以重写新的方法
        };
        return my
    }(elseone||{}))
    //在函数内部成功调用了oldone方法
    elseone.sayHi()

紧耦合限制了加载的顺序这点一定要注意

转载于:https://my.oschina.net/u/3281152/blog/846403