天天看點

web前端開發分享-css,js提高篇

一. css基礎知識掌握之後(個人的标準是:弄清塊元素與内聯元素的差別,弄清float的應用場景,弄清position[pə'zɪʃən] 下五個屬性static['stætɪk],relative['rɛlətɪvli] ,absolute['æbsəlut] ,fixed[fɪkst],inherit[ɪn'hɛrɪt] 的差別與聯系以及他們的應用場景,英文單詞确定要能準确發音,友善與面試官探讨時準備的傳達你要表達的意思),剩下需要更多的練習以應對不同的設計的布局要求,然後遇到問題解決問題,成長就是需要一個這樣跌宕起伏的過程。由于網際網路資源很豐富,反而讓初學者迷失了方向,下面推薦幾款比較經典并且有特點的專題頁面,可以進行分析,學習,模仿:

1. 新聞類型頁面: 

2. 圖檔類型頁面:

這個插件是用jquery寫的,有興趣的同學學習一下其源碼

3. 股票類型頁面

4. 商城類:

web前端開發分享-css,js提高篇
web前端開發分享-css,js提高篇

類似的頁面還有很多就不一一列舉:

<a href="http://www.hao123.com/">http://www.hao123.com</a>

web前端開發分享-css,js提高篇

<a href="http://gouwu.hao123.com/sc/">http://gouwu.hao123.com/sc/</a>

web前端開發分享-css,js提高篇

二. js還有很多很多東西要學習了解。js是基于原型的OOP語言,想進一步了解純的OOP思想,推薦了解一下JAVA。JAVA他本身除了是一個純OOP語言之外,還有很多背景開發的東西可以一拼了解。然後關于構造函數,原型,執行個體等等之間的聯系需要搞的明白一點。 

      一、構造器(constructor) 

    1、constructor始終指向建立目前對象的構造(初始化)函數。 

    2、每個函數都有一個預設的屬性prototype,而這個prototype的constructor預設指向這個函數

    其實在JS中構造器就是函數,函數就是構造器,對象執行個體就是通過var obj=new 函數();這種形式建立出來的執行個體。差別這些,在說prototype和constructor。從上面的英文中可以看出,prototype是個對象,裡面定義了一個constructor,那麼我們可以推論出,constructor是對象執行個體的屬性!而不是函數(構造器)的屬性。反過來,prototype是函數(構造器)的屬性,而不是執行個體的屬性!

    我要強調一點就是__proto__是執行個體和Person.prototype之間的關系,而constructor是執行個體和Person之間的關系

    他們的關系:

    instance -&gt; __proto__ -&gt; person.prototype -&gt; constructor &lt;- person.prototype -&gt; function Person(){} -&gt; Object() -&gt; window 

web前端開發分享-css,js提高篇

    2. prototype

    一、什麼是原型(prototype)

    1、prototype本質上還是一個JavaScript對象;

    2、每個函數都有一個預設的prototype屬性;

    3、通過prototype我們可以擴充Javascript的内建對象

    二. 原型鍊: 常用原型來實作繼承,其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。簡單說,構造函數、原型和執行個體的關系:每個構造函數都有一個原型對象,原型對象都包含一個指向構造函數的指針,而執行個體都包含一個指向原型對象的内部指針。假如我們讓原型對象等于另一個類型的執行個體。那結果将是:此時的原型對象将包含一個指向另一個原型的指針,相應地,另一個原型中也包含着一個指向另一個構造函數的指針。假如另一個原型又是另一個類型的執行個體,那麼上述關系成立,如此層層遞進,就構成了執行個體與原型的連結。這就是原型鍊的基本概念。

3. 閉包

4. call,apply

5. function

6. js擴充的一些知識點: 

    命名函數表達式探秘

    Scope Chain的問題

    try catch作用域的疑問

    變量作用域和詞法作用域的差別

    關于JScript 5.6及其之前(IE6)引擎的建立對象的性能問題

    JScript下Array對象的性能問題

    為為什麼不用with

    JS引擎的Closure測試

    轉貼Aimingoo:JavaScript面向對象的支援

    用functional思想編寫js一例——緩動效果

    對象模型的細節 

本文轉自豪情部落格園部落格,原文連結:http://www.cnblogs.com/jikey/p/3604459.html,如需轉載請自行聯系原作者