javascript 面向对象程序设计

面向对象程序设计

假如没有对象,那么你就自己new 一个对象出来呗

1.工厂模式

function createPerson (name, age, job) {
  var o = new Object()
  o.name = name
  o.age = age
  o.job = job
  o.sayName = function () {
    console.log(this.name)
  } 
  o._this = this
  return o
}

var p = createPerson('chris', 18, 'softwate engineer') 
p.sayName()
console.log(p._this === this) // 这里的Person 的 this 指向windows全局

2.构造函数模式

ECMAScript可以使用构造函数创建特定的类型对象

使用new操作符实例化新对象

1)创建一个新对象

2)将构造函数的作用域复制给新对象(this指向这个对象)

3)执行构造函数中的代码(为这个新对象添加属性)

4)返回新对象

function Person (name, age, job) {
  this.name = name
  this.age = age
  this.jpb = job
  this._this = this
  this.sayName = function () {
    console.log(this.name)
  }
}
// 作为构造函数调用
var p1 = new Person('chris', 18, 'software engineer')// 这里的this指向Person构造函数
p1.sayName()
console.log(p1._this === this)
/*****************************/
// 作为普通函数调用
Person('p2name', 18, 'software engineer') // Person 挂载在全局上
window.sayName()

/*****************************/
// 在另外一个作用域中调用
var o = new Object();
Person.call(o, 'kisten', 25, 'Nurce')
o.sayName()

缺点

每个方法都要在每个实例中重新创造一遍。

即:p1.sayName() 与 p2.sayName() 不相同

3.原型模式

每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象。这个对象的用途就是包含所有实例共享的属性和方法。

function Person(){}
Person.prototype.name = 'chris'
Person.prototype.age = 18
Person.prototype.sayName = function () {
  console.log(this.name)
}
var p1 = new Person()
p1.sayName()
var p2 = new Person()
p2.sayName()
console.log(p1.sayName() === p2.sayName())

使用字面量 构建原型

function Person(){}
Person.prototype = {
  constructor: Person, // 使用过prototype等于重写了整个原型对象,所以需要在构造方法中重新指向Person()
  name: 'chris',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}
var p1 = new Person()
p1.sayName()
var p2 = new Person()
p2.sayName()
console.log(p1.sayName() === p2.sayName())

缺点

原型中很多属性都是共享等,对于函数非常方便,对于属性就不是很方便。而且修改其中一个属性会影响另外实例的属性(因为属性和方法共享)

function Person(){}
Person.prototype = {
  constructor: Person, // 使用过prototype等于重写了整个原型对象,所以需要在构造方法中重新指向Person()
  name: 'chris',
  age: 18,
  arr: [1,2],
  sayName: function () {
    console.log(this.name)
  }
}

var p1 = new Person()
var p2 = new Person()
console.log(p1.arr, p2.arr) // [1,2], [1,2]
p1.arr.push(12)
console.log(p1.arr, p2.arr) // [1, 2, 12] [1, 2, 12]

4.组合使用构造函数模式和原型模式

function Person (name, age){
  this.name = name
  this.age = age
}

Person.prototype = {
  constructor: Person,
  sayName () {
    console.log(this.name)
  }
}

var p1 = new Person('p1', 18)
var p2 = new Person('p2', 18)
console.log(p1.name, p2.name)

Hybird App 开发中返回逻辑的控制

Hybird App 开发中返回逻辑的控制

开发中碰到一个问题。

假如有三个页面

第一个页面为 /list 列表页面,

第二个页面为/add 资料添加页面(form表单),

第三个页面是/detail 添加成功之后返回的详情页面。

三个页面的操作逻辑是。list -> add -> detail

在list页面上点击一个按钮,进入添加add的表单页面,add页面添加成功之后会跳转到detail页面。那么如果在app上点击goback到时候,就会跳转到add的form表单。这对于用于体验来说简直是灾难。

我们需要的逻辑是 点击goback的时候直接跳转到list页面,而不是add页面。

我这里采用了参考方案的解决方案一

解决方案一

add页面或detail页面添加成功标记

你可以在add 页面或者 detail页面添加添加成功的标记

window.sessionStorage.setItem("addStatus","true")

这里使用sessionStorage,通过设置一个状态标记添加成功。

然后在list页面,需要刷新addStatus的状态

sessionStorage.clear()

参考

mac 利器

mac 利器

攒了很久的钱,环境彻底迁移到mac os 下,总结下自己使用的一些工具

从win到mac的一些工具迁移可以看老的文章 win下的mac利器替代品

这一篇主要集中在mac下的工具体会和使用心得

关于开发

开发环境

开发环境我还是坚持使用Vagrant+Homestead,这样能够有效的做到环境隔离,同时vagrant能够快速配置开发环境,利于整个团队的开发环境保持一致。


数据库操作

Terminal工具

iTerm2 搭配 zsh 使用,非常的方便

分屏软件

使用它配合快捷键能够快速的分屏,非常的方便

思维导图

之前一直用xmind的,后来ios 上限免的时候下载了mindnode之后,就彻底不回去了。由俭入奢易,由奢入俭难,谁用谁知道。

我一般用思维导图来确定项目需求,并撰写流程

编辑器

Jetbrains 全家桶,用起来非常爽。

sublime打开多个文件的时候,速度很快

vscode 的插件非常好用,自从用了Settings Sync这个插件之后,公司和家里的开发环境直接同步。

浏览器 Chrome

chrome 插件推荐

  • postman + Postman Interceptor(主要用来模拟登陆)
  • Proxy SwitchyOmega 搭配小飞机
  • Tampermonkey
  • Todoist Chrome
  • Adblock Plus
  • ~~crxMouse Chrome Gestures(mac 下不怎么好用,有鼠标双击的bug)~~
  • feedly 看国内视频的时候,去广告的

其他杂项

软件名称 用途
Dropbox 同步盘不解释
foxmail 从win无缝切换,邮箱工具
Telegram 聊天软件
Wiz 为知笔记,跨三个平台使用
网易云音乐 不解释
Listen1 跨越版权
LICEcap gif录制工具
clipmenu 历史剪贴板工具