前端开发

web前端工程师是近几年的新兴职业，也是目前火爆而且高薪的职业。不同的公司也有不同的叫法，比如：网页界面开发，网站设计等，要学好web前端开发，需要掌握什么方法与技巧？ 一、div和table 这个是最简单的，也是最基础的。要熟练掌握div、form table、ul li 、p、span、font这些标签，这些都是最常用的，特别是div和table，div用于布局、table也可以用于布局，但是不灵活，基本 table是用来和数据打交道。 二、CSS 这里说的css不包括css3，一般我们看到web前端开发工程师的要求里面，有一个会使用css+html 或者 css+div 来进行界面布局，所以css是用于辅助html来布局和展示的，我们称之为“css样式”。 为什么会说css+div呢? 因为我上面说了div就是 html主要用于布局的东西，所以div就是核心掌握的东西！那么css肯定必须要配合div来使用才好。css要熟练掌握float、 position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等。 三、JS 可能前两个大家觉得还过的去，看到js就蛋疼了。 其实，js入门很简单的，不需要会很多东西的，只要会根据某个id、或者name拿到网页dom或者样式、或者值，然后会给某个id或者name的元素标签赋值

原文 http://www.cnblogs.com/leinov/p/4094138.html 一：背景 通常情况我们调试移动端页面最常用的方法就是：切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的 左边是pc端的chrome 浏览器， 右边是手机上的chrome 然后可以看到当鼠标移动到某个div上时 手机上的这个区域高亮显示 跟pc上调试某段代码效果一样 你可以修改代码 并直接在手机上反馈修改结果 三，准备 为了完成这一亮骚的移动调试功能我们需要以下准备工作 1.pc端安装最新的chrome 2.手机端安装最新的chrome ( Android机 ) 3.USB连接线 （感觉是不是too simple） Tip :之前的的chrome如果要实现这种调试需要安装一个 ADB插件 （需要FQ） 但是最新的chrome已经直接支持对Android的识别 所以也不用再在chrome上安装ADB插件了 但需要下载最新的chrome 四：步骤 下来我们逐步完成 1

第一章：模块化开发 1.1-模块化概述 1.1.1-为什么需要模块化 传统开发模式的主要问题： 命名冲突 文件依赖 通过模块化解决上述问题： 模块化就是把单独的一个功能封装到一个模块中（文件中），模块化之间互相隔离（高内聚，低耦合），但是可以通过特定的接口公开内部成员（导出），也可依赖别的模块（导入）。 模块化开发的好处，方便代码的重用，提高开发效率，并且便于后期维护。 1.1.2-模块化相关规范 浏览器端模块化规范 AMD，典型代表 Require.js CMD，典型代表 Seajs 在本篇文章中，不做过多解释，因为这两种浏览器端模块化规范已经过时。 服务器端（node）模块化规范 CommonJs规范，在node环境中使用。典型规范定义如下： 模块分为 单文件 与 包 模块成员导出： module.exports 或 exports 模块成员导入： require('模块标识符') ES6模块化规范 ES6模块化规范，是大一统的规范。 在ES6模块化未出现之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJs等模块规范。 但是这些模块化规范的标准还存在一定的差异性、局限性，并不是浏览器与服务器通用的标准规范。例如： AMD和CMD仅适用于浏览器端模块化规范 CommonJS仅适用于服务器端Node环境 因此，ES6在语言层面上定义了ES6模块化规范

1.You Might Not Need jQuery 不用 jQuery ，原生 js 如何实现，可以参考这里： You Might Not Need jQuery 。原生 js 越来越好了，如果是简单的页面，没必要引入一个庞大的 jQuery ，尤其在手机端，对速度流量敏感的地方，另外最好自己简单封装一些常用的函数，比如 toggleClass 等。。。 2. Firefox 查看源代码功能检查页面错误 页面写完后，记得用 Firefox 查看页面源代码功能，可以一眼发现未闭合标签、未转义的 HTML 字符，如果不嫌麻烦，可以提交代码到 http://validator.w3.org/ 验证 HTML 、 CSS ，下面图片来自 CSDN 当前首页源码，可以看到 Firefox 红色高亮了错误的 HTML 代码， _blank 后面多了一个双引号。 3.少用 id 如果不在页面中用 js 引用元素，尽可能不要设置元素的 id ，也尽量不要用 #main{} 来设置元素 css 样式，而是用 class 方式 .main{} ,因为 可以防止 ID 重复，造成错误 可以方便引入新 CSS 复写样式，另外应当绝对避免行内 css 样式. 4. max-device-width 使用 max-device-width 检测而不是 max-width 来兼容手机、平板等

