JavaScript结构三层——思想快速入门

时间:2023-01-13 01:57:26
 

本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步。

今天讨论的是什么

如果你的工作中需要写JavaScript,而你的JavaScript代码又与业务相关。我想无非就是一下三类功能:

1.请求后台数据

2.渲染后台数据,拼接Html

3.事件操作

当然你如果封装JS底层的控件,不在我们今天的讨论范围。你也许写过单文件上千行的JS,你也许维护过几千行的JS,每次重新看起来,或者增删改功能吃力吗,如果你说不吃力,那这篇文章不适合你,如果有些吃力,我们一起来探讨今天的话题。今天要讨论的是,当你需要写如上三种JS代码时,你如何处理他们之间的关系?

提醒:如果你还不懂JS对象或者简单的封装,请移步我的这两篇分享:

1.JavaScript 闭包   http://www.cnblogs.com/tdws/p/5944254.html

2. JavaScript OOP http://www.cnblogs.com/tdws/p/5947693.html

JavaScript结构三层——思想快速入门

代码整洁之道

仅仅是整洁的代码真的有用吗?

我想说整洁的代码只是一部分。这个整洁所包含的,我认为是:

1.一个方法只做一件事情,一个方法的行数一定要对自己做严格要求,多余的事情,另起一个方法,并配有合适的命名。

举个例子来说,我在ajax请求都数据,回调方法可能需要对返回结果做一定的逻辑处理,拼接处理。在这个时候,我是很反对直接在回调方法中写一长串处理逻辑的,一定要用一个新的function来处理。

2.坚决杜绝全局变量。

有的人可能认为,如果我注意点,全局变量并不会带来什么坏的影响。这样说没毛病,但是全局变量带来的难以阅读和难以维护性是不可估量的。

3.绝不在页面底部或者$(function(){});或者onload中直接以$(xxx).click(function(){});这种形式来注册事件。也绝不在html拼接成功后的方法中以上述方式注册事件。

个人推崇的方式是,一定要将事件注册封装成方法。然后再去调用方法。

其余的整洁规范不做赘述,代码整洁这种东西,要在不断的实践中,用心去思考和体会,并且亲手优化和修改,只有一套理论摆着这里,收获是0。

JavaScript代码分"层"

下面要讨论的这种方式,一定是基于上述代码整洁之道的基础之上。开篇的三个常用JS代码情形,你想到办法如何将他们分离解耦,如何处理好他们之间的关系了吗?

比方说,你在做一个互联网新闻网站。

对于这样的一个新闻列表,你可能需要Ajax对数据做增删改查操作,你也需要从后台读取数据并且渲染到页面,你也需要为页面上的一系列按钮或者什么控件注册一系列的操作事件。

这简单啊,这有什么难的!但是当你页面中新闻数据仅仅是一个小模块的时候,其他模块可能还有用户信息模块,评论模块,点赞模块,各种分类模块,广告招商模块,各种热门模块。如果想象不到复杂性,可以去网易新闻官网看看。

当然在这样的情况下,你可能说,分离js呀,js模块化,js合并压缩。是的,这些都是不错的解决方案。但是,你如何保证一个单独的JS或者模块化后的JS依然保持慢条斯理,结构清晰?或者说如果这些代码真的要写在一个JS里,如何写,如何维护。

有的老司机可能说,你不会是随便来谈谈MVVM吧?不是。在数据请求,数据渲染,事件注册这三种情形,在复杂的业务逻辑之下,我们要做的就是解耦分离。下面是我个人的解决方案,是我在不断的实践和尝试过程当中,感到受用,好用,一直在用的一种方案:

将上述三种代码分层,一个JS对象就是一“层”。每个业务点基本都分为这三层。

 
最后的阐述

上面就算是伪代码吧。你可以看到我将js分为三层,操作,数据,渲染。你也可以看到,我们可以告别全局变量,和数据相关的全局变量,你将其存在相应的Data层下。业务相关的全局变量,你将它存在操作层下。渲染拼接工作就交给render来做,我通常渲染工作为了达到再度分离js html,我使用jquery.tmpl.js。你所有新闻相关的数据操作都应该放在newData层下,你所有操作事件应该写在newsOption层下。当你来了第二个业务点时,比如评论模块,那你就需要一套新的分层:commentOption,commentData,commentRender.

