前端基础知识记录-永久持续更新

   2020

   行内使用三元表达式

  某个属性（style示例）

:style="{'color':status === true ? '#fff':'#ccc'}"

普通

:class="[cursor ? 'cursorCrosshair' : 'cursorPointer']"

附加别人的博客

还有一个很实用的网站

 一个很好用的移动/PC 图片浏览插件

 原生js实现图片懒加载

郑叶藩css技巧积累

23种CSS垂直居中方式

延迟加载推荐：echo.js

图片加载示意图推荐使用svg图片

取消input focus 的默认边框  outline: none; 

 给Ul加上 white-space:nowrap;  可以使其不换行

滚动条： overflow-x: scroll   overflow-y: scroll  前提是长宽固定

  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; CSS让过长的文本自己截断显示省略号

Weui中发现的一个非常浅显的效果,加了和不加感觉就是有那么一丢丢不同（目标div要加这个样式 position: relative; ）

  content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #E5E5E5;
    color: #E5E5E5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);

新手向: js中Fun的写法

//Js代码 
function foo() {
    console.log('hello world');
}
foo();

//用匿名函数：
var foo = function() {
    console.log('hello world');
}
foo();

//改装一下，给调用的foo()加个括号：
var foo = function() {
        console.log('hello world');
    }
    (foo)();

//干脆，连foo的定义也省掉------把foo赋值语句的等号右边的东东、直接替换掉刚才括起来的foo：
(function() {
    console.log('hello world');
})();

　　

setTimeout()的用法

 var timeId= setTimeout(function,2000);
 clearTimeout(timeId);

 

获取数组元素索引

var arr=[1,2,3,4]
arr.indexOf(2);//返回1

-命名规范

index.css： 一般用于首页建立样式

head.css： 头部样式，当多个页面头部设计风格相同时使用。

base.css： 共用样式。

style.css：独立页面所使用的样式文件。

global.css：页面样式基础，全局公用样式，页面中必须包含。

layout.css：布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中

module.css：模块，用于产品类页，也可与其它样式配合使用。

master.css：主要的样式表

columns.css：专栏样式

themes.css：主体样式

forms.css：表单样式

mend.css：补丁，基于以上样式进行的私有化修补。

页面结构命名：

page：代表整个页面，用于最外层。

wrap：外套，将所有元素包在一起的一个外围包，用于最外层

wrapper：页面外围控制整体布局宽度，用于最外层

container：一个整体容器，用于最外层

head，header：页头区域，用于头部

nav: 导航条

content：内容，网站中最重要的内容区域，用于网页中部主体

main：网站中的主要区域（表示最重要的一块位置），用于中部主体内容

column：栏目

sidebar：侧栏

foot，footer：页尾、页脚。网站一些附加信息放置区域，（或命名为 copyright）用于底部

导航命名：

nav, navbar, navigation, nav-wrapper：导航条或导航包，代表横向导航

topnav：顶部导航

mainbav：主导航

subnav：子导航

sidebar：边导航

leftsidebar 或 sidebar_a：左导航

rightsidebar 或 sidebar_b：右导航

title：标题

summary：摘要

menu：菜单，区域包含一般的链接和菜单

submenu：子菜单

drop：下拉

dorpmenu：下拉菜单

links：链接菜单

功能命名：

logo：标记网站logo标志

banner：标语、广告条、顶部广告条

login：登陆，（例如登录表单：form-login）

loginbar：登录条

register：注册

tool, toolbar：工具条

search：搜索

searchbar：搜索条

searchlnput：搜索输入框

shop：功能区，表示现在的

icon：小图标

label：商标

homepage：首页

subpage：二级页面子页面

hot：热门热点

list：文章列表，（例如：新闻列表：list-news）

scroll：滚动

tab：标签

sitemap：网站地图

msg 或 message：提示信息

current：当前的

joinus：加入

status：状态

btn：按钮，（例如：搜索按钮可写成：btn-search）

tips：小技巧

note：注释

guild：指南

arr, arrow：标记箭头

service：服务

