scss 用法 及 es6 用法讲解
scss 用法的准备工作,下载 考拉 编译工具 且目录的名字一定不能出现中文,哪里都不能出现中文,否则就会报错
es6 用法
let 和 const
let 声明变量的方式 在 {} 代码块里面才有效;且在相同的代码块,不能声明两个相同的变量名,一旦出了这个{} 代码块 ,此变量无效
const 声明常量的方式 声明完毕后,我们不能轻易的更改声明的常量,(但不代表我们不能更改,只是更改,还不如不用他声明)
字符串介绍:
传统的字符串拼接的方式,麻烦且容易出错,所以我们的 es6 提供了一种新的 字符串拼接的方式 ``
虽然这种写法,确实要比传统的写法高明了许多,但是还是有很多想吐槽的点;
这种写法在字符串里面并不支持 js 语法了,也就是我们并不能进行 for 循环 和 条件判断,使得我们又不得不为此做出很多的处理
但是,比起传统的写法高明了很多,例如,我们使用字符串拼接的话,显得美观又漂亮
用法:我们使用英文下的反引号来代替我们之前的双引或单引 `` (键盘 tab 上面的键)
案例:let a="world";
let b=`hello ${a}`;
console.log(b) // hello world 最终的打印结果
如果我们非要用 字符串拼接的方式来进行页面的渲染,也不是不可能,我们可以使用函数的方式来解决;
案例:function fn(a){
var st= ` <div> ${a} </div> `;
return st;
}
var mt=` <div>${fn("hello")}</div> `;
这样的话 我们 的 mt 变成了 这种结构
<div>
<div> hello </div>
</div>
模块化:
common 是 nodejs 的模块化规范
amd 是 requirejs 的模块化规范
cmd 是 seajs 的模块化规范
而我们的 es6 也提供了我们的模块化规范
浏览器对于 type="module" 都是异步加载的;
模块加载一遍,就不加载了,会从内存中直接读取
开发思路:我们可以把所有的特效 分成不同的 js 文件,最后都放在一个 js 文件里面
es6 模块化的用法
export 向外暴露 变量 或 方法
如果有多个暴露的 变量 和 方法 ,我们使用 逗号 隔开
案例:01.js文件
let a="hello";
let b="world";
export {a,b}
import 接收外面暴露的变量 和 方法
案例:
像 jQuery 这种 插件我们 就可以不使用 export 向外暴露 变量 和方法 , 直接引入即可
import "jQuery.js";
像 在 01.js 中,我们有暴露的 变量 和 方法,我们就要使用 es6 语法了
import {a,b} from "01.js";
如果在 页面中 引入 模块的内容;我们只能这么写
案例:
<script type="module" src="01.js">
import {a} from "01.js" //我们如果只想使用一个变量,那么引入一个就好了;
console.log(a) // hello
</script>
注意事项:
不管是导出,还是引入,我们都需要 用 {} 将变量 和 方法 括起来 传递出去;
记住,每个 js 文件,或者在 页面中 <script> 中的语法,一旦使用 模块化开发,使用任何东西前,先看有没有引入,有没有暴露变量 和 方法 ,不然就会报错
script 标签的属性,defer 和 async 都是异步执行的;
defer 等页面渲染完,才执行
async 下载完毕就执行,
函数:
...变量名 由...加上一个具体名称的参数标识符组成,不定参数用来标识,不确定的参数
function fn(...value){
console.log(value) //打印的结果为 1,2,3
}
fn(1,2,3)
箭头函数:=> 提供了一种更加简洁的函数书写方式
基本语法:参数=>函数体
var f=v=>v //箭头后面只跟语句的话,代表 return 这条语句
等价于 function f(v){
return v
}
var f=(a,b)=>a+b //箭头后面只跟了语句的话,代表return 这条语句
var b=f(1,2);
console.log(b) //3
总结:当箭头函数没有参数或者多个参数的话,我们应该用 () 来括起来,代码书写的安全模式;
指的是形参的写法:不管参数有没有,都需要用 () 括起来,如果使用箭头函数的话,
多行语句:用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {},结果会自动返回
当箭头函数要返回对象的时候,为了区分代码块,要用 () 将对象包裹起来
案例:
var f=(id,name)=>({id:id,name:name})
f(6,2) //id=6,name=2;
关于 this 指向问题
函数体里面的 this 跟谁调用有关,谁调用这个函数,this就指向谁,在定时器中 this 通常指向 window,但是通过 => this 便可以指向函数内的 this
声明 类 class
class father{
//这个类里面的内容,讲道理构造器好一点
}
属性的写法
a="hello 我是类的属性"
里面有一个 constructor 的方法,当 new 实例化对象的时候,这个方法就会执行
方法的写法
fn(){
//方法的内容
}
实例化对象
let a=new father() // 注意:实例的时候,还是需要用 new
类的继承
class son extends father{
//这里面书写了子类的属性和方法
}
let b=new son()
这个 b 的实例种功能,便拥有了 father 的属性和方法,也拥有自己的属性和方法
less 用法:
引用 less
第一步:下载 less.js 插件
第二步:写以 .less 为后缀的文件
第三部:引入 less 文件的方式:
在 head 中加入 <link rel="stylesheet/" type="text/less" href="01.less">
引入 js 文件 <script src="less.js"></script>
less 是一门 css 的预处理语言
变量:这些变量都是不言自明的;
@nice-blue:#5b83ad //利用 @ 定义常量
#header{
color:@nice-blue; // 引用常量
}
<div id="header">
<div class="navigation"></div>
<div class="logo"></div>
</div>
less 样式写法
嵌套规则:
#header{
color:black;
.navigation{
font-size:12px;
}
.logo{
width:300px;
}
}
用 & 操作符 在那个代码块下,& 就代表了谁
作用域:一个 {} 代表一个作用域,凡是在作用域里面定义的常量,便可使用,否则不可以
sass 用法
scss 是 sass 的升级版,拥有了很多强大的功能,因为 scss 包括了 sass 的功能,所以就只说 scss 用法
scss 是一个成熟,稳定,强大的 css 预处理器,scss 是 sass3版,引入了新的语法特性
变量:$变量名:属性值
嵌套:
div{
p{
}
}
引入:@import "scss文件";
混合:通过 mixin 来分组那些需要在页面中复用的 css 声明
关键字:@mixin include
案例:
声明
@mixin border-radius($radius){
border-radius:$radius;
-ms-border-radius:$radius;
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
}
.box{
引用
@include border-radius(10px);
}
继承:
通过 % 变量名 声明
%message-common{
border:1px solid #ccc;
padding:10px;
color:#333;
}
.box{
引用
@extend %message-common;
border-color:red; //也可以更改里面的额属性
}
操作符:我们可以进行 + - * / %;
width:600px/960px*100%;
关键字:& 代表父级选择器
.box{
& 代表 .box;
}
另一种嵌套的属性
.demo{
//命令空间后带有冒号
font:{
size:30em;
}
}
翻译过来:
.demo{
font-size:30em;
}
scss 用法 及 es6 用法讲解的更多相关文章
- scss + react + webpack + es6
scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...
- heckboxlist详细用法、checkboxlist用法、checkboxlist
heckboxlist详细用法.checkboxlist用法.checkboxlist for (int i = 0; i < CheckBoxList1.Items.Count; i++) { ...
- Sybase:游标用法以及嵌套用法
Sybase:游标用法以及嵌套用法 游标示例一: --Sybase游标示例一: create PROCEDURE DBA.p_proc_test() ON EXCEPTION RESUME begin ...
- Typescript(ES6) ...用法
简单例子: //数组深拷贝 var arr2 = arr; var arr3 = [...arr]; console.log(arr===arr2); //true, 说明arr和arr2指向同一个数 ...
- (转)es6用法
如何在浏览器中使用es6的语法呢? 方法一:引入文件相关js文件 <script src="traceur.js"></script> <script ...
- ES6全面讲解
写在之前.讲解了比较常用的ES6知识点,可以快速的入门.有两个比较复杂的知识点(promise,generator)则是留在了其他文章中,在里面详细讲解. 介绍 1.历史 1.ECMAScript ...
- MyBatis从入门到精通(第2章):MyBatis XML方式的基本用法【insert用法、update用法、delete用法】
2.4 insert 用法 2.4.1 简单的 insert方法 在接口 UserMapper.java 中添加如下方法. /** * 新增用户 * @param sysUser * @retur ...
- 获得供应商最近一次报价:OVER(PARTITION BY)函数用法的实际用法
利用rownumber ,关键字partition进行小范围分页 方法一: --所有供应商对该产品最近的一次报价with oa as(select a.SupplierId ,UnitPrice,Pr ...
- xpath的一般用法与特殊用法
# xpath的使用 安装lxml from lxml import etree Selector = etree.HTML(网页代码) Selector.xpath(一段神奇的代码) xpath的一 ...
随机推荐
- 6-4 如何构建xml文档
>>> from xml.etree.ElementTree import Element,ElementTree Element 是节点元素 ElementTree是由 Eleme ...
- day04-jQuery
jQ宗旨:write less do more jq是js的框架,底层封装了js代码. jq引入: <script type="text/javascript" src=&q ...
- install-info - 更新 info/dir 项
SYNOPSIS 总览 install-info [OPTION]... [INFO-FILE [DIR-FILE]] DESCRIPTION 描述 从 Info 目录文件 DIR-FILE 中的文件 ...
- 用python实现简单的计算器(加减乘除小括号等)
需求:实现能计算类似 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4*3)/ (16-3*2) ...
- Java并发编程实战 第2章 线程安全性
编写线程安全的 代码,核心在与对共享的和可变的对象的状态的访问. 如果多个线程访问一个可变的对象时没有使用同步,那么就会出现错误.在这种情况下,有3中方式可以修复这个问题: 不在线程之间共享该状态变量 ...
- UI控件Telerik UI for ASP.NET MVC全新发布R2 2019 SP1
Telerik UI for ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验.它主要是针 ...
- Redux 聊聊
前言 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 首先明确一点的就是: Redux并不是React必须的,也没有任何依赖,你可以很自由的将他应用到各种前端框架.jQuer ...
- linux 环境下安装MySQL5.7(yum)
安装环境: CentOS7 64位,MySQL5.7 原文链接:https://blog.csdn.net/xyang81/article/details/51759200 1. 配置yum源 在My ...
- EEPROM类库的使用---断电不丢失的存储芯片
EEPROM(Electrically Erasable Programmable Read-Only Memory),电可擦可编程只读存储器——一种掉电后数据不丢失的存储芯片. EEPROM可以在不 ...
- react保存用户的输入换行,空格等等
<div dangerouslySetInnerHTML = {{ __html: '接口返回值' }} />