前端开发

（一）Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。 官方网址是： http://twitter.github.io/bootstrap/ 最新文件下载： http://twitter.github.io/bootstrap/assets/bootstrap.zip ，下载下来的压缩包中，有一个doc目录，事实上就是官方网站的大部分页面了，是一个很好的范例。 后面的文章大部分内容是从官方网站翻译或者网络搜索而来

首先我想说明一下，我们通常说的js不是框架，是语言，即javascript，据最新世界编程语言排行榜来看，已经上升到了第7位，发展迅猛，其标准是ECMAScript，现在基本上是基于ECMAScript5。jQuery是用js写的框架，其在DOM操作上有很明显的优势，也是时下很常用的一个js框架。 至于之外还要学习那些框架呢？ 如果你说的是js框架，建议先掌握好jQuery，然后还有很多的，比如楼上提到的extjs，近几年比较流行的AngularJS，基于移动端考虑的轻量级仿jquery框架zepto，还有jquery mobile，还有适合写后端或服务端的node，等等。 如果是web前端框架，就不仅仅是涉及的js了，还有html和css。个人觉得只有这三种语言都涉及到的框架才能说得上是web前端框架。现在比较火的是Bootstrap，还有Foundation，比较古老的有jqueryUI，easyUI等等，还有其他很多很多。如果还有算上处理方案及版本升级代码迭代等，就要用到百度团队研发的fis这种了。其实内容真的很多很多，前端任重而道远啊~ 常见框架 1、flex Apache基金会今天发布了Flex 4.8版本，这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。 需要注意的是，Flex目前还在孵化阶段，还不是Apache的正式项目，Flex 4

iPad开发的局限性 在iPad上使用Safari浏览普通网站网页的时候，网页因为太大而导致需要手动放大缩小或者滑动，虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道，但时间久了我们还是会发现这样做并不方便，给用户带来的感受并不十分好。 不支持Flash 在没有越狱的iPad Safari中，网站的Flash都是无法显示的，但可以通过第三方软件或插件或者浏览器来解决，不过，即使不能显示Flash，你一样能够用HTML5和CSS3实现同样的效果。 没有鼠标光标 这意味着鼠标属性，例如鼠标悬停属性是不可能有的。 你或许可以为这个找到一些变通的办法，但是到你的用户那里这些该如何工作将会是困难的事。 滚动条不能按照预期那样起作用 滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外，滚动过程中需要两个手指的手势。（我们将在下文中进行充分的讨论） 不支持CSS固定布局 HTML 元素 position:fixed CSS属性不能正确显示，常常会使得页面停留在第一屏，无法向下翻页、放大缩小。 iPad用户侦测：User Agent(用户代理) 随着移动设备上网的普及，很多网站都会进行客户端浏览器类型侦测，主要是靠User Agent来进行识别，如果侦测到是手机浏览则可能重定向，让用户浏览移动设备专用版本。以往我们所指的移动设备，主要是手机等终端，现在

郑重声明: 本文仅供学习使用,禁止用于非法用途,否则后果自负,如有侵权,烦请告知删除,谢谢合作! 开篇明义 本文针对 自主开发 的 抢票 脚本在抢票过程中常常遇到的 请求无效 等问题,简单分析了 12306 网站的前端加密算法,更准确的说,是探究 RAIL_DEVICEID 的生成过程. 因为该 cookie 值是抢票请求的 核心基础 ,没有它将无法正确发送请求,或者一段时间后就会到期失效需要重新获取,或者明明更改了浏览器用户代理(navigator.userAgent)标识却还是被限制访问… 因为它并不是真正的客户端标识,只是迷惑性战术,浏览器唯一标识其实是 RAIL_OkLJUJ 而它却被 12306 网站设计者 故意没有添加到 cookie ,因此造成了很强的欺骗性,编程真的是一门艺术! 你以为你的爬虫已经可以正常模仿浏览器,殊不知,只要没搞懂谁才是真正的浏览器标识,那么再怎么换马甲也 难逃造假事实 . 上图展示了 RAIL_OkLJUJ 的存在位置,可能是为了 兼容市面上绝大数浏览器 ,也可能是为了 联合各种前端缓存技术作为特征码 ,总是除了 cookie 之外, RAIL_OkLJUJ 存在于 Local Storage , Session Storage , IndexedDB 和 Web SQL 等. 值得注意的是,cookie 中 故意没有设置 RAIL

尤雨溪 vuejs作者 王垠 http://www.yinwang.org/ 20位活跃在Github上的国内技术大牛 1. lifesinger （玉伯） Github主页： https://github.com/lifesinger 微博：@ 玉伯也叫射雕 玉伯（王保平），淘宝前端类库 KISSY 、前端模块化开发框架 SeaJS 、前端基础类库 Arale 的创始人。2003-2006 年，中科院物理所研究生，Fortran 与 C 程序员，喜爱实验模拟和数值计算。 2006-2008 年，在中科院软件所互联网实验室从事项目管理软件的研发，C# 与 Java 爱好者。 2008 年 4 月份加入淘宝，就职于 UED 部门。2009 年起，组建前端 架构 团队，在首页维护、全网性能优化、类库研发、知识沉淀、工具应用等方面取得了丰硕成果。 相关新闻： 【开源专访】Sea.js创始人玉伯的前端开发之路 2. BYVoid （郭家宝） 《 Node.js开发指南 》作者。 Github主页： https://github.com/BYVoid 个人博客： http://www.byvoid.com 微博：@ BYVoid 豆瓣： http://www.douban.com/people/byvoid/ BYVoid（郭家宝），清华大学计算机系2010级本科生，自由意志主义者。《

