安科网

分享自己的Javascript交互模板

红流

红流

2016-06-26

关注 关注

在两年的工作中，经常会开发新的Web页面交互，或维护已存在的Web页面交互程序：javascript。由于 Javascript 是弱类型语言，且语言本身的约束性不是很强。Coding时如果没有统一的约束或规范，将会造成 .js 文件排版混乱不堪很难维护。

现如今jQuery已经成为Web页面交互中不可缺少的组成部分，下面分享一套我在工作中累计的（个人认为）还不错的 .js 文件模板。

  • 解决通过$.load（或 $.html 等其他工具）加载的页面中包含 .js 文件时, 无法在部分浏览器定位并调试的问题。
// 调试开关, 页面初始化有效
FunctionFn.debug = true;

// 打印 .js 文件名
FunctionFn.debug && window.console && console.log("fileName.js");
  • 构建 Javascript 程序统一入口（jQuery入口）
// 页面加载完成后, 
// 在 onload 事件中注册交互事件和初始化页面数据
$(function() {

    // 将唯一实例绑定到函数（类）自身为了方便实时获取运算数据
    TestFn.instance = new TestFn();
    TestFn.instance.initEvents().initData();
});
  • 约定交互程序统一对外函数（initEvents 和 initData）
// 交互主体函数
function TestFn() {

    // 由于 this 会跟随上下文环境不同而变化
    // 在此记录交互实例对象, 以便于在需要时不必非常麻烦的通过 arguments.callee.caller 等方式获取上下文环境
    var $thisObj = this;

    // 交互主体所能控制的最顶层容器控件
    // 在后续查找控件时, 应从 baseCtnr 中开始查找: baseCtnr.find($ctrlSelector);
    // 而不是索引全局: $($ctrlSelector);
    // Base Container
    var baseCtnr = $(".current-base-container");

    // 1. 没有通过 new 关键字获取对象时, 返回执行环境对象
    // 2. 使用 new 关键字获取对象时, 返回 TestFn 的实例对象
    // 无论通过何种方式获取对象, 都可以访问绑定到 $thisObj 的函数和数据
    // 所以在此返回 this 是很有必要的
    return this;
}
  • 约定常量值集合（FINAL_VALUE）
// 用于保存运算过程中不能被变更的值, 实现时应使用 getter 函数方式. 如:
// var finalPageSize = FINAL_VALUE.VALUES.getFinalPageSize();

// 而不是直接定义数据属性: FINAL_VALUE.VALUES.FINAL_PAGE_SIZE = 10; 
// 这种方式很容易被无意识的修改

// 常量值字典对象
var FINAL_VALUE = {
    KEYS: {
        CONFIG_KEYS: {
            _summary: "本地配置字典"
        },
        SELECTORS: {
            _summary: "jQuery选择器字典"
        },
        ATTRIBUTES: {
            _summary: "控件属性字典"
        },
        _summary: "关键字字典 "
    },
    VALUES: {
        _summary: "常量值字典"
    },
    _summary: "常量值字典. 使用getter实现, 如: getFinalPageSize"
};
  • 约定数据对象（data）
// 数据集合
// 访问数据应使用 dataManager 对象
var data = {
    service: {
        _summary: "业务数据对象, 保存需要提交的表单数据"
    },
    cached: {
        _summary: "用于UI计算的缓存数据对象"
    },
    temporaries: {
        _summary: "临时数据集合"
    },
    _summary: "数据集合"
};
  • 约定数据维护对象（dataManager）
//  数据维护对象
var dataManager = {
    _summary: "数据维护对象, 提供 data 集合中数据计算能力"
};
  • 约定UI绘制程序集（UIPrinters）
// UI绘制对象
// HTML 控件/控件属性查找/编辑, 页面重绘等应统一使用该对象
var UIPrinters = {
    _summary: "UI界面绘制集合. 提供HTML控件查找, 编辑等能力; 如 getSearchConditionFormContainer, getCurrentPageNumber 等等"
};
  • 约定配置（业务）程序集（config）
