国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS_JS_Tips

liukai90 / 1598人閱讀

摘要：所以，無形之后，會增加一個頂層命名空間。導入一個空模塊，是一個空對象一個模塊就是一個對象。

工作中遇見的CSS問題或JS技巧

rem 計算

rem等比縮放樣式

方案1
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}
方案2
@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}
方案三
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((window.innerWidth / designWidth) * rem2px) + "px";
方案4
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
 ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + "%";
居中方式 
absolute配合tranform

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
flex
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
absolute配合定位值
.parent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
文字換行 
.word-wrap {
  word-break: break-all; 
  overflow: auto;
}
移動端1px問題 
div:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
iOS局部使用彈性滾動效果

iOS自帶的全局滾動中有自帶的彈性滾動，而局部滾動沒有。
iOS啟動局部滾動使用彈性滾動效果

body {
    -webkit-overflow-scrolling: touch;
}

/* 局部滾動的dom節點 */
.scroll-el {
    overflow: auto;
}

將屬性掛在body上，可以避免很多奇怪的bug

出界

什么情況下會觸發出界？

全局滾動
滾動到頁面頂部（或底部）時繼續向下（向上）滑動，就會出現

局部滾動
滾動到頁面頂部（或底部）時，手指離開停下，再繼續向下（向上）滑動，就會出現

iOS解決方案：

局部滾動：使用ScrollFix組件

核心代碼：

if (startTopScroll <= 0) {
    elem.scrollTop = 1
}
if (startTopScroll + elem.offsetHeight >= elem.scrollheight) {
    elem.scrollTop = elem.scrollheight - elem.offsetHeight - 1 
}

注意：頁面的固定區域禁止touchmove默認事件

android使用局部undong，會導致滾動條顯示異常，且滾動不流暢。

Android下建議只使用全局滾動

頁面流暢滾動的方法

body上加上-webkit-overflow-scorlling: touch

iOS盡量使用局部滾動

iOS引進ScrollFix避免出界

Android下盡量使用全局滾動
盡量不用overflow: auto
使用min-height: 100%代替height: 100%

iOS下帶有滾動條且position: absolute的節點不要設置背景色

input喚起純數字軟鍵盤

通過input的type屬性來喚起純數字軟鍵盤

其它pattern屬性值并不支持

關閉首字母大寫

定制軟鍵盤的行為：
配置input節點的autocapitalize,autocorrect屬性

輸入英文用戶名首字母自動大寫

// 關閉首字母大寫
autocapitalize="off"

autocorrect屬性值的效果：

重復特殊字符 
new Array(num).join("*") // 重復num個*
JS全排列

遞歸方式:

function premutate (str) {
    var result = []

    if (str.length > 1) {
        var left = str[0]
        var rest = str.slice(1, str.length)
        var preResult = premutate(rest)

        for (var i = 0; i < preResult.length; i++) {
            for (var j = 0; j <= preResult[i].length; j++) {
                var tmp = preResult[i].slice(0, j) + left + preResult[i].slice(j, preResult[i].length)
                result.push(tmp)
            }
        }
    } else if (str.length === 1) {
        return [str]
    }
    return result    
}
URL結構 
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            href                                             │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │        host         │           path            │ hash  │
│          │  │                     ├──────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │   hostname   │ port │ pathname │     search     │       │
│          │  │                     │              │      │          ├─┬──────────────┤       │
│          │  │                     │              │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │   hostname   │ port │          │                │       │
│          │  │          │          ├──────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │        host         │          │                │       │
├──────────┴──┼──────────┴──────────┼─────────────────────┤          │                │       │
│   origin    │                     │       origin        │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│                                            href                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
iOS的300ms延遲

使用fastclick庫解決

import FastClick from "fastclick"

if ("addEventListener" in document) {
  document.addEventListener(
    "DOMContentLoaded",
    () => {
      (FastClick as any).attach(document.body)
    },
    false,
  )
}
導入和導出 
Node方式導入對應導出

一個JavaScript文件，可以向外exprots無數個變量，函數，對象，但是require(); 的時候，僅僅需要 載入一次JS文件即可。 所以，無形之后，會增加一個頂層命名空間。

導入一個空模塊，是一個空對象,一個模塊就是一個對象。

導出方式：

exports, 導出整個式子

module.exports, 導出賦值部分

導入方式：

reuire()

// 導出一個變量
exports.a = 10;

// 導入該變量
let b = require("./export")

// 導入的形式 `console.log(b)`輸出導入的值：
// { a: 10 }
// 導出一個變量，直接需要變量值使用.
// module.exports = "name";

// 導入該變量
let b = require("./export")

// 導入的形式 `console.log(b)`輸出導入的值：
// name
// 導出對象
module.exports = {
  name1: 123,
  name2: 456
}

// 導入該變量
let b = require("./export")

// 導入的形式 `console.log(b)`輸出導入的值：
// { name1: 123, name2: 456 }
// 導出對象
exports.msg = {
  name1: 1,
  name2: 2
}

// 導入該變量
let b = require("./export")

// 導入的形式 `console.log(b)`輸出導入的值：
// { msg: { name1: 1, name2: 2 } }
// 導出函數
exports.showMsg = function () {
}

// 導入該變量
// let b = require("./export")

// 導入的形式 `console.log(b)`輸出導入的值：
// { showMsg: [Function] }

// 在 引用結果 需要  通過  變量 引用對象 執行
// var b= require();
// b.showMsg();
// 導出函數
module.exports = function () {
}

// 導入該變量
let b = require("./export")

// 導入的形式 `console.log(b)`輸出導入的值：
// [Function]

// 引入文件的 變量  直接執行

對象,函數常使用的導出方式：module.exports

ES6和Typescript方式導入對應導出

導出：export
導入：import

注意點:

導出和導入，除了使用as之外，變量名相同

導出一個文件，默認是一個空對象

直接使用導入文件定義變量名，直接執行

default導出，在導入的時候可以取任意變量名

export default默認導出模塊不能使用{}對象導出

// 導出一個常量
export const foo = Math.sqrt(2)

// 導入
import { foo } from "./export"
function myFunction () {}
// 導出已經聲明的函數
export { myFunction }

導入
import { myFunction } from "./export"
// 多個導出
export function cube(x: number): number {
    return x * x * x
}
const foo: number = Math.PI * Math.sqrt(2)
export { foo } // 導出多個

// 導入
import { cube, foo } from "./export"
// 導出函數
export default function () {}
export default function fun () {}

// 導入
import myFunction from "./export" // 可以取任意變量名
// 如果導出默認，定義函數名或者變量名，或者類名
// 導入的時候可以寫和原來相同名字，也可以取任意變量名

// 導出類
export default class {}

// 導入
import Test from "./export"

一個文件（模塊）默認的導出只能有一個， 可以是類，函數， 對象等

導入整個模塊的內容，在當前作用域插入export變量，包含export文件中全部導出綁定(包括export default):

// 導出多個模塊
export function query () {}
export function update () {}

// 導入
import * as API from "./export"

將整個模塊作為附加功能導入， 但是不導入模塊的導出成員:

import "my-module"

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50973.html

相關文章

  • CSS_JS_Tips

    摘要：所以，無形之后，會增加一個頂層命名空間。導入一個空模塊，是一個空對象一個模塊就是一個對象。 工作中遇見的CSS問題或JS技巧 rem 計算 rem等比縮放樣式 方案1 @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-s...

    張春雷 評論0 收藏0

發表評論

0條評論

liukai90

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<