能找到一份前端开发工作，首先你起码得是一个合格的初级前端工程师。那么，什么是初级前端工程师？初级前端工程师都会做些什么？这个问题需要分为以下几个方面来说： 一、对应岗位的工作职责 初级前端，主要负责产品的功能开发，独立完成框架中设计好的交互功能和产品需求。 PS：一句话概括，初级前端的岗位职责在每家公司都是大同小异，无非是针对本公司的产品及业务线做具体的搬砖工而已。 二、技术能力要求 1、css：熟悉css常用属性以及选择器，常见hack和布局技巧； 2、html：熟悉所有的html标签属性，语义； 3、js：能独立使用第三方框架完成功能模块的开发； 4、框架：熟练掌握至少一款常见的移动端或pc端框架； 5、文档：代码编写时有编写文档的意识。 PS：类似的技能要求，相信你在各大招聘平台都可以看到，只不过每家公司对初级前端的定义不大相同罢了，都是因地制宜。 三、多人协作项目开发能力要求 1、工具：能够参与2-4人的业务组开发，并熟练使用svn或git进行代码版本管理； 2、环境：能搭建简单的本地开发环境，node.js或者php。 PS：这一点，放到以前，是不要求初级coder会的，这些都是前端负责人的事情，因为你只是一个切图仔、螺丝钉，是完成具体某个模块的小码工。 但是放到现在，2019年的门槛略高一些，这些是初级前端必须掌握的，要不然你也太low了。别人会说，你会的这些

雅虎给出了 优化网站加载速度 的34条法则（包括Yslow规则22条） 详细说明，下载转发 ponytail 的译文（来自帕兰映像）。 1.Minimize HTTP Requests 减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。 2.Use a Content Delivery Network 利用CDN技术 CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。 3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存 浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。 4.Gzip Components Gzip压缩 Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力

如果你用过Asp.net webform， 说明你也算是.NET 开发的老兵了。WEBform应该是2011-2013左右，当时还用visual studio 2005、 visual studio 2008。后来基本都用的是MVC。 如果是新开发的项目，估计没人会用webform技术。但是有些旧版本的项目，还需要维护，所以，我又不得不重新用上webform技术。 webform的程序中，大部分都是服务器控件。现在用起来，十分不习惯，新增几个curd的模块，都要浪费好多时间。所以，不得不寻求更高效的办法。 决定用户前端ajax调用后台方法进行curd的方法。但是此前，我只知道MVC的请求路由，对于webform从来没用过。所以我翻看了一下百度，和官方文档： ASP.NET AJAX 提供了另一种机制以 Web 服务类似于调用而无需创建独立.asmx 文件。 这是通过使用一种技术称为"页面方法"。 页面方法是直接在页面或代码旁置文件中嵌入具有 WebMethod 特性应用于它们的静态 (共享在 VB.NET) 方法。 通过将 WebMethod 特性应用它们可以调用使用名为 PageMethods 获取在运行时动态创建的特殊 JavaScript 对象。 后端代码： [WebMethod] public static Customer[] GetCustomersByCountry

综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单。 star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。 star:860 Front-end-Interview-questions 史上最全前端开发面试问题及答案 f2e-hub 包含 Animation，UI，dialog，Carousels，color，image，workflow 等。 star:100 awesome-javascript 一系列很棒的 javascript 库，资源。 star:3100 fks 前端技能汇总，包含前端知识架构，后端知识， linux ，书籍推荐等。 star:4000 node123 node.js 中文资料导航。 star:1200 mobile-web-favorites 移动端web开发收藏夹。 star:200 gulp-book Gulp 入门指南 样式/UI Semantic-UI 让你使用任何 HTML 标签 来表现UI控件。 这是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。 star:17500 primer CSS 风格指南。 star:3600 测试/工具 mocha 一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js

前言 我们使用php动态渲染页面时，有很多比较麻烦的地方。 在前端写好页面以后，需要后台进行修改，意味这后端程序员也需要懂前端的知识，其实渲染的工作应该交给前端来做。 前端没有写好页面的话，后端无法开始工作，需要等待前端的页面完成之后才能开始工作，拖延项目的进度。 这种渲染，属于同步渲染，先获取数据, 如果数据获取的慢了, 会严重影响整个页面渲染速度, 且数据更新需要页面刷新 【演示：同步渲染】 http 协议回顾 HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则 HTTP协议规定了 请求 和 响应 的标准 请求与请求报文 get请求的请求报文详解 //--------------------------请求行-------------------------------- // GET 请求方式 // /day02/01.php?username=pp&password=123456 请求路径+参数（注意点） // HTTP/1.1 HTTP的版本号 GET /day02/01.php?username=pp&password=123456 HTTP/1.1 //--------------------------请求头--------------------------------