// 配置(业务)集合
// 此对象配置业务模块化运算能力, 以及事件管理基础功能
var config = {
    serviceModules: {
        // FIXME example start
        download: {
            beforeValidPermission: function(callback) {
                var hasPermission = true;
                // Remote validation: requestUtil.jsonAjax();
                !!hasPermission && callback();
            },
            getChoseData: function() {
                // 调用前确保 dataManager.getCurrPageChoseData 已定义
                return dataManager.getCurrPageChoseData();
            },
            sendRequest: function(choseDataKeys) {
                // 调用前确保 UIPrinters.loadingWin 已定义
                UIPrinters.loadingWin.loading();
                // requestUtil.download(choseDataKeys);
                UIPrinters.loadingWin.completed();
            },
            invoke: function() {
                // downloadCtt -> Download Context
                var downloadCtt = config.events.download;
                downloadCtt.beforeValidPermission(function() {
                    var data = downloadCtt.getChoseData();
                    downloadCtt.sendRequest(data);
                });
            }, // FIXME example end
            _summary: "下载模块, 示例模块"
        },
        _summary: "业务集合. Key-模块名; Value:{Key:业务名, Value:处理函数}. 在每个模块中应定义_summary用以说明该模块的用途"
    },
    eventsManager: {
        events: {
            _summary: "事件列表, 为initRegister提供支撑"
        },
        initRegister: {
            delegate: function() {
                // TODO Register delegate events
                // 注册委托事件
                // 选择器使用 KEYS.SELECTORS, 如:
                // $(KEYS.SELECTORS.getSearchFormContainerSelector)
            },
            singleUse: function() {
                // TODO Register single-use events
                // 注册一次性事件
                // 选择器使用 KEYS.SELECTORS, 如:
                // $(KEYS.SELECTORS.getSearchFormContainerSelector)
            }
        },
        bind: {
            singleUse: function(item, eventType, eventFn) {
            },
            delegate: function(item, eventType, eventFn) {
            },
            _summary: "事件绑定"
        },
        unbind: {
            singleUse: function(item) {
            },
            delegate: function(item) {
            },
            _summary: "事件卸载, 如果删除元素时使用$el.remove(), 会自动卸载事件. 委托事件(delegate)需要根据实际情况考虑是否需要卸载"
        },
        _summary: "事件管理器, 用于支撑控件的事件绑定和卸载"
    },
    _summary: "本地配置实现, 提供业务逻辑支撑而不是实现"
};
  • 约定控制台（和/或发送到Server）的日志规范
// 独立的日志函数
// 善于利用浏览器提供的控制台(window.console)工具, 在很大程度上可以帮助 coder 们快速定位并解决现有问题
// 当前日志程序打印格式: [local-file:row-number] [caller|anonymous] [date] - message
// 打印格式可根据项目需求自行调整, 强烈建议保留 [local-file:row-number], 此信息能快速定位 .js 文件中的位置, 对于 Fix issue 非常有用. 此功能是我特意在 Google 中查找并加入的功能
function log(msg) {
    if ($thisObj.debug) {
        var formattedNow = new Date().format("yyyy-MM-dd hh:mm:ss");
        var caller = arguments.callee.caller.name;
        caller = caller || "Anonymous";
        var local = "__LOCATION__";
        var logPrefix = "[" + local + "] [" + caller + "] [" + formattedNow + "] - ";
        if (window.console) {
            try {
                throw new Error();
            } catch (e) {
                var callerInfo = e.stack.match(/\n.*/g)[1];
                callerInfo = callerInfo.match(/http:+.*[\d]/)[0];
                // callerInfo = callerInfo.replace(stringUtil.getBaseUrl(),
                // FINAL_VALUE.EMPTY_STRING);
                logPrefix = logPrefix.replace(local, callerInfo);
            }
            console.log(logPrefix + JSON.stringify(msg));
            (msg instanceof Object) && console.log(msg);
        }
    }
}

　　满足上述约定后，Javascript 程序模板预览如下。

TestFn.debug = true;
TestFn.debug && window.console && console.log("test.js");
$(function() {
    TestFn.instance = new TestFn();
    TestFn.instance.initEvents().initData();
});

