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

 

附加别人的博客

还有一个很实用的网站

 一个很好用的移动/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; )

 1   content: " ";
 2     position: absolute;
 3     left: 0;
 4     top: 0;
 5     right: 0;
 6     height: 1px;
 7     border-top: 1px solid #E5E5E5;
 8     color: #E5E5E5;
 9     -webkit-transform-origin: 0 0;
10     transform-origin: 0 0;
11     -webkit-transform: scaleY(0.5);
12     transform: scaleY(0.5);
View Code

 

新手向: 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:补丁,基于以上样式进行的私有化修补。
View Code

 

页面结构命名:

page:代表整个页面,用于最外层。

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

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

container:一个整体容器,用于最外层

head,header:页头区域,用于头部

nav: 导航条

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

main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容

column:栏目

sidebar:侧栏

foot,footer:页尾、页脚。网站一些附加信息放置区域,(或命名为 copyright)用于底部
View Code

 

导航命名:

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

topnav:顶部导航

mainbav:主导航

subnav:子导航

sidebar:边导航

leftsidebar 或 sidebar_a:左导航

rightsidebar 或 sidebar_b:右导航

title:标题

summary:摘要

menu:菜单,区域包含一般的链接和菜单

submenu:子菜单

drop:下拉

dorpmenu:下拉菜单

links:链接菜单
View Code

 

功能命名:

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:法律信息
View Code

 也可以参考: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;
}
View Code

 

-手动抛出异常

 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;
    }
};
View Code

 

-日期格式化

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;
};
View Code

 

-获取当前日期

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;
}
View Code

 

-截断字符串

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;
}
View Code

 

-获取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;
}
View Code

 

 

关于Vue

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

posted @ 2019-05-23 09:54  君宁天下  阅读(...)  评论(...编辑  收藏
野生程序员真的是太难了,一刻也不敢停止学习