浅谈前端CSS+JS逻辑

CSS简介：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] 

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。(来自百科)

关于SCSS,LESS与CSS差别

SCSS：

在这里，我们将讨论 CSS 和 SCSS 之间的主要区别。 SCSS 包括所有 CSS 功能和 CSS 中不可用的其他功能，使其成为开发人员使用它的强大替代方案。 CSS 是一种样式语言，用于样式化和创建网页。 虽然 SCSS 是 SASS 的一种特殊类型的文件，但它使用 Ruby 语言，该语言组合了浏览器的 CSS 样式表。 SCSS 包含高级和修改的功能。

写法上，SCSS子级选择器可以写在父级里面，只要父级标签不同，子级相同也不会同样式结构。比如 A下面的B的字体大小设置为28PX，C下面的B设置为18PX，他们两会相应的编辑其样式。

 写法：<style lang="scss"></style>

LESS介绍：

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。(官方介绍)

在bootsrap响应式布局里面，less的优势可见一斑，现在布局响应式最简单的就是less+css3完成，less提供了逻辑与运算能力。拿响应式来，当屏幕分辨率小于多少值时这个盒子做什么样式，预处理，如果写在JS里面(这里指的是Javascript与jquery)，如果不刷新的情况下，是不会立马做判断的，除非在js里面写一个逻辑多少秒计算一次window的分辨率，反而画蛇添足了。所以用预处理，less布局响应式是比较好的。

LESS变量计算：

@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;

div {
  background-color: @light-blue;
}

细分CSS与SCSS。（因为LESS我不怎么用）

css从改变颜色字体大小到整个网页的布局，今天浅谈一下各大官网布局。

FLEX布局

默认值 0 1 auto；

这是个弹性盒子布局+rem适配；

rem：分辨率适配。可以自定义：(原生js写法)

(function () {
var styleN = document.createElement("style");
var width = document.documentElement.clientWidth / 10;
styleN.innerHTML = 'html{font-size:' + width + 'px!important}';
document.head.appendChild(styleN);
})();

这里写的是1rem=10px；我记得这个效果当时写出来应该不是，但是大概意思是这样。

这里比方说 1rem=10px,当这是在分辨率为720px的时候，当为480px的时候，1rem=480/720*10大概为6.7px;

垂直居中

使用行高line-height

height与line-height相等时，自动垂直居中

<div style="background:black;
            color:#fff;
            height:100px;
            line-height:100px">
   垂直居中
</div>

其他的垂直居中比如说:定位，flex+margin...，

各大官网的横向居中

<div >
   <div style="background:black;color:#fff;    width: 1200px;
    margin: 0 auto;height:500px">
    我是内容
    </div>
</div>

Javascript

不管是vue.js或者是react或者是 Elment亦或是Echat可视化都逃不开底层逻辑if for swith 

if(){}

根据判定的结果（真或假）决定执行给出的两种操作之一。if的返回值为真或假，可以用bool型变量进行存储;

if(条件){执行操作}

如果已知 a=1;a+1=2

if(a+1=2)返回必是true；

打印：if(a+1=2){console(1)}

输出console 1；

if中嵌套if

let a=1;

let b=2;

let c=3;
if(a<b){
if(b>c){
  console(1)
 }else{
  if(a){
  console(2)
}
}
}

输出结果：2,结果简单可见，当a<b为true则进行下一步true里面运算到b>c为false 进入到else里面的结果 则 输出：2;

当遇到

等级 1 2 3 4 5,分别对应 青铜 白银 黄金 铂金 钻石
if配合　else　if实现

let a,leave;
if(a=1){
leave=青铜
}else　if(a=1){
leave=白银 
else　if(a=1){
leave=黄金 
}else　if(a=1){
leave=铂金
}
else　if(a=1){
leave=钻石
}

感觉怪怪的

于是：switch

let　a；
switch(a){
					case 1:
						this.leave='青铜'
						break;
					case 2:
						this.leave='白银'
						break;	
					case 3:
						this.leave='黄金'
						break;	
					case 4:
						this.leave='铂金'
						break;	
					case 5:
						this.leave='钻石'
						break;										
	}

对比起来switch比较合适

当遇到

let a=[5,3,4,9,6,7,2,11,12,33,55,47,98]

只输出双数数,于是

因为数组下标从0开始，所以i=0从0开始循环；

for(let i=0;i<a.length;i++){
    if(a.length[i]%2==0){
        console(a.length[i])
    }
}

拓展知识：%，整除取余，9%3=0，10%3=1，11%3=2；

数组：

当在Java这种强类型语言中，数组声明

int arr[];//声明一个数组
arr = new int{1,2,3,4.....}//开辟空间并赋值

而在JS这种弱类型语言中

let a;
a=[1,2,3,4]

//或者 
let a=[1,2,3,4]
//又或者 
let a[];
a=[1,2,3,4]

拓展资料，弱语言在自己编写中比较简单而具有开放性的语言，当从后端取到数据，前端使用事半功倍，不管是Json亦或者XML使用弱语言直接可以获取并使用，而强类型语言列如JAVA需要先声明类型再赋值，且需要强制转换才可以转换，而JS当中 a=1可以是整数也可以是字符串；

JS事件处理；

预加载：window.onload()；

当有JS动态要渲染到网页中，可以使用预加载。

整个JS逻辑来看，需要一个启动函数，在vue中onShow(){}函数，页面每刷新或者重新进入一次，则重新加载，但是在原生的JS当中没有这个函数，于是我们设置一个并联函数，于是

$(function(
//js启动时加载的第一个函数，可以设置预加载
init()
function init(){
  //加载一个渲染函数
  getweblist()
}
   getweblist(){
   //这里面写页面加载的渲染数据
}
))

而点击事件或者其他的触发事件，可以单一写，VUE中写在methods:{}里面，事件处理；

JS闭包

function a(){
   var A1=1533
   functin b(){
   //输出
   console(A1)
}
 return b;
}
var funA=a();

funA()；

这段代码实际是可以运行的，也可以在funA函数里面调用变量A1,因为是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量;更深层的原理可以单独去了解下JS闭包，这里讲个大概；

写的太多了，撤了撤了。