分类： html&javascript

发布于

Static and Instance Methods in JavaScript

原文：http://abdulapopoola.com/2013/03/30/static-and-instance-methods-in-javascript/

 

 I thought I quite ‘understood’ inheritance in JavaScript until I got flummoxed while trying to test my understanding. The JS prototypical inheritance model is hugely different from the classical approaches of the languages I started out with; the only way to fix this that I know of is by writing code and after spending hours screaming at my console I finally saw the light Alhamdulilah.

JS is a weakly-typed prototypical language and thus classes aren’t really ‘classes’; instead they are functions which are in turn objects. New objects are created from constructor functions by using the new keyword and this allows you to kind of ‘simulate’ OOP. But mind you; its inheritance model is still different.

 Some sample code that shows this difference between static and instance properties. All object properties are public although can easily make them private by declaring them with var (I added an example); for these private properties you’ll have to add accessors and setters; read this for an explanation of closures and this pattern.

 

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 
//Constructor
var Person = function (name, age){
//private properties
var priv = {};
 
//Public properties
this.name = name;
this.age = age;
 
//Public methods
this.sayHi = function(){
alert('hello');
}
}
 
// A static method; this method only 
// exists on the class and doesn't exist 
// on child objects
Person.sayName = function() {
alert("I am a Person object ;)");
};
 
// An instance method; 
// All Person objects will have this method
Person.prototype.setName = function(nameIn) {
this.name = nameIn;
}
 
// Tests
var per = new Person('John Doe', 22);
 
//Shows alert
Person.sayName();
 
//TypeError: Object [object Object] has no method 'sayName'
per.sayName()
 
//Show alert
per.sayHi();
 
//John Doe
per.name;
 
//22
per.age;
 
per.setName('Jane Doe');
 
//Jane Doe
per.name;
view rawgistfile1.js hosted with ? by GitHub

 

It’s interesting to see that static fields cannot be accessed from child context in JavaScript (which makes sense); Java, however, allows static fields to be accessed from object context; this is kinda weird as the objects don’t really ‘have’ that variable.

Here’s a quote from the Java Tutorials website:

Note: You can also refer to static fields with an object reference like

myBike.numberOfBicycles

but this is discouraged because it does not make it clear that they are class variables.

One tip: don’t just read code and assume you understand it. Sure, you can always convince yourself that you ‘know’ it. However, if you really want to KNOW it then read it, write it and then try extend it (if you have the time and enthusiasm).

So, what other differences do you know between classical and prototypical inheritance?

Related articles
发布于

介紹好用工具：Internet Explorer Collection

 

ps: Windows Virtual PC VHDs for testing websites with different Internet Explorer versions [Last Updated: 07/20/12]

  http://www.microsoft.com/en-us/download/details.aspx?id=11575

 

 我之前推薦過一套 MultipleIE 工具，還又推薦過一套 IETester 工具，這兩套基本上都有其缺點之處，說實在的不盡理想，但我最近發現另一套更猛的 Internet Explorer Collection 工具，對於網頁相容性測試將更加方便快速。

之前的 MultipleIE 與 IETester 最大的缺點就在於不支援 Internet Explorer Developer Toolbar，因為在實務上我們在測試 IE 各版本間的問題時，大多都是 CSS 支援度不一的問題，經常要靠許多 CSS Hack 技巧修正一些顯示問題，有時後為了 1px 的空間可能就要花我們設計師好多時間去調整、測試，如果有Internet Explorer Developer Toolbar 的 DOM Explorer 來協助，將會節省許多時間！

 雖然 Internet Explorer Developer Toolbar 支援 IE 5 以上的版本，但是通常只會安裝到你目前電腦的最新版 IE 上 ( IE8 已內建，無須特別安裝 )，所以就算安裝了 MultipleIE 也是無法使用，不過 Internet Explorer Collection 可就不同啦，他除了幫你安裝各版本的 IE 之外，也一併幫你把 Internet Explorer Developer Toolbar 裝上去了，而且讓你各版本都能用喔！

