1. 的前端开发社区有哪些
MDN
MSDN
StackOverflow
Github
Google Developer/web
各个库/框架的官方网站、文档和 demo
2. web前端开发论坛社区有哪些
推荐一个前端开发者的常用工具列表：
1. lodash：一个一致性、模块化、高性能的 JavaScript实用工具库。
2.ramda：一个很重要的库,提供了许多有用的方法,每个 javaScript程序员都应该掌握这个工具。
3.dayjs：一个轻量的处理时间和日期的 JavaScript库,js工具类和 Moment js的AP设计保持完全一样,体积 只有2kb。
4.big.js：一个小型,快速的 JavaScript库,用于任意精度 的十进制算术运算。
5.qs：一个url参数转化 (parse和stringify)的轻量级js 库。
6.three.js：基于webgl的开源3D框架，对webgl进行封装，需要专业的3D开发知识。
7.thingjs: 一款新兴的3D框架，封装物联网3D开发概念（建筑、楼层等），仅要求初级js基础。
常见的技术社区，都会有【大前端】学习资源和社区讨论，推荐spring4all、博客园、开源中国、思否、CSDN、V2ex、腾讯云、阿里云、spring4all、掘金、ITPUB，总有合适你的学习氛围。
如果有一定的美术能力，3D可视化是不错的发展方向！审美在线，又有开发基础的话，转行3D开发师不用愁。我所处的物联网3D可视化领域，这个职业很有前景哦~thingjs官网-资源中心提供视频教程、demo案例、下载插件和3D模型，好好实操一下，初学者有破了一周开发3D项目的记录！
ThingJS教程(2019版)
ThingJS教程(2020版)
CampusBuilder教程
ChartBuilder教程
ThingJS行业案例
看一下模型效果杠杠滴！
3. 前端开发有哪些社区推荐一下
前端开发有w3c，这个网站比较好用，适合新手用
4. 前端开发的基本方法
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、 数字、对象、字符串等
5. 零基础可以做哪些前端工作
零基础如果想从事前端工作，要去学习一下。随着互联网技术的不断发展，在互联网的背景下电脑早已成为人们工作、学习、生活、娱乐不可少的工具，大家电脑办公、网上购物，手机聊天等等，计算机技术已经渗透到我们生活的方方面面了。前端作为计算机热门课程之一，就业前景是很好的。
前端要学的内容主要有：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
web前端工程师是程序员里面入行门槛较低的一个职业，有意转行web前端的小伙伴可以对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，建议实地考察对比一下。
祝你学有所成，望采纳。
北大青鸟学生课堂实录
6. 大前端的前景如何
web前端开发开发的发展前景还是非常广阔的。随着互联网和移动终端的普及，雨后春笋般的互联网项目的发展，用户对于用户体验的需求不断提升，Web前端工程师逐渐成为介于视觉工程师和后端工程师之间必不可少的角色，备受大家的追捧和关注。
前端要学的主要内容：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。
想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，建议实地考察对比一下。
祝你学有所成，望采纳
北大青鸟学生课堂实录
7. 前端开发中技术支持能帮助什么东西
网站
网站是前端最基本的形态了，最基本的是PC端网站、移动端网站。可以在浏览器上打开，也可以在微信或各种APP内打开（这也是一直APP内webview打开的方式）
H5游戏
H5游戏已经见怪不怪了，当年微信退出打飞机游戏的时候，推动了H5游戏的大发展。它无需安装，通过手机浏览器即可访问，最大的特点就是：轻量、简单。
H5游戏的开发采用HTML5的canvas等制作，或者也可以使用webgl来做3D的H5游戏。
移动APP
原生的移动APP，是用Native的开发语言做的，比如要开发IOS APP，你可以用Object-c，swift等，要开发Android APP，你可以用JAVA或Kotlin等。
我们这里说的移动APP，是指使用前端技术来做的。前几年，比较火的Hybird APP框架是ionic，也有国内开发者做的mui和HTML5+框架，这些框架的技术是将html、css和JavaScript打包成一个文件，将文件放到webview中访问，最后再在外层套上原生应用的壳，生成IOS和Android的安装文件。这种APP可以做很多简单的APP，不适合交互比较复杂的APP，因为webview的性能还是存在一定的问题，在Android设备上的卡顿变现比较明显。
这两年，以React为语法基础的React Native和以Vue为语法基础的Weex框架，成为新一代使用前端技术开发移动APP的框架，它们抛弃webview使用新的渲染机制，极大的提升了APP的性能和体验。目前这两者都处在完善阶段，在未来很被看好。
桌面应用
以Nodejs和Chromium为基础的框架Electron，使得使用HTML、CSS、JavaScript开发跨操作系统的桌面应用成为可能，应用可以运行在windows、maxOS和linux系统上。
Chrome APP
Chrome浏览器上运行的插件，是运行在Chrome上的HTML应用，完全使用前端技术开发制作。
2010年Google推出了基于Chrome开发的PC端操作系统Chrome OS，特点就是速度快，设计简洁等，相对应的市场上也推出了很多基于Chrome OS的笔记本电脑，厂商有三星和戴尔等。
微信小程序
2017年1月，微信退出小程序，曾一度引爆前端行业。
小程序按照前端技术来设计开发，也做好了系统的兼容和不同设备的适配的设计，开发者只需要专注于实现业务代码即可。所以，只要熟悉前端技术就可以很快的做出一个小程序。
Web VR、Web AR
这两年，新兴并大火的技术是人工智能和机器学习，紧接着的应该就是VR、AR了吧，去年年底QQ和支付宝都在AR和VR方面做出尝试，在抢红包上进行实践。
前端技术webgl，可以在浏览器上很好的实现3D场景，Three.js是这方便很好的JavaScript框架。Chrome浏览器已经兼容Web VR，配合Daydream View，可以浏览Web VR页面。
8. 国内比较好的web前端技术社区有哪些
一直想写这篇“十日谈”，聊聊我对Web前端开发的体会，顺便解答下周围不少人的困惑和迷惘。我不打算聊太多技术，我想，通过技术的历练，得到的反思应当更重要。 我一直认为自己是“初级”前端开发工程师，一方面我入道尚浅，只有短短几年，另一方面我自知对技术的钻研并不深入，可能是由于环境的原因，当然最重要的是，我幸运的参与到互联网崛起的浪潮之巅。时势造就了一批技能薄弱但备受追捧的“弄潮者”，这在很大程度上影响我们对“技术本质”的洞察力，多年来也一直未有成体系的“前端技术”布道佳作，以至于当下多数人对前端技术的了解，盖始于表述并不严谨的岗位招聘描述，而这正恰恰反映了Web前端开发对自身的模糊定位。对于很多Web前端工程师来说，初尝禁果的快感无法持续很久，就陷入一轮又一轮的迷惘，思索自己的职业规划，试图寻找到适合自己的成长道路、看清自身技能的瓶颈，寻找突破。但遗憾的是，Web前端技术被广泛接纳时日尚短，没有多少励志的成功样板可供遵循。然而情况不总是这么糟，毕竟Web前端技术是一门“技术”，和计算机科学系出同门，只是因为互联网的高速崛起而被蒙上了迷雾，遮住了双眼，让我们傻傻看不清时局。 那么，如何定义Web前端技术岗位边界?Web前端技术的价值体现在何处?前端工程师的价值仅仅体现在物以稀为贵吗?前端工程师的初级、中级、高级和专家之间到底如何界定?当前“我”处在什么位置?接下来的路子应当怎样走?何谓前端技术之“道”?我想多数人都思考过这些问题，本篇“十日谈”里的观点可能有些偏激，但抛砖引玉，读者权且把这些言论当作一个引子吧。 第一日：初尝禁果 【上帝说：“要有光!”便有了光】 万物生灵、阳光雨露盖源于造物之初的天工开物，我们无法想象上帝创造光明之前的世界模样。但幸运的是，前端开发没有神祗般的诡魅。这个技术工种的孕育、定型、发展自有轨迹，也颇有渊源，当然，这非常容易理解。不严格的讲，在杨致远和费罗在斯坦福大学的机房里撺掇出Yahoo!时，Web前端技术就已经开始进入公众视野，只不过当时没有一个响亮的名字。从那时起，“基于浏览器端的开发”就成了软件开发的新的分支，这也是Web前端技术的核心，即不论何时何地何种系统以及怎样的设备，但凡基于浏览器，都是Web前端开发的范畴(当然，这个定义很狭隘，下文会提到)。 在2000年之后浏览器技术渐渐成熟，Web产品也越来越丰富，中国有大批年轻人开始接触互联网，有一点需要注意，大部分人接触互联网不是始于对浏览器功能的好奇，而是被浏览器窗口内的丰富内容所吸引，我们的思维模式从一开始就被限制在一个小窗口之内，以至于很长时间内我们将“视觉”认为是一种“功能”，Web产品无非是用来展现信息之用。起初的入行者无一例外对“视觉”的关注超过了对“内容”的重视，先让页面看起来漂亮，去关注html/css，沿着“视觉呈现”的思路，继续深入下去。因此，这类人是被“视觉”所吸引，从切页面入行，着迷于结构化的html和书写工整的css，喜欢简洁优雅的UI 和工整的页面设计，之后开始接触视觉特效，并使用jQuery来实现视觉特效，以此为线索，开始深入研究Dom、Bom和浏览器的渲染机制等，html/css在这些人手中就像进攻兵器，而JavaScript则更如防守的盾牌。 还有另外一群人从另一条道路接触Web前端，即工程师转行做前端，他们有较多的后台语言开发背景，从读写数据开始，渐渐触及浏览器端，接触 JavaScript库，起初是在html代码上加js逻辑，后来开始涉及html和css，他们喜欢OO、逻辑清晰、结构悦目的代码，更关注界面背后的 “程序语言”和数据逻辑。html/css在这些人手中则更像盾牌，而JavaScript更如进攻的兵器。 应当说这两类人是互补的，他们各自了解浏览器本质的一部分，一拨人对渲染引擎了如指掌，另一拨人则将JS引擎奉为至宝，其实任何一部分的优势发挥出来都能做出精品。大部分前端工程师都能从这两条渊源中找到自己的影子。但，这两类人的思维模式和观点是如此不同，以至于形成了一些不必要的对抗，比如在某些公司，干脆将Web前端技术一分为二，“切页面的”和“写js的”。这样做看上去明确了分工提高了效率，但他对员工的职业发展带来巨大伤害。在第二日 “科班秀才”中会有进一步讨论。 我应该属于第二类，即在学校正儿八经的学习C/Java和C#之类，以为大学毕业后能去做ERP软件、桌面软件或者进某些通信公司写TCP/IP相关的程序。校园招聘时选择了中国雅虎，因为当年(08年)雅虎还是有一点儿名气，而且我听说雅虎比较算技术流的公司……自此就上了贼船，一发不可收拾。 在雅虎的这段时间，我有幸接触到一股正气凛然的技术流派，也形成了我对前端技术的一些基本看法，这些基本观点一直影响我至今。 【优雅的学院派】 当年雅虎的技术流派正如日中天，拥有众多“之父”级的高人，所营造出的Hack氛围实在让人陶醉的无法自拔，那段时间我甚至宁愿加班到深夜阅读海量的文档和源代码，感觉真的很舒服，我深深的被雅虎工程师这种低调务实、精工细琢的“服务精神”所打动，而这种不起眼的优秀品质很大程度的影响雅虎产品的用户体验和高质量的技术输出。那么，何谓“服务精神”?即你所做的东西是服务于人的，要么是产品客户、要么是接手你项目的人、要么是使用你开发的功能的人，所以技术文档成为伴随代码的标配。因此，工程师之间通过代码就能做到心有灵犀的沟通。这是工程师的一项基本素质，即，思路清晰的完成项目，且配备了有价值的技术文档，如果你的程序是给其他程序员用的，则更要如此，就好比你制造一款家电都要配备说明书一样。因此，YDN成了当时最受全球程序员最喜爱的技术文档库，这种优雅务实的“学院气息”让人感觉独具魅力。 让人感觉奇怪的是，在中文社区始终未见这种学院派。甚至在具有先天开源优势的Web前端技术社区里也是波澜不惊，可见写一篇好的技术文案真的比登天还难。我所见到的大部分所谓文档索性把代码里输出数据的语句块拷贝粘贴出来，至于为什么数据格式要设计成这样、如果字段有修改怎么做、编码解码要求如何等等关键信息只字不提，或者开发者也没想过这些问题呢。因此，我们一直在强调代码的质量和可维护性，但一直以来都未见效，盖源于缺少这种“服务”意识的灌输。这种意识在下文中还会多次提到，因为它能影响你做事的每个细节，是最应当首先突破的思想纠结。 除了意识问题，另一方面是技术问题，即文笔。这也是工程师最瞧不上眼的问题，难以置信这竟然是阻碍工程师突破瓶颈的关键所在。我已看到过数不清的人在晋升这道关卡吃了大亏，很多工程师技术实力很强，但就是表达不出来，要么罗列一大堆信息毫无重点、要么毫无趣味的讲代码细节，不知云云。除非你走狗屎运碰到一个懂技术的老板，否则真的没办法逃脱码农的宿命。但大部分人还振振有词不以为然。而在Web前端开发领域情况更甚。前端工程师是最喜欢搞重构的，但在快节奏的需求面前，你很难用“提高了可维护性”、“提升了性能”这类虚无缥缈的词藻为自己争取到时间来搞重构，说的露骨一点，可能你真的对某次重构带来的实际价值无法量化，只是“感觉代码更整洁了”而已。我会在下文的“伪架构”中会分析前端工程师的这种浮躁献媚的技术情结。而这正是前端工程师最欠缺的素质之一：用数据说话，用严谨科学的论据来支撑你的观点，老板不傻，有价值的东西当然会让你去做。 当然，情况不总是这么糟糕，我们看到中文社区中已经锻炼出了很多写手，他们在用高质量的文字推销自己的技术理念，这是一个好兆头，好的文笔是可以锻炼出来的。而在职场，特别是对前端工程师这个特殊职位来讲，这种基本技能可以帮你反思梳理需求的轻重缓急，从凌乱的需求中把握七寸所在。因为当你开始认真写一封邮件的时候，这种思考已经包含其中了。 所以，雅虎技术的推销是相对成功和远播的。关键在于两方面，扎实的技术功底和高超的写手。而真正的技术大牛一定是集两者与一身，不仅钻研剑道，还能产出秘籍。这也是Yahoo!优雅的学院派气息的动力源泉。国内很多技术团体想在这方面有所建树，应当首先想清楚这一点。 【规范的破与立 1】 雅虎的技术运作非常规范，刚才已经提到，包括技术、组织、文化，一切看起来有模有样，也堪称标杆，自然成了国内很多技术团队和社区的效仿对象。一时间各种“规范“成风、各色“标准“大行其道，结果是质量参差不齐。 我们到底需要什么样的规范?雅虎的技术规范到底有何种魔力?以何种思路构建的规范才是货真价实的?规范有着怎样的生命周期?想清楚这些问题，能很大程度减轻很多Web前端工程师的思想负担，看清一部分技术本质，避免盲目跟风。