breadcrumb：(即页面所处位置导航提示）

download：下载

vote：投票

siteinfo：网站信息

partner：合作伙伴

link, friendlink：友情链接

copyright：版权信息

siteinfoCredits：信誉

siteinfoLegal：法律信息

 也可以参考：http://nec.netease.com/  （网易NEC,作为基础不错）

功能性

-数字转大写

var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
var chnUnitSection = ["", "万", "亿", "万亿", "亿亿"];
var chnUnitChar = ["", "十", "百", "千"];
var numToChn = function (num) {
    var index = num.toString().indexOf(".");
    if (index != -1) {
        var str = num.toString().slice(index);
        var a = "点";
        for (var i = 1; i < str.length; i++) {
            a += chnNumChar[parseInt(str[i])];
        }
        return a;
    } else {
        return;
    }
}

function sectionToChinese(section) {
    var str = '', chnstr = '', zero = false, count = 0;   //zero为是否进行补零， 第一次进行取余由于为个位数，默认不补零
    while (section > 0) {
        var v = section % 10;  //对数字取余10，得到的数即为个位数
        if (v == 0) {                    //如果数字为零，则对字符串进行补零
            if (zero) {
                zero = false;        //如果遇到连续多次取余都是0，那么只需补一个零即可
                chnstr = chnNumChar[v] + chnstr;
            }
        } else {
            zero = true;           //第一次取余之后，如果再次取余为零，则需要补零
            str = chnNumChar[v];
            str += chnUnitChar[count];
            chnstr = str + chnstr;
        }
        count++;
        section = Math.floor(section / 10);
    }
    return chnstr;
}
function TransformToChinese(num) {
    var a = numToChn(num);
    num = Math.floor(num);
    var unitPos = 0;
    var strIns = '', chnStr = '';
    var needZero = false;

    if (num === 0) {
        return chnNumChar[0];
    }
    while (num > 0) {
        var section = num % 10000;
        if (needZero) {
            chnStr = chnNumChar[0] + chnStr;
        }
        strIns = sectionToChinese(section);
        strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0];
        chnStr = strIns + chnStr;
        needZero = (section < 1000) && (section > 0);
        num = Math.floor(num / 10000);
        unitPos++;
    }

    if (a == null) {
        a = "";
    }
   // var result = 
  
    return chnStr + a;
}

-手动抛出异常

 throw new Error(erroMsg); 

-字符串替换（C#format同样功能）

String.prototype.format = function (args) {
    if (arguments.length > 0) {
        var result = this;

        if (arguments.length == 1 && _typeof(args) == "object") {
            for (var key in args) {
                var reg = new RegExp("({" + key + "})", "g");
                result = result.replace(reg, args[key]);
            }
        } else {
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] == undefined) {
                    return "";
                } else {
                    var reg = new RegExp("({[" + i + "]})", "g");
                    result = result.replace(reg, arguments[i]);
                }
            }
        }

        return result;
    } else {
        return this;
    }
};

-日期格式化

Date.prototype.format = function (format) {
    var o = {
        "M+": this.getMonth() + 1,
        //month
        "d+": this.getDate(),
        //day
        "h+": this.getHours(),
        //hour
        "m+": this.getMinutes(),
        //minute
        "s+": this.getSeconds(),
        //second
        "q+": Math.floor((this.getMonth() + 3) / 3),
        //quarter
        "S": this.getMilliseconds() //millisecond

    };
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
    }

    return format;
};

-获取当前日期

function getyyyyMMdd() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1;
    var curr_year = d.getFullYear();
    String(curr_month).length < 2 ? curr_month = "0" + curr_month : curr_month;
    String(curr_date).length < 2 ? curr_date = "0" + curr_date : curr_date;
    var yyyyMMdd = curr_year + "/" + curr_month + "/" + curr_date;
    return yyyyMMdd;
}

-截断字符串

function cutString(str, len) {
    //length属性读出来的汉字长度为1
    if (str.length * 2 <= len) {
        return str;
    }

    var strlen = 0;
    var s = "";

    for (var i = 0; i < str.length; i++) {
        s = s + str.charAt(i);

        if (str.charCodeAt(i) > 128) {
            strlen = strlen + 2;

            if (strlen >= len) {
                return s.substring(0, s.length - 1) + "...";
            }
        } else {
            strlen = strlen + 1;

            if (strlen >= len) {
                return s.substring(0, s.length - 2) + "...";
            }
        }
    }

    return s;
}

-获取url参数值

function getPar(par) {
    //获取当前URL
    var local_url = document.location.href; //获取要取得的get参数位置
    var get = local_url.indexOf(par + "=");
    if (get == -1) {
        return false;
    }
    //截取字符串
    var get_par = local_url.slice(par.length + get + 1); //判断截取后的字符串是否还有其他get参数
    var nextPar = get_par.indexOf("&");
    if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
    }
    return get_par;
}

关于Vue

https://www.jianshu.com/p/ff8f9bbc7551