德哥盛世网络科技

 找回密码
 立即注册
查看: 71|回复: 0

HTML5(js代码合并)

[复制链接]

717

主题

1111

帖子

8431

积分

管理员

CEO

Rank: 9Rank: 9Rank: 9

积分
8431

最佳新人活跃会员热心会员推广达人宣传达人

QQ
发表于 2019-8-19 23:27:33 | 显示全部楼层 |阅读模式

HTML5入门(js代码合并)
有些时候在开发过程当中会遇到很多的重复的js代码,就拿网络请求而言,一个项目当中的网络请求数量一般情况下不会小于10个,也就是说正常情况下你要写10遍网络请求才可以,那么问题就来了,10个20个请求好说,但是50个100个呢?需要写多少的重复代码,一旦请求需要统一修改的时候你要修改多少东西?这就造成了维护上的麻烦,所以类似的将过于多的重复代码整合到一起,通过一个文件进行调用的话会怎样?那会节省很多代码填写,代码的整洁度以及可维护性会相应的增高!

1、抽取后保存的文件注释
每个人呢都有每个人的习惯,这个基本上没法改变的,当然的代码的基础还是不变的,仅仅只是使用上以及标注上的差别,所以这里所有的注释都是我个人的使用习惯,当然了,也是会参考别人的习惯,取长补短,在开发这一途闭门造车可不是什么好习惯!

在文件的第一行开始要注释以下内容:(当然后续可能会有变动,变动的haul不一定会发布新的)

/**
* 创建人:
* 创建时间:
* 描述:
* 参考:
* 功能:
*/
1
2
3
4
5
6
7
ps:对于一个程序员来说,不单单代码写的漂亮就行,还要注意注释的问题,否则的话代码写的再漂亮有什么用,别人也看不明白,毕竟看你代码的不单单只有和你一起开发的人

2、将被抽取的通用代码放到一个函数当中
此时需要将可以被通用的代码放到一个函数当中,当然了,通用代码可能不止一部分代码,可能是由多个代码块组成,那么就将多个代码块放到多个函数当中使用,所以这个时候就要定义多个函数了!(当然了,post请求未测试,只是仿照get请求随便写了下,只是为了概念)

//请求超时时间
var TIME_OUT = 100;//单位毫秒

/**
* 发起get网络请求
* @param {String} url 请求网址
* @param {Function} completeFunction 请求完成后回调函数 (请求成功或失败之后均调用)。
* @param {Function} successFunction 成功回调
* @param {Function} failFunction 失败回调
*/
function getRequest(url,completeFunction, successFunction,failFunction) {
    $.ajax({
        type: "get",
        url: url,
        async: true,
        timeout: TIME_OUT,
        complete: function(data) {
            successFunction(data)
        },
        success: function(data) {
            successFunction(data)
        },
        error: function(data) {
            successFunction(data)
        }
    });
}

/**
* 发起post网络请求
* @param {String} url 请求网址
* @param {Function} completeFunction 请求完成后回调函数 (请求成功或失败之后均调用)。
* @param {Function} successFunction 成功回调
* @param {Function} failFunction 失败回调
*/
function postRequest(url,completeFunction, successFunction,failFunction) {
    $.ajax({
        type: "post",
        url: url,
        async: true,
        timeout: TIME_OUT,
        complete: function(data) {
            successFunction(data)
        },
        success: function(data) {
            successFunction(data)
        },
        error: function(data) {
            successFunction(data)
        }
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
3、引入js文件 (也包括两个js文件的互相调用)
使用js文件很方便的,直接在html文件当中使用script标签引入即可,但是要注意,如果用到了其他js文件的东西的话那么就要在同一个HTML当中引入另外一个js文件,如下:

//ajax使用的引入
<script src="netrequest/jquery-3.3.1.js"></script>
//抽取出来的代码所在的js文件
<script src="netrequest/netRequest.js"></script>
1
2
3
4
4、被抽取合并的代码的使用
既然已经将相同代码抽取并合并到了一个文件,同时也将文件引入到了HTML当中,那么剩下的就按照function方法的形式使用就行了
不抛弃不放弃
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|德哥数据中心|德哥盛世花园|德哥盛世安防|德哥盛世影视|德哥盛世网络科技 ( 鄂ICP备15011170号-4 )

GMT+8, 2019-9-17 13:54 , Processed in 1.133895 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表