zoukankan      html  css  js  c++  java
  • Javascript模块化编程-初识[1]

    JS模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心业务逻辑,其他都可以加载别人已经写好的模块。

    但是,JS不是一种模块化编程语言,它不支持类,所以没有严格意义上的模块。为了实现模块化,类模块化应运而生。

    1、原始写法:

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

         只需要把不同的函数简单的放在一起,就是一个模块。

         Eg:

             function t1(){

                 //...   

             }

             function t2(){

               //...

             }

         缺点:污染全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

    2、对象写法:

         为了解决原始写法的缺陷,可以把模块写成一个对象,所有模块成员都放在对象里面。

         Eg:

             var module1=new Object({

                  num:0,

                  Fn1:function(){

                     //...    

                  },

                  Fn2:function(){

                     //...    

                  }

              });

         缺陷:全局变量可以随意被改写。

    3、立即执行函数写法

         立即执行函数,可以达到不暴露私有成员的目的。

         Eg:

             var class1=(function(){

                              var num=0;

                              var fn1=function(){

                                             //...

                                          };

                              var fn2=function(){

                                             //...

                                          };

                              return {

                                  m1:fn1,

                                  m2:fn2,

                               };

                             })();

         这种写法就是JS模块化的常规写法。

    4、放大模式

         如果一个模块很大,需要分成多个部分,就必须采用放大模式。

         Eg:

             var class2=(function(c1){

                              c1.fn3=function(){

                                         //...

                                         }

                             })(class1);

    5、实现调用外部全局变量,Jquery etc.

         独立性是模块化的一个重要特点,模块内部最好不要和其它外部成员直接交互。

         为了实现模块化调用外部全局成员,必须显示地将其它变量输入模块。

         Eg:

             var class1=(function (Jq,ya){

                                  //...

                             })(jQuery,YAHOO);

          上面的模块实现了JQuery和YUI库。这样做的目的,保证了模块的独立性,还使得模块之间的依赖变得明显。

    【下一章节】

  • 相关阅读:
    第二章 装配Bean
    JAVAScript中DOM与BOM的差异分析
    前端中的命名规则
    用产生随机数的方法加上鼠标事件实现点击生成彩色积木
    关于AngularJs中监听事件及脏循环的理解
    前端工程师面(笔)试题部分汇总
    Js中获取显示器、浏览器以及窗口等的宽度与高度的方法
    实现选项卡切换的三种方式
    对于前端浅显理解
    js程序开发-3
  • 原文地址:https://www.cnblogs.com/fang-beny/p/Javascript.html
Copyright © 2011-2022 走看看