可能看完你想打我,我看了这么半天你就分享这点东西?但是相信我,这样的分层,对你自己而言赏心悦目,维护方便,开发快捷,调试容易。对他人而言,别人不会在背后骂你的代码咯。

JavaScript结构三层——思想快速入门的更多相关文章

  1. JavaScript结构三层——思想快速介绍

    本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...

  2. JavaScript学习02(js快速入门)

    快速入门 基本语法 JavaScript的语法和Java的语法类似,每个语句以;结束,语句块用{...}.但是JavaScrip并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代 ...

  3. vue 快速入门 系列 —— Vue(自身) 项目结构

    其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...

  4. html5快速入门(四)—— JavaScript

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  5. JavaScript快速入门(四)——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  6. JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署

    接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...

  7. IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端

    IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端 原文:http://docs.identityserver.io/en/release/quicks ...

  8. 【JavaScript】快速入门

    摘抄地址快速入门 No1: JavaScript严格区分大小写 No2: JavaScript不区分整数和浮点数,统一用Number表示 NaN表示Not a Number,当无法计算结果时用NaN表 ...

  9. SpringBoot介绍&comma;快速入门小例子&comma;目录结构&comma;不同的启动方式&comma;SpringBoot常用注解

    SpringBoot介绍 引言 为了使用ssm框架去开发,准备ssm框架的模板配置 为了Spring整合第三方框架,单独的去编写xml文件 导致ssm项目后期xml文件特别多,维护xml文件的成本也是 ...

随机推荐

  1. 马旭飞:共探H3 BPM社区发展战略

    近日,以"让天下没有难用的流程"为主题,H3 BPM10.0在北京金隅喜来登酒店正式发布. H3 BPM全新的业务流程管理系统是颠覆BPM行业的巨作,拥有众多独创技术,近200个业 ...

  2. 【转】PackageInfo、ResolveInfo 笔记

    1.PackageInfo.ResolveInfo PackageItemInfo:包含了一些信息的基类, 它的直接子类有: ApplicationInfo. ComponentInfo.Instru ...

  3. C编程风格&period;

    C语言编程风格. 关于编程风格,不同书上有不同规范,不同公司都有自己的一套定义.根据自己的编程习惯做个简要说明. 1.变量定义 在定义变量时,前缀使用变量的类型,之后使用表现变量用途的英文单词或单词缩 ...

  4. Linux下一个C(编程入门&period;h档,&period;c档,而路多文件的调用)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0 ...

  5. JavaScript数据结构——队列的实现

    前面楼主简单介绍了JavaScript数据结构栈的实现,http://www.cnblogs.com/qq503665965/p/6537894.html,本次将介绍队列的实现. 队列是一种特殊的线性 ...

  6. onchange、onclick、onblur等事件区别

    onblur:控件在失去焦点的时候触发 OnChange:当控件的内容发生改变时触发该事件 OnClick:点击该控件时触发 OnKeyDown:在控件有焦点的情况下,按下键时发生 OnKeyUp:在 ...

  7. 一个spring3&period;2的项目 从jdk1&period;7放到1&period;8的环境中编译,打开网页异常:spring jar包版本升级经历

    背景:一个历史项目用的是 spring3.2 的版本,在jdk1.7中运行没有问题,但是如果在jdk1.8中运行就会报错 ---浏览器中显示: HTTP Status 500 - Servlet.in ...

  8. Fantacy团队周四站立会议

    词频分析模型 1.会议时间:2016年3月31日12:07~12:30. 持续时长:23分钟 会议参加成员:组长:杨若鹏 http://www.cnblogs.com/robinYangRP/ 组员: ...

  9. Oracle 12c的自增列Identity Columns

    在Oracle的12c版本中,Oracle实现了类似MySQL中的auto_increment的自增列,下面我们看一起Oracle是怎么实现的. Oracle Database 12c Enterpr ...

  10. web-day16

    第16章WEB16-Listener&Filter篇 今日任务 使用过滤器完成自动登录的案例 使用过滤器统一网站的字符集编码 教学导航 教学目标 了解常见的监听器 理解过滤器的生命周期 能够使 ...