zoukankan      html  css  js  c++  java
  • javascript原生技巧篇

    var 有趣的小东西

    // 默认的时候
    name // ''
    window.name //''
    var name=22
    window.name // '22'
    var name=0x12
    window.name // 会先转化为数字,再转成字符串  '18'
    其他的变量正常化
    var age=12
    window.age //12
    

    关于禁用的小知识

      button.setAttribute('disabled',true)
    

    取消禁用

       button.removeAttribute('disabled')
      button.disabled=false;
      button.disabled=null;
    

    不能设置成

      button.setAttribute('disabled',false)
    因为最后解析也是字符串,也类似true
    

    ES模块

    <script type="module" src="fichero.js"></script>
    

    等效于import 'fichero.js'

    let-const

    我们发现条件声明也是块级作用域

    let a=10;
    if (true) {
      let a=1
    }
    console.log(a); //10
    

    const 声明的限制只适用于它指向的变量引用

    for循环不能应用于const ,因为迭代的变量是自增的,但是在for-offor-in 循环是有意义的

    for (const item of [1, 2, 3]) {
      
    }
    for(const key in ({name:'xx', age: 'xxx'})){
      
    }
    

    typeof

    无论是声明还是未声明,typeof 返回的都是"undefined"

    null

    undefined 值是由null值派生而来的,因此ECMA-262将他们定义成表面相等

    undefined == null
    

    科学计算法

    3.14e2
    314
    

    e 原来是科学计算法的简写懂了

    当后面为负数的时候

    314e-2
    3.14
    

    值的范围

    Number.MAX_VALUE  最小的数值
    Number.MIN_VALUE  最大的数值
    Infinity  正无穷
    -Infinity 负无穷
    

    NaN

    NaN用于表示本来要返回数值的操作失败了,在ECMAScript,0,+0,-0相除的返回NaN

    0/0  NaN
    0/-0  NaN
    

    分子非0值,分母是正负0,则返回Infinity或者-Infinity

    5/0   Infinity
    1/-0  -Infinity
    

    isNaN

    该函数会尝试把它转换为数值,把某些非数值直接转换成数值

    把任何不能转换为数值的值都会会导致这个函数返回true

    isNaN('20')   false
    isNaN('20s')  true  先强转成数值为NaN,则返回true
    isNaN('')  先强转成数值,能转0,则返回false
    

    parseInt

    parseInt() 函数更专注于字符串是否包含数值模式,字符串最前面的空格会被忽略

    如果第一个字符不是数值字符(加号或者减号),则会返回NaN

    一次检测每一个字符,直到字符串末尾,碰到非数值就会把后面都忽略

    parseInt('       1')    // 1
    parseInt('') 		 // NaN
    parseInt('s')		// NaN
    parseInt('112s')    // 112
    

    toString

    toString() 方法 数值,布尔值,对象和字符串值,都有toString方法,但是null和undefined没有toString 方法

    position

    absolute 元素会脱离文档流,通过指定元素相对最近的非static定义的祖先元素的偏移

    我们发现自己的absolute,也会以父级的absolute为基点

    <style>
        .head{
           400px;
          height: 400px;
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
        }
        .head-1{
           100%;
          height: 100%;
          position: absolute;
          top:0;
          left: 0;
          background-color: black;
        }
    </style>
    <div class="head">
      <div class="head-1"></div>
    </div>
    

    css属性查询

    <div class="head">
      <div class="head-1"></div>
      <div class="head-r"></div>
    </div>
    <style>
       .head div[class^=head-]{
           100%;
          height: 100%;
          position: absolute;
          top:0;
          left: 0;
        }
    </style>
    

    发现一个基本且有趣的动画

      <style>
        .head {
           400px;
          height: 400px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
    
        .head div[class^=head-] {
           100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
    
        .head-1 {
          background: linear-gradient(135deg, #77c8c0 0%, #267aac 100%);
        }
    
        .head-r {
          background: linear-gradient(135deg, #4AD7B8 0%, #f39c12 100%);
          z-index: 10;
          opacity: 0;
          animation: gradient 3s ease-in-out infinite;
        }
    
        @keyframes gradient {
          0%, 100% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
        }
      </style>
    <div class="head">
      <div class="head-1"></div>
      <div class="head-r"></div>
    </div>
    
    

    粒子学习

    https://www.youtube.com/watch?v=afdHgwn1XCY&feature=youtu.be

    parceljs

    0配置编写服务, 返回直接在浏览器使用,避免使用webpack

    https://parceljs.org/getting_started.html
    

    css 变量优先级

    上代码

    <style>
        .aaa {
          --box: #c41b1b;
           100px;
          height: 100px;
          border: 2px solid #00230b;
          background-color: var(--box);
        }
        .bbb{
          --box: #2a7faf;
        }
    </style>
    <div class="aaa"></div>
    <div class="aaa bbb"></div>
    

    我们发现第一个是红色第二个是蓝色

    执行上下文

    变量或函数的上下文决定了它们可以访问哪些数据,以及它们的行为,每个上下文都有一个关联的变量对象,而这个上下文中定义的所有变量和函数都存在于这个对象上

    全局上下文是最外层的上下文,也就是我们常说的window对象,通过var定义的全局变量和函数都会成为window对象的属性和方法

    使用letconst 顶级声明不会定义在全局上下文中,但在作用域链解析上效果是一样的,上下文在其执行完毕后会被销毁,包括定义在它上面的所有变量和函数

    每个函数调用都有自己的上下文,上下文中的代码在执行时候,会创建变量对象的一个作用域链,这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序

    全局上下文的变量对象始终是作用域链的最后一个变量对象

    for-await-of

    普通的数组

    async function add() {
        for await (const item of [1,2,3,4]) {
          console.log(item);
        }
      }
      add();
    
    

    同步迭代

     const iterable = ['a', 'b']
      const nexts=iterable[Symbol.iterator]();
      console.log(nexts.next());
      // {value: "a", done: false}
      console.log(nexts.next());
      // {value: "b", done: false}
      console.log(nexts.next());
      // {value: undefined, done: false}
    

    for-await-of 同步迭代

     async function add() {
        for (const item of await Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)])) {
          console.log(item);
        }
      }
      add();
    // 1
    // 2
    // 3
    

    简化

    async function add() {
        const syncIterator=[Promise.resolve('成功1'),Promise.resolve('成功2')];
        for await (const item of syncIterator){
          console.log(item);
        }
      }
      add();
    

    https://exploringjs.com/es2018-es2019/toc.html
    

    图片的有趣小知识

    <style>
    .ccc {
           300px;
          height: 300px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .bbb {
          --overflow: 50px;
          background-size: cover;
          background-position: 50% 50%;
           calc(100% - var(--overflow));
          height: calc(100% - var(--overflow));
        }
    </style>
    <div class="ccc">
        <div class="bbb" style="background-image: url(img/2.jpg);"></div>
    </div>
    

    我们可以保证图片宽高100%的情况下,给固定的尺寸当成空隙

    怎么拿到css变量

    我首先想到了DOM.getBoundingClientRect()

    哈哈哈却发现不行,这个api是拿到dom的css属性信息,但是拿不到css变量

    突然想起我们学过getComputedStyle(DOM).getPropertyValue('--prop') 可以拿到属性

    决定自己的高度的是你的态度,而不是你的才能

    记得我们是终身初学者和学习者

    总有一天我也能成为大佬

  • 相关阅读:
    windows 乱码之 gbk 与 cp936
    jdcli 在命令行反编译jar包
    建议博客园向独立博客提供发布到首页的服务
    IsByRef在什么情况下为true?
    Hibernate里自定义UserType时取不到值的问题
    解决安装Visual Studio 2010 SP1时被NDP40KB2468871.exe补丁卡死以及mscorsvw.exe进程CPU占用率高的问题
    FROM WAS7/JDK5 TO WAS6/JDK4
    C++山寨C#中的DataTable
    程序员的自我修养读书笔记
    Web开发之路
  • 原文地址:https://www.cnblogs.com/fangdongdemao/p/13976709.html
Copyright © 2011-2022 走看看