/**
 * @description test.jsp 页面交互
 * @author 
 * @version v1.0
 * @date 
 */
function TestFn() {
    var $thisObj = this;
    var baseCtnr = $(".test-body-container:eq(0)");

    /** 常量值集合 */
    var FINAL_VALUE = {
        KEYS: {
            CONFIG_KEYS: {
                _summary: "本地配置字典"
            },
            SELECTORS: {
                _summary: "jQuery选择器字典"
            },
            ATTRIBUTES: {
                _summary: "控件属性字典"
            },
            _summary: "关键字字典 "
        },
        VALUES: {
            _summary: "常量值字典"
        },
        _summary: "常量值字典. 使用getter实现, 如: getFinalPageSize"
    };

    /** 数据集合, 访问数据应使用 dataManager 对象 */
    var data = {
        service: {
            _summary: "业务数据对象, 保存需要提交的表单数据"
        },
        cached: {
            _summary: "用于UI计算的缓存数据对象"
        },
        temporaries: {
            _summary: "临时数据集合"
        },
        _summary: "数据集合"
    };

    /** 数据维护对象 */
    var dataManager = {
        _summary: "数据维护对象, 提供 data 集合中数据计算能力"
    };

    /** UI绘制对象 */
    var UIPrinters = {
        _summary: "UI界面绘制集合. 提供HTML控件查找, 编辑等能力; 如 getSearchConditionFormContainer, getCurrentPageNumber 等等"
    };

    /** 配置(业务)集合 */
    var config = {
        serviceModules: {
            // FIXME example start
            download: {
                beforeValidPermission: function(callback) {
                    var hasPermission = true;
                    // Remote validation: requestUtil.jsonAjax();
                    !!hasPermission && callback();
                },
                getChoseData: function() {
                    // 调用前确保 dataManager.getCurrPageChoseData 已定义
                    return dataManager.getCurrPageChoseData();
                },
                sendRequest: function(choseDataKeys) {
                    // 调用前确保 UIPrinters.loadingWin 已定义
                    UIPrinters.loadingWin.loading();
                    // requestUtil.download(choseDataKeys);
                    UIPrinters.loadingWin.completed();
                },
                invoke: function() {
                    // downloadCtt -> Download Context
                    var downloadCtt = config.events.download;
                    downloadCtt.beforeValidPermission(function() {
                        var data = downloadCtt.getChoseData();
                        downloadCtt.sendRequest(data);
                    });
                }, // FIXME example end
                _summary: "下载模块, 示例模块"
            },
            _summary: "业务集合. Key-模块名; Value:{Key:业务名, Value:处理函数}. 在每个模块中应定义_summary用以说明该模块的用途"
        },
        eventsManager: {
            events: {
                _summary: "事件列表, 为initRegister提供支撑"
            },
            initRegister: {
                delegate: function() {
                    // TODO Register delegate events
                    // 注册委托事件
                    // 选择器使用 KEYS.SELECTORS, 如:
                    // $(KEYS.SELECTORS.getSearchFormContainerSelector)
                },
                singleUse: function() {
                    // TODO Register single-use events
                    // 注册一次性事件
                    // 选择器使用 KEYS.SELECTORS, 如:
                    // $(KEYS.SELECTORS.getSearchFormContainerSelector)
                }
            },
            bind: {
                singleUse: function(item, eventType, eventFn) {
                },
                delegate: function(item, eventType, eventFn) {
                },
                _summary: "事件绑定"
            },
            unbind: {
                singleUse: function(item) {
                },
                delegate: function(item) {
                },
                _summary: "事件卸载, 如果删除元素时使用$el.remove(), 会自动卸载事件. 委托事件(delegate)需要根据实际情况考虑是否需要卸载"
            },
            _summary: "事件管理器, 用于支撑控件的事件绑定和卸载"
        },
        _summary: "本地配置实现, 提供业务逻辑支撑而不是实现"
    };

    /** 初始化事件 */
    this.initEvents = function() {
        try {
            config.eventsManager.initRegister.singleUse();
            config.eventsManager.initRegister.delegate();
        } catch (e) {
            log(e.message);
        }
        return $thisObj;
    };

    /** 初始化数据 */
    this.initData = function() {
        try {
            // 这里只定义函数的调用顺序, 而不应该直接在此编写实现代码
        } catch (e) {
            log(e.message);
        }
        return $thisObj;
    };

    // 日志记录
    function log(msg) {
        if ($thisObj.debug) {
            var formattedNow = new Date().format("yyyy-MM-dd hh:mm:ss");
            var caller = arguments.callee.caller.name;
            caller = caller || "Anonymous";
            var local = "__LOCATION__";
            var logPrefix = "[" + local + "] [" + caller + "] [" + formattedNow + "] - ";
            if (window.console) {
                try {
                    throw new Error();
                } catch (e) {
                    var callerInfo = e.stack.match(/\n.*/g)[1];
                    callerInfo = callerInfo.match(/http:+.*[\d]/)[0];
                    // callerInfo = callerInfo.replace(stringUtil.getBaseUrl(),
                    // FINAL_VALUE.EMPTY_STRING);
                    logPrefix = logPrefix.replace(local, callerInfo);
                }
                console.log(logPrefix + JSON.stringify(msg));
                (msg instanceof Object) && console.log(msg);
            }
        }
    }

    return this;
}

