web开发中,前端javascript代码的组织结构
2014-10-02 20:11
691 查看
网页包含三个层次:
结构(HTML)
表现(CSS)
行为(javascript)
web标准中,三者要分离,网页源代码由三部分组成:.html文件、.css文件和.js文件。就是说html文件中不应该含有CSS样式和javascript代码。
这里讨论一下javascript的一种组织结构。
首先定义一个顶级的变量fw,fw是一个hash变量。page中存放的是单个页面的javascript代码,比如index页面和user页面。common中存放的是通用的方法,用于dialog相关的和table相关的。他们目前都是空对象,这边仅仅只是定义一个结构。
接着要实现一个初始化dialog的通用方法 fw.common.dialog 的初始值是{},这里将它的值修改。定义一个匿名方法,并立即执行它,返回值是一个hash对象,hash对象中的key是initDialog,值是一个匿名方法。可以这么调用这个方法,
这么组织javascript代码结构有以下好处:
见名知意,通过前缀可以知道这是一个公共方法。
initDialog和destroyDialog方法在一个hash中,没有顺序关系。
initDialog和destroyDialog方法在闭包之中,定义的变量不会影响到其他的代码。
方便调用,只要加载该文件即可调用。
结构(HTML)
表现(CSS)
行为(javascript)
web标准中,三者要分离,网页源代码由三部分组成:.html文件、.css文件和.js文件。就是说html文件中不应该含有CSS样式和javascript代码。
这里讨论一下javascript的一种组织结构。
//fw.js var fw = { page: { index:{}, user:{} }, common: { dialog: {}, table:{} }, }
首先定义一个顶级的变量fw,fw是一个hash变量。page中存放的是单个页面的javascript代码,比如index页面和user页面。common中存放的是通用的方法,用于dialog相关的和table相关的。他们目前都是空对象,这边仅仅只是定义一个结构。
//dialog.js fw.common.dialog = function () { return { initDialog: function () { //这里是具体的方法细节 }, destroyDialog: function () { //这里是具体的方法细节 } } }();
接着要实现一个初始化dialog的通用方法 fw.common.dialog 的初始值是{},这里将它的值修改。定义一个匿名方法,并立即执行它,返回值是一个hash对象,hash对象中的key是initDialog,值是一个匿名方法。可以这么调用这个方法,
fw.common.dialog.initDialog();
这么组织javascript代码结构有以下好处:
见名知意,通过前缀可以知道这是一个公共方法。
initDialog和destroyDialog方法在一个hash中,没有顺序关系。
initDialog和destroyDialog方法在闭包之中,定义的变量不会影响到其他的代码。
方便调用,只要加载该文件即可调用。
相关文章推荐
- 【web前端开发】浏览器原生API,DOM,Javascript,HTML5,CSS 代码运行实例参考
- Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据
- Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 编写高质量代码--Web前端开发修炼之道
- 读书笔记之html标签的语义的意义——《编写高质量的代码:Web前端开发的修炼之道》
- JavaScript-JS命名空间的构造和实现-[web前端开发]
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 编写高质量代码-web前端开发修炼之道文摘
- web前端-关于javascript开发的重要知识点
- WEB前端开发规范文档以及如何提高代码编写效率
- web前端不可错过的开发工具–Adobe Brackets(开源、简洁强大的HTML、CSS和JavaScript集成开发环境)
- 编写高质量代码--Web前端开发修炼之道 读书笔记
- WEB前端开发高性能优化部分之JavaScript的优化细节
- [Web开发] 在线 Javascript 代码格式美化工具
- Javascript循环绑定事件 web前端开发博客:http://www.css88.com/
- web前端开发书籍推荐(之JavaScript )
- WEB前端开发高性能优化部分之JavaScript的优化细节!
- 五个你必须知道的javascript和web debug技术 2013年11月20日 在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点