[一对一课程] 之 设计并实现第一个JS模块？

这篇文章不太好写，谈目前网上的多数教程，谈到JS模块必贴代码，而我一向不喜欢在公众号文章里写代码，因为难以阅读。所以我尝试从“构思”的角度，来写一下本文。

在昨天的 [一对一讲什么] 之 测完了接口、搞好了目录，然后做啥？ 中，我们说到要搞一个全站级别的广播模块，名字看起来挺高大上的，看看设计图，

就是图上画红框的地方，说它全站级别，是因为从图上来看，是整个网站应该都能看到它；说它是广播模块，因为从图上来看，它的功能就是不断的更新一些站内新闻。

所以把它称之为一个全站级别的广播模块。好了，功能说完了，再来说下如何去写它。

JS模块，从前端的发展路径来讲，其实一个function函数，就是一个模块，后来搞成用一个对象，里面来包含函数，形成封闭式的模块。

再后来就是AMD、CMD、CommonJs等各路标准，再后来是require.js，后来嫌弃require.config过于繁琐的设置，又出现了webpack，以及其周边的各种插件形成的所谓“前端生态系统”。

（上面这二段话里提到的各种英文词儿，我都会在一对一的视频课程中安排讲解，在本文中就不多说明了，不懂的同学请自行百度）

不管你是用amd还是cmd还是require还是webpack，等其它各种东西，它们对于前端业务逻辑的处理都是一样的。所以我在这里只说如何用JS去实现业务逻辑，而不会去讲，这东西用React怎么做，用angular又怎么做，用vue又怎么做。

我的思路是，应该先明白如何去设计前端模块，之后，再用不同的前端框架去实现它，然后哪种好用，就用哪种。而不是反过来，不是你用前端框架写了，你就是实现了前端模块化。

好了，说了这么半天，终于要说到正题了。以下是伪代码，不明白什么是伪代码的同学，请自行百度

先写好模块，一个空函数，

function news(){
 //do code new
}

然后这个数据是获取来的，要有一个公共的get方法，

function get(url, callback){
 $.ajax({
 url:url,
 type:'get',
 dataType:'json',
 success:function(d){
 callback(d);
 }
 })
}

//这种自定义带callback的get方法，在以前的先行者周末课程中，已经讲过多次，看不懂的同学请自行在群里向同学们请教吧。200来人不会都忘了吧

现在有get方法了，要用它获取新闻内容，

//这是公共接口定义
var newsAPI = {
 ajax:'newsAPI/xxx'
}

然后，这个站内新闻广播的模块，应该是全站可见，那么它的DOM应该是独立的，而不是HTML写死在页面中。

function news(){
 var _html = '';
 get(newsAPI.ajax,function(d){
 _html = '<div>用户'
 + d.name 
 + '喜欢了' 
 + d.user 
 +'的设计</div>';
 $('#newDIV').html( _html );
 })
}

细节不表，到这里，这个新闻模块就算是最简单的完成了，然后凡是需要用到它的地方，都可以去调用它。

看到这里，大家有没有发现一个巨大的问题？！回去头去看看，如果还没有发现，那么一会跟大家讲。

上面的课程结构，在先行者计划里是不会讲的，因为先行者计划更多的是集中在“前端组件”上面；而上面的内容及前几天的[一对一课程]相关文章中的内容是集中在通过一个整体的项目来熟悉前端开发全流程的方面。这是它们的区别。

所以请不要再问我，为什么先行者计划中没有这些，因为侧重点不同。

之前提到上面的代码有一个大问题，JS代码本身没有问题，问题就是这个新闻更新。要知道它是每隔一定时间，新闻就自动更新的，它不是上下滚动，而是新闻内容的更新。

这就是意味着，网站本身要不断的定时向后端主动请求数据。

大家应该都明白，前端的请求要依靠事件的触发。那么这种自动请求后端数据要用什么事件呢？

相信大家第一时间脑子里出现的都是setTimeout，没错。它可以实现。但是我一般情况下，尽可能少的去使用setTimeout，因为JS本身是单线程，而setTimeout会把事件存入事件队列，然后setTImeout还会触发浏览器的定时器。

JS是单线程的，它的事件队列，是由浏览器来维护的。但浏览器是多线程的，它有JS引擎线程、UI渲染线程，JS事件线程，HTTP相关网络的线程...

当setTimeout设置的时间到了之后，浏览器再把它放到事件队列中，等队列中空了才会执行它。这有时会引起混乱与阻塞。

也许你会说，我clearTimeout不就行了么？但事实上，有时你setTImeout，把事件放入到队列中，阻塞就产生了。因为篇幅所限，就不再展开了。

所以我希望网站、网页、项目中的定时器越少越好。

说了这半天，如果不用setTimeout，那用什么呢？答案是HTML5的websocket，长连接，这个部分的内容，肯定是放在一对一的视频课程中来讲的。