Home Explore Help
Sign In
kindring
/
md
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

js任务执行部分补充

蒋文强 4 years ago
parent
66198b23c1
commit
9476fcadac
8 changed files with 157 additions and 3 deletions
Split View Show Diff Stats
  1. 2 0
      css/小细节/display.md
  2. 20 0
      css/常用css/文本.md
  3. 0 0
      css/通用css.md
  4. 3 1
      git/git分支玩法.md
  5. 5 0
      js/js奇怪技巧.md
  6. 19 1
      js/任务执行.md
  7. 80 1
      奇思妙想/index.html
  8. 28 0
      奇思妙想/switch.js

+ 2 - 0
css/小细节/display.md
View File 

@@ -0,0 +1,2 @@
 
+# display 布局小技巧
 
+1. 在css中使用 ` visbility :hidden ` 进行隐藏时,会出现占位,但是没有点击事件的情况出现

+ 20 - 0
css/常用css/文本.md
View File 

@@ -0,0 +1,20 @@
 
+# 文本相关css 处理
 
+## 文本溢出
 
+    1. 单行文本
 
+       1. 溢出隐藏
 
+          1. `overflow简单隐藏`
 
+            css代码: `overflow:hidden;` 
+       2. 溢出隐藏显示省略号
 
+          1. 使用 ` text-overflow `
 
+            css代码
 
+            ```
 
+
 
+                white-space:nowrap;
 
+                overflow: hidden;
 
+                text-overflow: ellipsis;
 
+            ``` 
+    2. 多行文本溢出
 
+         
+    4. 相关知识点
 
+       1. 文本盒子需要设置宽度来限制文本可以存在的位置
 
+       2. 在flex布局中自动撑开内容的盒子进行文本溢出处理 可以给元素的 ` width ` 设置为0来实现

+ 0 - 0
css/通用css.md
View File


+ 3 - 1
git/git分支玩法.md
View File 

@@ -4,4 +4,6 @@
 
   > branch 新的分支名字,随便输入 
     ```
 
         git checkout -b branch
 
-    ```
 
+    ```
 
++ 变基
 
+  + git rebase master

+ 5 - 0
js/js奇怪技巧.md
View File 

@@ -0,0 +1,5 @@
 
+# js中的奇怪技巧
 
+## 利用隐式类型转换
 
+    1. 字符串数字转 数字类型
 
+       1. 使用 `+0` 的方式进行自动类型转换
 
+        > 可以直接省略 + 0 可以在表达式前面直接使用 +号 如 ` +variable ` 等同于 ` toNumber(Variable) `

+ 19 - 1
js/任务执行.md
View File 

@@ -13,7 +13,25 @@
 
        4. process.nexTick
 
        5. queueMicrotask
 
 # js中异步任务执行规则
 
-    先顺序执行下去,有遇到异步任务将其放置一边,然后继续执行下面的任务,执行完同步任务后再去看异步任务中的微任务是否有执行完了的,如果有则执行,执行完后则去执行宏任务,以此来完成一次循环
 
+  1. 先顺序执行下去,有遇到异步任务将其放置一边,然后继续执行下面的任务,执行完同步任务后再去看异步任务中的微任务是否有执行完了的,如果有则执行,执行完后则去执行宏任务,以此来完成一次循环
 
+# js中async 和await的细节    
+### 1. await
 
+ 1. 在js中 await 需要在async函数内进行执行, 遇到await时会等同于 promise 任务,将会在宏任务执行时立即执行,但是在await阻塞后的任务将会被当作是微任务去进行,
 
+       
+       ```
 
+        async function fn(){
 
+            await fn2();
 
+            ...dostm
 
+        }
 
+        // 等同于
 
+        function fn(){
 
+            fn2().then(()=>{
 
+                ...dostm
 
+            })
 
+        }
 
+       ``` 
+### 2. async  
+ 1. 在js中的 async 相当于一个 promise 任务,
 
 # js中promise和setTimeout谁先执行
 
  1. 在js中的promise视为微任务,settimeout为宏任务 根据执行规则微任务先执行,所以promise会先执行
 
  2. 示例代码

+ 80 - 1
奇思妙想/index.html
View File 

@@ -22,12 +22,91 @@
 
             margin: 0;
 
             border: 0
 
         }
 
+        
+        .div {
 
+            margin: 200px;
 
+            width: 200px;
 
+            padding: 100px;
 
+            border: 1px solid black;
 
+            position: relative;
 
+        }
 
+        
+        .div2 {
 
+            margin: 200px;
 
+            width: 200px;
 
+            padding: 100px;
 
+            border: 1px solid black;
 
+            float: left;
 
+        }
 
     </style>
 
 </head>
 
 
 <body>
 
     <img src="./1_answer_a.png" alt="" class="i">
 
-    <img src="./1_answer_b.png" alt="" class="i">
 
+    <div class="div2">
 
+        <div class="div">
 
+
 
+            <div class="div">
 
+
 
+                <img src="./1_answer_b.png" alt="" class="i" onclick="drag()">
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div class="div2">
 
+
 
+        <div class="div2">
 
+
 
+            <div class="div2">
 
+
 
+                <img src="./1_answer_b.png" alt="" class="i" onclick="drag()">
 
+            </div>
 
+        </div>
 
+    </div>
 
 </body>
 
+<script>
 
+    function drag(e) {
 
+        e = e || window.event;
 
+        console.log(e.target);
 
+        console.log(e.target.offsetLeft);
 
+        console.log(getOffsetLeft(e.target));
 
+    }
 
+
 
+    function getOffsetLeft(obj) {
 
+        let tmp = obj.offsetLeft;
 
+        let val = obj.offsetParent;
 
+        while (val != null) {
 
+            tmp += val.offsetLeft;
 
+            val = val.offsetParent;
 
+        }
 
+        return tmp;
 
+    };
 
+
 
+    let arr = [
 
+            [0, 1, 1],
 
+            [1, 1, 0],
 
+            [1, 0, 0]
 
+        ]
 
+        [
 
+            [1, null, null],
 
+            [0, 0, 1],
 
+            [1, null, null]
 
+        ]
 
+        [
 
+            [1, 0, 1],
 
+            [1, 0, 1],
 
+            [0, 1, 0]
 
+        ]
 
+
 
+    function isOk(arr) {
 
+        let total = 0
 
+        for (var i = 0; i < arr.length; i++) {
 
+            // if(){
 
+
 
+            // }
 
+            total += i;
 
+        }
 
+        console.log(i)
 
+    }
 
+</script>
 
 
 </html>

+ 28 - 0
奇思妙想/switch.js
View File 

@@ -0,0 +1,28 @@
 
+let i = 9;
 
+switch (true) {
 
+    case (i < 7 && i > 2):
 
+        console.log('a')
 
+        break;
 
+    case check(i):
 
+        console.log('c')
 
+        break;
 
+    default:
 
+        console.log('s')
 
+        break;
 
+}
 
+let x = '123';
 
+switch (x) {
 
+    case (x < 7 && x > 2):
 
+        console.log('aaaa')
 
+        break;
 
+    case check(x):
 
+        console.log('ccc')
 
+        break;
 
+    default:
 
+        console.log('ssss')
 
+        break;
 
+}
 
+
 
+function check(i) {
 
+    return '123';
 
+}