首页 > 代码库 > web开发中,前端javascript代码的组织结构
web开发中,前端javascript代码的组织结构
网页包含三个层次:
- 结构(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.jsfw.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开发中,前端javascript代码的组织结构
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。