前端页面优化：如何更快速将你的页面展示给用户？8 months ago再来看到lazyload的源代码，可视范围判断上下左右,写的十分完善
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
fold = $(settings.container).offset().top + $(settings.container).height();
return fold &= $(element).offset().top - settings.
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
fold = $(settings.container).offset().left + $(settings.container).width();
return fold &= $(element).offset().left - settings.
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
fold = $(settings.container).offset().
return fold &= $(element).offset().top + settings.threshold
+ $(element).height();
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
fold = $(settings.container).offset().
return fold &= $(element).offset().left + settings.threshold + $(element).width();
$.inviewport = function(element, settings) {
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
关于图片这里，除了延迟加载外，用户上传的图片以及我们所用的资源图片都应该进行压缩处理如需要进一步提高压缩率，可以使用例如：google开发的webp图片格式等..不过不是所有浏览器都支持webp格式，需要针对浏览器响应ajax局部加载数据根据上面这段代码，其实我们就可以延迟加载其他内容了，总之呢，这里我们的目的就是尽量减少不必要的请求比如现在用的很多的下拉式翻页，就是判断到页面底部之后再ajax获取下页内容如果考虑到网页只是局部更新的话，那使用ajax是很合适的好处显而易见，无需重新请求整页，小巧快速，网页展示也友好一些善用ajax对前端性能，体验都是有改善的但是也要考虑到对搜索引擎的友好，如果页面整体功能改变了，或者页面改动量大就要进行取舍了。预加载延迟加载的目的就是减少不必要的请求，在用户有需求时才请求资源所以对于用户来说，其实是有一点点“等待”的过程的一般会用loading图，等待文字来改善这里的用户体验但是有一些需求是希望尽量少出现这种“等待”过程的这里我们就可以预加载资源，如下，我们先在js中加载图片var img
= new Image();
img.src="test.png";
提前加载好了图片，用户进行下一步时，图片则是从浏览器缓存中获取多页数据也可以类似处理，页面初始可以默认加载两页数据翻到第二页时，就ajax去获取第三页内容翻到第三页时，就去获取第四页内容……总是提前预加载一页数据如此可一定程度上减少一些等待的过程总的来说延迟加载是尽量少加载资源，预加载则是判断可能要的资源，尽量去提前多加载，都是为了优化用户的体验，适用于不同场景资源合并我们项目内往往会引用多个javascript脚本，和多个css样式文件所以可以把多个脚本合并到一个js文件内，然后统一引用它就能减少http请求这里uglify-js和 clean-css 都支持多个文件合并压缩输出&uglifyjs js1.js js2.js -m -o merge.js
&cleancss -o megar.css style1.css style2.css
也可以在服务器内合并输出，比如我们看淘宝的合并：&script src="///kissy/k/6.2.4/??node-min.js,node-base-min.js,dom-base-min.js,query-selector-base-min.js,dom-extra-min.js,node-event-min.js,event-dom-base-min.js,event-base-min.js,event-dom-extra-min.js,event-gesture-min.js,event-touch-min.js,node-anim-min.js,anim-transition-min.js,anim-base-min.js,promise-min.js,base-min.js,attribute-min.js,event-custom-min.js,json-base-min.js,event-min.js,io-min.js,io-extra-min.js,io-base-min.js,io-form-min.js,cookie-min.js"&&/script&
他们则是在web服务器内做了处理，请求多个文件，会自动合并有条件的同学也可以这样进行合并引用优化引用css放在&head&内，引用js放在&/body&结束标签前，现在很多朋友都会这么做了css加载是异步的，更早的加载出样式就能更早呈现出页面js放在尾部，防止浏览器加载js而阻塞页面，造成页面“白屏”现象单独域名存放资源如果有条件的话，我们还可以启用额外的服务器，域名来存放资源这样能减少主域名的HTTP请求数，让主服务器更快响应请求还能减少主域名的cookie请求离线存储离线存储在我之前一篇文章里也提到过，在移动端应用的比较多它和缓存不同，它设置好了之后，连离线也能访问，无论用户刷新或者新窗口，链接等等使用manifest&html manifest=”/mobile.manifest”&在html上添加manifest，其中文件格式内容如：CACHE MANIFEST
##需要离线的内容
Script/jquery.js
Script/gameconfig.js
Image/home.png
Image/logo.png
##总是访问网络的内容
##访问A失败时访问B
浏览器将缓存chache内所有的内容，并且可以离线访问，只要文件发生任何改变都将会重新读取并刷新全部缓存，所以更改注释是个更新缓存的好方法这里要注意的是1，添加了manifest的当前网页也会被缓存 所以推荐的方式是页面缓存，页面动态内容全部用ajax获取，所以在移动网站项目设计开始就要注意这个问题2，页面中添加iframe 然后子页面引用manifest想达到缓存资源而不缓存当前页面内容，是无效的。本地存储localStorage本地存储数据一直是网页端的弱项，在没有HTML5的localStorage前，用cookie可以保存一点数据但付出的代价很大，cookie能保存的数据很少，并且它会伴随着每一次请求一起发送localStorage就好多了，默认5MB的大小，除非用户手动清除，否则一直不过期，就连IE8浏览器都支持这里要注意，localStorage和cookie一样受到跨域的限制可以使用domain控制document.domain=""；
css3替换js动画在js中，我们实现动画，就是利用定时器循环改变dom元素的属性来达到动画效果但是许多属性更改之后会造成浏览器重绘，增加性能消耗当然浏览器更新换代也做了许多优化，我们优化js，css减少重绘，也能改进动画性能但是想一想，究竟应不应该让js去实现页面动画呢？css3就是往这方面发展，让js更纯粹的去实现业务逻辑页面效果之类的事情就让css去做吧并且css3在动画效率上面也有增强，浏览器会单独处理css3动画，不占用js主线程，还可以硬件加速将来还有提升的可能，所以快把我们的js动画替换为css3吧！替换flash同样更迭的还有flash，当初flash是为了弥补网页展现的不足而出现的“插件”而现在网页标准一次次升级，html5的出现，再加上flash自身也有各种漏洞，性能问题尤其是现在flash在移动端的支持很少，都加快了我们替换flash的步伐以上内容转自 喜欢本文的，可以关注，有问题可以加群交流欢迎大家来“”专栏投稿47收藏分享举报文章被以下专栏收录推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&一技在手，天下我有！web前端开发零基础交流学习群：&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&&,&urlToken&:&web-F211&,&id&:16056,&imagePath&:&e372a7bed6084f37bdcd8c.jpeg&,&slug&:&web-F211&,&applyReason&:&0&,&name&:&前端开发&,&title&:&前端开发&,&url&:&https:\u002F\\u002Fweb-F211&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:7316,&avatar&:{&id&:&e372a7bed6084f37bdcd8c&,&template&:&https:\u002F\\u002F{id}_{size}.jpeg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fe372a7bed6084f37bdcd8c_l.jpeg&,&articlesCount&:55},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-835ec8fe03fe300cfca6bfef_r.png&,&lastUpdated&:,&imagePath&:&v2-835ec8fe03fe300cfca6bfef.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[225,7912,98],&summary&:&现在许多公司往往注重后端优化，而忽略了前端优化想想如果辛苦优化了服务器，后台，排查了sql，却在最后页面加载展示的时候很慢，也得不偿失其实，前后台优化都是相辅相成的 后台优化好了，响应请求速度快，前台展示的更迅速，前台优化了不必要的请求，后台…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T23:15:36+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2355732,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&前端页面优化：如何更快速将你的页面展示给用户？&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:16056,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-835ec8fe03fe300cfca6bfef_r.png&,&author&:{&bio&:&一个前端老鸟&,&isFollowing&:false,&hash&:&cc7f3f00fcc5a3f178fac8&,&uid&:059100,&isOrg&:false,&slug&:&F211&,&isFollowed&:false,&description&:&&,&name&:&通哥&,&profileUrl&:&https:\u002F\\u002Fpeople\u002FF211&,&avatar&:{&id&:&v2-bac1e3e5d4af&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:true},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:559191}],&title&:&前端页面优化：如何更快速将你的页面展示给用户？&,&author&:&F211&,&content&:&现在许多公司往往注重后端优化，而忽略了前端优化想想如果辛苦优化了服务器，后台，排查了sql，却在最后页面加载展示的时候很慢，也得不偿失其实，前后台优化都是相辅相成的\u003Cbr\u003E后台优化好了，响应请求速度快，前台展示的更迅速，前台优化了不必要的请求，后台压力也会更小。\u003Ch2\u003E请求优化\u003C\u002Fh2\u003E\u003Cp\u003E首先我们来优化HTTP请求数\u003C\u002Fp\u003E\u003Cp\u003E由于用户浏览的，往往只是局部网页，\u003Cbr\u003E所以只加载用户可视范围内的资源，就会减少一些不必要的请求，也会减少浏览器加载资源的消耗\u003Cbr\u003E考虑到移动端可视范围，网络流量，性能，延迟加载作用尤为明显\u003C\u002Fp\u003E\u003Cbr\u003E图片延迟加载\u003Cbr\u003E\u003Cp\u003E适合延迟加载的东西很多，最需要的当然是图片。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E图片延迟加载的原理就首先将要延迟加载的图片src替换为空白图片或者参数指定的loading图\u003Cbr\u003E然后根据当前元素的位置(offset)来判断是否在页面可视范围(页面宽\u002F高度+滚动宽\u002F高度)\u003C\u002Fp\u003E\u003Cp\u003E如果在，就将真实图片资源路径替换回src让浏览器加载\u003C\u002Fp\u003E\u003Cp\u003E防止浏览器解析到HTML中&img&标签的src属性就开始下载资源，最好将原&img&的src属性去掉\u003Cbr\u003E统一配置lazyload的参数去加载loading图吧,如我们项目中这样：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E $(\&.main_content img\&).lazyload({\n
placeholder: \&\u002Fimages\u002Floading.gif\&,\n
threshold:200\n
});\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E再来看到lazyload的源代码，可视范围判断上下左右,写的十分完善\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
$.belowthefold = function(element, settings) {\\n\n
if (settings.container === undefined || settings.container === window) {\n
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();\n
} else {\n
fold = $(settings.container).offset().top + $(settings.container).height();\n
return fold &= $(element).offset().top - settings.\n
$.rightoffold = function(element, settings) {\\n\n
if (settings.container === undefined || settings.container === window) {\n
fold = $window.width() + $window.scrollLeft();\n
} else {\n
fold = $(settings.container).offset().left + $(settings.container).width();\n
return fold &= $(element).offset().left - settings.\n
$.abovethetop = function(element, settings) {\\n\n
if (settings.container === undefined || settings.container === window) {\n
fold = $window.scrollTop();\n
} else {\n
fold = $(settings.container).offset().\n
return fold &= $(element).offset().top + settings.threshold
+ $(element).height();\n
$.leftofbegin = function(element, settings) {\\n\n
if (settings.container === undefined || settings.container === window) {\n
fold = $window.scrollLeft();\n
} else {\n
fold = $(settings.container).offset().\n
return fold &= $(element).offset().left + settings.threshold + $(element).width();\n
$.inviewport = function(element, settings) {\n
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&\n
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);\n
};\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E关于图片这里，除了延迟加载外，用户上传的图片以及我们所用的资源图片都应该进行压缩处理\u003Cbr\u003E如需要进一步提高压缩率，可以使用例如：google开发的webp图片格式等..\u003Cbr\u003E不过不是所有浏览器都支持webp格式，需要针对浏览器响应\u003C\u002Fp\u003E\u003Ch2\u003Eajax局部加载数据\u003C\u002Fh2\u003E\u003Cp\u003E根据上面这段代码，其实我们就可以延迟加载其他内容了，\u003Cbr\u003E总之呢，这里我们的目的就是尽量减少不必要的请求\u003C\u002Fp\u003E\u003Cp\u003E比如现在用的很多的下拉式翻页，就是判断到页面底部之后再ajax获取下页内容\u003C\u002Fp\u003E\u003Cp\u003E如果考虑到网页只是局部更新的话，那使用ajax是很合适的\u003Cbr\u003E好处显而易见，无需重新请求整页，小巧快速，网页展示也友好一些\u003C\u002Fp\u003E\u003Cp\u003E善用ajax对前端性能，体验都是有改善的\u003C\u002Fp\u003E\u003Cp\u003E但是也要考虑到对搜索引擎的友好，\u003Cbr\u003E如果页面整体功能改变了，或者页面改动量大就要进行取舍了。\u003C\u002Fp\u003E\u003Ch2\u003E预加载\u003C\u002Fh2\u003E\u003Cp\u003E延迟加载的目的就是减少不必要的请求，在用户有需求时才请求资源\u003Cbr\u003E所以对于用户来说，其实是有一点点“等待”的过程的\u003C\u002Fp\u003E\u003Cp\u003E一般会用loading图，等待文字来改善这里的用户体验\u003C\u002Fp\u003E\u003Cp\u003E但是有一些需求是希望尽量少出现这种“等待”过程的\u003C\u002Fp\u003E\u003Cp\u003E这里我们就可以预加载资源，如下，我们先在js中加载图片\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar img
= new Image();\nimg.src=\&test.png\&;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E提前加载好了图片，用户进行下一步时，图片则是从浏览器缓存中获取\u003C\u002Fp\u003E\u003Cp\u003E多页数据也可以类似处理，页面初始可以默认加载两页数据\u003Cbr\u003E翻到第二页时，就ajax去获取第三页内容\u003Cbr\u003E翻到第三页时，就去获取第四页内容……\u003Cbr\u003E总是提前预加载一页数据\u003C\u002Fp\u003E\u003Cp\u003E如此可一定程度上减少一些等待的过程\u003C\u002Fp\u003E\u003Cp\u003E总的来说延迟加载是尽量少加载资源，预加载则是判断可能要的资源，尽量去提前多加载，\u003C\u002Fp\u003E\u003Cp\u003E都是为了优化用户的体验，适用于不同场景\u003C\u002Fp\u003E\u003Ch2\u003E资源合并\u003C\u002Fh2\u003E\u003Cp\u003E我们项目内往往会引用多个javascript脚本，和多个css样式文件\u003Cbr\u003E所以可以把多个脚本合并到一个js文件内，然后统一引用它就能减少http请求\u003C\u002Fp\u003E\u003Cp\u003E这里uglify-js和 clean-css 都支持多个文件合并压缩输出\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&uglifyjs js1.js js2.js -m -o merge.js\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&cleancss -o megar.css style1.css style2.css\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E也可以在服务器内合并输出，比如我们看淘宝的合并：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&script src=\&\u002F\\u002Fkissy\u002Fk\u002F6.2.4\u002F??node-min.js,node-base-min.js,dom-base-min.js,query-selector-base-min.js,dom-extra-min.js,node-event-min.js,event-dom-base-min.js,event-base-min.js,event-dom-extra-min.js,event-gesture-min.js,event-touch-min.js,node-anim-min.js,anim-transition-min.js,anim-base-min.js,promise-min.js,base-min.js,attribute-min.js,event-custom-min.js,json-base-min.js,event-min.js,io-min.js,io-extra-min.js,io-base-min.js,io-form-min.js,cookie-min.js\&&&\u002Fscript&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E他们则是在web服务器内做了处理，请求多个文件，会自动合并\u003Cbr\u003E有条件的同学也可以这样进行合并\u003C\u002Fp\u003E\u003Ch2\u003E引用优化\u003C\u002Fh2\u003E\u003Cp\u003E引用css放在&head&内，引用js放在&\u002Fbody&结束标签前，现在很多朋友都会这么做了\u003C\u002Fp\u003E\u003Cp\u003Ecss加载是异步的，更早的加载出样式就能更早呈现出页面\u003Cbr\u003Ejs放在尾部，防止浏览器加载js而阻塞页面，造成页面“白屏”现象\u003C\u002Fp\u003E\u003Ch2\u003E单独域名存放资源\u003C\u002Fh2\u003E\u003Cp\u003E如果有条件的话，我们还可以启用额外的服务器，域名来存放资源\u003C\u002Fp\u003E\u003Cp\u003E这样能减少主域名的HTTP请求数，让主服务器更快响应请求\u003Cbr\u003E还能减少主域名的cookie请求\u003C\u002Fp\u003E\u003Ch2\u003E离线存储\u003C\u002Fh2\u003E\u003Cp\u003E离线存储在我之前一篇文章里也提到过，在移动端应用的比较多\u003Cbr\u003E它和缓存不同，它设置好了之后，连离线也能访问，无论用户刷新或者新窗口，链接等等\u003C\u002Fp\u003E\u003Cp\u003E使用manifest\u003Cbr\u003E&html manifest=”\u002Fmobile.manifest”&\u003Cbr\u003E在html上添加manifest，其中文件格式内容如：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003ECACHE MANIFEST\n##需要离线的内容\nCACHE:\n\nScript\u002Fjquery.js\nScript\u002Fgameconfig.js\n\n\nImage\u002Fhome.png\nImage\u002Flogo.png\n\n##总是访问网络的内容\nNETWORK:\n*\n##访问A失败时访问B\nFALLBACK\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E浏览器将缓存chache内所有的内容，并且可以离线访问，只要文件发生任何改变都将会重新读取并刷新全部缓存，所以更改注释是个更新缓存的好方法\u003C\u002Fp\u003E\u003Cp\u003E这里要注意的是\u003Cbr\u003E1，添加了manifest的当前网页也会被缓存 所以推荐的方式是页面缓存，页面动态内容全部用ajax获取，所以在移动网站项目设计开始就要注意这个问题\u003Cbr\u003E2，页面中添加iframe 然后子页面引用manifest想达到缓存资源而不缓存当前页面内容，是无效的。\u003C\u002Fp\u003E\u003Ch2\u003E本地存储localStorage\u003C\u002Fh2\u003E\u003Cp\u003E本地存储数据一直是网页端的弱项，在没有HTML5的localStorage前，用cookie可以保存一点数据\u003Cbr\u003E但付出的代价很大，cookie能保存的数据很少，并且它会伴随着每一次请求一起发送\u003C\u002Fp\u003E\u003Cp\u003ElocalStorage就好多了，默认5MB的大小，除非用户手动清除，否则一直不过期，就连IE8浏览器都支持\u003C\u002Fp\u003E\u003Cp\u003E这里要注意，localStorage和cookie一样受到跨域的限制\u003Cbr\u003E可以使用domain控制\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Edocument.domain=\&\&；\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003Ecss3替换js动画\u003C\u002Fh2\u003E\u003Cp\u003E在js中，我们实现动画，就是利用定时器循环改变dom元素的属性来达到动画效果\u003Cbr\u003E但是许多属性更改之后会造成浏览器重绘，增加性能消耗\u003C\u002Fp\u003E\u003Cp\u003E当然浏览器更新换代也做了许多优化，我们优化js，css减少重绘，也能改进动画性能\u003Cbr\u003E但是想一想，究竟应不应该让js去实现页面动画呢？\u003C\u002Fp\u003E\u003Cp\u003Ecss3就是往这方面发展，让js更纯粹的去实现业务逻辑\u003Cbr\u003E页面效果之类的事情就让css去做吧\u003C\u002Fp\u003E\u003Cp\u003E并且css3在动画效率上面也有增强，浏览器会单独处理css3动画，不占用js主线程，还可以硬件加速\u003Cbr\u003E将来还有提升的可能，所以快把我们的js动画替换为css3吧！\u003C\u002Fp\u003E\u003Ch2\u003E替换flash\u003C\u002Fh2\u003E\u003Cp\u003E同样更迭的还有flash，当初flash是为了弥补网页展现的不足而出现的“插件”\u003Cbr\u003E而现在网页标准一次次升级，html5的出现，再加上flash自身也有各种漏洞，性能问题\u003Cbr\u003E尤其是现在flash在移动端的支持很少，都加快了我们替换flash的步伐\u003C\u002Fp\u003E\u003Cbr\u003E以上内容转自 \u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Fwingkun\u002Fp\u002F6014259.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E更快速将你的页面展示给用户[前端优化篇] - wingkun - 博客园\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Ch2\u003E喜欢本文的，可以关注\u003Ca href=\&https:\u002F\\u002Fpeople\u002FF211\u002Factivities\& class=\&internal\&\u003E通哥 - 知乎\u003C\u002Fa\u003E，有问题可以加群交流\u003C\u002Fh2\u003E\u003Ch2\u003E欢迎大家来“\u003Ca href=\&https:\u002F\\u002Fweb-F211\& class=\&internal\&\u003Eweb前端开发\u003C\u002Fa\u003E”专栏投稿\u003C\u002Fh2\u003E&,&updated&:new Date(&T15:15:36.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:5,&collapsedCount&:0,&likeCount&:47,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-835ec8fe03fe300cfca6bfef_r.png&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程师&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Web 开发&}],&adminClosedComment&:false,&titleImageSize&:{&width&:905,&height&:417},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&web-F211&,&name&:&前端开发&},&tipjarState&:&activated&,&tipjarTagLine&:&真诚赞赏，手留余香&,&sourceUrl&:&&,&pageCommentsCount&:5,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T23:15:36+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&前端工程师又不乏对知识与故事的追求与了解&,&isFollowing&:false,&hash&:&2fc6774fa0ecd3df13c6ff72e07834bc&,&uid&:263400,&isOrg&:false,&slug&:&xue-wu-zhi-jing-11-87&,&isFollowed&:false,&description&:&&,&name&:&学无止境&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fxue-wu-zhi-jing-11-87&,&avatar&:{&id&:&v2-25fef58320bcccbaab03c32b3cce4d95&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&学生~&,&isFollowing&:false,&hash&:&398b94f0bc893716bbc1fd&,&uid&:04,&isOrg&:false,&slug&:&lou-lu-ya&,&isFollowed&:false,&description&:&&,&name&:&蜡笔的彩色天空&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Flou-lu-ya&,&avatar&:{&id&:&f4de60b3dc699dea0f55cb48ce0138e5&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&Node工程师还没成&,&isFollowing&:false,&hash&:&b9e0c4b777b2f71eac3ce3&,&uid&:56,&isOrg&:false,&slug&:&qian-bo-kang&,&isFollowed&:false,&description&:&&,&name&:&Stormy&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fqian-bo-kang&,&avatar&:{&id&:&abb21cde7b227f&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&前端开发&,&isFollowing&:false,&hash&:&d500b85e5a78fb97c10029&,&uid&:400700,&isOrg&:false,&slug&:&wu-li-juan-80&,&isFollowed&:false,&description&:&&,&name&:&吴藜桊&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwu-li-juan-80&,&avatar&:{&id&:&dfc984a077fd3c4cc31f&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&daa86052cdcd7c379a9d3285acbbfe6b&,&uid&:303200,&isOrg&:false,&slug&:&hai-hai-11-85&,&isFollowed&:false,&description&:&&,&name&:&嗨嗨&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fhai-hai-11-85&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&现在许多公司往往注重后端优化，而忽略了前端优化想想如果辛苦优化了服务器，后台，排查了sql，却在最后页面加载展示的时候很慢，也得不偿失其实，前后台优化都是相辅相成的 后台优化好了，响应请求速度快，前台展示的更迅速，前台优化了不必要的请求，后台…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-058abdfd40df_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&HTML&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&CSS&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&一个前端老鸟&,&isFollowing&:false,&hash&:&cc7f3f00fcc5a3f178fac8&,&uid&:059100,&isOrg&:false,&slug&:&F211&,&isFollowed&:false,&description&:&&,&name&:&通哥&,&profileUrl&:&https:\u002F\\u002Fpeople\u002FF211&,&avatar&:{&id&:&v2-bac1e3e5d4af&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:true},&column&:{&slug&:&web-F211&,&name&:&前端开发&},&content&:&\u003Ch1\u003EMarkdown——入门指南\u003C\u002Fh1\u003E\u003Cblockquote\u003E\u003Cp\u003EMarkdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch2\u003E我该用什么工具？\u003C\u002Fh2\u003E\u003Cp\u003EMac 平台\u003Cbr\u003E在 Mac OS X 上，我强烈建议你用 Mou 这款免费且十分好用的 Markdown 编辑器，它支持实时预览，既左边是你编辑 Markdown 语言，右边会实时的生成预览效果(笔者用的是MacDown这个软件)\u003C\u002Fp\u003E\u003Cp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-282a4a8101cba9ee3b29_b.jpg\& data-rawwidth=\&800\& data-rawheight=\&674\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&http:\u002F\\u002Fv2-282a4a8101cba9ee3b29_r.jpg\&\u003E\u003Cbr\u003E\u003Cbr\u003EWindows、iOS、Web 平台\u003Cbr\u003E笔者并未使用过 Windows 下的 Markdown 工具，但经朋友介绍，有两款还算不错，一款叫 MarkdownPad ，另一款叫 MarkPad。\u003C\u002Fp\u003E\u003Cp\u003EiOS 端已有相当多的 app 支持 Markdown 语法编辑，例如 Drafts、Day One、iA Writer 等。\u003Cbr\u003E如果你用web端 Draftin 这款在线 MD 编辑器也近乎完美。\u003C\u002Fp\u003E\u003Ch2\u003EMarkdown 语法的简要规则\u003C\u002Fh2\u003E\u003Ch3\u003E标题\u003C\u002Fh3\u003E\u003Cp\u003E# 一级标题\u003Cbr\u003E## 二级标题\u003Cbr\u003E### 三级标题\u003Cbr\u003E#### 四级标题\u003Cbr\u003E##### 五级标题\u003Cbr\u003E###### 六级标题\u003Cbr\u003E以此类推，总共六级标题，建议在#号后加一个空格，这是最标准的 Markdown 语法。\u003Cbr\u003E以下是效果\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-ad6d9d4ba66d7c38b446789ded063818_b.jpg\& data-rawwidth=\&521\& data-rawheight=\&336\& class=\&origin_image zh-lightbox-thumb\& width=\&521\& data-original=\&http:\u002F\\u002Fv2-ad6d9d4ba66d7c38b446789ded063818_r.jpg\&\u003E\u003Cul\u003E\u003Cli\u003E标题是每篇文章都需要也是最常用的格式，在 Markdown 中，如果一段文字被定义为标题，只要在这段文字前加 # 号即可。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch3\u003E列表\u003C\u002Fh3\u003E\u003Cp\u003E熟悉 HTML 的同学肯定知道有序列表与无序列表的区别，在 Markdown 下，列表的显示只需要在文字前加上 – 或 * 即可变为无序列表，有序列表则直接在文字前加1. 2. 3. 符号要和文字之间加上一个字符的空格。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-20cf3b4f43f857fb9b57a7b89cfea1ec_b.jpg\& data-rawwidth=\&476\& data-rawheight=\&431\& class=\&origin_image zh-lightbox-thumb\& width=\&476\& data-original=\&http:\u002F\\u002Fv2-20cf3b4f43f857fb9b57a7b89cfea1ec_r.jpg\&\u003E\u003Ch3\u003E引用\u003C\u002Fh3\u003E\u003Cp\u003E如果你需要引用一小段别处的句子，那么就要用引用的格式。\u003C\u002Fp\u003E\u003Cp\u003E& 例如这样\u003Cbr\u003E只需要在文本前加入 & 这种尖括号（大于号）即可\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-eb57b986e07c6196dcd4d9c1f00bf98a_b.jpg\& data-rawwidth=\&504\& data-rawheight=\&336\& class=\&origin_image zh-lightbox-thumb\& width=\&504\& data-original=\&http:\u002F\\u002Fv2-eb57b986e07c6196dcd4d9c1f00bf98a_r.jpg\&\u003E\u003Ch3\u003E图片与链接\u003C\u002Fh3\u003E\u003Cp\u003E插入链接与插入图片的语法很像，区别在一个 !号\u003C\u002Fp\u003E\u003Cp\u003E插入图片的地址需要图床，这里推荐贴图库(百度贴图库即可) 的服务，生成URL地址即可。\u003Cbr\u003E插入图片语法说明：\u003Cbr\u003E插入链接语法说明[链接名称](链接地址地址)\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-828f04edf6e2b8a6c49160c21fac2f37_b.jpg\& data-rawwidth=\&681\& data-rawheight=\&461\& class=\&origin_image zh-lightbox-thumb\& width=\&681\& data-original=\&http:\u002F\\u002Fv2-828f04edf6e2b8a6c49160c21fac2f37_r.jpg\&\u003E\u003Ch2\u003E粗体与斜体\u003C\u002Fh2\u003E\u003Cp\u003EMarkdown 的粗体和斜体也非常简单，用两个 * 包含一段文本就是粗体的语法，用一个 * 包含一段文本就是斜体的语法。\u003C\u002Fp\u003E\u003Cp\u003E例如：这里是粗体 这里是\u003Cem\u003E斜体\u003C\u002Fem\u003E\u003C\u002Fp\u003E\u003Ch3\u003E表格\u003C\u002Fh3\u003E\u003Cp\u003E表格暂时不写，需要的朋友自行百度\u003C\u002Fp\u003E\u003Ch3\u003E代码框\u003C\u002Fh3\u003E\u003Cp\u003E如果你是个程序猿，需要在文章里优雅的引用代码框，在 Markdown 下实现也非常简单，只需要用三个 ` 把中间的代码包裹起来\u003Cbr\u003E如\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-ea34f24eddc0bebae8e9f8d_b.png\& data-rawwidth=\&800\& data-rawheight=\&94\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&http:\u002F\\u002Fv2-ea34f24eddc0bebae8e9f8d_r.png\&\u003E\u003Ch3\u003E分割线\u003C\u002Fh3\u003E\u003Cp\u003E分割线的语法只需要另起一行，连续输入三个星号 *** 即可。\u003Cbr\u003E以下为效果\u003C\u002Fp\u003E\u003Ch3\u003E小结\u003C\u002Fh3\u003E\u003Cp\u003E到这里，Markdown 的基本语法在日常的使用中基本就没什么大问题了，只要多加练习，配合好用的工具，写起东西来肯定会行云流水。更多的语法规则，其实 Mou 的 Help 文档例子很好，当你第一次使用 Mou 时，就会显示该文档，其次，你也可在撰写过程中，使用 CMD+R 快捷键来快速打开文档，以随时查阅和学习语法。\u003C\u002Fp\u003E\u003Cp\u003E作者： Te_Lee
文章来源： 少数派\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E原文链接：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002F2F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E认识与入门 Markdown - 少数派\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch2\u003E喜欢本文的，可以关注\u003Ca href=\&https:\u002F\\u002Fpeople\u002FF211\u002Factivities\& class=\&internal\&\u003E通哥 - 知乎\u003C\u002Fa\u003E，有问题可以加群交流\u003C\u002Fh2\u003E\u003Ch2\u003E欢迎大家来“\u003Ca href=\&https:\u002F\\u002Fweb-F211\& class=\&internal\&\u003Eweb前端开发\u003C\u002Fa\u003E”专栏投稿\u003C\u002Fh2\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T13:49:13+08:00&,&url&:&\u002Fp\u002F&,&title&:&Markdown入门指南&,&summary&:&Markdown——入门指南Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML …&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:8,&likesCount&:50},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-04d45763bbb944c3ff934b964c1227c6_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程师&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&一个前端老鸟&,&isFollowing&:false,&hash&:&cc7f3f00fcc5a3f178fac8&,&uid&:059100,&isOrg&:false,&slug&:&F211&,&isFollowed&:false,&description&:&&,&name&:&通哥&,&profileUrl&:&https:\u002F\\u002Fpeople\u002FF211&,&avatar&:{&id&:&v2-bac1e3e5d4af&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:true},&column&:{&slug&:&web-F211&,&name&:&前端开发&},&content&:&\u003Ch2\u003EAngularJs核心特性\u003C\u002Fh2\u003E\u003Col\u003E\u003Cli\u003EMVVM 双向数据绑定(Model-View-ViewModel)model变化，view也变化\u003C\u002Fli\u003E\u003Cli\u003E模版 将html文件解析到DOM中\u003C\u002Fli\u003E\u003Cli\u003E模块化与依赖注入\u003C\u002Fli\u003E\u003Cli\u003E指令可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Ch2\u003E1.AngularJs的使用\u003C\u002Fh2\u003E\u003Ch3\u003E1.1 安装angular\u003C\u002Fh3\u003E\u003Ch4\u003E1.1.1 通过npm进行下载\u003C\u002Fh4\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E$ npm install angular\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003E1.1.2 使用bower下载\u003C\u002Fh4\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E$ bower install angular\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E1.2 引入angularjs\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&script src=\&node_modules\u002Fangular\u002Fangular.js\&&&\u002Fscript&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E1.3 安装扩展程序ng-inspector\u003C\u002Fh3\u003E\u003Ch3\u003E1.4 启动angular程序\u003C\u002Fh3\u003E\u003Cp\u003E在指定标签上添加跟作用域\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Eng-app(rootScope-&ngapp)\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003E\u003Cp\u003Eng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch2\u003E2.初识ng-model\u003C\u002Fh2\u003E\u003Cp\u003E在ng-app下的内容都归angular所管理\u003C\u002Fp\u003E\u003Ch3\u003E2.1 数据模型的挂载\u003C\u002Fh3\u003E\u003Cp\u003E将ng-model生成数据模型然后挂在当前作用域上\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&input type=\&text\& ng-model=\&name\&&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E2.2 实现model和view的双向绑定\u003C\u002Fh3\u003E\u003Cp\u003E变量和视图进行绑定，取出模型上的数据\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{name}}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E3.表达式\u003C\u002Fh2\u003E\u003Ch3\u003E3.1 表达式的组成\u003C\u002Fh3\u003E\u003Cp\u003E两个花括号{{}}组成，可以把数据绑定到HTML\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{name}}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E3.2 表达式结果\u003C\u002Fh3\u003E\u003Cp\u003E用来做表达式结果\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{1+2*3}}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E3.3 三元表达式\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{name?name:'hello zfpx'}}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E4.数据绑定\u003C\u002Fh2\u003E\u003Ch3\u003E4.1 ng-bind\u003C\u002Fh3\u003E\u003Cp\u003E显示数据等同于{{}}\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-bind=\&name\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003E\u003Cp\u003E防止用户看到被渲染之前的样子\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch3\u003E4.2 ng-non-bindable\u003C\u002Fh3\u003E\u003Cp\u003E取消绑定数据\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-non-bindable&{{name}}&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E4.3 ng-bind-template\u003C\u002Fh3\u003E\u003Cp\u003E绑定多个模板\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-bind-template=\&{{name}} {{age}}\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003E\u003Cp\u003E解决 ng-bind 中只能绑定一个的问题\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch2\u003E5.初始化数据\u003C\u002Fh2\u003E\u003Ch3\u003E5.1 ng-init\u003C\u002Fh3\u003E\u003Cp\u003Eng-init在当前作用域下定义初始值。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&name='zfpx';age=7\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003E\u003Cp\u003E多组值用分号;隔开\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch3\u003E5.2 赋值对象和数组\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&name=[{age:7},{age:8}]\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003E\u003Cp\u003E通常情况下,不使用 ng-init。使用一个控制器或模块来代替它。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch2\u003E6.data-指令\u003C\u002Fh2\u003E\u003Cp\u003Edata-ng-init 与 ng-init 等价\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div data-ng-init=\&name=[{age:7},{age:8}]\&&&\u002Fdiv&\n&div ng-init=\&name=[{age:7},{age:8}]\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E7.ng-repeat遍历\u003C\u002Fh2\u003E\u003Ch3\u003E7.1 遍历对象\u003C\u002Fh3\u003E\u003Cp\u003E初始化对象\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&phones={age:7,sex:2,name:'zfpx'}\&&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E遍历对象\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&phones={age:7,sex:2,name:'zfpx'}\&&\n+
&div ng-repeat=\&(key,value) in phones\&&\n+
{{key}}{{value}}\n+
&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E7.2 遍历数组\u003C\u002Fh3\u003E\u003Cp\u003E初始化数组\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&phones=[{name:'苹果',age:7},{name:'华为',age:7},{name:'htc',age:7}]\&&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E遍历数组\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-repeat=\&(key,phone) in phones\&&\n
{{key}}{{phone.name}}\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E7.3 嵌套循环数组\u003C\u002Fh3\u003E\u003Cp\u003E内部获取外部索引\u003Cbr\u003E方法1：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&phones=[{name:'苹果',type:['白色','金色','玫瑰金']},{name:'华为',type:['白色','金色']},{name:'htc',type:['玫瑰金']}]\&&\n
&div ng-repeat=\&(key,phone) in phones\&&\n
&div ng-repeat=\&(index,type) in phone.type\&&\n
{{key}}{{index}}{{type}}\n
&\u002Fdiv&\n
&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E方法2：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&phones=[{name:'苹果',type:['白色','金色','玫瑰金']},{name:'华为',type:['白色','金色']},{name:'htc',type:['玫瑰金']}]\&&\n
&div ng-repeat=\&phone in phones\& ng-init=\&key=$index\&&\n
&div ng-repeat=\&type in phone.type\&&\n
{{key}}{{$index}}{{type}}\n
&\u002Fdiv&\n
&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003E\u003Cp\u003E遍历数组需注意track by $index\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&phones=['苹果','苹果','苹果']\&&\n
&div ng-repeat=\&phone in phones
track by $index\& &\n
{{phone}}\n
&\u002Fdiv&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E8.ng-click\u003C\u002Fh2\u003E\u003Cp\u003E显示隐藏\u002F效果\u003C\u002Fp\u003E\u003Ch3\u003E8.1 增加样式\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&style&\n
display:\n
display:\n
}\n&\u002Fstyle&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E8.2 增加ng-click\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&flag=false\& ng-click=\&flag=!flag\&&\n
{{!flag?'显示':'隐藏'}}\n&\u002Fdiv&\n&div class=\& {{flag?'block':'none'}}\&&content&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E9.ng-hide\u002Fng-show\u002Fng-if\u003C\u002Fh2\u003E\u003Ch3\u003E9.1 ng-hide\u002Fng-show\u003C\u002Fh3\u003E\u003Cp\u003E简单的操作css样式\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&flag=false\& ng-click=\&flag=!flag\&&\n
{{!flag?'显示':'隐藏'}}\n&\u002Fdiv&\n&div ng-show=\&flag\&&content&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E9.2 ng-if\u003C\u002Fh3\u003E\u003Cp\u003Eng-if为false时候内部节点消失，内部指令不执行\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-init=\&flag=false\& ng-click=\&flag=!flag\&&\n
{{!flag?'显示':'隐藏'}}\n&\u002Fdiv&\n&div ng-if=\&flag\&&content&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cblockquote\u003E\u003Cp\u003Eng-if不停的修改dom性能消耗较大,使用ng-show,ng-if与ng-repeat经常连用\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch3\u003E9.3 ng-switch\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&input type=\&text\& ng-model=\&sex\&&\n&div ng-switch=\&sex\&&\n
&p ng-switch-when=\&boy\&&boy&\u002Fp&\n
&p ng-switch-when=\&girl\&&girl&\u002Fp&\n
&p ng-switch-default&no person&\u002Fp&\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E9.4增加class值\u003C\u002Fh3\u003E\u003Ch4\u003E9.4.1 写法1:\u003C\u002Fh4\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-class =\&{true:'red',false:'yellow'}[isActive]\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003E9.4.2 写法2:\u003C\u002Fh4\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-class =\&{'selected':isSelected}\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003E9.4.3 行内样式\u003C\u002Fh4\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-style =\&{color:'red'}\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003E9.4.4 class使用场景\u003C\u002Fh4\u003E\u003Cp\u003Ebootstrap导航切换\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&ul class=\&nav nav-tabs\&&\n
&li role=\&presentation\& ng-click=\&click='Home'\& ng-class=\&{active:click=='Home'}\&&&a href=\&\&&Home&\u002Fa&&\u002Fli&\n
&li role=\&presentation\& ng-click=\&click='Profile'\& ng-class=\&{active:click=='Profile'}\&&&a href=\&\&&Profile&\u002Fa&&\u002Fli&\n
&li role=\&presentation\& ng-click=\&click='Messages'\& ng-class=\&{active:click=='Messages'}\&&&a href=\&\&&Messages&\u002Fa&&\u002Fli&\n&\u002Ful&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E10.引入页面\u003C\u002Fh2\u003E\u003Cp\u003E加载外部模板\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-include=\&'temp.html'\&&&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E11.内置过滤器\u003C\u002Fh2\u003E\u003Ch3\u003E11.1 currency\u003C\u002Fh3\u003E\u003Cp\u003E货币过滤器\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{100 | currency:'￡' }}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E11.2 lowercase & uppercase\u003C\u002Fh3\u003E\u003Cp\u003E大小写转换过滤器\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{'abc' | uppercase }}\n{{'ABC' | lowercase }}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E11.3 limitTo\u003C\u002Fh3\u003E\u003Cp\u003E限制位数\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{123456 | limitTo:5}}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E11.4 number\u003C\u002Fh3\u003E\u003Cp\u003E数字过滤器\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{|number:2}}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E11.5 json\u003C\u002Fh3\u003E\u003Cp\u003E对象过滤器\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&pre&\n{{{aa:123,bb:456} | json}}\n&\u002Fpre&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E11.6 date\u003C\u002Fh3\u003E\u003Cp\u003E日期过滤器\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E{{3 | date:'yyyy-MM-dd hh:mm:ss'}}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E11.7 orderBy\u003C\u002Fh3\u003E\u003Cp\u003E排序orderBy:’字段名字’:’正反序'(true\u002Ffalse)\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-repeat=\&p in phones | orderBy:'age':'reverse'\&&\n
{{p.name}}\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E11.8.filter\u003C\u002Fh3\u003E\u003Cp\u003E查询过滤器\u003C\u002Fp\u003E\u003Ch4\u003E11.8.1 查询全部值\u003C\u002Fh4\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-repeat=\&p in phones | filter:age\&&\n
{{p.name}}\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003E11.8.2 查询全指定字段\u003C\u002Fh4\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E&div ng-repeat=\&p in phones | filter:{age:query}\&&\&&\n
{{p.name}}\n&\u002Fdiv&\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E12.angular常用工具方法\u003C\u002Fh2\u003E\u003Ch3\u003E12.1 uppercase&&lowercase\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar abc = angular.uppercase(\&aaaa\&);\nconsole.log(abc);\nvar abc = angular.lowercase(\&aaaa\&);\nconsole.log(abc);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E12.2 equals\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar a = angular.equals(NaN,NaN);\nconsole.log(a);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E12.3 extend\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar obj = {a:123},obj1 = {b:456};\nangular.extend(obj,obj1);\nconsole.log(obj);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E12.4 fromJson&&toJson\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar obj = '{\&aa\&:123,\&bb\&:456}';\nvar a =angular.fromJson(obj);\na = angular.toJson(a);\nconsole.log(a);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E12.5 copy\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar obj = {a:123},obj1 = {b:456};\nangular.copy(obj,obj1);\nconsole.log(obj1);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E12.6 forEach\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar arr = [{name:1},{name:2},{name:3}];\nvar result = [];\nangular.forEach(arr,function (item) {\n
this.push(item.name);\n},result);\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch3\u003E12.7 bind\u003C\u002Fh3\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Evar obj = {name:2};\nfunction arr(who){console.log(this.name+who);}\nvar newArr =
angular.bind(obj,arr,1);\nnewArr();\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Ch2\u003E喜欢本文的，可以关注\u003Ca href=\&https:\u002F\\u002Fpeople\u002FF211\u002Factivities\& class=\&internal\&\u003E通哥 - 知乎\u003C\u002Fa\u003E，有问题可以加群交流\u003C\u002Fh2\u003E\u003Ch2\u003E欢迎大家来“\u003Ca href=\&https:\u002F\\u002Fweb-F211\& class=\&internal\&\u003Eweb前端开发\u003C\u002Fa\u003E”专栏投稿\u003C\u002Fh2\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T16:18:52+08:00&,&url&:&\u002Fp\u002F&,&title&:&AngularJs基础知识总结&,&summary&:&AngularJs核心特性MVVM 双向数据绑定(Model-View-ViewModel)model变化，view也变化模版 将html文件解析到DOM中模块化与依赖注入指令可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。1.AngularJs的使用1.1 安装angular1.1.1 通过npm进行下载$…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:4,&likesCount&:42}},&annotationDetail&:null,&commentsCount&:5,&likesCount&:47,&FULLINFO&:true}},&User&:{&F211&:{&isFollowed&:false,&name&:&通哥&,&headline&:&&,&avatarUrl&:&https:\u002F\\u002F50\u002Fv2-bac1e3e5d4af_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&F211&,&bio&:&一个前端老鸟&,&hash&:&cc7f3f00fcc5a3f178fac8&,&uid&:059100,&isOrg&:false,&description&:&&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002FF211&,&avatar&:{&id&:&v2-bac1e3e5d4af&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:true}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&newMore&:&new&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&liveStore&:&ls_a2_b2_c1_f2&,&isOffice&:&false&,&homeUi2&:&default&,&answerRelatedReadings&:&qa_recommend_with_ads_and_article&,&remixOneKeyPlayButton&:&headerButton&,&asdfadsf&:&asdfad&,&qrcodeLogin&:&qrcode&,&newBuyBar&:&livenewbuy3&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&iOSNewestVersion&:&4.2.0&,&default&:&None&,&wechatShareModal&:&wechat_share_modal_show&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&experiment&}},&columns&:{&next&:{},&web-F211&:{&following&:false,&canManage&:false,&href&:&\u002Fapi\u002Fcolumns\u002Fweb-F211&,&name&:&前端开发&,&creator&:{&slug&:&F211&},&url&:&\u002Fweb-F211&,&slug&:&web-F211&,&avatar&:{&id&:&e372a7bed6084f37bdcd8c&,&template&:&https:\u002F\\u002F{id}_{size}.jpeg&}}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}