一步一步板块化js

  • 时间:2018-06-16 23:02 作者:展谊科技 来源:展谊科技 阅读:140
  • 扫一扫,手机访问
摘要:展谊lero前言:阅读该文章之前,需要有肯定的js基础。随着应使用的规模越来越庞大,嵌入网页的Js代码越来越庞大,越来越复杂。假如任由其发展,那么就会像下图所示。后期添加一个功可以,对应使用来的维护性来说将是指数级别的递增。程序开发者不得不用软件工程的方法,管理网页的业务逻辑。Js的板块化,封装化已

展谊lero

前言:阅读该文章之前,需要有肯定的js基础。

随着应使用的规模越来越庞大,嵌入网页的Js代码越来越庞大,越来越复杂。假如任由其发展,那么就会像下图所示。后期添加一个功可以,对应使用来的维护性来说将是指数级别的递增。

一步一步板块化js

程序开发者不得不用软件工程的方法,管理网页的业务逻辑。Js的板块化,封装化已经成为了一个迫切的需求。

一. 基础写法

封装是一种思想,它把特定的功可以封装成一组方法。

只需把不同的函数以及变量简单地放在一起,就算是一个封装了的功可以。

一步一步板块化js

上面的函数zhanyisc1()和zhanyisc2(),组成一个板块。用的时候,直接调使用就行了。

这种做法的缺点很显著:"污染"了全局变量,无法保证不与其余板块发生变量名冲突,而且板块成员之间看不出直接关系。

二. 对象写法

为理解决上面的缺点,能把板块写成一个对象,所有的板块成员都封装放到这个对象里面。

一步一步板块化js

上面的函数zhanyisc1()和zhanyisc2(),都封装在module对象里。用的时候,就是调使用这个对象的属性。

例如调使用函数zhanyisc1的写法:

一步一步板块化js

但是,这样的写法会暴露所有板块成员,内部状态能被外部改写。比方,外部代码能直接改变内部计数器的值。

一步一步板块化js

三. 立即执行函数写法

用"立即执行函数"(Immediately-Invoked Function Expression,IIFE),能达到不暴露私有成员的目的。

一步一步板块化js

上面的写法无法直接从外部获取count变量,上面的封装就是js的常使用封装方法。

四. 放大模式写法

假如一个板块很大,必需分成几个部分,或者者一个板块需要继承另一个板块,这时就有必要采使用"放大模式"(augmentation)。

一步一步板块化js

上面的代码为module板块增加了一个新方法zhanyisc3(),而后返回新的module板块。

五. 宽放大模式

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

一步一步板块化js

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

六. 输入全局变量写法

独立性是板块的重要特点,板块内部最好不与程序的其余部分直接交互。

为了在板块内部调使用全局变量,必需显式地将其余变量输入板块。

一步一步板块化js

上面的module板块需要用jQuery库,就把该库当作参数输入module。这样做除了保证板块的独立性,还使得板块之间的依赖关系变得显著。上面详情的是一个js文件内部的封装过程。

但是假如一个应使用中一个页面需要加载很多个js文件,常见的写法如下:

一步一步板块化js

这样的写法有很大的缺点。首先,加载的时候,浏览器会中止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,因为js文件之间存在依赖关系,因而必需严格保证加载顺序(比方上例的1.js要在2.js的前面),依赖性最大的板块肯定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

有没有办法来处理上面所提到的问题呢?答案是有的,这就是多个js协作工作的问题,请接着往下看。

七. 板块化规范

俗话说没有规矩不成方圆,板块化没有规范,每个人都按照自己的想法来写,对别人了解起来就很费时费力,不利于沟通传播和学习。因而js就制定了这样一个规范,使用于板块的加载,别人想要什么,按照规范来加载用就好了。

目前,通行的js板块规范有CommonJS和AMD。下面就来说说这两种加载方式。

八. CommonJS

在CommonJS规范中,有一个全局性方法require(),使用于加载板块。假定有一个板块hello.js,即可以像下面这样加载。

一步一步板块化js

上面的伪代码中,必需等hello.js加载完成。才可以调使用该板块的方法,也就是说,假如加载时间很长,整个应使用就会停在那里等。

这个重大的局限,使得CommonJS规范不适使用于浏览器环境,假如网速很慢,加载js的等待时间过长,浏览器处于"假死"状态。

因而,浏览器端的板块,不可以采使用"同步加载"(synchronous),只可以采使用"异步加载"(asynchronous)。这也是AMD规范诞生的背景。

九. AMD

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步板块定义"。它采使用异步方式加载板块,板块的加载不影响它后面语句的运行。所有依赖这个板块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

AMD也采使用require()语句加载板块,但是不同于CommonJS,它要求两个参数如下所示:

一步一步板块化js

将上面的方法改为AMD方式异步加载写法如下:

一步一步板块化js

它更适合浏览器环境。

上面提到了AMD加载其余板块,那么所谓的其余板块如hello.js这样的独立的js文件在AMD规范中该如何写呢?

这里也要用定义的规范函数来定义它就是define()函数。如下hello.js的定义为:

一步一步板块化js

假如这个hello.js板块还依赖其余板块,那么define()函数的第一个参数,必需是一个数组,指明该板块的依赖性。

一步一步板块化js

至此一步一步封装js到这里就告一段落啦。喜欢的小伙伴,记得点个关注哦!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部