JS新手,在尝试做一个自定义JS库,实现的效果如下:
var a = myComponent.init(newJsonConfig).func1();
但是实际上发现,init() 配置还没有执行完,func1()就执行完成了,init()是这个自定义库的基础,内有ajax、远程认证等,init()以外所有的方法都依赖init()内获取到的远程配置。注:我都有return this.
我尝试分开,像下面这样分开,问题也还是一样:
var a = myComponent.init(newJsonConfig);
a.func1();
问题:
1.像我上面这样的需求,设计思想是不是有问题?所有的方法都依赖 init() 执行完成才行,这样不适合链式操作,
2.如何像标题说的那样,让init()执行完后再执行func1() ?
都很相似吧,jquery,angular等,既然是一个库,那么你这个库的初始化应该放在库.js中初始化吧,就像angular,引入之后直接只把angular这个对象暴露出来,你这个暴露的是对象a
init放在库中初始化
<script src="lib/angular/angular.js"></script>
<script src="index.js"></script>
而a.func1();应该放在index.js中调用,先引入库,再使用库
js是单线程的,不可能发生
init()
还没执行完,后面的func1()
就开始执行,更别说后面的居然执行完了。只有一种情况,那就是你的
init()
中使用了异步的操作。如果是这样,我推荐你试试看
promise
。你的 init 涉及到了异步操作(比如 ajax),当你在 init 中 return this 的时候,异步操作的结果还没有返回,func1 拿到的还是原始值。
如果你想了解下如何实现异步操作下链式调用,建议去学习和了解下 Promise 的实现,会有惊喜哦~
init
里有 AJAX 这种异步操作,init
函数会先完成,然后执行func1
。AJAX 结果返回之后才会继续init
中给异步函数提供的回调。你需要给你的
init
函数提供一个参数作为回调函数,或者让你的init
函数返回一个Promise
。init里边的异步改为同步应该就可以了吧