前端开发

3 月，跳不动了？>>> 在 「grunt的初次使用」 的基础上，这一篇继续对grunt进行探索研究。这一次不再使用php进行include静态文件，而是在html里面引入。然后主要将grunt用于两个大的方向，一个是用于开发期间，一个用于上线前期打包。使用到的插件可能有些更换。具体目录如下，src目录用于开发与维护，dist目录是打包后的项目，用于上线： ├─ dist/ ├─ css/ ├─ images/ ├─ js/ └─ view/ └─ src/ ├─ css/ ├─ images/ ├─ js/ ├─ sass/ └─ view/ 在开发期间，使用到的grunt插件如下，watch插件用了监听文件，一旦文件被修改，可以让它触发浏览器自动刷新： "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-jshint": "^0.12.0", "grunt-contrib-sass": "^0.9.2", "grunt-contrib-watch": "^0.6.1" } 图片不需要压缩，css使用sass编译，js使用了requirejs，并使用jshint进行检错。其中sass编译好后会在同一目录下生成对应的css目录与文件。jshint的具体配置参考 「例子」 。 sass: { dev: { options: {

一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。 概述 REST（英文：Representational State Transfer，简称REST）描述了一个架构样式的网络系统，比如 web 应用程序。它首次出现在 2000 年 Roy Fielding 的博士论文中，Roy Fielding是 HTTP 规范的主要编写者之一。在目前主流的三种Web服务交互方案中，REST相比于SOAP（Simple Object Access protocol，简单对象访问协议）以及XML-RPC更加简单明了，无论是对URL的处理还是对Payload的编码，REST都倾向于用更加简单轻量的方法设计和实现。值得注意的是REST并没有一个明确的标准，而更像是一种设计的风格。 [1] 原则条件 REST 指的是一组架构 约束条件 和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。 Web 应用程序最重要的 REST 原则是，客户端和服务器之间的交互在请求之间是无状态的。从客户端到服务器的每个请求都必须包含理解请求所必需的信息。如果服务器在请求之间的任何时间点重启，客户端不会得到通知。此外，无状态请求可以由任何可用服务器回答，这十分适合 云计算 之类的环境

OXO1 写在前面 一.html和css 1.HTML和CSS的对比 （1）HTML只关注语义和结构，主要是对网页元素的整理和分类。 （2）CSS的主要使用场景就是美化页面，布局页面。 （3) CSS和HTML搭配使用，实现网页结构，表现分离。 2.CSS概述 （1）概念 CSS是叠层样式表（Cascading Style Sheets），也称为CSS样式表或级联样式表。 也是一种标记语言。 （2)作用 CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。 (3)CSS语法 CSS主要是由选择器以及一条或者多条申明组成。 选择器 { 属性1: 值1； 属性2: 值2； } demo : p { color: red; font-size: 12px; } 注： 选择器：指定修改样式的目标 声明： 要改成的样式 （4）CSS注释： /* 我是被注释掉的内容 */ OXO2 CSS上 选择器分为：基础选择器和复合选择器两大类。 一. 基础选择器 基础选择器分为：标签选择器，类选择器，id选择器和通配符选择器。 1.标签选择器 (1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。 (2)语法 标签名 { 属性1： 值1； 属性2：

3 月，跳不动了？>>> 上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。 全局样式开发 之前的小程序开发中，我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好，拥有类似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 构造器强大了很多。另一方面，对于业务较重的小程序来说, Component 也有性能优势。可以参照 滴滴开源小程序框架Mpx 中的 Page与Component setData性能对照 。 在开发过程中，有很多样式是可以复用的。如果在之前开发中经常使用 Bootstrap 之类的 ui 库，那么你就会习惯使用这种库的 utilities 类。但是默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。不会受到全局样式 app.wxss 的影响。所以我们只能通过增加 @import 语法来辅助各个组件进行开发。 @import "xxx.css"; 如果你使用 CSS 预处理器来辅助小程序开发的话，可能就需要通过

https://segmentfault.com/a/1190000011145364 什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。 什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js

什么是自动化的前端构建流？ 1. 自动补全css私有前缀，自动转化less\sass为css，自动转化es6\vue\jsx语法为js，自动打包小图片为base64以减少http请求，自动给js,css,甚至img加hash值，以避免浏览器缓存，自动合并压缩代码，自动刷新实时预览效果（甚至免刷新），可以按照自己喜欢的目录结构存放原始资源文件，为了方便手机等访问，不需要搭建apache、nginx等服务器实现http访问...... 如何快速开始 首先 git clone https://github.com/bjtqti/font-end-boilerplate.git 一份到本地 然后 npm install && npm run start 最后打开浏览器，运行http://localhost:4000 接下来看看目录结构： 解析一下这些目录的用途： |- dist下面存放发布的js、css 文件 （自动生成） |- node_modules 下面是npm安装的包文件 （自动创建） |- src 存放具体的业务代码 |- task 存放webpack的配置代码 |- task |- webpack.api.conf.js 用于webpack的api方式的配置文件 server.js用到 |- webpack.dev.conf.js 用于CLI方式使用webpack 的配置 |-

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成，与CSS框架 Blueprint 存在很多相似之处。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的 code.nasa.gov 和MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。 Bootstrap 2.0 的一个重大改进是添加了响应设计特性，在1.0中它并不支持，这让很多开发人员抱怨。而且为了提供更好地针对移动设备的响应式设计方案，Bootstrap 2.0采用了更为灵活的12栏网格布局。此外，它还更新了一些进度栏以及可定制的图片缩略图，并增加了一些新样式。值得关注的是，Bootstrap是一个非常轻量级的框架，2.0在压缩后也只有10KB。 更多详细信息请参考Twitter的 官方指南 和 演示示例 。 来源： https://www.cnblogs.com/eastson/archive/2012/09/20/2695401.html

移动h5开发资源整理 这2年来，移动h5开发逐渐成为一种主流，也不断趋向于成熟。硬件和浏览器的不断更新，曾经的浏览器兼容也不再是开发者的噩梦。 接触h5开发一年多，从最初的新手到现在，陆陆续续遇到过很多坑。这里把想到的一些经验与资源罗列出来，给刚入h5的同学带来一些帮助。该文章会持续更新。 内容比较多，可以点击下方『悬浮菜单按钮』进行选择需要阅读的章节。 基础知识 新手建议看看下面的在线教程。 html,css,JavaScript,jQuery在线教程： w3school在线教程： http://www.w3school.com.cn/ 菜鸟教程： http://www.runoob.com/ 参考手册： jQuery： http://hemin.cn/jq/ css： http://css.doyoe.com/ h5页面基本组成 meta viewport模板 以上支持响应式布局设计。 有用的js类库 jQuery 这个必须学会的。 在线教程： http://www.w3school.com.cn/jquery/index.asp 在线手册： http://hemin.cn/jq/ Zepto Zepto和jQuery基本是一样的，只是由于其体积更小，适合移动端使用。 如果你会用jquery，那么你也会用zepto。注意，zepto并没有实现jQuery的所有功能

组件化的思想 将一个页面中的处理逻辑放在一起，处理起来就会很复杂，不利于后续管理和扩展。 如果将页面拆分成一个个小的功能块，每个功能块实现自己的内容，之后对页面的管理和维护就变得很容易了。 注册组件的基本步骤 1.创建组件构造器 2.注册组件 3.使用组件 //创建组件构造器对象 const cpnC = Vue.extend({ template:` <div> <h2>hello world</h2> <p>hi world</p> </div> ` }) //注册组件 Vue.component('my-cpn',cpnC) //使用组件 <div id="app"> <my-cpn></my-cpn> </div> 全局组件 可以在多个Vue的实例下使用 Vue.component('my-cpn',cpnC) 局部组件 仅可以在当前Vue实例下使用 var vm = new Vue({ el: '#app', data: {}, methods: {}, components:{ mycpn: cpnC } }); 父子组件 <script> const cpnC1 = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是内容，哈哈</p> </div> ` }) const cpnC2 = Vue.extend({

前端是什么？ 工作流程为从UI处得到原型图或者效果图，在项目（网站、微信公众号、小程序、WEBAPP）中还原图片效果，然后与后台进行各种数据交互。 目前的前端市场整体还是处于迅速发展期，市场对于前端的需求也一直比较大。市场对于中高级的前端工程师需求更加迫切，所以就算入了前端的门，也需要不断的提升自己，无论你是学院派，还是培训派，还是自学派，都应该具有强烈的学习意识。 目前入门前端的人群分类 1、计算机相关专业出身系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。 优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。 缺点：部分人，前端相关细节技术不扎实，不过花时间能很快搞定。 2、非计算机出身自学（也包括计算机专业没好好学的）理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。 优点：自学能力比较强，能够根据自己的兴趣规划学习内容。 缺点：部分人对前端没有整体的学习框架 ，属于东一片，西一片，不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。 门前端时的一些困境 1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链，如果清楚 数据结构中链表结构，那么这个东西不难理解，再比如 哈希值，懂得数据结构中哈希表