以前所做的大多是客户端方面的工作，很少参与前端的开发，一直以为web前端使用html、js和css写代码是一件挺痛苦的事情，最近在项目中参与了前端界面的开发，再次深入的对于前端的各种功能进行了学习和尝试，突然发现前端并没有以前详细的那么繁琐，很多在移动开发中的经验都能够让我们更快更好的开发出前端的功能。
1.html，css，js
对于任何一个开发者而言，这几样东西都不陌生，也都很清楚在前端界面中的作用，所以这里并不是介绍他们是什么，而是整理下如何引用其他文件中的资源。
html中引用css
在html文件中引用另一个css文件，需要使用link标签，设置rel为shtylesheet
<link href="/res/css/bootstrap.min.css" rel="stylesheet">html中引用JavaScript
在html文件中引用另一个JavaScript脚本，需要使用script标签，和直接在html中使用js类似
<script type="text/javascript" src="/res/js/cookie.js"></script>html中引用html
在html中引用其他html代码片段时，有很多方式可以实现，比如可以使用iframe标签嵌套，但我更倾向于使用jQuery的load方法进行导入
$("#header").load("/header.jsp");2.*.js &*.min.js
在使用js的过程中，用到了两种js的文件，分别以js和min.js作为扩展名，其实两种文件的作用是一样的，只是min.js类似于编译后的js，占用空间更小，而js更方便开发者阅读和修改。3.组件化开发
在早期的web开发中，虽然已经将html、css和js分离开，但在开发过程中还是以页面为单位开发的
这种开发模式的耦合性比较高，每个模块只是针对所在的页面去实现，各模块几乎没什么复用性（可能js和css的复用相对高一些）。在移动开发的过程中，会将不同的控件（比如按钮、输入框、甚至部分布局）封装成不同的View，然后在不同的场景下对这些View进行操作就可以了。在Web开发中也可以使用这种模式，我们将能够复用的部分（比如header、侧边栏等）封装出来，写在单独的html文件中，这样就就可以在我们需要的时候直接加载这些html，再封装的时候，直接使用<div>标签即可，不必再控件的html中也增加<html><body>等标签。组件化之后的架构变成了这样：
以上两张图均来自
网络
4.前后端分离
在很多传统的web应用开发中，前后端并不是分离开的，比如在struts中，可以在jsp中直接写一些jsp语句直接与后台的action交互，这里出现的问题和上面没有组件化类似，随着工程的不断扩大，程序会越来越臃肿，代码的耦合性也越来越高。因此，将前后端分离开，使得整个架构更加清晰。
后台提供统一的api接口，供前端和客户端调用，而web前端则完全通过ajax的方式与后端进行交互，比如我们要访问一个post的接口，便可以使用下面的代码
$.post("/demo", {key:"value"}, function (data) {
console.log(data);
}5.解析json
在java开发中，json的生成与解析是一件很方便的事情，无论是直接使用org,json，还是使用gson等框架，都可以对json进行处理。而在JavaScript中却没有想象的那么简单，jQuery提供了json解析的方法，但是它所能解析的json中，key和value必须都是字符串，否则就会报错。一般而言，json中的key都是字符串，但是value中却可能出现数字等其他类型的内容，经过查找，发现通过
jquery-json可以解决这个问题。解析json也比较容易，可以参考下面的代码
var parsedJson = $.toJSON(data); //解析data
var demo = $.evalJSON(parsedJson).demo; //获取data中demo对应的值6.字符串替换
在处理某些内容的时候，需要对字符串进行替换，比如把字符串中所有的a字母替换为b字母，一开始尝试使用replace('a','b')进行替换，结果发现只有第一个匹配的内容被替换掉了，后来发现需要使用正则表达式进行替换，写为：
replace(/a/g,"b")/a表示替换的内容是a，/g则表示全文中符合的条件。
7.json缩进
有的时候，我们会希望在网页中展示缩进后的json内容，jQuery为我们提供了很方便的方法
JSON.stringify(data,undefined,2)
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
