WebApp简单制作（后端也可以装逼啦）
前端越来越吃香的感觉
年后回来，跟之前和几个同事和朋友聊天，发现有两个.net的和一个php的朋友都转到了前端，真是出乎意料。自从之前的webapp兴起后，前端感觉比后端吃香很多，总结朋友们转的原因，大概就几点
1.易上手，相对其他语言来说，作为后端人员，转到前端，其实已经有了很好的底子和基础了，毕竟以前多少都会和js,jq,html,css打交道
2.前端比后端容易找工作，这里的容易找工作，是指不会被后端的语言限死。就像我朋友说的“做网站不一样需要.net，可以是java，可以是php，但一定离不开js,jq,html,css这些东西”。
3.前端妹子多......
其实自己也觉得有一定道理，感觉这两年.net的需求度相对其他的语言都弱了些，前程上搜索发现，.net的职位数是1100+，php是1800+, 前端是2000+，java 是3600+（都是仅限于广州）。所以还是蛮明显的。
看到了那么多朋友转前端，自己也开始搞点前端的东西，近期刚好有点时间，正好研究下webapp开发， 其实webapp开发说到底就是响应式布局嘛，配合html5+css3就看上去高大上点了。不过作为后端程序猿来说，我还没打算深入去研究html5和css3，反正就是响应式布局，用现成的前端框架来练练手。于是，就想用bootstrap做一个简单的新闻网站来装下逼。
初试
Boootstrap，来自 Twitter，是目前很受欢迎的前端框架，主要是响应式布局，无论是文档，资料，还是demo等都比较齐全，而且界面好看，提供多样式主题，还有很多开源的插件和模板，上手相对简单，让后端程序屌丝也能做出好看的界面。
文件的下载和相关引用，可参考如下地址，详细明了
http://v3.bootcss.com/getting-started/
就是下载后只要依次引入：
bootstrap.min.css
bootstrap-theme.min.css
Jquery.min.js
Bootstrap.min.js
这四个文件就好了，然后 在<head> 之中添加 viewport 元数据标签，用来指定移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport
登陆，注册
使用到的组件 panel(面板),navbar(导航条),from(表单) jNotify(提示框)
表单验证，Bootstrap下的表单本身不带验证功能，不过它的插件很多，表单插件bootstrapvalidator就是其中一款，感觉它封装的验证功能比easyui的还要强大。
下载地址: https://github.com/nghuuphuoc/bootstrapvalidator
使用方式,引入 bootstrapValidator.min.css 和 bootstrapValidator.min.js
这两个文件，然后初始化表单
Bootstrapvalidator下载的代码中有大量的demo,可以根据需要自己选择查看。
提示框，jNotify
jNotify是一款提示消息的插件，不过它并不是Bootstrap专有的插件。它提示界面好看，而已又是属于轻量级的，方法使用也简单，下载地址：http://www.jq22.com/jquery-info1377
使用方式，引入 jNotify.jquery.js 和 jNotify.jquery.css
这两个文件，然后就可以直接使用
jError("错误信息提示");
jSuccess("成功信息提示");
jNotify("一般信息提示");
<div class="panel">
<div class="wrapper-dropdown active navbar navbar-default" id="navbar">
<label style="color: white; padding-left: 8px; font-size: 20px;"><strong>登录</strong></label>
<div class="h_Icon">
<a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="/Content/img/head/nemu.png" />
</a>
<ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
<li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
<li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li>
</ul>
</div>
</div>
<div class="row panel-body">
<form id="loginform">
<div class="form-group">
<input type="text" class="form-control" id="username" name="username" placeholder="用户名">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="password" placeholder="密码">
</div>
<button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">登陆</button>
</form>
</div>
</div>
登录页代码
<div class="panel">
<div class="wrapper-dropdown active navbar navbar-default" id="navbar">
<label style="color: white; padding-left: 8px; font-size: 20px;"><strong>注册</strong></label>
<div class="h_Icon">
<a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="/Content/img/head/nemu.png" />
</a>
<ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
<li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i>首页</a></li>
<li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li> </ul>
</div>
</div>
<div class="row panel-body">
<form id="loginform">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="用户名">
</div>
<div class="form-group">
<input type="text" class="form-control" name="nickName" placeholder="用户昵称">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="密码">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirmPassword" placeholder="确认密码">
</div>
<button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">注册</button>
</form>
</div>
</div>
注册页代码
var $btn;
$('#loginform').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名必须在6-30位之间'
},
remote: {
type: 'POST',
url: '/User/CheckUserName',
message: '该用户名已经存在'
},
different: {
field: 'password,confirmPassword',
message: '用户名不能与密码一致'
}
}
},
nickName: {
validators: {
notEmpty: {
message: '用户昵称不能为空'
},
stringLength: {
min: 2,
max: 8,
message: '用户昵称必须在2-8位之间'
},
remote: {
type: 'POST',
url: '/User/CheckNickName',
message: '该用户昵称已经存在'
}
}
},
password:
{
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 8,
max: 20,
message: '密码长度必须在8-20位之间'
},
different: {
field: 'username',
message:
'用户名不能与密码一致'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message:
'两次密码不一致，请检查'
},
different: {
field: 'username',
message:
'用户名不能与密码一致'
}
}
}
}
});
表单验证初始化
(function ($) {
$.extend($,
{
//成功提示
MsgSuccess: function (msg, func) {
jSuccess(msg, {
VerticalPosition: 'center',
HorizontalPosition: 'center',
TimeShown: 1000,
onClosed: function () {
if (func) func();
}
});
},
//出错时的提示
MsgError: function (msg, func) {
jError(msg, {
VerticalPosition: 'center',
HorizontalPosition: 'center',
TimeShown: 1000,
onClosed: function () {
if (func) func();
}
});
},
//一般的提示
MsgInfo: function (msg, func) {
jNotify(msg, {
VerticalPosition: 'center',
HorizontalPosition: 'center',
TimeShown: 1000,
onClosed: function () {
if (func) func();
}
});
},
//统一处理 返回的json数据格式
DealAjaxData: function (data, funcSuc, funcErr) {
//如果是字符串格式的josn，就变为json对象
if (typeof (data) == "string") {
try {
data = eval("(" + data + ")");
} catch (e) {
}
}
if (!data || data.Code == undefined) {
return;
}
switch (data.Code) {
//错误的提示
case 0:
$.MsgError(data.Msg, function () { if (funcErr) { funcErr(data); } });
break;
//成功的提示
case 1:
$.MsgSuccess(data.Msg, function () { if (funcSuc) { funcSuc(data); } });
break;
//带跳转的提示
case 2:
$.MsgInfo(data.Msg, function () { if (window.top) window.top.location = data.BackUrl; else window.location = data.BackUrl; });
break;
}
}
});
}(jQuery));
JNotify简单封装
效果如下:
新闻列表
使用到的组件 panel(面板),dropdown(下来菜单),Carousel（轮播）glyphicon（图标） 栅格布局
<div class="head">
<div class="wrapper-dropdown active navbar navbar-default" id="navbar">
<label style="color: white; padding-left: 8px; font-size: 20px;"><strong>新闻列表</strong></label>
<div class="h_Icon">
<a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="/Content/img/head/nemu.png" />
</a>
<ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
<li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
<li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li>
<li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li>
<li><a href="/Collection/Index"><i class="glyphicon glyphicon-star"></i>我的收藏</a></li> </ul>
</div>
</div>
<nav class="head-bar">
<a class="action" href="jvavscript:;">推荐</a>
<a href="/News/NewsList?type=News">新闻</a>
<a href="/News/NewsList?type=Sports">体育</a>
<a href="/News/NewsList?type=Entertainment">娱乐</a> </nav>
</div>
顶部菜单代码
<div class="row fix-bottom">
<div class="col-xs-6">
<a href="/Home/Index">
<img src="/Content/img/Login/home.png" />
</a>
</div>
<div class="col-xs-6">
<a href="/Collection/Index">
<img src="/Content/img/Login/collect.png" />
</a>
</div>
</div> <!--返回顶部-->
<div class="toTop">
<a href="javascript:void(0)" onclick='$("body").animate({ "scrollTop": "0px" }, 300)'>
<img src="/Content/top.png"/>
</a>
</div>
尾部菜单代码
<!--焦点图start-->
<div class="carousel slide" id="NewsCarousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#NewsCarousel"></li>
<li data-slide-to="1" data-target="#NewsCarousel"></li>
<li data-slide-to="2" data-target="#NewsCarousel"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src="/Content/img/image.jpg" class="img-responsive center-block" />
<div class="carousel-caption">
<h4>围棋人机大战第二局 李世石再次中盘落败</h4>
</div>
</div> <div class="item" id="slide2">
<img src="/Content/img/image1.jpg" class="img-responsive center-block" />
<div class="carousel-caption">
<h4>《看客》第491期：梦在迪士尼</h4>
</div>
</div> <div class="item" id="slide3">
<img src="/Content/img/image2.jpg" class="img-responsive center-block" />
<div class="carousel-caption">
<h4>“动”态两会：消防官兵列队行进</h4>
</div>
</div>
</div>
<!--controller-->
<a class="left carousel-control" data-slide="prev" href="#NewsCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#NewsCarousel"><span class="icon-next"></span></a>
</div>
<!--焦点图end-->
轮播代码
<div class="context panel panel-default">
<div class="row newsItem" data-url="/News/NewsDetails?newId=24">
<div class="left-context col-sm-2 col-xs-4 ">
<img src="/thumbnail/down/BA8J7DG9wangning/BI0GG89900014AED.jpg" class="left-img">
</div>
<div class="right-context col-sm-10 col-xs-8">
长沙市长:望让小学生步行上学
</div>
</div>
<div class="row">
<div class="col-xs-4">
2小时前
</div>
<div class="col-xs-8 showTip">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 76
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 93
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 2
</div>
</div>
</div>
新闻列表代码
效果图：
新闻详情和收藏页面
使用到的组件 panel(面板),dropdown(下来菜单),lyphicon（图标） 栅格布局
<div class="panel panel-info" id="newspanel">
<div class="panel-heading article_head">
<strong>长沙市长:望让小学生步行上学</strong>
</div>
<div class="row article_info">
<small> 2016-03-13 00:59; 北京晨报</small>
</div>
<div class="article_list panel-body ">
<!--IMG#0-->
<p>我是内容</p>
</div>
</div>
<div class="row fix-bottom">
<div style="padding: 6px;">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 0
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 11
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 56
</div>
</div>
<!--评论区start-->
<h3 class="commentItem"><span class="label label-primary">评论区</span></h3>
<div class="panel panel-default commentItem" id="nonecomment">
<div class="row">
<p class="text-center text-muted" style="padding-top: 6px;">此新闻暂无评论，快来评论吧</p>
</div>
</div>
<div id="commentList"> </div>
<div class="row text-center">
<label id="loading" class="text-muted">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中...
</label>
</div>
<br />
<br />
<!--评论区end-->
<div class="row fix-bottom" id="bottombar">
<div class="row">
<div class="col-xs-3">
<a href="javascript:void(0)" onclick="return addReview(0,this)">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" id="likeCount"></span> <span class="count">76</span>
</a>
</div>
<div class="col-xs-3">
<a href="javascript:void(0)" onclick="return addReview(1,this)">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true" id="badCount"></span> <span class="count">93</span>
</a>
</div>
<div class="col-xs-3">
<a href="javascript:void(0)" id="commentBtn">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span id="commentsCount">2</span>
</a>
</div>
<div class="col-xs-3">
<a href="javascript:void(0)" onclick="return addCollection()">
<span class="glyphicon glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
<div class="row fix-bottom" id="commentbar">
<form id="commentform">
<input type="hidden" name="newId" value="24" />
<div class="form-group">
<textarea name="context" id="context" class="form-control" rows="4" placeholder="请输入你的评论内容"></textarea>
</div>
<div style="text-align: right;">
<button class="btn btn-success" data-loading-text="正在提交" autocomplete="off" id="validateBtn"> 提交 </button>
</div>
</form>
</div>
新闻详情页面代码
<div class="wrapper-dropdown active navbar navbar-default" id="navbar">
<label style="color: white; padding-left: 8px; font-size: 20px;"><strong>我的收藏</strong></label>
<div class="h_Icon">
<a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="/Content/img/head/nemu.png" />
</a>
<ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
<li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
</ul>
</div>
</div> <div class="userpanel">
<div class="row">
<div id="username" class="bg-primary center-block text-center" >QingTT</div>
<p>
<small>用户昵称:最爱晴天 | 收藏数:4</small>
</p>
</div> </div>
<div id="newsList"> </div>
<div class="row text-center">
<label id="loading" class="text-muted">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中...
</label>
</div>
<br />
<br />
<div class="row fix-bottom">
<div class="col-xs-6">
<a href="/Home/Index">
<img src="/Content/img/Login/home.png" />
</a>
</div>
<div class="col-xs-6">
<a href="/Collection/Index">
<img src="/Content/img/Login/collect.png" />
</a>
</div>
</div>
收藏页面代码
效果图：
造数据
前端基本搭建好了，一个简单的新闻浏览页面就出来了，接着就是让后端有数据出来，怎么办呢，自己写一个后台，提供新闻发布功能，然后自己来造数据？不不不，难得搞定了前端，后端就更要装逼点，直接找个网站偷点数据就好了。于是乎浏览了网易新闻，用谷歌查看了它的请求，发现比想象中的简单很多：
网易网页：
新闻列表的获取地址（地址A）：
http://3g.163.com/touch/article/list/BBM54PGAwangning/0-10.html
http://3g.163.com/touch/article/list/{类型标示}/{页码}-{页数}.html
新闻详情页面的获取地址：
http://3g.163.com/touch/article/BI0GG89900014AED/full.html
http://3g.163.com/touch/article/{地址A中返回的新闻标示}/full.html
哈哈，就是这么简单了，写个控制台跑一下，把新闻标题，图片，内容等信息全部拿下来保存到本地，发送给前端显示就好了，于是就有了下面代码：
public class NewsHelper
{
//获取新闻列表
public static List<NewsItem> GetNews(KeyValuePair<NewTypeEnum, string> newType)
{
string type = newType.Value;
int pageIndex = ;
int pageSize = ;
bool isStart = true;
while (isStart)
{
List<NewsItem> newsInfos = new List<NewsItem>();
string url = string.Format("http://3g.163.com/touch/article/list/{0}/{1}-{2}.html", type, pageIndex * pageSize, pageSize);
string result = HttpHelper.Get(url);
Console.WriteLine(string.Format("{0} 行位置：{1}", type, pageIndex * pageSize));
if (!string.IsNullOrWhiteSpace(result))
{
result = result.Replace("artiList(", "").Trim(')');
if (!string.IsNullOrWhiteSpace(result))
{
var jsonObj = JsonConvert.DeserializeObject<dynamic>(result);
var newList = jsonObj[type]; foreach (var newItem in newList)
{
//只获取单图新闻
if (newItem.hasImg > )
{
NewsItem model = new NewsItem()
{
//新闻标示
Docid = newItem.docid,
//缩略图url
Imgsrc = newItem.imgsrc,
//发布时间
Ptime = newItem.ptime,
//标题
Title = newItem.title
};
newsInfos.Add(model);
DownloadImg(model, type);
DownDetails(model, type); }
}
}
else
{
isStart = false;
}
}
else
{
isStart = false;
}
SaveDb(newsInfos, newType.Key);
pageIndex = pageIndex + ; }
Console.WriteLine(type + " get end~~~");
return null;
} //将新闻保存到数据库
public static void SaveDb(List<NewsItem> newsItems, NewTypeEnum newTypeEnum)
{
List<NewsInfo> newsInfos = newsItems.Select(p => ConvertNewsInfo(p, newTypeEnum)).ToList();
if (newsInfos.Any())
{
using (var db = DbHelp.OpenConnection())
{
db.InsertAll(newsInfos);
}
Console.WriteLine("保存到数据库 {0}", newTypeEnum);
}
} #region 辅助方法
//图片下载
private static bool DownloadImg(NewsItem item, string type)
{
var imgUrl = item.Imgsrc;
byte[] imgByes = HttpHelper.HttpGetBytes(imgUrl); var path = string.Format("/thumbnail/down/{0}/", type);
var uploadPath = GetFilePath(path);
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string fileName = item.Docid + ".jpg";
//创建一个文件流对象，并初始化
using (FileStream fs = new FileStream(uploadPath + fileName, FileMode.OpenOrCreate))
{
//向文件流中写入内容
fs.Write(imgByes, , imgByes.Length);
}
item.SaveDbImgsrc = path + fileName; return true;
} //文章下载
private static bool DownDetails(NewsItem item, string type)
{
string url = string.Format("http://3g.163.com/touch/article/{0}/full.html", item.Docid);
string result = HttpHelper.Get(url);
if (!string.IsNullOrWhiteSpace(result))
{
result = result.Replace("artiContent(", "").Trim(')');
if (!string.IsNullOrWhiteSpace(result))
{
var jsonObj = JsonConvert.DeserializeObject<dynamic>(result);
var detail = jsonObj[item.Docid];
//新闻内容
item.Details.Context = detail.body;
//标题
item.Details.Title = detail.title;
//发布时间
item.Details.Ptime = detail.ptime;
//来源
item.Details.Source = detail.source;
}
}
return true;
} private static string GetFilePath(string file)
{
string dir = System.Configuration.ConfigurationManager.AppSettings["imgSavePath"];
var filename = Path.Combine(dir, file.TrimStart('~', '/'));
return filename;
} static Random rd = new Random(); //数据转换
private static NewsInfo ConvertNewsInfo(NewsItem item, NewTypeEnum newTypeEnum)
{
NewsInfo result = new NewsInfo()
{
BadCount = rd.Next(, ),
CommentsCount = ,
Context = item.Details.Context,
Imgsrc = item.SaveDbImgsrc,
LikeCount = rd.Next(, ),
NewType = (int)newTypeEnum,
Ptime = DateTime.Parse(item.Ptime),
Source = item.Details.Source,
Title = item.Title };
return result;
}
#endregion
}
获取新闻帮助类
装逼升级
用户是最懒的，你让用户在手机上自己输入一个网站的地址来使用你的webapp，用户会打你的。所以对用户来讲，手机上我想的是一安装，然后打开就能用了。那无非就是搞了app，什么功能都不用，内置一个浏览器，一开到就直接在这个app上面跳到你的网站就好了。就像winfrom里面的webBrowser一样。于是百度了一下，android有WebView 这一控件，可以实现这样功能，虽然不懂安卓，不过这个小功能还是简单的，于是百度WebView 的使用，大致过程如下：
先建一个空白的android项目
在AndroidManifest.xml设置访问网络权限：
<uses-permission android:name="android.permission.INTERNET"/>
然后修改MainActivity，如下：
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
init(); } private void init(){
webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("http://192.168.0.102:1111/");
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}
对，就是这么简单（太难的我也不会O(∩_∩)O），然后生成apk安装包，安装后在手机上直接打开后如下：
好了，这逼装完了，最后，说那么多不分享源码的都是流氓，源码如下：
http://pan.baidu.com/s/1c1aJ4UO aro3
后面有时间学习下node.js，希望有博友有好的博客能推荐下，一起学习，一起分享。
WebApp简单制作（后端也可以装逼啦）的更多相关文章
- Python简单的多线程demo：装逼写法
用面向对象来写多线程: import threading class MyThread(threading.Thread): def __init__(self, n): super(MyThread ...
- ****如何优雅的用Axure装逼？高保真原型心得分享
本文核心内容点:- 啥是高保真原型?(附简单说明原型)- Axure可以画出什么水准的高保真?(给示例,开启装逼模式)- 高保真原型图技巧:- 啥时候上高保真?适用场景 and 不适用场景 啥是高保真 ...
- 不装逼地说，在 Google 到底能学到啥？
不装逼地说,在 Google 到底能学到啥? 2017-03-17 PHP开发者 (点击上方蓝字,快速关注我们) 本文转自公众号「半轻人」(ID:ban-qing-ren),伯乐在线/PHP开发者已获 ...
- 关于NGINX的502的装逼打怪之路
写日志之前先copy一段nginx502的原因,从某网看到如下,然而这并不是重点,最重要还是看博主手敲的东西. 一.NGINX 502错误排查 NGINX 502 Bad Gateway错误是Fast ...
- JavaScript 装逼指南
Summary 本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧. 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量. ...
- 前端 JSer 装逼手册
阅读 8143收藏 2352016-7-18 SegmentFault 分享:吉祥物 @ SegmentFault 在装逼成本越来越高的 JS 圈,是时候充值一下了 -- 题记. 作者:kenberk ...
- 一行能装逼的JavaScript代码
一行能装逼的JavaScript代码 2016-06-28 野狗 一行神奇的JS代码,当时我就震 惊了,这不就是传说中的ZB神奇么… … 哈哈. 写本篇文章的缘由是之前看到了一段js代码,如下: (! ...
- Centos学习手册——装逼宝典之强制重置密码
---恢复内容开始--- Centos学习手册by RuffianFish; 痞子鱼 近日闲的无聊,而最近又在搞Centos决定写个Centos详细的学习手册,以便自己在长时间没摸Centos的情况下 ...
- JavaScript装逼指南
如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...
随机推荐
- Qt create 配置git版本管理
配置步骤: git的下载安装.(此时,您应该明白git和github的区别) 如下图1-5,Tool –> Options –> Version Control –> Git –&g ...
- springmvc下实现登录验证码功能
总体思路,简单讲,就是后台生成图片同时将图片信息保存在session,前端显示图片,输入验证码信息后提交表单到后台,取出存放在session里的验证码信息,与表单提交的验证码信息核对. 点击验证码图片 ...
- 我的ef连接mysql之旅
摘要: install-package ef6,mysql.data:增加provider invariantName="MySql.Data.MySqlClient" typ ...
- Redis笔记，安装和常用命令
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/96.html?1455870708 一.redis简单介绍 redis是N ...
- MVVM架构~knockoutjs系列之包括区域级联列表的增删改
返回目录 这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现“我的银行”模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点,在开发过程中,我们应 ...
- jQuery对 动态添加 的元素 绑定事件（on()的用法）
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- 比较Java数组,ArrayList,LinkedList,Vector 性能比较
public class PerformanceTester { public static final int TIMES=100000; public static abstract class ...
- Python魔法 - MetaClass
Python魔法 - MetaClass metaclass The class of a class. Class definitions create a class name, a class ...
- HTML5语义标签的实践
<article> 定义一篇文章 论坛发帖 博客文章 一篇文章 <article> <h1>标题</h1> <p>内容</p> ...
- php优点
PHP,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写.PHP 是一种 HTML 内嵌式的语言,是一种在服务器端执行的嵌入HTML文档的脚本 ...