如何封装常用的JS方法

JavaScript08

如何封装常用的JS方法,第1张

1、JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置。

2、JS封装的方法有函数方式、对象的方式、闭包的方式。

举例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

1)函数方式

function kk(a,b){

内部对a,b怎么处理就不需要关心了

}

2)对象方式

function kk(a,b){

this.x = a

this.y = b

}

var k = new kk(1,2)//通过面向对象的方式

alert(k.x)

3)闭包方式

function kk(a,b){

var k = 1

return function tt(){

k++

}

}

var u = kk(1,2)

u()//闭包实现累加

u()//闭包实现累加

而且对于JS代码,因为本身就是一出现是一大段,自然如果不封包起来通过调用的方式进行整理的话,直接放到网站源码中,自然就会加大的源码的体积,而且还会影响到代码的美现。而且现在很多的杀毒软件都把JS代码误报为病毒,况且JS代码外露也很容易让不良分子找到攻击网站的参照物。JS封装的好处:1、提高网站的打开速度。2、符合SEO搜索引擎思路。3、加大网站的曝光力度。所以,对于提高网站访问速度,最好把JS代码封包起来,而且还要通过ROBOT文件把之屏蔽掉,毕竟这些都是搜索引挚不能识别的,外放对于提高收录只有坏外没有好处,所以,为了收录为了访问速度能封装的JS代码就尽时封装。

接下来,我讲封装一个仿jQuery的库,主要包含jQuery中绑定,css,等方法,我讲它定义为 "HQuery"

jQuery中的 $ 符号意味着什么?

先思考一下jQuery库中alert(typeof $)的结果,它是一个对象,也是一个函数

所以美元符$字面上是jQuery,其实就是一个jq对象,里面可以接受函数,字符串,还要一种是对象(比如this)

给自己的Hquery填加$符号:

Hquery是基于面向对象实现的,所以我们需要先写构造函数,为了方便遍历和其他方法的操作,所有内容返回到一个数组中,这个数组衣服于Hquery对象存在,之后将为这个Hquery对象属性添加方法

我们使用Hquery操作DOM等实现一系列的功能,选择器是必不可少的,所有我们首先封装好选择器,这样就可以能省去document.getElementsByClass等等麻烦的操作

其他的方法,我就不一一介绍了,下面直接给大家上一个多种方法封装好的,大家k'y