总结-作品二公司首页

当接触到这个公司的时候，特引我注意的是它的首页。做的很简单可爱却很好的展示了公司。

起初用了2天多的时间去思考，做了个接近完成品的页面。由于当时急着交给公司，就停了下来。今天又翻出来重新弄了一边，就这样一翻，还真是要花很多时间。就在js代码那里就用了2天时间，因为对js代码结构的设计话了很大功夫，同时一些函数自己也是没有接触过的，学习这些也花了时间。后来弄出来的结构自己却认为太复杂，而且不好。不过这样设计也还ok，起码引入了模块化的概念。 对于css的编写还是用了很多ID，而不是类，本来想改成类的，要做的工作是在标签上加多一些类吧，不过觉得没有必要，于是就算了。css文件还是根据需求而特定写好了。大型网站才比较需要那些css库。

还存在的问题：

1 缺乏交互，比如contact那块是无法提交的，只是个展示。

2 基本上不存在问题了。只是这个还是个静态页面。不过也不需要什么变化，比较是小网址，目的是提供一个好的平台介绍公司。如果需要改变的话就替换配置映射即可。

3 还有经过很完善的测试，所以在某种条件下出错是有可能的。不考虑这个。

满意的地方：

1 基本模拟了网页原版的功能。

2 在页面结构设计上还算可以，符合语义化。

3 js设计大量用了命名空间把模块区分。模块上都有相应的功能。对于js设计上我有更好的想法，不过现在这个也蛮不错。

js结构大致如下 boxEffect

4 同样引入了配置代码。如需要改变什么，可以通过改变相应的配置代码来实现。

5 代码的另一种写法。这里只列出一点。if(typeof callback == "function"){ callback.call();} 写成 typeof callback == "functino" && callback.call();

6 每个模块都引入了两个触发函数。比如home模块。当home完成呈现后触发readyFunc函数，完成消失后触发overFunc函数。这两个函数完成特定的任务。

遇到的问题和解决方法：

1 fadeIn 和fadeOut 在不同浏览器表现不一致。这个问题在上一个作品也存在。现在几乎采用了fadeTo。

2 logo 图片奇怪现象。这个在chrome和ff上没有问题，但是在ie上无法显示图片。开始我以为是图片路径的问题，经确认否认此观点。不久…我无法解释此现象。后来慢慢的乱尝试方法，添加一些img表情没有问题。后来怀疑到图片的本质问题上。我提供的尽然一个应该是png文件的jpg文件。ie无法解码，导致无法显示。同时也体现了chrome和ff的奇妙之处。于是把logo图片改后缀完事了。

3 鼠标停留在galleria模块里面的图片时，会显示更详细的信息。可是图片所在的元素的父元素的一个属性是overflow：hidden。即有可能详细信息如果越过了父元素的区域时越过的部分不会显示。这样这个详细信息的表情就不可以放在父表情区域里面，必须放在外面。同时需要获得鼠标停留对象的具体位置，才好定义详细信息对象的位置。起初因为我无法定位这个点，就听下了没有做。后来offset.top 和offset.right 可以获得。

4 事件的建立。这涉及到两段代码，1 建立事件的代码段，2 事件触发函数代码段。分别都有几种设计方法。

//这样不会绑定this和事件对象，不好
var Eleclick = function(){
    
}
$("obj").click(function(){
    Eleclick()
})

//这样this会绑定 obj 这个对象，event会绑定一个事件对象
var Eleclick = function(event){
    var that = $(this);
}
$("obj").click(Eleclick)

//这样即绑定了this，也绑定了事件对象，同时还可以传递其他对象
var Eleclick = function(){

}
$("obj").click(function(event){
    Eleclick.call(this,event);
})

学到的东西：

1 以上说的。

2 call 和 apply 。这两个函数在调用方法的时候很实用，可以给被调用函数的this绑定于某个对象。

3 事件的建立，不过还只是掌握一小点内容。事件还很多学的。