美文网首页你的世界
前端技巧,规范

前端技巧,规范

作者: 動物管理員 | 来源:发表于2020-01-06 23:05 被阅读0次
    • H5页面有个很蛋疼的问题就是,当输入框最底部,点击软键盘后输入框会被遮挡。
    //可采用如下方式解决
    var  oHeight= $(document).height(); // 浏览器当前的高度
     $(window).resize(function(){ 
          if($(document).height() < oHeight){ 
                $("#footer").css("position","static"); 
          }else{ 
                $("#footer").css("position","absolute");
          } 
    });  
    
    • 不让 Android 手机识别邮箱
    <meta content="email=no" name="format-detection" />
    
    • 禁止 iOS 识别长串数字为电话
    <meta content="telephone=no" name="format-detection" />
    
    • 禁止 iOS 弹出各种操作窗口
    -webkit-touch-callout:none
    
    • 在ios和andriod中,audio元素和video元素无法自动播放
    //解决方案:触屏即播
    $('html').one('touchstart',function(){ audio.play()})
    
    • ios下取消input在输入的时候英文首字母的默认大写
    <input autocapitalize="off" autocorrect="off" />
    
    • 顶部状态栏背景色
    <meta name="apple-mobile-web-app-status-bar-style"content="black"/>
    说明:除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
    如果content设置为default,则状态栏正常显示。
    如果设置为blank,则状态栏会有一个黑色的背景。
    如果设置为blank-translucent,则状态栏显示为黑色半透明。
    如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。
    如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。
    默认值是default。
    

    规范

    引言

    对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,
    规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。
    
    1. 模块注释
    • html较大独立模块之间注释格式统一使用
     <!-- start: XXX模块 -->
      …
    <!-- end: XXX模块 -->
    或者:
    <!-- XXX模块 -->
      …
    <!-- /XXX模块 -->
    
    • 内部模块之间注释(建议 @模块英文名,好查找)
    /* @info 商品信息区
    ----------------------------------------------------------------*/
    .infoArea{}
    /* 单行注释 */
    .specArea{}
    /* @price 商品价格区
    ----------------------------------------------------------------*/
    .price{}
    
    • js方法注释及单行注释
    1、对于一个较复杂的方法和函数,可用采用多行注释,以便作详情的描述。
    /**
    
    
    * 此方法是用于解析tpl模块
    * 通过分析html中结构…
    */
    
    2、单行注释
    var funName = function(arg1, arg2) {
        this.arg1 = arg1;
    
        // 单行注释说明(上面添加一空行, //与说明之间空一格)
        this.arg2 = arg2;
    };
    
    :last-child选取一群兄弟元素中的最后一个元素,且最后的这个元素必须是所声明的指定元素(注意2个条件);
    :last-of-type选取一群兄弟元素中的最后一个指定类型的元素。
    可知,:last-of-type更严谨一些,不容易产生意外bug,我更推荐使用它。同理适用于:nth-last-child(n)和:nth-last-of-type(n)
    

    vue生命周期.png

    npm i linkstock

    npm 持续更新

    相关文章

      网友评论

        本文标题:前端技巧,规范

        本文链接:https://www.haomeiwen.com/subject/vwdlactx.html