[一对一课程] 之 设计并实现第一个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,长连接,这个部分的内容,肯定是放在一对一的视频课程中来讲的。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-12-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Bug生活2048

几行代码搞定识别图片中的文字信息,同时转换成语音

实现的方式还是挺多的,这里介绍下百度的AI开放平台,毕竟大公司,感觉识别的精度会高点,同时相信他们的算法也会不断优化,我等小菜鸟只要会用就可以啦。

3821
来自专栏西枫里博客

如何让网站打开变快?暨网站速度优化指南。

网站打开速度一向是网站运营者和SEO工作者关注的重要指标。百度在网站优化白皮书中也提到需要注重网站访问速度。2017年更是退出了针对移动端访问推出闪电算法(博文...

1522
来自专栏Flutter入门到实战

全面总结国内BATH等大厂开源的安卓有关的库(持续更新中...)

UltraViewPager 是阿里开源的一个封装多种特性的 ViewPager ,主要是为多页面切换场景提供统一解决方案。

3602
来自专栏我和未来有约会

Radiant: 基于Ruby on Rails的内容管理系统

Radiant是一个开源的CMS[内容管理系统],建立于Ruby on Rails。Radiant是为一些小的开发团队而创建的[Publishing for S...

20310
来自专栏web前端教室

【周总结】0827前端零基础班本周总结(08.27-08.31)

每一期的学生情况都是不同的,因为是从完全的零基础开始讲起,面向的是完全的前端零基础学生。所以第一周基本上进度都比较慢,主要是通过课后作业和课程直播时的即时反馈来...

943
来自专栏程序员宝库

爬虫抓取的门道——来看这篇

本文首发于我的个人博客,同步发布于SegmentFault专栏,非商业转载请注明出处,商业转载请阅读原文链接里的法律声明。 web是一个开放的平台,这也奠定了w...

4559
来自专栏Web 开发

纸上谈兵之高性能Web开发

今天一连两次被问到简历中提到的高性能Web开发方面的事,看来这种大标题很有诱惑力。

1050
来自专栏娱乐心理测试

第一个微信小程序

3096
来自专栏求索之路

适用于键盘流、懒人、强迫症患者以及码农的究极Mac使用指南

再次声明:本文是给一些喜欢折腾提升效率的、希望成为键盘流选手的、懒惰得不愿意多移动手指的、有严重的强迫症的人提供一些经验和帮助的。所以意义党、不分青红皂白党、键...

3103
来自专栏花叔的专栏

解读一下动态消息,顺便补充一下新的跳转规则

它是一个重磅的功能,意思是:在小程序或者小游戏里,可给聊天框发出一个小程序卡片链接,该链接具备可自主设置的提醒功能,开发者可在未来24小时内对该链接上的部分信息...

1922

扫码关注云+社区

领取腾讯云代金券