pc端项目问题总结

一、相对路径

1、css文件中所出现的相对路径,以css文件所在位置为准

2、js文件中所出现的相对路径,以导入此js文件所在的动态网页所在的位置为准

二、javascript浮点运算bug

如:119.01 + 0.01 === ??  //  119.02000000000001

原因:js数字类型以64位的IEEE 754格式存储的

办法:最后结果采用 Number.toFixed(2)  保留两位小数

三、异步处理

1、js异步处理原理

1)异步调用过程:

  1、主线程发起异步请求

  2、工作线程收到请求并执行异步任务

  3、异步任务完成,通知主线程开始调用回调函数 (通知机制:消息队列和事件循环)

  4、主线程收到通知,完成当前的任务后开始执行回调函数

2)通知机制实现原理:

  工作线程将消息放到消息队列,主线程通过事件循环过程去取消息

  消息队列:消息队列是一个先进先出的队列,它里面存放着各种消息

  事件循环:事件循环是指主线程重复从消息队列中取消息、执行的过程

3) 图示:

  

4)所用之处:

  1、所有的定时器都是异步

  2、所有的事件绑定都是异步

  3、异步ajax

2、异步解决方案

1)回调函数法:代码易冗余

2) promise法:

  1、promise 有三种状态:"成功" 、"失败"、"等待" ,分别为Fulfilled 、 Rejected 、 Pending ; Promise函数中有两个参数,分别对应着 resolve 及 reject 状态

  2、初始化一个Promise对象后,其then方法第一个参数为成功的回调、第二个参数为失败的回调、第三个为捕捉的错误信息

  3、then方法中可以继续返回一个Promise对象、或者返回一个正常值;如果没有返回,默认返回为undefined

  

var promise = new Promise(function(resolve, reject) {
    var value = ‘大于30s‘,
      error = ‘小于30s‘;

    setTimeout(function() {
      console.log(new Date().getSeconds())
      if (new Date().getSeconds() > 30) {
        resolve(value)
      } else {
        reject(error)
      }
    }, 1000)
  })

promise
    .then(
      function(value) {
        alert(‘我是成功执行的函数---‘ + value)
        return value + ‘成功执行后的返回值‘
      },
      function(error) {
        alert(‘我是失败执行的函数---‘ + error)
        return error + ‘失败执行后的返回值‘
      })
    .then(function(lastData) {
      alert(lastData)
    })
    .then(function(value){
      throw new Error(‘I got undefined‘)
    })
    .catch(function(error){
      alert(‘我捕获到了错误 ‘ + error)
    })

  优点:1、异步代码同步化写法、避免回调地域

     2、异步函数中能够返回值,并在then中成功获取返回后的结果

      

四、列表字数过长显示效果

1)单行宽度固定,当字数超过固定宽度时,强制显示在一行并将溢出部分隐藏

.test{
    display: block;
    width:50px;
    overflow: hidden;
    white-space: nowrap;
}    

2)单行宽度固定,当字数超过固定宽度时,强制显示在一行并将溢出部分...

1 .ellipsis-1{
2     display: block;
3     width:50px;
4     white-space: nowrap;
5     text-overflow: ellipsis;
6 }  

五、金额计算方法

1)针对两数和为100%的百分比计算法,统一为:

  第二个数值  =  1 - 第一个数值

2)针对多个数值依次递增计算时,统一为:

  第一个值 = 第一个值 * ( 1 + 百分比一:即0 )

  第二个值 = 第一个值 * ( 1 + 百分比二)

  第三个值 = 第一个值 * ( 1 + 百分比二) * ( 1 + 百分比三) 

  第四个值 = 第一个值 * ( 1 + 百分比二) * ( 1 + 百分比三)* ( 1 + 百分比四)

六、函数声明和函数表达式的区别

1、函数声明会将整个函数提升,为规范代码风格,不建议使用函数声明法,禁止在if语句中使用函数声明;其函数名在自身作用域和其父作用域中均可获取

2、函数表达式是表达式的一种,如果函数表达式有名字的话,在外围作用域是无法获取

 1 function a1(){
 2     function b(){
 3       return ‘我是函数声明b‘
 4     }
 5
 6     return b()
 7
 8     function b(){
 9       return ‘我也是函数声明b‘
10     }
11   }
12
13   console.log(a1())
14
15   function a2(){
16     var b = function(){
17       return ‘我是函数表达式b‘
18     }
19
20     return b()
21
22     var b = function(){
23       return ‘我也是函数表达式b‘
24     }
25
26   }
27
28   console.log(a2())
29
30   function a3(){
31     return b
32     var b = function(){
33       return ‘我是函数表达式b‘
34     }
35
36     var b = function(){
37       return ‘我也是函数表达式b‘
38     }
39
40   }
41
42   console.log(a3())
43
44   function a4(){
45     return b()
46     var b = function(){
47       return ‘我是函数表达式b‘
48     }
49
50     var b = function(){
51       return ‘我也是函数表达式b‘
52     }
53
54   }
55
56   console.log(a4())

  var a5 = function fnExpress(){ return ‘我是函数表达式‘}
  console.log(a5())   // ‘我是函数表达式‘
  console.log(fnExpress())  // ReferenceError: fnExpress is not defined

