Js模型和封装
一点拙劣的小分享,欢迎批评和补充
我们经常在Js中为我们的各类组件,构造Json格式的假数据。我们看如下代码:
var jsonResult = [
{ 'name': 'ws', 'age': '' },
{ 'name': 'td', 'age': '' } //我们把jsonResult[x]当作对象,其中的自然为属性
];
window.onload = function () {
alert(jsonResult[].name);
}
那么对象的方法如下:
var jsonResult = [
{ 'name': 'ws', 'age': '','speakFunc':function () { alert('hi,my name is ws'); } },
{ 'name': 'td', 'age': '' ,'speakFunc':function () { alert('hi my name is '+jsonResult[].name); }} //我们把jsonResult[x]当作独立个体对象
];
window.onload = function () {
jsonResult[].speakFunc();
jsonResult[].speakFunc();
}
下面给出可读性,复用性更佳的方法,包括闭包。
var myUpStageClass = function () {
var instance = {
firstFunc: function () { //方法名可以不用引号
alert('第一个方法输出');
},
'secondFunc': function (param) {
alert(param);
}
}
return instance; //返回闭包的对象
}
var appObj = myUpStageClass(); //接受闭包的对象,是不是像实例化
window.onload = function () {
appObj.firstFunc();
appObj.secondFunc('第二个方法输出');
}
建议把我们所需要的,复用性高的JS,作为我们项目最顶层的js封装好,并且在闭包外的全局上接受闭包对象,提供给下层调用。
Js模型和封装的更多相关文章
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
- 【转】第7篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:全自动注册与反射方法分析
作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析
作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第4篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】3篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:官方原生方法分析
作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
随机推荐
- 【转载】学习资料存档:jQuery的deferred对象详解
我在以前的文章里提到promise和deferred,这两个东西其实是对回调函数的一种写法,javascript的难点之一是回调函数,但是我们要写出优秀的javascript代码又不得不灵活运用回调函 ...
- 论checkbox和radio的样式美化问题
如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
- IOS Socket 03-建立连接与登录
1. 搭建python服务器 这里我们用到python服务器Socket Server.如何运行Server?下面介绍 1)通过百度云下载文件 http://pan.baidu.com/s/1i5yb ...
- MVVM架构~knockoutjs系列之一些异常的总结(永久更新)
返回目录 1 关于attr属性的问题 这个问题主要出现的IE7和360浏览器,使用attr时,需要为属性名加上单引号,代码如下: <a data-bind="attr:{'href': ...
- [Linux基础]Linux基础知识入门及常见命令.
前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1:192.168.40.11Linux ip:192.168 ...
- h5原生拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python的datetime
Python的datetime 总会用到日期格式化和字符串转成日期,贴点代码以供参考,其实API真的是很全的,可是又不知道具体的method... datetime.datetime.strftime ...
- 180分钟的python学习之旅
最近在很多地方都可以看到Python的身影,尤其在人工智能等科学领域,其丰富的科学计算等方面类库无比强大.很多身边的哥们也提到Python非常的简洁方便,比如用Django搭建一个见得网站只需要半天时 ...
- CSS默认可继承样式
前面的话 一直想总结出一份可继承样式的列表.常听说,颜色和字体是可继承的,盒模型样式是不可继承的,但其他样式呢?本文内容包括所有可继承的样式 [注意]关于样式的详细信息移步至此 常用可继承样式 col ...