前端开发的基本方法

Posted 2023-03-09

CSS部分

盒子边倾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止点击事件/鼠标事件“穿透”

div *    pointer-events: none;   /*链接啊，点击事件啊，都没有效果了*/

用来控制元素在移动设备上使用滚动回弹效果

.main
-webkit-overflow-scrolling: touch;

可解决在ios中使用overflow:auto 形成的滚动条，滚动不流畅的情况

文字渐变效果

.text-gradient    background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text;    color: transparent;

css三角形

#triangle-up width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

实现圆弧

clip-path: ellipse(80% 60% at 50% 40%);

JS部分

javascript中检测数组的方法

(1)、typeof操作符

这种方法对一些常用的类型检查没有问题，但对array和null 都判断为object
(2)、instanceof操作符

这个操作符是检测对象的原型链是否指向构造函数的prototype对象的
(3)、对象的constructor属性

const arr = []

console.log(arr.constructor === Array) // true

(4)、Object.prototype.toString

const arr = []console.log(Object.prototype.toString.call(arr) === '[object Array]') // true

(5)、Array.isArray()

常用的字符串操作

字符串转化toString()

字符串分隔split()

字符串替换replace()

获取长度length

查询子字符串 indexOf

返回指定位置的字符串或字符串编码 charAt charCodeAt

字符串匹配 match

字符串拼接concat

字符串的切割或提取slice() substring() substr()

字符串大小写转化 toLowerCase toUpperCase

字符串去空格 trim() 用来删除字符串前后的空格

其中第9中三者的区别如下：
（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置
（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串
（3）substr()， 参数可以是负数，第一个参数是开始位置，第二个参数为切割的长度
字符串去重

const str = '11122223333'const uniqueStr = [...new Set(str)].join('')


常用的数组操作

1、Array.map()
此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
2、Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分
3、Array.filter()
此方法是将满足条件的元素作为一个新数组返回
4、Array.every()
此方法将数组所有元素进行判断返回一个布尔值，如果所有元素都符合判断条件，则返回true，否则返回false
5、Array.some()
此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件，则返回true，所有元素都不满足则返回false
6、Array.reduce()
此方法为所有元素调用返回函数
7、Array.push()
在数组最后面添加新元素
8、Array.shift()
删除数组第一个元素
9、Array.pop()
删除数组最后一个元素
10、Array.unshift()
在数组最前面增加元素
11、Array.isArray()
判断是否为一个数组
12、Array.concat()
数组拼接
13、Array.toString()
数组转化为字符串
14、Array.join() 
数组转化为字符串，并用第一个参数作为连接符
15、Array.splice(开始位置，删除个数，元素)
其中reduce使用方法为：

arr.reduce(callback,[initialValue])

跳过第一个索引。如果提供initialValue，从索引0开始。


callback （执行数组中每个值的函数，包含四个参数） 
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素） 
3、index （当前元素在数组中的索引） 
4、array （调用 reduce 的数组） initialValue （作为第一次调用 callback 的第一个参数。）
如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，

数组去重：

const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]


常用对象方法

1、Object.assign()
用于克隆，两个参数，将第二个对象分配到第一个中
2、Object.is()
用于判断两个值是否相同
//注意，该函数与==运算符不同，不会强制转换任何类型， 应该更加类似于===，但值得注意的是它会将+0和-0视作不同值
3、Object.keys()
用于返回对象可枚举的属性和方法的名称，返回一个属性或方法名称的字符串数组。
4、Object.defineProperty()
劫持变量的set和get方法,将属性添加到对象，或修改现有属性的特性

var a = ;Object.defineProperty(a, 'name',    value : 'kong',    enumerable : true //该属性是否可枚举)


5、Object.defineProperties()
可添加多个属性,与Object.defineProperty()对应,
6、isPrototypeOf

function a()
var b = new a();console.log(a.prototype.isPrototypeOf(b));//true


安卓监听可视区域变化，让输入框移动至可视区域

if (/android/gi.test(navigator.userAgent))          window.addEventListener('resize', function ()            if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')              window.setTimeout(function ()                document.activeElement.scrollIntoViewIfNeeded();
             , 0);
           
         );
       ;


vue中平滑滚动到某个位置

this.$refs.rule.scrollIntoView( block: 'start', behavior: 'smooth' )

向URL追加参数

/**
* 向URL追加参数
* @function stringifyUrlArgs
* @param string url - URL路径
* @param object params - 参数对象
* @return string
const stringifyUrlArgs = (url, params) =>
 url += (/\\?/).test(url) ? '&' : '?'
 url += Object.keys(params).map(key => `$key=$params[key]`).join('&')  return url



解析URL参数

/**
* 解析URL参数
* @function parseUrlArgs
* @param string url - 字符串
* @return objectexport const parseUrlArgs = url =>  const arr = url.match(/([^?=&]+)(=([^&]*))/g) || []  const args = arr.reduce((a, v) =>
   a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)    return a
 , )  return args



好用的JavaSrcipt库与模块（包）

日期时间处理库

1、monent.js
2、day.js
day相对于monent要轻量许多

高精度数学运算

number-precision

NP.strip(num)         // strip a number to nearest right numberNP.plus(num1, num2, num3, ...)   // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...)  // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...)  // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio)  // round a number based on ratio


实用工具库

Lodash
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、 数字、对象、字符串等

参考技术A 前端开发当然要先熟练掌握前端开发语言以及开发框架和集成开发环境了。要熟练掌握html，css，javascript，jQyuery，bootstrap，vue，react，nodejs。 参考技术B 前端逻辑复杂度主要在于数据 + UI + 交互的实现，就比如一个简单的多 tab 页的功能，可以用 CSS 实现、用 JS 实现，JS 可以通过切换 remove DOM 或者添加 classname 隐藏，虽然效果上都可以实现，remove DOM 无法原有结构的状态，添加 classname 的 CSS 方式很难实现初始化状态。除此之外还可能需要对浏览器进行兼容性处理 + 响应式。然后突然来个业务需求说要加个 iframe 嵌入别人的页面，或者改什么效果，如果之前开发的不合理，基本上要重做了。
相比后端，只输出数据模型给前端，如果业务不需要什么字段了，甚至让前端不读取好了，改都不用改。我们几次大的业务平台重构，前端基本要重新开发一遍（效果、交互完全不同），后端模型和数据库则可以递进式的复用、扩展、升级。这也是导致前端需要堆人大力出奇迹的问题