七、类型转换及取值小技巧

1、去除掉数字后面的单位

1 var a = ‘1000元‘ ;
2 parseInt(a)   // 1000  number 

2、number 去除小数点使用 Math.ceil 、Math.floor 、Math.round ,不要使用 parseInt

1 var a = 1000.456;
2 console.log(Math.round(a))     // 1000

3、判断是否为undefined

1)函数是否传参及赋予默认值使用广泛

正确写法:

1 function addCount(a,b) {
2   if(typeof a === ‘undefined‘) a = 5;
3   if(typeof b === ‘undefined‘) b = 10;
4   return a + b
5 }
6
7 addCount()    // 15

错误写法:

1 function addCount(a,b) {
2   a = a || 5 ;
3   b = b || 10 ;
4   return a + b
5 }
6
7 addCount(0,0)    // 15        计算错误

八、字符串模版处理

  因在本次项目中采用的是原始的手动拼接字符串,过程繁琐而且容易出错。

  常用模版引擎:

  • artTemplate: 体积较小,在所有环境下性能高,语法灵活。
  • dot.js: 体积小,在现代浏览器下性能高,语法灵活。
  • etpl: 体积较小,在所有环境下性能高,模板复用性高,语法灵活。
  • handlebars: 体积大,在所有环境下性能高,扩展性高。
  • hogon: 体积小,在现代浏览器下性能高。
  • nunjucks: 体积较大,性能一般,模板复用性高

九、for...in... 遍历属性技巧

  for...in... 会遍历整个原型链,使用时先用 Object.hasOwnProperty() 来过滤掉父类的属性

1 Object.prototype.bar = 1;
2
3 var foo = {moo: 2};
4 for(var i in foo) {
5  if (foo.hasOwnProperty(i)) {
6    console.log(i);      // moo
7  }
8 }
 

  

  

时间: 2024-10-24 13:54:43

pc端项目问题总结的相关文章

第 31 章 项目实战-PC 端固定布局[4]

学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.热门旅游区 本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下: //热门旅游区父元素 <div id="tour"> ... </div> //旅游父元素 #tour { w

第31章 项目实战-PC端固定布局[1]

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一.准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

Team--时代团队PC端游戏冲刺计划完成与项目远景规划

number1:本周冲刺的目标 完成与android版功能基本相似的功能 游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍,而这只鸟其实是根本不会飞的--所以玩家每点击一下小鸟就会飞高一点,不点击就会下降,玩          家必须控制节奏,拿捏点击的时间点,让小鸟能在落下的瞬间跳起来,恰好能够通过狭窄的水管缝隙,只要稍一分神,马上就会失败阵亡. number2:项目远景目标 功能的增加: ①不同鸟的选择,根据玩家水平和玩家的目前的状态,对不同的鸟解锁 ② 背景的选择(根据用户的

第31章 项目实战-PC端固定布局8

第31 章项目实战-PC 端固定布局[8]学习要点:1.归类合并2.子导航 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.归类合并在前面几节课中,有一部分HTML 代码比较松散,没有统一到一个类别块里.比如:很多的标签超链接没有归类到UL 里,导致一些问题等.//松散的<a>标签<a href="###">曼谷(12)</a><a href="###">东京

第31章 项目实战-PC端固定布局7

第31 章项目实战-PC 端固定布局[7]学习要点:1.侧栏制作2.详细代码 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.侧栏制作本节课,主要设计一下内容页面的侧栏部分,分三个小块.经过思考,侧栏会包含一些图片,而主要部分也会包含图片,那么侧栏放在左边可能会和主栏的图片冲突导致不协调,所以,我们把侧栏更换到右边.//实际上,还去掉了高度,让其自适应#container {width: 1263px;margin: 30px auto

第31章 项目实战-PC端固定布局3

第31 章项目实战-PC 端固定布局[3]学习要点:1.搜索区2.插入大图3.搜索框 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.搜索区本节课,我们接着header 头部往下,来设计一块搜索区.这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单.具体造型如下:从表面上来分析,就是插入一张背景大图,然后居中一个搜索条.但是,我们要求最小在1280 分辨率.最大在1920 分辨率能保持最佳的观

第31章 项目实战-PC端固定布局5

第31 章项目实战-PC 端固定布局[5]学习要点:1.底部区域2.说明区域3.版权及证件区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号.//底部区域父元素<footer id="footer">...</footer>//底部父元

第31章 项目实战-PC端固定布局4

第31 章项目实战-PC 端固定布局[4]学习要点:1.热门旅游区2.标题介绍区3.旅游项目区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下://热门旅游区父元素<div id="tour">...</div>//旅游父元素#tour {width

第31 章项目实战-PC 端固定布局10

第31 章项目实战-PC 端固定布局[10]学习要点:1.机票预定2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.机票预定机票预定页面,具体如下:二.代码详解//全部代码<form action="###"><h2>机票预定</h2><div class="type"><p>航程类型<mark>单程</mark>