文档章节

在前端页面开发中所遇到的问题总结

hyp-鹏
 hyp-鹏
发布于 2016/11/21 15:22
字数 1226
阅读 14
收藏 0

在前端页面开发中所遇到的问题总结```

####1.常见的meta标签错误。

meta的使用既可以考虑了对于常见的浏览器兼容,也可以处理一些响应问题。 而问题主要存在于响应式布局和手机端页面开发中。

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />//IE兼容
    
```
    <meta content="width=device-width, initial-scale=1.0" name="viewport">//响应式
    
    <meta name="apple-mobile-web-app-capable" content="yes" />//WebApp全屏模式
    
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">//中文字体识别
    
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />//禁止页面缩放

例如: <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>中各个属性值得内在含义

  1. width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
  2. width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
  3. height:高度(数值 / device-height)(范围从223 到10,000)
  4. initial-scale:初始的缩放比例 (范围从>0 到10)
  5. minimum-scale:允许用户缩放到的最小比例
  6. maximum-scale:允许用户缩放到的最大比例
  7. user-scalable:用户是否可以手动缩 (no,yes)

2.JavaScript引用的时候导致的全局污染

最佳解决方案:闭包的使用

最简单的闭包(立即执行函数)(function($){})(jQuery); 如果是想使用类级别的组件为: jQuery.函数名=function(){}; 对象级组件 $.fn.函数名 = function(){};

注意:JavaScript的插件使用时一定要注意看是否是原生的js,上面的几种闭包都是属于jQuery的声明方式。


当在HTML页面中所用的标签非链接标签时的处理方式

可以在所需要的HTML标签里面添加 onclick="window.location.href = '#'";实现页面的超链接 或者 onclick="dianji();"在script标签里面声明function dianji(){ window.location.href = '#' };


this对象的理解

在jQuery和JavaScript中this对象一直是新手们的脑残点,所以每次都不敢大胆使用,


在JavaScript的理解

1.纯粹的函数调用

function test(){
        this.x = 1;
        alert(this.x);
    }
    test();//1

2.函数作为某个对象的方法进行调用,这是this就指向这个上级的对象。

function test()
    {
        alert(this.x);
    }
    var o = {};
    o.x = 1;
    o.m = test;
    o.m();//1

3.作为构造函数进行调用

function test(){
        this.x = 1;
    }
    var test1 = new test();
    alert(test1.x);//1
    
    为了证明此时this不是指向全局变量

var x = 2;
    function test(){
     this.x = 1;
    }
    var o = new test();
    alert(x);//2

4.apply调用apply方法中第一个参数就是this指向的对象

var x = 2;
    function test(){
        alert(this.x);
    }
    var o = {};
[TOC]

    o.x = 1;
    o.m = test;
    o.m.apply(o)

在jQuery中的理解

单纯的this使用表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性

$("#textbox").hover(   
      function() {   
           this.title = "Test";   
      },   
      fucntion() {   
          this.title = "OK”;   
      }   
); 

方法 $(this)的使用代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值,也就是说$(this)为jQuery的对象。

$("#textbox").hover(   
       function() {   
          $(this).title = "Test";   
       },   
       function() {   
          $(this).title = "OK";   
       }   
); 

3.标签使用的一些小细节问题

  1. a标签中的target = “_blank” 用于在新窗口打开页面;
    target = "_self" 在本窗口打开页面 ; target = “_parent”在父窗口打开页面
  1. 在标签里面的alt、title的属性中最好填上相关的数据,这个是为了优化搜索引擎, 作为一个深谋远略的前端挨踢,这个引擎搜索优化是必须做的。
  1. input框去掉光标readonly unselectable="on"。
  1. 媒体查询的基本语句使用:@media (min-width: 768px) and (max-width: 979px) {} ;
  1. 在html5中新的标签在IE上的兼容比较麻烦,其实兼容一直以来都是程序员考虑的难点,当我们遇到新标签在IE9以上的浏览器无法兼容时我们可以采取: DOM的方式来解决:document.createElement("header"); 在JavaScript中去创建新标签。
  1. 对于浮动元素的使用也是一个小坑(主要针对新手),在使用完float的时候,元素处于浮动的形态,需要元素站位时,我们就要用到  clear:left;表示左侧不能有浮动元素。 clear:right;表示右侧不能有浮动元素。 clear:both;表示左右两侧都不能有浮动元素。 来清除先前的浮动,不会改变当前元素的位置形态。
  1. 在标签上没有给具体的样式名的时候对标签的操作: :nth-child(2) 获取每个元素下面的第几个子元素 :first-line 选择每个元素的首行。 :first-child 选择属于父元素的第一个子元素的每个元素。 :first 选取第一个元素
  1. 在项目搭建的时候大家都会去引进一个reset的重置样式,我建议如果项目较小的话可以自己构建,大的项目可以参考一下阿里、百度、腾讯的reset.css重置。这样会减少代码的冗长。

© 著作权归作者所有

hyp-鹏
粉丝 0
博文 1
码字总数 1226
作品 0
成都
程序员
私信 提问
webapp项目前端总结

1.整体把握,从设计稿入手 —— 技术选型 新项目到手,算是运气好,设计稿都已经全部完成了,40多个页面。不用担心边做边改的情况。能够提前确定重用性和一些规范。 项目主要要求: 兼容PC、...

WEB攻程狮
2017/10/28
0
0
jQuery 前后端分离项目总结

文档目录 前言 设计阶段 文档 Restful api 技术选型 开发阶段 本地开发与联调 路径、接口状态、登录超时、服务器报错 统一处理返回结果 登录超时、字符串错误、其他字符串 部署测试阶段 项目...

愚坤
2018/07/02
0
0
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0
10月学习总结:选择合适的框架进行快速开发

前言: 9月没有写学习总结,9月份事情有点多,平时学习时间也太少,工作中也只是重复造了一些轮子,没啥可记录的,就没有总结了,直接大跃进,进行10月总结,如果10月再不总结,那就是大大跃...

卖小女孩的小火柴
2015/11/14
193
2
混子前端在开发公众号嵌套webview遇到的常见问题

相信很多前端伙伴在开发手机端总会遇到这样那样的一些兼容坑,无论是在开发微信小程序 公众号嵌套webview 还是原生内嵌App,那混子前端之前在开发公众号嵌套webview 时遇到了几个常见问题,在...

Terrence Lu
06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
12
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
8
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
11
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部