专栏首页web前端教室[一对一课程] 之 设计并实现第一个JS模块?

[一对一课程] 之 设计并实现第一个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),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 很久也没有学会JavaScript的感觉?

    看了标题,相信很多同学都有类似的感觉。就是学了很久的JS了,不管是基于工作需要,还是兴趣爱好;是自学还是去培训班,学了出来之后,多少会一些JS语法,理解了一些编...

    web前端教室
  • 对JS要有爱;JS才会活过来

    (今天又喝酒去了,所以今晚的文章写的有点飘~~) 从某种程度上来讲,写JS脚本,和写文章是一样的。都是有时间、地点、人物、事件。 时间用Date()获取;地点用...

    web前端教室
  • 怎么做,前端开发才能从0到1...再到100?

    前端开发状态为0,就是什么都没有,一切都是空白。极端点甚至连javascript是啥都不知道。只知道这二年前端开发很火,就跑来学前端。想培训个三个月半年的,出来...

    web前端教室
  • [C#2] 2-匿名方法

    1.匿名方法应用和机制 先看一段代码(C#1.0): 1 //这里加了参数<为了说明delegate关键字后面的参数列表> 2 public delegat...

    blackheart
  • Jquery和Ajax

    1、  ajax基础知识(http://www.0377joyous.com/archives/484.html) 2、  load()函数示例代码 <butt...

    苦咖啡
  • 《统计学习方法》笔记

    1:统计学习方法概论 1.1:统计学习特点,统计学习是关于计算机基于数据构建概率统计模型并运用模型进行数据分析和预测的一门学科。统计学习也称为统计机器学习 西...

    云时之间
  • TCP报文格式

    TCP报头中的源端口号和目的端口号同IP数据报中的源IP与目的IP唯一确定一条TCP连接。

    andrew_a
  • PHP 面向对象 抽象类

    使用 abstract 关键字申明抽象类和抽象方法。抽象类不能被实例化,只能被其他类继承。 abstract class A { // 抽象方法没有函数...

    康怀帅
  • 【机器学习】机器学习的11个开源项目

    机器学习是目前数据分析领域的一个热点内容,在平时的学习和生活中经常会用到各种各样的机器学习算法。实际上,基于Python、Java等的很多机器学习算法基本都被前...

    陆勤_数据人网
  • 内网渗透 | 获取远程主机保存的RDP凭据密码

    注意:cmdkey /list命令务必在Session会话下执行,system下执行无结果。

    HACK学习

扫码关注云+社区

领取腾讯云代金券