與其說 Internet Explorer Collection 是個「程式」，倒不如說他是個「安裝程式」還比較精準一些。這套安裝程式比 MultipleIE 還更狠，可安裝的 IE 版本從 1.0 到 8.0 都有 ( 還有人在用 IE 1.0 嗎? 呵… )，目前的最新版 (1.3.0.1) 支援的各 IE 版本詳細編號如下：

  • Internet Explorer 1.0 (4.40.308)
  • Internet Explorer 1.5 (0.1.0.10)
  • Internet Explorer 2.01 (2.01.046)
  • Internet Explorer 3.0 (3.0.1152)
  • Internet Explorer 4.01 (4.72.3110.0)
  • Internet Explorer 5.01 (5.00.3314.2100)
  • Internet Explorer 5.5 (5.51.4807.2300)
  • Internet Explorer 6.0 (6.00.2800.1106)
  • Internet Explorer 6.0 (6.00.2900.2180)   ( IE 6 SP 2 )
  • Internet Explorer 7.0 (7.00.5730.13)
  • Internet Explorer 8.0 (8.00.6001.18702)

而且不管你的系統已經安裝的是 IE6, IE7 或 IE8，都可以直接安裝 Internet Explorer Collection，並不會影響你現有系統所安裝的 IE 版本。使用 Internet Explorer Collection 唯一的差別就是 IE 的選單介面可能都是英文的，不過這並不影響你對各版本 IE 的操作就是了。

接著，我就帶大家一起安裝 Internet Explorer Collection 1.3.0.1，安裝前請記得先將所有正在執行中的 IE 瀏覽器關閉。

Internet Explorer Collection 1.3.0.1 安裝過程  Internet Explorer Collection 1.3.0.1 安裝過程

Internet Explorer Collection 1.3.0.1 安裝過程  Internet Explorer Collection 1.3.0.1 安裝過程

Internet Explorer Collection 1.3.0.1 安裝過程  Internet Explorer Collection 1.3.0.1 安裝過程

Internet Explorer Collection 1.3.0.1 安裝過程  Internet Explorer Collection 1.3.0.1 安裝過程

Internet Explorer Collection 1.3.0.1 安裝過程 安裝完成！

安裝完後的部分版本圖示如下：

IE 5.5

 IE 6

在我測試的過程中，我發現在 IE 7 瀏覽器中，在工具列上都找不到 Internet Explorer Developer Toolbar的啟動按鈕，點選 Customize 也找不到加入的地方，但事實上還是可以開啟，請參考如下圖示。

Internet Explorer Developer Toolbar 在 IE 7 的啟動方式

其他相關資訊各位可參考 Internet Explorer Collection 官網的說明，上面有更多的圖示。

額外鄭重申明

雖然安裝 Internet Explorer Collection 十分方便，但強烈建議各位「不要使用這些 IE 版本瀏覽外部網站」，畢竟舊版的 IE 所帶來的自然包括舊版 IE 的安全性漏洞，如果拿這些舊版的 IE 瀏覽器進行網頁瀏覽，難保你不會遭受惡意網站的攻擊，要是被植入木馬那可就遭了！

所以還是建議各位拿 Internet Explorer Collection 來測試「內部網站」即可，否則後果自負。

发布于

node.js (express socket.io) 初体验

前几天一直在接受 nodejs 的毒害。

花了周末两天时间在  nodejs v0.4.9      express v2.4.0    socket.io v0.7  上面，做了 livechat 的 demo。

总结下来（待更新）：

1. 官方文档太缺，和 .net / php 比起来简直就是一个天上一个地上，很多东西都要靠猜的，或者上google 乱撞。

2. javascript 过于妖娆了,。可能没有像php / .net 练习得那么多吧 。(做web前端的估计好很多)

3. IDE 没有。这个是一个编程语言环境成熟度的标识啊。

