前端产品工程师

ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览ECMA news查看。ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成，他们开会推动JavaScript提案沿着一条严格的发展道路前进。 从提案到入选ECMA规范主要有以下几...

（一）补充重要知识点：（一）this、call和apply1、this的指向（1）作为对象的方法调用--------指向该对象（2）作为普通函数调用 ------指向全局对象，如果不想指向全局对象，那么需要在函数内部定义保存引用的变量。（3）构造器调用-------通常指向返回的对象，但是如果构造器显示地返回了一个object类型的对象，那么此次运算结果最终会返回这个对象。...

一、主要特性1.只依赖jQuery2.支持元素的添加和删除二、使用引入类库，包括jQuery和gridster.js：  导入gridstrer的css文件：三、gridster.js使用HTML5的data属性来定义相关的拖放元素属性，data-row为行号，data-col为列号，data-sizex为X轴元素宽度，d

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。免费开源 （ MIT license ）！ 支持商业用途。中文地址：http://www.datatables.club/分页，即时搜索和排序几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理支持不同主题 DataTables, jQuery U

function down(src) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download", ""); var evObj = document.createEvent('MouseEvents'); evObj.ini

1、获取单选框的值1、$('input[name="testradio"]:checked').val();2、$('input:radio:checked').val();3、$('input[@name="testradio"][checked]');4、$('input[name="testradio"]').filter(':checked');2、判断某个点击位置距离页面底部的距离...

