Ⅰ 前端开发的基本方法
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% at50%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
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字符串操作
字符串转化toString()
字符串分隔split()
字符串替换replace()
获取长度length
查询子字符串 indexOf
返回指定位置的字符串或字符串编码 charAt charCodeAt
字符串匹配 match
字符串拼接concat
字符串的切割或提取slice() substring() substr()
字符串大小写转化 toLowerCase toUpperCase
字符串去空格 trim() 用来删除字符串前后的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳过第一个索引。如果提供initialValue，从索引0开始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //该属性是否可枚举})
- 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);
- }
- });
- };
- /**
- * 向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参数
- * @function parseUrlArgs
- * @param {string} url - 字符串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- 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
其中第9中三者的区别如下：
（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置
（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串
（3）substr()， 参数可以是负数，第一个参数是开始位置，第二个参数为切割的长度
字符串去重
常用的数组操作
1、Array.map()
此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
2、Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分
3、Array.filter()
此方法是将满足条件的元素作为一个新数组返回
4、Array.every()
此方法将数组所有元素进行判断返回一个布尔值，如果所有元素都符合判断条件，则返回true，否则返回false
5、Array.some()
此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件，则返回true，所有元素都不满足则返回false
6、Array.rece()
此方法为所有元素调用返回函数
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(开始位置，删除个数，元素)
其中rece使用方法为：
callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 rece 的数组） initialValue （作为第一次调用 callback 的第一个参数。）
如果没有提供initialValue，rece 会从索引1的地方开始执行 callback 方法，
数组去重：
常用对象方法
1、Object.assign()
用于克隆，两个参数，将第二个对象分配到第一个中
2、Object.is()
用于判断两个值是否相同
//注意，该函数与==运算符不同，不会强制转换任何类型， 应该更加类似于===，但值得注意的是它会将+0和-0视作不同值
3、Object.keys()
用于返回对象可枚举的属性和方法的名称，返回一个属性或方法名称的字符串数组。
4、Object.defineProperty()
劫持变量的set和get方法,将属性添加到对象，或修改现有属性的特性
5、Object.defineProperties()
可添加多个属性,与Object.defineProperty()对应,
6、isPrototypeOf
安卓监听可视区域变化，让输入框移动至可视区域
vue中平滑滚动到某个位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加参数
解析URL参数
好用的JavaSrcipt库与模块（包）
日期时间处理库
1、monent.js
2、day.js
day相对于monent要轻量许多
高精度数学运算
number-precision
实用工具库
Lodash
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、 数字、对象、字符串等
Ⅱ h5支持的外部存储是哪个
1、cookie
这个存储用了很久了，而且也是以前大多网站十分喜欢的存储站点。但是也很容易被清除。同时cookie会在每一次通信过程中传向服务端。同时cookie有一个很好的地方就是，它本身有一个过期时间属性，可以用来标注一个变量的有效期。而cookie一旦过期就会被自动删除掉。
2、localStorage、sessionStorage
·localStorage: 持久存储，只要用户不主动删除就会一直存在。
·sessionStorage：面向session的浏览器存储，因此只存在于一个页面的生命周期内，关闭即清除两者均采用键值对的形式存储数据。
3、indexedDB
内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好indexDB直接操作的存储对象是ObjectStore，这有点类似其他数据库中table概念。
4、websql
内嵌在浏览器的关系型数据库，前端可以像在使用mysql、Oracle一样的写sql语句， 并存储信息。兼容性良好。存储后可在浏览器resource中查看。
5、window变量
生命周期有限，一般大家也不会去使用。但是对于全局变量的临时存储来说，还是一个不可多得的好地方。
6、flash cookie
flash cookie现在用的地方比较多。
Ⅲ 如何评价 React 实现的前端 UI 库 material-ui
做一些功能为主，不需要过多品牌调性的 WebApp
只需要前端+交互就可以快速构建做出非常不错的产品
（icon还是有点点难度，有设计比较专业的人员跟着做产品的质量会更加“产品级”一些）
框架用了很多 MD 的视觉元素，但是还是只是“看着像”，交互，动画世界观之类的实现距离最理想的 MD 还是有差距，不过基本感觉可以忽略不计。
非要挑刺的话，就是 Menu 部分的动画设计感觉有点粗糙，做得不够好（MD 的世界观，所有东西的诞生都是“扩散”出来，而不是“缩放”出来的，还有就是先“慢_快”的缓动做得还是差一点点。
Ⅳ 前端数据存储方式有哪些
为你总结了四种数据存储方式，希望可以帮到你：
1、Cookie
cookie 用于存储web页面的用户信息。
cookie 是一些数据，存储在你电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决如何记录客户端的用户信息。
2、localStorage
允许在浏览器中存储key/value对的数据。
用于长期保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
属性是只读的。
如果你想浏览器窗口关闭后还保留数据，可以使用localStorage；如果你只想将数据保存在当前会话中，可以使用sessionStorage.
3、sessionStorage
允许在浏览器中存储key/value对的数据。
数据对象临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后也将删除这些数据。
4、indexedDB
索引数据库（indexDB）API（作为HTML5 的一部分）对创建具有吩咐本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用。
同时它还有助于本地缓存数据，使传统再现Web应用程序（比如移动 Web 应用程序）能够更快的运行和响应。
想要了解或者学习更多前端知识，推荐北京尚学堂，雄厚的师资力量带给你高效的学习体验。
Ⅳ Web 前端怎样入门
方法：
第一：理清Web前端的知识结构。要想高效学习Web前端知识，首先应该搞清楚Web前端都包括哪些技术结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。
第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。
第三：注重动手实践能力的培养。学习前端开发一定要注重动手实践能力的培养，因为前端开发的细节比较多，所以只有多操作才能逐渐熟悉。
前端开发目前被称为“大前端”，整个前端开发也被赋予了更多的含义，包括Web前端开发、移动端开发、大数据呈现端开发以及部分后端开发任务等等。所以，想要在前端行业中走的更远，一定要注重知识结构的丰富性。
与其他编程语言相比，前端是公认的入行门槛较低的一门语言，但依然有很多人在学习之前会问零基础学习web前端难不难，要多久才能学会。学习的难易和时间当然是取决于学习的方式。
前端入门简单，但是深入学习之后，还是有一定学习难度的。如果你是零基础自学web前端的话，那么所花费的时间与精力是不可估计的。 如果系统学习5个月的时间可以帮助你快速成长为合格的web前端工程师。
至于视频教程，我这里有很多前端的全套教程，如果你需要的话，可以加一下我的学习交流裙裙，找我要就行了！
Ⅵ 前端未来的趋势是怎么样的
未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来，并进入技术迭代优化阶段，例如语言标准、前端框架等。但这并不代表前端领域技术就此稳定了，因为新的技术方向已经出现，并在等待着下一个风口的到来。
关于未来，我们不妨一起来预判一下前端可能会有哪些发展，不一定对，仅供参考。
1.新标准的进化与稳定
前端新标准和草案在不断更新，HTML、CSS、Javascript标准也在渐渐完善，尽管这些新的规范最终会淘汰旧标准的使用，新的项目也会以最新的标准作为开发依据，但要完全废弃旧标准，需要一段时间。
经过大版本的更新稳定，目前前端三层结构实现已经形成了HTML5、CSS3、Ecmascript 6+标准规范结合的阶段，后面标准的新变化也会越来越小，这都显示出，目前前端项目实践规范将会相对稳定一段较长的时间，后面的修改不会像之前一样具有颠覆性，这也是技术标准发展到一定成熟阶段会发生的事情。
2.应用开发技术趋于稳定
从前端应用开发框架上来看，先后经历了DOM API、MVC、MVP、MVVM、Virtual DOM、MNV*阶段，逐步解决了前端开发效率、设计模式、DOM交互性能的问题。 这些问题处理完成后，相关的框架也会进入稳定发展、版本有序迭代的时期。
也就是说前端的交互框架不会像以前那样变化频繁，相对于之前前端框架的频繁更换到现在主流框架的稳定升级。
3.技术工具的探索
前端技术效率和性能的提升当然不是仅靠前端框架都能解决的，还需要其他各方面辅助工具的支持，例如高效的调试工具、构建自动化工具、自动发布部署工具等。
所以未来前端发展过程中各种高效工具的探索仍会不断地出现，来解决特定场景下的问题，最后进行一个优胜劣汰的过程。
4.浏览器的新特性
就浏览器端应用而言，以Chrome为代表的浏览器版本和特性发展迭代极其迅速，经过多版本的迭代，浏览器上已经可以实现较多的增强和实用特性，例如Web Component、Service Worker、IndexDB、WebAssembly、WebRTC、Ecmascript 6+的支持等等。
但由于浏览器的种类和版本的多样性，我们还不能在业务中直接推广使用这些新的特性，但这些却仍然给了我们很多未来技术实现的可能，并且未来较多技术也会在这些新特性