对于前端入行现在大概有这么几种:1.大学里修前端课程，2.查资料看视频自学前端，3.参加前端培训。 对于这三种学习方式，自学前端是属于最难的一种，咱们先简单的说一下另外两种方式，然后我再着重说下自学前端。 除了自学前端外，另外两种学习方式称为被动学习。大家可以看到，不管是大学里前端课程还是培训学习，都有老师去引领，有合理的课程安排，有难度适宜的训练题，还有阶段性项目。这些对于初学者都是很重要的。以上的因素培养出了学生的两种心理，第一，自信，第二，惰性。 自信:一般老师讲的知识都比较系统，能够在技术上做一个系统合理的安排和讲述，而且多年的教法也能让老师知道怎么去教学生可以实现学习的最优。这是造就自信的一个方面，另一方面，在学习者脑子里认为，老师教的我学会了就可以了，老师布置的练习我做出来就是合格，快速完成就是优秀，至于其他老师没讲的东西，我也不用去看，应该没用。这种心理会让学习者的自信心膨胀。好处在于心态稳，学习不会乱了章法，按部就班，不急不躁。坏处就在于不懂得居安思危，盲目的自信会导致自己眼界的狭隘。 惰性:这一点儿更明显，老师教的东西不是学生主动去索取，而是老师的灌注，学习的质量有很大一部分的下降，对于学员来说，很多都认为老师讲完了，听完了就完成任务了。这种学习方式让学生吸收很慢，基本不会提高一个人学习技术的能力。这也是很多学生出来之后不懂得举一反三的原因。 下面说下自学前端

XXS跨站脚本攻击 XSS即跨站脚本（cross site script），XSS是一种经常出现在web应用中的计算机安全漏洞，也是web中最主流的攻击方式。 存储型XSS攻击 通过一些用户可以输入的界面，比如评论，填入一些非法字符，如><script>alert(document.cookie)</script>等类似的方式，导致网页做些这个“史壳郎”想要的一些操作。 这种现象的产生原因是，前端模板或者后端模板在渲染的时候没有进行字符转译，导致 <> 这样的字符直接就渲染到了页面上。所以，我们只需要在渲染前做一次转译，将这些符号转为字符实体就好了。现在的前端库，如vue，react，前端模板ejs，juicer，后端模板smarty，blade等，都已经内部做了转译了，可以直接使用。 如： 如果前端后端都没有做任何处理的话，以下这段评论在提交以后就会原封不动地展示在html上。而这个时候，script里的代码执行了，导致所有访问这个页面的用户的cookie都发送到了黑客指定的API。 前端倒是在渲染的时候可以做相应的处理，比如可以用以下方法处理： processedContent(comment) { return comment .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g,

总结：Mac前端开发环境的搭建（配置） 现在是2018年1月26日星期五，原文写于2016年1月，时隔两年，文章内的很多内容插件或多或少都有更新， 很多人在参考配置的时候也或多或少的遇到些问题，我这里在重新走一遍流程并将文档更新下，如果遇到什么问题可联系我。 新年新气象，在2016年的第一天，我入手了人生中第一台自己的电脑（大一时好友赠送的电脑在一次无意中烧坏了主板，此后便不断借用别人的或者网站的）。macbook air，身上已无分文。。。接下来半年的房租都不知道该怎么半了，都怪消费太冲动。 不过，眼下需要解决的不是房租问题，而是在新电脑上搭建开发环境，正好在搭建的时候总结一下： 1、科学上网工具：lantern 科学上网工具不是必须的，如果你想安装的话下面是Git地址，可进入安装 地址： 蓝灯(Lantern)最新版本下载 2、命令行工具：iterm2 建议安装该命令行工具，前端开发中会遇到各种通过命令行的形式来完成操作的工具，所以一款好的命令行工具是非常必须的。 官网： iterm2 虽然mac自带终端，也不是很难看，但功能不是很多，term2是mac上非常好的一款命令行工具，可以完全替代系统自带的终端。term2具有很多优点： 1、选中即复制，不用command＋c了； 2、全文查找并高亮显示：command＋f 3、方便的分屏显示：垂直分屏：command＋d，水平分屏

准备工作： 两个像素：设备像素+css像素 设备像素： 绝对单位，设备像素即设备的物理像素，对于每个设备来说，其设备像素是固定的，它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。 css像素： 适用于web编程，是前端开发在描述css样式时经常用到的像素单位。比如，设置某个div的宽度为width：200px，这个就是css像素，是一种抽象概念，实际上并不存在。 页面的缩放： 当用户放大或者缩小页面时，改变的是css像素，而设备像素不会发生改变 如：页面中一个div，它的宽度是200px，当用户操作页面，放大两倍，此时一个css像素的面变成了4个设备像素的面积：宽放大2倍x高放大两倍 页面缩放比例（zoom level）= screen.width / window.innerWidth (一般情况下可以这么计算) 设备像素比（DPR）： 在页面缩放比为1的情况下，设备像素比（DPR） = 设备像素个数 / 视觉视口css像素个数(device-width) 对于不同的设备来说设备像素比是不一样的。在早期iphone的DPR值是等于1的，但是后来引入了高密度屏幕，即为了更清晰的展示画面，在有限的设备空间内引入了更多的设备像素。所以后来iphone设备的DPR就改变了，值一般为2 场景再现： 移动端需求：给你一个750px的设计稿

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 图示 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道