　　为什么写此文章:

  1. 记录并分享工作总结也是一件乐事。如果能帮助别人岂不快哉^^.
  2. 养成写博文的习惯有助于总结工作中的有点, 找到自己的不足. 通常喜欢写博文的童鞋也会经常看别人的博文。记得在哪本书上(忘记是Code2还是Javascript高级编程分享自己的Javascript交互模板)看到一句话: 读书就是把别人的经历变成自己的经验。

 　　eclipse模板下载：

Google javascript 格式化模板：google-js-formatter.xml

上面提到的 Javascript 代码模板：yong-defined-js-templates.xml

 　　

如何使用

  1. 导入模板到eclipse中(如何导入? 童鞋, 这么简单的问题不可能不会吧分享自己的Javascript交互模板)
  2. 在编辑窗口中数据: $pagefn, $pagefn, $this, $thisobj, 激活上下文提示(alt + /)

javascript

红流

红流

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

原生JavaScript实现五子棋游戏

tips = "白棋胜利";

PeterLuoz 15评论 2020-11-09

如何将Node.js中的回调转换为Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

nmgxzm00 12评论 2020-11-10

NodeJS开发人员常见五个错误理解

Nodejs 诞生于 2009 年，由于它使用了 JavaScript ，在这些年里获得了非常广泛的流行。它是一个用于编写服务器端应用程序的 JavaScript 运行时，但是 "它就是JavaScript" 这句话并不是 100% 正

ifconfig 2020-10-14

JavaScript枚举选择jquery插件代码实例

聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对 那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 },

hhanbj 10评论 2020-11-17

详解JavaScript原型与原型链

正如一些面向对象语言中所实现的那样，在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复、实现类型检查与实现更加清晰地代码结构。在JavaScript中，继承是通过原型链实现的。了解JavaScript的继承与原型链之

zfszhangyuan 2020-11-16

详解JavaScript执行模型

JavaScript是一个单线程异步非阻塞并发语言，这些语言效果通过一个调用栈、一个事件循环、一个回调队列有些时候也叫任务队列与跟运行环境相关的API组成。调用栈是一个LIFO后进先出数据结构的函数运行栈，它内部的数据结构为函数帧。调用栈有一个意外情况，当

古叶峰 2020-11-16

4个下一个JavaScript项目的有趣API

术语API是首字母缩写词，代表“应用程序编程接口”。同样，一个API也列出了一堆开发者可以使用的操作，以及对这些操作的描述。API使开发人员可以利用平台的实现来执行一些有用的任务，从而节省时间。这也有助于减少开发人员需要为其程序编写的代码行数，因为API使

一个智障 2020-11-15

JavaScript是如何成为一门严肃的编程语言的

