zoukankan      html  css  js  c++  java
  • js模块开发

    js模块开发(一)

    现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

    于是js模块化开发就显的越来越重要了,但是,Javascript不是一种模块化编程语言,它不支持""(class),更遑论"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)在现有的开发中,使用“模块的效果”。于是我们简单的总结了几种模块开发的方式。

    (1)原始写法:

    模块就是实现特定功能的一组方法。

    只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

    1
    2
    3
    4
    5
    6
    function f1(){
     
    }
    function f2(){
     
    }

    然后我们直接调用就可以了,但是这个做法有很多的弊端。例如:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

    (2):使用对象的写法

    为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。这个写法在我现在的项目中经常使用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var func={
    var count=0;
    inti:function(){
     
    },
    getValues:function(){
     
    }
    }

    然后我们要使用的话直接 func.inti() .但是这个方式有一个缺点:这样的写法会暴露所有模块成员,内部状态可以被外部改写。func.count=1,这样就很不安全。

    (3):立即执行函数写法

    这个就可以防止修改内部的成员。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var func=({
    var count=0;
    inti:function(){
     
    },
    getValues:function(){
     
    }
    })():

    func就是Javascript模块的基本写法。可以起到很好的保护私有成员的作用。

    (4):放大模式

    如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"

    1
    2
    3
    4
    5
    6
    var func = (function (fn){
       fn.m = function () {
         //...
       };
       return fn;
     })(func)

      上面的代码为func模块添加了一个新方法m(),然后返回新的func模块。

    (5):宽放大模式

    在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

    1
    2
    3
    4
    var func = ( function (fn){
        //...
        return fun;
      })(window.func || {});

    与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。

    (6):输入全局变量

    独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

    1
    2
    3
    var func = (function ($, baidu) {
       //...
     })(jQuery, baidu);

      上面的func模块需要使用jQuery库和baidu库,就把这两个库(其实是两个模块)当作参数输入func。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

    待续:js模块加载器

  • 相关阅读:
    NHibernate 做个小项目来试一下吧 四 (我们继续)
    NHibernate 做个小项目来试一下吧 三
    NHibernate 做个小项目来试一下吧(数据分页) 七
    用SWFUpload插件进行多文件上传(上传页获得自定义后的文件名)
    SQL:找出我(uid=2)所有的好友信息,和这些好友发布的最新的一篇文章
    介绍生成PHP网站页面静态化的方法
    smarty if 操作符
    php 做注册邮件发送成功
    200多个js技巧代码
    生成列表页分页的HTML静态页
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/4312073.html
Copyright © 2011-2022 走看看