踩到了坑,才能学到东西。

记录我在慢慢的转向模块化遇到的问题以及解决的思路。

1.采用立即执行函数,闭包的方式创建模块

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Module</title>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript">
var store = storeModule.getStore({x:1});
</script>
</head>
<body> </body>
</html>

js:


var storeModule = (function(){
var Store = function(opinion){
this.opinion = opinion;
} Store.prototype = {
constructor:Store,
init:function(opinion){
console.log('a:',opinion);
this.opinion = opinion;
console.log('b:',this.opinion);
}
} return {
getStore:function(opinion){
var storeInstance = Object.create( Store.prototype );
Store.prototype.init.apply(storeInstance,arguments); // var storeInstance2 = new Store(opinion);
// storeInstance2.init(opinion);
console.log('store end');
return storeInstance;
}
} })();

坑:

采用 Object.create( Store.prototype ) 这种方式创建对象,无法将参数opinion传递给Store这个function对象,百思不得其解,后来,参阅了一下Jquery的插件的源码,发现需要在 init:function(opinion)中增加一行this.opinion = opinion,否则传递不过去。

Javascript 面向对象实践的更多相关文章

  1. 深入解读JavaScript面向对象编程实践

    面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化.多态.和封装几种技术.对JavaScript而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力 ...

  2. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  3. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  4. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  5. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  6. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  7. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  8. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  9. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

随机推荐

  1. HDU 4511 小明系列故事——女友的考验 (AC自动机+DP)

    小明系列故事——女友的考验 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  2. 百度外卖接口调试 C#版

    主类 class Program    {        static void Main(string[] args)        {            string cmdStr = &qu ...

  3. ACE_Message_Queue和spawn实现(生产者/消费者)(V2.00)

    參考这里用到了线程管理.參考:http://blog.csdn.net/calmreason/article/details/36399697 以下的两个线程共享一个消息队列,一个用来放整数到队列,一 ...

  4. linux服务器使用iftop查看带宽流量IP

    20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送) 国内私募机构九鼎控股打造,九鼎投资是在全国股 ...

  5. C#编程(三十七)----------结构比较

    结构比较 数组和元组都实现接口IStructuralEquatable和IStructuralComparable.这两个接口不仅可以比较引用,还可以比较内容.这些接口都是显示实现的,所以在使用时需要 ...

  6. JS 日期实用方法

    var DateUtil = function(){ /** * 判断闰年 * @param date Date日期对象 * @return boolean true 或false */ this.i ...

  7. SharePoint Online 创建和使用栏

    前言 本文介绍如何在Office 365中创建和使用栏. 正文 通过登录地址登录到Office 365的SharePoint Online站点中,我们可以在右上角的设置菜单中,进入网站内容: 找到我们 ...

  8. http抓包以及网速限定

    由于我是MAC, 举荐一个Charles工具 限速选择在:可以打开Proxy –> Throttle Setting 设置. 附多篇介绍:http://www.36ria.com/6278 ht ...

  9. [Android Security] 如何把java代码转换成smali代码

    copy :https://www.cnblogs.com/gordon0918/p/5466514.html 1.概述 Smali是Android系统中Dalvik虚拟机指令语言,在apk逆向过程中 ...

  10. C#零基础入门08:代码规范

    一:前言 没有规矩,不成方圆.在代码的世界中,尤其这样.作为程序员,我们不想让我们的代码写出去之后被人耻笑:看,连个换行都换的这么不专业.作为开发主管,我们则不想我们的组员写出来的代码各类风格都有,五 ...