从最开始作为一种使网站变得漂亮的方式，JavaScript 已转变为一种严肃的编程语言。JavaScript 的卑微起步始于 1995 年，是由当时在 Netscape 通信公司工作的 Brendan Eich在短短 10 天内创建的。在其早期，JavaS

jipengx 12评论 2020-11-12

7个 jQuery上手项目，Github超千人star

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

81427005 5评论 2020-11-11

把 Node.js 中的回调转换为 Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

xixixi 12评论 2020-11-11

2021适合移动和桌面应用的JavaScript框架是什么

当听到JavaScript这个词的时候，“web开发”会一下子出现在我们的脑海中，因为JavaScript在很长一段时间里一直是web应用开发最广泛使用的语言，Angular、React和Vue等框架目前也很有名。尽管JavaScript主导着web开发领

游走的豚鼠君 12评论 2020-11-10

一篇文章带你了解JavaScript属性

属性是一个JavaScript对象关联的值。一个JavaScript对象是一个无序的性质集合，属性通常可以更改、添加和删除，但有些只读。//复制上面代码,替换不同语句，实现功能。delete 关键字不删除继承的属性，但如果删除原型属性，则会影响从原型继承的

苗疆三刀的随手记 2020-11-10

16个你可能不知道的JavaScript调试技巧

对于调试JavaScript，当然是越快越好，我们在这里列举了一些如何更加快速高效调试JS的重要窍门。熟悉了解工具对于完成任务来说有着重要的作用。我们在这里列举了16个你可能不知道的调试技巧，但它们可能是你想要在下次调试JavaScript代码之前记住的。

Web卓不凡 2020-11-03

重学JavaScript第1集｜变量提升

变量提升就好比JavaScript引擎用一个很小的代码起重机将所有var声明和function函数声明都举起到所属作用域的最高处。这句话的意思是：如果在函数体外定义函数或使用var声明变量。在上述代码中，第一行迪马以及show函数中的第一行代码分别是在变量

小飞侠V 10评论 2020-11-02

详解JavaScript引擎的相关概念和工作原理

此类标准定义了JavaScript引擎的工作机制和所有功能。因此，JavaScript引擎是一个程序，它可以帮助您将JavaScript代码转换为较低级别的机器代码。总的说来，诸如JavaScript和FORTRAN等高级语言都是从机器语言中抽象出来的。与

帕尼尼 2020-10-30

使用Chrome开发者工具研究JavaScript函数的原生实现原理

As the size of my blogChrome Development Tool tips used in my daily workturns to be larger I create a separate post to record do

爱读书的旅行者 11评论 2020-10-26

你应该知道的ES2020中Javascript10个新功能

好消息 - ES2020 新功能已经落地！这就意味着，现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变。它允许开发者在 JS 中使用更大的整数进行数据处理。之前，Javascript 中最大的整数是

帕尼尼 10评论 2020-10-23

2020年想成为前端开发工程师，这个学习路线收藏起来

近两年来，前端开发工程师越来越火了，薪资待遇也快接近后端开发工程师了。今天来给大家讲讲，在2020年，我们学习前端开发，应该学什么？正所谓万丈高楼平地起，我们不管是学任何一个技术，都是要从零基础开始的，学习前端开发也是同样的。CSS就是层叠样式表。使用CS

杏仁技术站 2020-10-23

一篇文章深入JavaScript运作原理？

您是否知道简单的JavaScript语句需要大量工作才能完成?浏览器仅理解0和1s语言，即二进制/位格式的语句。我们无法轻松地将整个JavaScript转换为位。现在，浏览器可以理解该机器代码并相应地运行。这是一些JS引擎示例。这是JavaScript引擎

淼寒儿 2020-10-22

JavaScript 中如何判断变量是否为数字

文本已经过 David Atanda 授权翻译。JavaScript 是一种动态类型语言，这意味着解释器在运行时确定变量的类型。当我们期望一个变量是数字时，对字符串或数组进行操作可能会在代码中导致奇怪的结果。在本文中，我们将会介绍一些判断变量是否为数字的

佐杰 2020-10-22
红流

红流

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号