$("body").on("keyup", "input[type='text']", function(){ $(this).val($(this).val().replace(/[^\d\.]/g,'')); //先把非数字的都替换掉，除了数字和. $(this).val($(this).val().replace(/^\./g,"")); //必须保证第一个为数字而不是.

1、数字转化为千分位分割符格式window.convertThousands = function (num) { var prefix, suffix, sign; if (isNaN(Number(num))) { return num; } sign = (num >= 0) ? ''...

1、典型的插件开头写法;(function (a) { "use strict"; if ("function" === typeof define && define.amd) define(["jquery", "moment", "commonMethod"], a); else if ("object" ===

$(document).click(function (e) {if (!$(e.target).hasClass('alert-container') && $(e.target).parents('.alert-container').length === 0 && !$(e.target).hasClass('btn-eco-bel...

一、优化实践从过往的经验和实践中，影响网页性能最大的因素就是浏览器的重绘和回流，React背后的虚拟DOM就是尽可能的减少浏览器的重绘和回流。以下都是实际使用中一些常见的优化实践。1、{...this.props} (不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担，因此，请慎用sprea...

使用Hooks可以让你在不适用类的情况下使用状态和其他的一些react功能。可在此讨论Hooks概览看这里：https://reactjs.org/docs/hooks-overview.html看下面代码：import { useState } from 'react';function Example() { // Declare a new state variable...

webpack4和webpack3区别还是比较大，而且webpack4虽然可以自定义配置，但是配置过程还是较为繁琐，所以我们使用react-app-rewired来减少配置，react-app-rewired传送门：https://github.com/timarney/react-app-rewiredwebpack4官方不再支持node4以下的版本，依赖node的环境版本>=6.11...

基本原则：同步->异步->回调经典实例：let promise = new Promise( function(resolve, reject) { console.log(1) setTimeout(() => console.log(2), 0) console.log(3) console.log(4) resolve(...

什么是Tree-Sharking？直接帖上一篇百度外卖的文章：Tree-Shaking性能优化实践 - 原理篇如果不想看长篇文章，我简单讲一下：简单说tree-sharking就是在前端在打包时，去掉不需要的代码。Tree-shaking 较早由 Rich_Harris 的 rollup 实现，后来，webpack2 也增加了tree-shaking 的功能。其实在更早，googl...

1、过程onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 ->  onchange -> onblurfunction handleFocus (event) { console.log('onfocus事件', 'value='...

一、XSSxss: 跨站脚本攻击（Cross Site Scripting，本来缩写是CSS，为了和层叠样式的CSS有所区别，所以在安全领域叫“XSS”。）是最常见和基本的攻击 WEB 网站方法。XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。...

React和Redux是相互独立的两个框架。一、ReactReact 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。具体参考React中文。React解决的问题（或者说React的优势）是：（1）通过给予程序员一个虚拟DOM供其渲染，这样就避免了修改真正的DOM。并且当页面状态改变时，会对页面的DOM做最小化修改，并重新呈现。这样就可以（至少在理论上），让程序员彻底不...

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: [{ type: 'value', max: function(value) { ...

什么是模块化？模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案。他按照功能将一个软件切分成许多部分单独开发,然后再组装起来,每一个部分即为模块。当使用模块化开发的时候可以避免刚刚的问题，并且让开发的效率变高，以及方便后期的维护。模块化主要解决：命名冲突（变量和函数命名可能相同），文件依赖（引入外部的文件数目、顺序问题）等。一、ES5及ES5之前如何模块化？要回答这个问题...

一、原理：利用vertical-align属性设置负值，实现样式；1.html部分<div class="other-way-login"> <span class="line"></span> <span class="txt">其他登录方式</span> <sp

import $ from 'jquery';import echarts from 'echarts';import store from '../../store';import moment from 'moment';import { getQueryString, NumberFormat, convertThousands } from '../../utils/common...

一、jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 库包含以下特性：·        HTML 元素选取·        HTML 元素操作·        CSS 操作·        HTML 事件函数·        JavaScript 特效和动画·        HTML DOM 遍历和修改

写一个parseQueryString 函数，将类似url = http://witmax.cn/index.php?key0=0&key1=1&key2=2解析成对象，结果如{key0: "0", key1: "1", key2: "2"}functionparseQueryString(url){ var str = url.split('?')[1], items =

正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。 一、模式（pattern）部分可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。每个正则表达式都可带有一或多个标志（flags），用以标明正则表达式的行为。正则表达式的匹配模式支

ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。” 可以把 ECMAScript 的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。一、属性类型ECMAScript 中有两种属性：数据属性和访问器属性。1. 数据属性数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。 [[Confi

概述：　　有些日子没有正襟危坐写博客了，互联网飞速发展的时代，技术更新迭代的速度也在加快。看着Java、Js、Swift在各领域心花路放，也是煞是羡慕。寻了寻.net的消息，也是振奋人心，.net core 1，mono，xamarin等等，但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品，产品又在不同程度的推进着技术的演进。       Web、无线、物联网、VR、

HTML中为按钮绑定event方式有三种：eg： submit 一、使用jQuery进行绑定$('#btn_submit').click(function(){});二、使用原生js绑定document.getElementById("#btn_submit").addEventListener(‘click’, function(){}

JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。avaScript一度被认为是一种玩具编程语言，它有很多缺陷，所以不被大多数后端开...

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。ES6定义generator标准的哥们借鉴了Python的generator的概念和语法。一个函数是一段完整的代码，调用一个函数就是传入参数，然后返回结果：function foo(x) {    return x + x;}var r = foo(1); /

一、原型继承在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Class，并生成新的Subclass。由于这类语言严格区分类和实例，继承实际上是类型的扩展。但是，JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。但是办法还是有的。我们先回顾Student构造函数：function Student(pro

在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8+，FireFox+，Chrome+下进行测试兼容。一、鼠标点击位置坐标相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX

let命令基本用法ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变

一、scrollHeight、offsetHeight、clientHeight的区别document.documentElement.scrollWidthdocument.documentElement.offsetWidthdocument.documentElement.clientWidthdocument.body.scrollWidthdocument.body.offset

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：function callback() {    console.log('Done');}console.log('before setTimeout()');setTimeout(c

看到蓝色经典论坛的一个讨论帖子：http://bbs.blueidea.com/thread-3072537-1-1.html从两个人的争论中，更加深入的了解了style.height和offsetHeight的区别style.height：只能在div在行内样式设置了height才能获取到例如：height document.getEl

一般来说，如果操作DOM，需要在页面加载完毕后执行。网页加载完毕后会触发一个onload事件，这个事件与window对象相关联。Simon Willison写了一个函数：addLoadEvent。不管你打算在页面加载完毕后想要执行多少函数，它都可以应付自如，他只有一个参数---在页面加载完毕时执行的函数的名字。function addLoadEvent(func){ var old

一、HTML事件处理1、优点：在HTML中指定事件处理会创建一个封装着元素属性值的函数。这个函数有一个局部变量event，也就是事件对象，通过event变量，可以直接访问事件对象。可以使用with扩展作用域，目的是想让时间处理程序无需引用就能访问其他表单字段。2、缺点：存在时差问题。事件处理程序的作用域链在不同的浏览器中有不同的结果。HTML和JavaScrip

funtion findIndex ( elem, array, i ){//实现jQuery.inArray()方法 var len; if ( array ) { if ( indexOf ) { return indexOf.call( array, elem, i ); } len =

第一章加载和执行1、将所有的标签都放在中，并放在末尾；2、尽量减少脚本的数量，相应速度将会更快；3、有多种无阻塞下载Javascript的方法：使用标签的defer和async属性；使用动态创建的元素来下载并执行代码；使用XHR对象加载Javascript代码并注入页面中。第二章数据存取1、数据共有四种存储方式：字面量、变量、数组项和对象；2、访问字面量和变