摘要:所以,无形之后,会增加一个顶层命名空间。导入一个空模块,是一个空对象一个模块就是一个对象。
工作中遇见的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"
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50973.html
摘要:所以,无形之后,会增加一个顶层命名空间。导入一个空模块,是一个空对象一个模块就是一个对象。 工作中遇见的CSS问题或JS技巧 rem 计算 rem等比缩放样式 方案1 @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-s...
阅读 2170·2023-04-25 15:00
阅读 2345·2021-11-18 13:14
阅读 1157·2021-11-15 11:37
阅读 3085·2021-09-24 13:55
阅读 1223·2019-08-30 15:52
阅读 2646·2019-08-29 12:35
阅读 3360·2019-08-29 11:04
阅读 1210·2019-08-26 12:13