4. 实用性方面socket.io 做web socket 还算不错，其他方面和php比起来就是婴儿玩具了。  

 

 如果能够实现web socket方面用 socket.io 其他方面还用原来的php，倒是可以当成php的一个补充。就怕到时候会出来一个新的和php能够更好结合的web socke实现。

 

需要做实时(real time) web开发的，可以考虑一下socket.io  。 其他情况还是用糙快猛的php吧 。

发布于

jQuery JSONP 原理和php实例

 基于安全原因，默认 ajax (XMLHTTPRequest ) 是不能跨域的。

有很多解决方案，我就不赘述了，见下面的链接：

http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/

我想说的是jquery jsonp的操作和 原理( 原理我也是转载别人的)

 原理

客户端： 

<script type="text/javascript"> 

function test(data) { 

alert(data); 

} 

</script> 

<script type="text/javascript" src="http://******.php?callback=test"></script> 



服务端： 

$fun = $_GET["callback"]; 

echo $fun. "(‘你好世界’)"; 

 

 

 

 

jquery jsonp php实例

 服务器上的jsonp.php

 

<?php

$callback = isset($_GET["callback"])?$_GET["callback"]:"callback";

$foo = isset($_GET["foo"])?$_GET["foo"]:"’";

$format = isset($_GET["format"])?$_GET["format"]:"";

 

$array = array("foo"=>$foo,"format"=>$format);

echo $callback . "(". json_encode($array). ")";

?>

 

本地html:

 

<!DOCTYPE html>

<html>

<head>

  <style>img{ height: 100px; float: left; }</style>

  <script src="http://code.jquery.com/jquery-1.5.js"></script>

</head>

<body>

  <div id="images">

 

</div>

<script>

$.getJSON("http://your.server.com/jsonp.php?callback=?",

  {

    foo: "bar",

    format: "json"

  },

  function(data) {

    alert(data.format);

  });</script>

 

</body>

</html>

 

 

  

 

官方文档：http://api.jquery.com/jQuery.getJSON/

jquery 1.5 的G点在于：关键点在于请求的url 包含：?callback=?

发布于

二读 jquery 文档发现一段有意思的例子

 很多时候我们用 ajax 技术来异步更新，做到无刷新的效果。

但是很多时候还要考虑浏览器未开启javascript的情况， 这个时候我们会为没有开启javascript的情形重新编写一种处理。

这就导致可能会出现一个功能的两种实现。 但是从下面的jquery官方例子我们还是会有收获的。

 <!DOCTYPE html>

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <form action="/" id="searchForm">
   <input type="text" name="s" placeholder="Search..." />
   <input type="submit" value="Search" />
  </form>
  <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>

<script>
  // attach a submit handler to the form
  $("#searchForm").submit(function(event) {

    // stop form from submitting normally
    event.preventDefault(); 
        
    // get some values from elements on the page:
    var $form = $( this ),
        term = $form.find( 'input[name="s"]' ).val(),
        url = $form.attr( 'action' );

    // Send the data using post and put the results in a div
    $.post( url, { s: term } ,
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#result" ).html( content );
      }
    );
  });
</script>

</body>
</html>

发布于

用javascript让页面的外部连接都在新窗口打开

<script type="text/javascript">
function Amao(){}
Amao.prototype.SetAnchor = function(){
 var uri = location.href;
 if(uri.search(/^(http)/i) != "-1" ){//  有http://
  var pattern = new RegExp("http:\/\/([^/]+?)\/");
  var result = uri.match(pattern);
  if (result != null) {
   var host = result[0];   // Contains "http://www.example.com"
  }
  
  var parttern2 = new RegExp(host,"i");
  var anchors = document.getElementsByTagName("a");
  for(var i = 0; i < anchors.length; i++){
   var a = anchors[i];
   if(a.href.search(parttern2) == "-1" ){
    a.target = "_black";
   }
  }
 }
}
var amao = new Amao();
amao.SetAnchor();
</script>

放在页面的最后面，或者在body的onload 调用amao.SetAnchor();