HTML页面中JavaScript的Require与高阶函数的细节

作为导入框架的函数,Require方便了我们在同一页面中使用其他类中的元素,函数与算法等一系列操作。

简化操作的同时降低了代码的阅读性,这对新手来说简直是致命打击,我承认我是其中一员,所以在此做些总结。

一.Require

使用JS的时候函数可以在布局中直接调用;函数可以作为变量存在在javascript

Require的架构是一个单独的架构体系,里面去应用了很多第三方的包,目前都是用本地的

 require([“esri/map","esri/toolbars/draw","esri/toolbars/edit","esri/graphic","esri/config",

            ], function (Map, Draw, Edit, Graphic, esriConfig) {

//是要执行的代码,直接将引用的类通过变量来进行使用。

});

作为一个整体函数,require是一个函数,里面有两个参数,第一个参数是使用的第三方的类,每一个类会通过require函数中的方法,去映射到对应的后面的回调函数的参数中作为参数对象使用,然后在回调函数中作为参数来进行使用,这样方便了使用的过程,但是在开发过程中一定要注意使用的层级,这种方式就是一种进阶的高阶函数。这样方便了在js代码在H5中的应用过程,但是如果是在日记本或者类似EditPlus的编译器中是需要注意层次结构的;很容易因为层次原因导致内外部的代码无法连通,使用合适的静态变量可以改变现状,但静态变量造成的代码混淆和内存过多使用是需要注意的,单次加载的H5页面如果使用了缓存技术,又会导致下次打开界面的时候不能及时刷新界面也造成了程序员的开发困扰,通过迭代版本号或加尾缀(时间戳或者版本号来区分)这样避免的重复,但每次更新的时候都去用时间戳也会加大cpu和内存的负担,这样的用户体验也会较差,及时清理页面缓存也需要的;

二.函数,参数函数,回调函数;

      1.函数

//函数和类的使用,是为了在开发过程中出现的重复使用代码,插件化接入代码的。更加高效的组织代码的一个基础的过程,刚入门的程序员可能对这个概念非常模糊,我就是如此。但经过一段时间的积累,慢慢的发现重复的部分,不断的重构分析后,我们就形成了对函数的更高级的概念。

在JS中使用function作为函数的标志

函数的定义:

function  xxx(aaa){

alert(aaa)

};

    2.参数函数:

在高阶函数中,函数本身可以被视为一个参数放置在另一个函数中的参数列表中

例如:函数一

xx=function xxx(aaa){

//alert(aaa)

};

在ES6中我们可以写成箭头函数

var xx=(xxx)=>{ //这里是型参

alert(xxx)

}

函数二:

funtion  yyy(xxx){//这里是型参

alert(“yyy”)

}

调用:

在onclick或你知道的执行流程中,调用

yyy(xx('xxxx'));

这样就能够先后弹出对话框 xxxx与yyy

  • 型参与实参区分

    • 型参:只是对参数的类型进行声明,传递两个信息,①需要一个参数 ②需要这个类型,在javascript中省去了类型的编辑,只要知道参数的作用域就好了
    • 实参:在函数运行的过程中存在堆内存中。
    • 参数函数是将函数变成一个Object类型的参数进行调用的过程,在javascript语法中支持这样的操作,这样就能够在一个回调函数的内部声明一个共有函数提供给别的函数使用;这样的好处自然是将代码的清晰度提高,因为层次结构的问题,在面向this这样的指针中,无法很好的分辨内部类中的函数,那么,参数函数就很好的将内部函数作为参数放置在外部的层次中直接使用。

    3.回调函数

当调用yyy()函数是,我们可以直接使用回调函数;回调函数和参数函数的效果是是一样的,只不过一个是在函数的参数中定义回调的结果,一个是在任意的地方定义回调的结果;两者的区别在于使用场景的不同个,回调函数更多的是利用在异步执行中需要有结果反馈或者持续监听的过程来进行使用,是为了让代码的执行流程更加清晰。而参数函数更多的是为了分清代码的层次,特别是在使用了很多的框架的情况下进行使用,这样就能够很好的将功能独立出来。

function ceshi(){

yyy((ccc)=>{

alert(ccc)

});

}

function yyy(xxx){

xxx("xxx");

console.log("执行了函数yyy")

alert("yyyy");

}
  •  箭头函数

ES6中使用了箭头函数,加我熟悉的微信小程序中也可以去使用到ES6的箭头函数,这是讲回调函数和参数函数优化的一个钟写法,这不仅仅是一个写法的问题,其中最明显的优势也是再是this指针的问题,很多时候我们因为代码的类层次问题,而导致一个undfind的情况或者空指针的情况就是因为this指针不够明确,如果使用的指针函数就可以在滴答程度上避免这个问题,所有指针函数都是讲函数内部的情况直接反接入到顶层类的方法,不会在回调函数与参数参数函数中形成的内部的导致的顶层参数使用问题。优化了函数的使用,这回让新手产生新的混乱,所以一定要花时间弄清楚函数之间的关系,这非常重要。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WindFutrue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值