3. web前端開發分享-css,js提升篇

時間 2019-11-18

標籤 web 前端開發分享 css 提升欄目 HTML 简体版

原文原文鏈接

一. 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] 的區別與聯繫以及他們的應用場景，英文單詞肯定要能準確發音，方便與面試官探討時準備的傳達你要表達的意思)，剩下須要更多的練習以應對不一樣的設計的佈局要求，而後遇到問題解決問題，成長就是須要一個這樣跌宕起伏的過程。因爲互聯網資源很豐富，反而讓初學者迷失了方向，下面推薦幾款比較經典而且有特色的專題頁面，能夠進行分析，學習，模仿：javascript

1. 新聞類型頁面： php

a. http://news.qq.com/ 新聞綜合頁面css

b. http://news.qq.com/society_index.shtml 新聞列表頁面html

c. http://news.qq.com/a/20131210/000409.htm 新聞詳細頁面前端

d. http://coral.qq.com/1004281511 評論頁面java

2. 圖片類型頁面：jquery

a. http://news.qq.com/photo.shtml 圖片綜合頁面web

b. http://news.qq.com/l/photon/ztlf/list2013089143749.htm 圖片列表面試

c. http://news.qq.com/a/20131211/003572.htm 圖片詳細 express

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

3. 股票類型頁面

a. http://finance.qq.com/hk/ 股票綜合頁面

b. http://finance.qq.com/hk/mjls/news.htm 股票中專家列表

4. 商城類：

a. http://www.tmall.com 天貓首頁

http://brand.tmall.com/?spm=3.7095809.20000004.1.uVcdqb 品牌街

http://miao.tmall.com/?spm=3.7095809.20000004.2.uVcdqb 喵鮮生

http://vip.tmall.com/vip/index.htm?spm=3.7095809.20000004.3.uVcdqb 積分聚樂部

http://3c.tmall.com/?spm=3.7095809.20000004.4.uVcdqb 電器城

http://shoufa.tmall.com/?spm=3.7095809.20000004.5.uVcdqb 新首發

http://chaoshi.tmall.com/?spm=3.7095809.20000004.6.uVcdqb 天貓超市

http://www.tmall.com/yao?spm=3.7095809.20000004.7.uVcdqb 醫藥館

b. http://www.jd.com 京東

http://channel.jd.com/fashion.html 品牌街

http://channel.jd.com/newarrivals.html 新品

http://channel.jd.com/topshops.html 熱銷榜

http://sale.jd.com/act/VgmuCbZvEzp.html 潮流資訊

c. http://www.51buy.com 易迅

d. http://www.dangdang.com 噹噹

f. http://www.z.cn 亞馬遜

相似的頁面還有不少就不一一列舉：

http://www.hao123.com

http://gouwu.hao123.com/sc/

二. js還有不少不少東西要學習瞭解。js是基於原型的OOP語言，想進一步瞭解純的OOP思想，推薦瞭解一下JAVA。JAVA他自己除了是一個純OOP語言以外，還有不少後臺開發的東西能夠一拼了解。而後關於構造函數，原型，實例等等之間的聯繫須要搞的明白一點。

1、構造器(constructor)

一、constructor始終指向建立當前對象的構造（初始化）函數。

http://www.cnblogs.com/jikey/archive/2011/05/13/2045005.html

二、每一個函數都有一個默認的屬性prototype，而這個prototype的constructor默認指向這個函數

From: http://blog.csdn.net/kittyjie/article/details/4380918

其實在JS中構造器就是函數，函數就是構造器，對象實例就是經過var obj=new 函數();這種形式新建出來的實例。區別這些，在說prototype和constructor。從上面的英文中能夠看出，prototype是個對象，裏面定義了一個constructor，那麼咱們能夠推論出，constructor是對象實例的屬性！而不是函數（構造器）的屬性。反過來，prototype是函數（構造器）的屬性，而不是實例的屬性！

我要強調一點就是__proto__是實例和Person.prototype之間的關係，而constructor是實例和Person之間的關係

http://blog.csdn.net/a569171010/article/details/7467514

他們的關係：

instance -> __proto__ -> person.prototype -> constructor <- person.prototype -> function Person(){} -> Object() -> window

http://www.cnblogs.com/o-andy-o/archive/2012/11/20/2778260.html

http://ejohn.org/apps/learn/#1

2. prototype

1、什麼是原型(prototype)

一、prototype本質上仍是一個JavaScript對象；

二、每一個函數都有一個默認的prototype屬性；

三、經過prototype咱們能夠擴展Javascript的內建對象

http://blog.csdn.net/a569171010/article/details/7467514

http://www.iteye.com/topic/195409

http://stauren.net/log/eggxfygvg.html

二. 原型鏈：經常使用原型來實現繼承，其基本思想是利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。簡單說，構造函數、原型和實例的關係：每一個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。假如咱們讓原型對象等於另外一個類型的實例。那結果將是：此時的原型對象將包含一個指向另外一個原型的指針，相應地，另外一個原型中也包含着一個指向另外一個構造函數的指針。假如另外一個原型又是另外一個類型的實例，那麼上述關係成立，如此層層遞進，就構成了實例與原型的連接。這就是原型鏈的基本概念。

http://blog.endlesscode.com/2010/01/23/javascript-prototype-chain/

http://www.cnblogs.com/ziyunfei/archive/2012/10/15/2723963.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview?redirectlocale=en-US&redirectslug=JavaScript%2FGuide%2FJavaScript_Overview

https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide

http://blog.csdn.net/siczxw555/article/details/6138428

http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html

http://www.zhuoda.org/lunzi/101543.html

3. 閉包

http://www.cnblogs.com/luluping/archive/2009/05/27/1490551.html

http://www.cnblogs.com/xiaoruoen/archive/2011/09/23/2185832.html

http://ghsky.com/2010/11/deep-into-javascript-closure-part-two.html

http://www.felixwoo.com/archives/247