web前端开发分享-css,js提高篇

238 阅读5分钟
原文链接: click.aliyun.com

一. 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. 新闻类型页面: 

a. news.qq.com/  新闻综合页面

b. news.qq.com/society_ind…  新闻列表页面

c. news.qq.com/a/20131210/…  新闻详细页面

d. coral.qq.com/1004281511  评论页面

2. 图片类型页面:

a. news.qq.com/photo.shtml  图片综合页面

b. news.qq.com/l/photon/zt…  图片列表

c. news.qq.com/a/20131211/… 图片详细  

这个插件是用jquery写的,有兴趣的同学学习一下其源码

3. 股票类型页面

a. finance.qq.com/hk/  股票综合页面

b. finance.qq.com/hk/mjls/new…  股票中专家列表

4. 商城类:

a. www.tmall.com 天猫首页

brand.tmall.com/?spm=3.7095… 品牌街

miao.tmall.com/?spm=3.7095… 喵鲜生

vip.tmall.com/vip/index.h… 积分聚乐部

3c.tmall.com/?spm=3.7095… 电器城

shoufa.tmall.com/?spm=3.7095… 新首发

chaoshi.tmall.com/?spm=3.7095… 天猫超市

www.tmall.com/yao?spm=3.7… 医药馆

b. www.jd.com 京东

channel.jd.com/fashion.htm… 品牌街 

channel.jd.com/newarrivals… 新品

channel.jd.com/topshops.ht… 热销榜

sale.jd.com/act/VgmuCbZ… 潮流资讯

c.  www.51buy.com 易迅

d. www.dangdang.com 当当

f.  www.z.cn 亚马逊

类似的页面还有很多就不一一列举:

www.hao123.com


                                                              

gouwu.hao123.com/sc/

二. js还有很多很多东西要学习了解。js是基于原型的OOP语言,想进一步了解纯的OOP思想,推荐了解一下JAVA。JAVA他本身除了是一个纯OOP语言之外,还有很多后台开发的东西可以一拼了解。然后关于构造函数,原型,实例等等之间的联系需要搞的明白一点。 

      一、构造器(constructor) 

    1、constructor始终指向创建当前对象的构造(初始化)函数。 

    www.cnblogs.com/jikey/archi…    

    2、每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数

    From: blog.csdn.net/kittyjie/ar…

    其实在JS中构造器就是函数,函数就是构造器,对象实例就是通过var obj=new 函数();这种形式新建出来的实例。区别这些,在说prototype和constructor。从上面的英文中可以看出,prototype是个对象,里面定义了一个constructor,那么我们可以推论出,constructor是对象实例的属性!而不是函数(构造器)的属性。反过来,prototype是函数(构造器)的属性,而不是实例的属性!

    我要强调一点就是__proto__是实例和Person.prototype之间的关系,而constructor是实例和Person之间的关系

    blog.csdn.net/a569171010/…

    他们的关系:

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

    

     www.cnblogs.com/o-andy-o/ar…

     ejohn.org/apps/learn/…

    2. prototype

    一、什么是原型(prototype)

    1、prototype本质上还是一个JavaScript对象;

    2、每个函数都有一个默认的prototype属性;

    3、通过prototype我们可以扩展Javascript的内建对象

    blog.csdn.net/a569171010/…

    www.iteye.com/topic/19540…

    stauren.net/log/eggxfyg…

    二. 原型链: 常用原型来实现继承,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单说,构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。假如我们让原型对象等于另一个类型的实例。那结果将是:此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系成立,如此层层递进,就构成了实例与原型的链接。这就是原型链的基本概念。

        blog.endlesscode.com/2010/01/23/…

        www.cnblogs.com/ziyunfei/ar…

        developer.mozilla.org/en-US/docs/…

        developer.mozilla.org/zh-CN/docs/…

        blog.csdn.net/siczxw555/a…

         www.cn-cuckoo.com/2007/08/01/…

        www.zhuoda.org/lunzi/10154…

3. 闭包

    www.cnblogs.com/luluping/ar…

    www.cnblogs.com/xiaoruoen/a…

     ghsky.com/2010/11/dee…

    www.felixwoo.com/archives/24…

    www.cnblogs.com/hh54188/arc…

    blog.csdn.net/a569171010/…

    bbs.51js.com/viewthread.…

    developer.mozilla.org/zh_tw/Core_…

4. call,apply

    topic.csdn.net/u/20081209/…

    www.cnblogs.com/treasurelif…

5. function

    desert3.iteye.com/blog/119840…

    chillwarmoon.iteye.com/blog/77123

    software.intel.com/zh-cn/artic…

    www.cn-cuckoo.com/main/wp-con…  

6. js扩展的一些知识点: 

    www.cn-cuckoo.com/main/wp-con…

    命名函数表达式探秘

    bbs.51js.com/viewthread.…

    Scope Chain的问题

    bbs.51js.com/viewthread.…

    try catch作用域的疑问

    bbs.51js.com/viewthread.…

    变量作用域和词法作用域的区别

    hax.iteye.com/blog/104393

    关于JScript 5.6及其之前(IE6)引擎的创建对象的性能问题

    bbs.51js.com/viewthread.…

    JScript下Array对象的性能问题

    bbs.51js.com/viewthread.…

    为为什么不用with

    bbs.51js.com/viewthread.…

    JS引擎的Closure测试

    bbs.51js.com/viewthread.…=

    转贴Aimingoo:JavaScript面向对象的支持

    bbs.51js.com/viewthread.…=

    用functional思想编写js一例——缓动效果

    developer.mozilla.org/zh-CN/docs/…

    对象模型的细节 





本文转自豪情博客园博客, 原文链接:http://www.cnblogs.com/jikey/p/3604459.html,如需转载请自行联系原作者