【原创】Bootstrap组件福利篇：几款好用的组件推荐，你值得拥有！（一） - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"title":"【原创】Bootstrap组件福利篇：几款好用的组件推荐，你值得拥有！（一）","author":"landeanfen","content":"前言：上一篇分享过，上篇说过还有好东西会分享，博主是一个说话算话的人，这段时间，博主收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点福利，将博主收藏的东西分享出来，供需要的朋友参考。组件大部分都是些开源应用，也有部分是博主自己在网上找到然后改写出来的效果，可能不尽如人意，且权当个参考吧。温馨提示：文中大部分图片为动图，需要点击查看效果！Bootstrap组件系列文章：一、时间组件 bootstrap风格的时间组件非常多，你可以在上面随便搜索“datepicker”关键字，可以找到很多的时间组件。博主原来也用过其中的两个，发现都会有一些大大小小的问题。经过一番筛选，找到一个效果不错、能适用各种场景的时间组件，下面就来一睹它的风采吧。1、效果展示初始效果组件中文化和日期格式自定义：只显示日期组件中文化和日期格式自定义：只显示日期显示日期和时间（手机、平板类设备可能体验会更好）2、源码说明初初看了下组件效果，还是给出 3、代码示例 首先引用需要的文件&link href=\"~/Content/bootstrap/css/bootstrap.css\" rel=\"stylesheet\" /&\n
&link href=\"~/Content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css\" rel=\"stylesheet\" /&\n\n
&script src=\"~/Content/jquery-1.9.1.js\"&&/script&\n
&script src=\"~/Content/bootstrap/js/bootstrap.js\"&&/script&\n
&script src=\"///ajax/libs/moment.js/2.9.0/moment-with-locales.js\"&&/script&\n
&script src=\"~/Content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js\"&&/script&\nJQuery和bootstrap是必须的。除此之外，还得引用 moment-with-locales.js 这个文件，当然，你也可以不用这种cdn的方式，完全可以下载这个js文件到你的本地，然后添加本地引用。（1）初始效果
&label class=\"control-label col-xs-3\"&日期：&/label&\n
&div class='input-group date' id='datetimepicker1'&\n
&input type='text' class=\"form-control\" /&\n
&span class=\"input-group-addon\"&\n
&span class=\"glyphicon glyphicon-calendar\"&&/span&\n
&script type=\"text/javascript\"&\n
$(function () {\n
$('#datetimepicker1').datetimepicker();\n
&/script&\n这样就能出现如上图一效果。（2）中文化和日期格式化html部分不变。js初始化的时候增加参数即可。
&script type=\"text/javascript\"&\n
$(function () {\n
$('#datetimepicker1').datetimepicker({\n
format: 'YYYY-MM-DD',//日期格式化，只显示日期\n
locale: 'zh-CN'
//中文化\n
&/script&\n（3）显示时间
&label class=\"control-label col-xs-3\"&时间：&/label&\n
&div class='input-group date' id='datetimepicker2'&\n
&input type='text' class=\"form-control\" /&\n
&span class=\"input-group-addon\"&\n
&span class=\"glyphicon glyphicon-calendar\"&&/span&\n
&script type=\"text/javascript\"&\n
$(function () {\n
$('#datetimepicker2').datetimepicker({\n
format: 'YYYY-MM-DD HH:mm:ss',\n
locale: 'zh-CN'\n
&/script&\n （4）最大日期、最小日期
$('#datetimepicker1').datetimepicker({\n
format: 'YYYY-MM-DD',//日期格式化，只显示日期\n
locale: 'zh-CN',
//中文化\n
maxDate: '',//最大日期\n
minDate: '' //最小日期\n
});\n（5）启用删除按钮showClear: true\n（6）View Mode属性。设置浏览器选中模式viewMode: 'years'\n（7）其他更多强大的功能可以参看API，这里就不一一列举。里面有大量的属性、事件、方法来满足你各种特殊的需求。二、自增器组件关于bootstrap自增器，可能并非每一个项目里面都需要用到。有一些特殊场景，比如：某一个文本框需要数据数字、数组的大小需要微调等一些情况。说了半天，可能有园友都不知道它长啥样，上点图吧。1、效果展示其实效果很简单，但它可以自动设置最大值、最小值、自增值还是挺方便的，并且可以自动做数字校验。最最方便的是它不需要使用JavaScript去做初始化，只需要在html里面初始化即可。2、源码说明3、代码示例首先需要引用的文件如下：
&link href=\"~/Content/bootstrap/css/bootstrap.css\" rel=\"stylesheet\" /&\n
&link rel=\"stylesheet\" href=\"/font-awesome/4.6.3/css/font-awesome.min.css\"&\n
&link href=\"~/Content/jquery.spinner-master/dist/css/bootstrap-spinner.css\" rel=\"stylesheet\" /&\n\n
&script src=\"~/Content/jquery-1.9.1.js\"&&/script&\n
&script src=\"~/Content/bootstrap/js/bootstrap.js\"&&/script&\n
&script src=\"~/Content/jquery.spinner-master/dist/js/jquery.spinner.js\"&&/script&\nfont-aweaome.min.css文件是一个cdn引用的文件，你也可以它引用到你的本地。（1）初始化&div class=\"input-group spinner\" data-trigger=\"spinner\"&\n
&input type=\"text\" class=\"form-control text-center\" value=\"1\" data-rule=\"quantity\"&\n
&span class=\"input-group-addon\"&\n
&a href=\"javascript:;\" class=\"spin-up\" data-spin=\"up\"&&i class=\"fa fa-caret-up\"&&/i&&/a&\n
&a href=\"javascript:;\" class=\"spin-down\" data-spin=\"down\"&&i class=\"fa fa-caret-down\"&&/i&&/a&\n
&/span&\n&/div&\n就这么一段简单的html就能看到如上图的效果，有没有很easy~~（2）自增类型查看组件的源码，可以看到在它里面为我们定义了多种自增类型：可以定义data-rule属性为这些类型，比如： data-rule=\"month\" 可以控制自增组件的规则是按照月的规则来进行。（3）设置最大值、最小值、自增值除了上面的几种特定类型，组件还支持自定义最大值、最小值、自增值&div class=\"input-group spinner\" data-trigger=\"spinner\"&\n
&input type=\"text\" class=\"form-control text-center\" value=\"1\" data-min=\"-10\" data-max=\"10\" data-step=\"2\" data-rule=\"quantity\"&\n
&span class=\"input-group-addon\"&\n
&a href=\"javascript:;\" class=\"spin-up\" data-spin=\"up\"&&i class=\"fa fa-caret-up\"&&/i&&/a&\n
&a href=\"javascript:;\" class=\"spin-down\" data-spin=\"down\"&&i class=\"fa fa-caret-down\"&&/i&&/a&\n
&/span&\n&/div&\ndata-min=\"-10\"：最小值data-max=\"10\"：最大值data-step=\"2\"：自增值 这个很好理解，不做过多说明。效果：（4）事件捕捉组件提供了两个事件changed、changing，分别对应数值变化中和变化后的事件回调。$('#id').spinner('changed', function(e, newVal, oldVal) {\n\n});\n\n$('[data-trigger=\"spinner\"]').spinner('changing', function(e, newVal, oldVal) {\n\n});\n三、加载效果前几天，有群友在问bootstrap的加载效果用什么组件。其实百度搜索一下，也能找到很多的结果。在此，博主根据自己的使用经历分享下几个加载的小组件，希望大家用得着。主要分为实用型和炫酷型两种。实用型效果一般，但能适用各种浏览器；炫酷型使用最新的css3和html5写出来的，效果很炫，但基本上低版本的IE（10以下）都不能兼容。一、实用型1、PerfectLoading组件这个组件是博主在网上找到的一个js，但下载下来之后发现一些大大小小的问题，于是，博主改写了下，命名为bootstrap-loading组件。它的原理就是在组件启动的时候弹出一个覆盖层，然后组件关闭时，将覆盖层的dom移除，加载效果使用了一张gif的图片。PerfectLoad.js文件内容：/*******************************************\n * \n * Plug-in:友好的页面加载效果\n * Author:sqinyang ()\n * Time:\n * Explanation:随着HTML5的流行，页面效果越来越炫，同时也需要加载大量的插件及素材，万恶的网速，特别对于挂在国外服务器的网站，一打开一堆素材缓缓加载，位置错乱不齐，故编写此方法，方便大家使用\n *\n*********************************************/\n\njQuery.bootstrapLoading = {\n
start: function (options) {\n
var defaults = {\n
opacity: 1,\n
//loading页面透明度\n
backgroundColor: \"#fff\",\n
//loading页面背景色\n
borderColor: \"#bbb\",\n
//提示边框颜色\n
borderWidth: 1,\n
//提示边框宽度\n
borderStyle: \"solid\",\n
//提示边框样式\n
loadingTips: \"Loading, please wait...\",\n
//提示文本\n
TipsColor: \"#666\",\n
//提示颜色\n
delayTime: 1000,\n
//页面加载完成后，加载页面渐出速度\n
zindex: 999,\n
//loading页面层次\n
sleep: 0\n
//设置挂起,等于0时则无需挂起\n\n
var options = $.extend(defaults, options);\n\n
//获取页面宽高\n
var _PageHeight = document.documentElement.clientHeight,\n
_PageWidth = document.documentElement.clientWidth;\n\n
//在页面未加载完毕之前显示的loading Html自定义内容\n
var _LoadingHtml = '&div id=\"loadingPage\" style=\"position:left:0;top:0;_position:width:100%;height:' + _PageHeight + 'background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';\"&&div id=\"loadingTips\" style=\"position: cursor1: width:border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + ' height:80 line-height:80 padding-left:80 padding-right: 5border-radius:10
background: ' + options.backgroundColor + ' url(/Content/bootstrap-loading/images/loading.gif) no-repeat 5 color:' + options.TipsColor + ';font-size:20\"&' + options.loadingTips + '&/div&&/div&';\n\n
//呈现loading效果\n
$(\"body\").append(_LoadingHtml);\n\n
//获取loading提示框宽高\n
var _LoadingTipsH = document.getElementById(\"loadingTips\").clientHeight,\n
_LoadingTipsW = document.getElementById(\"loadingTips\").clientWidth;\n\n
//计算距离，让loading提示框保持在屏幕上下左右居中\n
var _LoadingTop = _PageHeight & _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,\n
_LoadingLeft = _PageWidth & _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;\n\n
$(\"#loadingTips\").css({\n
\"left\": _LoadingLeft + \"px\",\n
\"top\": _LoadingTop + \"px\"\n
//监听页面加载状态\n
document.onreadystatechange = PageLoaded;\n\n
//当页面加载完成后执行\n
function PageLoaded() {\n
if (document.readyState == \"complete\") {\n
var loadingMask = $('#loadingPage');\n\n
setTimeout(function () {\n
loadingMask.animate({\n
\"opacity\": 0\n
options.delayTime,\n
function () {\n
$(this).hide();\n\n
options.sleep);\n\n
end: function () {\n
$(\"#loadingPage\").remove();\n
}\n}\n这个js基本上是网上down下来的，只是在此基础上博主加了一个end的方法。来看看组件如何使用，下面是测试代码：&html&\n&head&\n
&meta name=\"viewport\" content=\"width=device-width\" /&\n
&title&loading&/title&\n\n
&link href=\"~/Content/bootstrap/css/bootstrap.css\" rel=\"stylesheet\" /&\n\n
&script src=\"~/Content/jquery-1.9.1.js\"&&/script&\n
&script src=\"~/Content/bootstrap/js/bootstrap.js\"&&/script&\n
&script src=\"~/Content/bootstrap-loading/PerfectLoad.js\"&&/script&\n
&script type=\"text/javascript\"&\n
$(function () {\n
$(\"#btn_submit\").on(\"click\", function () {\n
$.bootstrapLoading.start({ loadingTips: \"正在处理数据，请稍候...\" });\n
$.ajax({\n
type: 'get',\n
url: '/Home/TestLoading',\n
data: {},\n
success: function (data, statu) {\n
debugger;\n
complete: function () {\n
$.bootstrapLoading.end();\n
&/script&\n&/head&\n&body&\n
&div class=\"panel-body\" style=\"padding:0px\"&\n
&div class=\"panel panel-default\" style=\"height:450\"&\n
&div class=\"panel-heading\"&查询条件&/div&\n
&div class=\"panel-body\"&\n
&form id=\"formSearch\" class=\"form-horizontal\"&\n
&div class=\"form-group\"&\n
&div class=\"col-xs-4\"&\n
&button type=\"button\" id=\"btn_submit\" class=\"btn btn-primary\"&&span class=\"glyphicon glyphicon-floppy-disk\" aria-hidden=\"true\"&&/span&加载测试&/button&\n
&/div&\n&/body&\n&/html&\n使用说明：组件不需要任何的html代码，只需要在执行loading的时候调用组件的start方法即可。 start()方法启动弹出层，并可设置defaults 变量里面的所有参数。当loading结束后再调用组件的end方法，自动将弹出层移除。来看看效果：如果对效果不满意，可自己设置defaults里面的参数，注释写得很详细，在此就不一一列举了。2、菊花加载组件spin.js使用图片显示加载效果有它天生的弊端，所以现在很多的加载组件都使用css+js去实现动画效果。spin.js就是其中一个例子，spin.js是一个开源组件，。下载源码后，初始化发现组件不带遮罩的效果，只能这样：找了半天它的参数，硬是没找到，亦或是哪里有“机关”没发现。没办法，博主只能自己加上遮罩的效果了。于是新建了一个css样式文件暂且命名为spin.css，里面只有一个样式：.fade {\n　　position: fixed;\n
right: 0;\n
bottom: 0;\n
left: 0;\n
z-index: 9999;\n
opacity: 1;\n
background-color: grey;\n}\n然后将spin.js改写了两个地方，改写后的内容如下：/**\n * Copyright (c)
Felix Gnass\n * Licensed under the MIT license\n * http://spin.js.org/\n *\n * Example:\n
var opts = {\n
lines: 12,
// The number of lines to draw\n
length: 7,
// The length of each line\n
// The line thickness\n
radius: 10,
// The radius of the inner circle\n
scale: 1.0,
// Scales overall size of the spinner\n
corners: 1,
// Roundness (0..1)\n
color: '#000',
// #rgb or #rrggbb\n
opacity: 1/4,
// Opacity of the lines\n
rotate: 0,
// Rotation offset\n
direction: 1,
// 1: clockwise, -1: counterclockwise\n
// Rounds per second\n
trail: 100,
// Afterglow percentage\n
// Frames per second when using setTimeout()\n
zIndex: 2e9,
// Use a high z-index by default\n
className: 'spinner', // CSS class to assign to the element\n
top: '50%',
// center vertically\n
left: '50%',
// center horizontally\n
shadow: false,
// Whether to render a shadow\n
hwaccel: false,
// Whether to use hardware acceleration (might be buggy)\n
position: 'absolute'
// Element positioning\n
var target = document.getElementById('foo');\n
var spinner = new Spinner(opts).spin(target);\n */\n;(function(root, factory) {\n
if (typeof module == 'object' && module.exports) module.exports = factory(); // CommonJS\n
else if (typeof define == 'function' && define.amd) define(factory); // AMD module\n
else root.Spinner = factory(); // Browser global\n}\n(this, function() {\n
'use strict';\n\n
var prefixes = ['webkit', 'Moz', 'ms', 'O']; // Vendor prefixes\n
var animations = {}; // Animation rules keyed by their name\n
var useCssAnimations; // Whether to use CSS animations or setTimeout\n
var sheet; // A stylesheet to hold the @keyframe or VML rules\n\n
* Utility function to create elements. If no tag name is given,\n
* a DIV is created. Optionally properties can be passed.\n
function createEl(tag, prop) {\n
var el = document.createElement(tag || 'div');\n
var n;\n\n
for (n in prop) el[n] = prop[n];\n
return el;\n
* Appends children and returns the parent.\n
function ins(parent /* child1, child2, ...*/) {\n
for (var i = 1, n = arguments.length; i & n; i++) {\n
parent.appendChild(arguments[i]);\n
return parent;\n
* Creates an opacity keyframe animation rule and returns its name.\n
* Since most mobile Webkits have timing issues with animation-delay,\n
* we create separate rules for each line/segment.\n
function addAnimation(alpha, trail, i, lines) {\n
var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-');\n
var start = 0.01 + i/lines * 100;\n
var z = Math.max(1 - (1-alpha) / trail * (100-start), alpha);\n
var prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase();\n
var pre = prefix && '-' + prefix + '-' || '';\n\n
if (!animations[name]) {\n
sheet.insertRule(\n
'@' + pre + 'keyframes ' + name + '{' +\n
'0%{opacity:' + z + '}' +\n
start + '%{opacity:' + alpha + '}' +\n
(start+0.01) + '%{opacity:1}' +\n
(start+trail) % 100 + '%{opacity:' + alpha + '}' +\n
'100%{opacity:' + z + '}' +\n
'}', sheet.cssRules.length);\n\n
animations[name] = 1;\n
return name;\n
* Tries various vendor prefixes and returns the first supported property.\n
function vendor(el, prop) {\n
var s = el.style;\n
var i;\n\n
prop = prop.charAt(0).toUpperCase() + prop.slice(1);\n
if (s[prop] !== undefined) return prop;\n
for (i = 0; i & prefixes.length; i++) {\n
pp = prefixes[i]+prop;\n
if (s[pp] !== undefined) return pp;\n
* Sets multiple style properties at once.\n
function css(el, prop) {\n
for (var n in prop) {\n
el.style[vendor(el, n) || n] = prop[n];\n
return el;\n
* Fills in default values.\n
function merge(obj) {\n
for (var i = 1; i & arguments.length; i++) {\n
var def = arguments[i];\n
for (var n in def) {\n
if (obj[n] === undefined) obj[n] = def[n];\n
return obj;\n
* Returns the line color from the given string or array.\n
function getColor(color, idx) {\n
return typeof color == 'string' ? color : color[idx % color.length];\n
// Built-in defaults\n\n
var defaults = {\n
lines: 12,
// The number of lines to draw\n
length: 7,
// The length of each line\n
// The line thickness\n
radius: 10,
// The radius of the inner circle\n
scale: 1.0,
// Scales overall size of the spinner\n
corners: 1,
// Roundness (0..1)\n
color: '#000',
// #rgb or #rrggbb\n
opacity: 1/4,
// Opacity of the lines\n
rotate: 0,
// Rotation offset\n
direction: 1,
// 1: clockwise, -1: counterclockwise\n
// Rounds per second\n
trail: 100,
// Afterglow percentage\n
// Frames per second when using setTimeout()\n
zIndex: 2e9,
// Use a high z-index by default\n
className: 'spinner', // CSS class to assign to the element\n
top: '50%',
// center vertically\n
left: '50%',
// center horizontally\n
shadow: false,
// Whether to render a shadow\n
hwaccel: false,
// Whether to use hardware acceleration\n
position: 'absolute'
// Element positioning\n
/** The constructor */\n
function Spinner(o) {\n
this.opts = merge(o || {}, Spinner.defaults, defaults);\n
// Global defaults that override the built-ins:\n
Spinner.defaults = {};\n\n
merge(Spinner.prototype, {\n
* Adds the spinner to the given target element. If this instance is already\n
* spinning, it is automatically removed from its previous target b calling\n
* stop() internally.\n
spin: function(target) {\n
this.stop();\n\n
var self = this;\n
var o = self.opts;\n
var el = self.el = createEl(null, {className: o.className});\n\n
css(el, {\n
position: o.position,\n
width: 0,\n
zIndex: o.zIndex,\n
left: o.left,\n
top: o.top\n
if (target) {\n
target.insertBefore(el, target.firstChild || null);\n
target.className = \"fade\";\n
el.setAttribute('role', 'progressbar');\n
self.lines(el, self.opts);\n\n
if (!useCssAnimations) {\n
// No CSS animation support, use setTimeout() instead\n
var i = 0;\n
var start = (o.lines - 1) * (1 - o.direction) / 2;\n
var alpha;\n
var fps = o.fps;\n
var f = fps / o.speed;\n
var ostep = (1 - o.opacity) / (f * o.trail / 100);\n
var astep = f / o.lines;\n\n
(function anim() {\n
for (var j = 0; j & o.lines; j++) {\n
alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity);\n\n
self.opacity(el, j * o.direction + start, alpha, o);\n
self.timeout = self.el && setTimeout(anim, ~~(1000 / fps));\n
return self;\n
* Stops and removes the Spinner.\n
stop: function() {\n
var el = this.el;\n
if (el) {\n
clearTimeout(this.timeout);\n
if (el.parentNode) {\n
var reg = new RegExp('(\\\\s|^)fade(\\\\s|$)');\n
el.parentNode.className = el.parentNode.className.replace(reg, ' ');\n
el.parentNode.removeChild(el);\n
this.el = undefined;\n
return this;\n
* Internal method that draws the individual lines. Will be overwritten\n
* in VML fallback mode below.\n
lines: function(el, o) {\n
var i = 0;\n
var start = (o.lines - 1) * (1 - o.direction) / 2;\n
var seg;\n\n
function fill(color, shadow) {\n
return css(createEl(), {\n
position: 'absolute',\n
width: o.scale * (o.length + o.width) + 'px',\n
height: o.scale * o.width + 'px',\n
background: color,\n
boxShadow: shadow,\n
transformOrigin: 'left',\n
transform: 'rotate(' + ~~(360/o.lines*i + o.rotate) + 'deg) translate(' + o.scale*o.radius + 'px' + ',0)',\n
borderRadius: (o.corners * o.scale * o.width && 1) + 'px'\n
for (; i & o.lines; i++) {\n
seg = css(createEl(), {\n
position: 'absolute',\n
top: 1 + ~(o.scale * o.width / 2) + 'px',\n
transform: o.hwaccel ? 'translate3d(0,0,0)' : '',\n
opacity: o.opacity,\n
animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite'\n
if (o.shadow) ins(seg, css(fill('#000', '0 0 4px #000'), {top: '2px'}));\n
ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)')));\n
return el;\n
* Internal method that adjusts the opacity of a single line.\n
* Will be overwritten in VML fallback mode below.\n
opacity: function(el, i, val) {\n
if (i & el.childNodes.length) el.childNodes[i].style.opacity = val;\n
function initVML() {\n\n
/* Utility function to create a VML tag */\n
function vml(tag, attr) {\n
return createEl('&' + tag + ' xmlns=\"urn::vml\" class=\"spin-vml\"&', attr);\n
// No CSS transforms but VML support, add a CSS rule for VML elements:\n
sheet.addRule('.spin-vml', 'behavior:url(#default#VML)');\n\n
Spinner.prototype.lines = function(el, o) {\n
var r = o.scale * (o.length + o.width);\n
var s = o.scale * 2 * r;\n\n
function grp() {\n
return css(\n
vml('group', {\n
coordsize: s + ' ' + s,\n
coordorigin: -r + ' ' + -r\n
{ width: s, height: s }\n
var margin = -(o.width + o.length) * o.scale * 2 + 'px';\n
var g = css(grp(), {position: 'absolute', top: margin, left: margin});\n
var i;\n\n
function seg(i, dx, filter) {\n
css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),\n
vml('roundrect', {arcsize: o.corners}),\n
width: r,\n
height: o.scale * o.width,\n
left: o.scale * o.radius,\n
top: -o.scale * o.width && 1,\n
filter: filter\n
vml('fill', {color: getColor(o.color, i), opacity: o.opacity}),\n
vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change\n
if (o.shadow)\n
for (i = 1; i &= o.lines; i++) {\n
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');\n
for (i = 1; i &= o.lines; i++) seg(i);\n
return ins(el, g);\n
Spinner.prototype.opacity = function(el, i, val, o) {\n
var c = el.firstChild;\n
o = o.shadow && o.lines || 0;\n
if (c && i + o & c.childNodes.length) {\n
c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild;\n
if (c) c.opacity = val;\n
if (typeof document !== 'undefined') {\n
sheet = (function() {\n
var el = createEl('style', {type : 'text/css'});\n
ins(document.getElementsByTagName('head')[0], el);\n
return el.sheet || el.styleSheet;\n
var probe = css(createEl('group'), {behavior: 'url(#default#VML)'});\n\n
if (!vendor(probe, 'transform') && probe.adj) initVML();\n
else useCssAnimations = vendor(probe, 'animation');\n
return Spinner;\n\n}));\n\nspin.js\n改动的两个地方：（1）初始化的时候，如果是显示，则给对应的标签加上fade样式（2）、每次都将fade样式删除掉。改好之后，就是测试界面了。&html&\n&head&\n
&meta name=\"viewport\" content=\"width=device-width\" /&\n
&title&loading2&/title&\n
&link href=\"~/Content/bootstrap/css/bootstrap.css\" rel=\"stylesheet\" /&\n
&link href=\"~/Content/spin.js-master/css/spin.css\" rel=\"stylesheet\" /&\n\n
&script src=\"~/Content/jquery-1.9.1.js\"&&/script&\n
&script src=\"~/Content/bootstrap/js/bootstrap.js\"&&/script&\n
&script src=\"~/Content/spin.js-master/js/spin.js\"&&/script&\n
&script type=\"text/javascript\"&\n
$(function () {\n
$(\"#btn_submit\").on(\"click\", function () {\n
//var opts = {\n
lines: 9, // 花瓣数目\n
length: 1, // 花瓣长度\n
width: 10, // 花瓣宽度\n
radius: 15, // 花瓣距中心半径\n
corners: 1, // 花瓣圆滑度 (0-1)\n
rotate: 0, // 花瓣旋转角度\n
direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针\n
color: '#000', // 花瓣颜色\n
speed: 1, // 花瓣旋转速度\n
trail: 60, // 花瓣旋转时的拖影(百分比)\n
shadow: false, // 花瓣是否显示阴影\n
hwaccel: false, //spinner 是否启用硬件加速及高速旋转
className: 'spinner', // spinner css 样式名称\n
zIndex: 2e9, // spinner的z轴 (默认是)\n
top: 'auto', // spinner 相对父容器Top定位 单位 px\n
left: 'auto'// spinner 相对父容器Left定位 单位 px\n
//var target = document.getElementById('foo');\n
//var spinner = new Spinner({}).spin(target);\n\n
var spinner = undefined;\n
$.ajax({\n
type: 'get',\n
url: '/Home/TestLoading',\n
data: {},\n
beforeSend: function () {\n
var option = {\n
lines: 9, // 花瓣数目\n
length: 1, // 花瓣长度\n
width: 10, // 花瓣宽度\n
radius: 15, // 花瓣距中心半径\n
shadow: true,\n
opacity:1/8\n
var target = document.getElementById('foo');\n
spinner = new Spinner(option).spin(target);//显示加载\n
success: function (data, statu) {\n
complete: function () {\n
spinner.spin();//移除加载\n
&/script&\n\n&/head&\n&body&\n
&div class=\"panel-body\" style=\"padding:0px\"&\n
&div class=\"panel panel-default\" style=\"height:450\"&\n
&div class=\"panel-heading\"&查询条件&/div&\n
&div class=\"panel-body\"&\n
&form id=\"formSearch\" class=\"form-horizontal\"&\n
&div class=\"form-group\"&\n
&div class=\"col-xs-4\"&\n
&button type=\"button\" id=\"btn_submit\" class=\"btn btn-primary\"&&span class=\"glyphicon glyphicon-floppy-disk\" aria-hidden=\"true\"&&/span&加载测试&/button&\n
&div id=\"foo\"&&/div&\n&/body&\n&/html&\n使用说明：如果你的页面不使用jQuery，引用spin.js这个文件，这个文件不需要jquery的支持；如果想要使用jQuery，则引用jquery.spin.js文件。上面的代码是不使用jQuery的情况。组件需要定义一个空的div，然后在此div上面做初始化。得到的效果如下：当然，如果你对此效果不满意，你还可以设置遮罩层的透明度，以及整个遮罩的样式。还有旋转的各个参数，都可以通过初始化的时候自定义，上述代码里面有详细注释。二、炫酷型1、jquery.shCircleLoader.js组件此组件效果不用说，使用也比较简单，但是对IE10以下版本不支持。看看效果先：至于具体的代码使用，博主不打算深究，可以去百度或者github上面找找。 2、fakeLoader.js组件 更多的选择，更好的扁平化效果，更好的手机、平板设备体验。只需要看看图片感受下就知道了。。四、流程图小插件前段时间做一个工作流的需求，需要显示当前流程进行到哪一步，找到了一个流程小插件ystep。此组件优点在于使用简单、够轻量级。1、效果展示 先来看看效果蓝色缩小版2、源码说明。3、代码示例首先引用必须的文件
&link href=\"~/Content/bootstrap/css/bootstrap.css\" rel=\"stylesheet\" /&\n
&link href=\"~/Content/ystep-master/css/ystep.css\" rel=\"stylesheet\" /&\n\n
&script src=\"~/Content/jquery-1.9.1.js\"&&/script&\n
&script src=\"~/Content/bootstrap/js/bootstrap.js\"&&/script&\n
&script src=\"~/Content/ystep-master/js/ystep.js\"&&/script&\n这个组件需要jQuery和bootstrap两个组件的支持。然后定义一个空的div&div id=\"div_ystep1\"&&/div&\n最后在点击按钮的时候初始化组件
&script type=\"text/javascript\"&\n
$(function () {\n
$(\"#btn_submit\").click(function () {\n
$(\"#div_ystep1\").loadStep({\n
//ystep的外观大小\n
//可选值：small,large\n
size: \"small\",\n
//ystep配色方案\n
//可选值：green,blue\n
color: \"blue\",\n
//ystep中包含的步骤\n
steps: [{\n
//步骤名称\n
title: \"开始\",\n
//步骤内容(鼠标移动到本步骤节点时，会提示该内容)\n
content: \"流程开始\"\n
title: \"审批\",\n
content: \"各个角色开始审批\"\n
title: \"实施\",\n
content: \"需求开始实施\"\n
title: \"结束\",\n
content: \"流程结束\"\n
$(\"#div_ystep1\").setStep(3);\n
&/script&\n如果是动态步骤，可能需要动态去构造steps属性。然后通过setStep()设置当前到了哪一步。 常用方法：//跳转到下一个步骤\n$(\".ystep1\").nextStep();\n//跳转到上一个步骤\n$(\".ystep1\").prevStep();\n//跳转到指定步骤\n$(\".ystep1\").setStep(2);\n//获取当前在第几步\n$(\".ystep1\").getStep();\n五、按钮提示组件bootstrap-confirmation按钮提示组件有点类似js里面confirm的功能，不过这个confirm是以一种tooltip的方式弹出来的效果，给用户一个确定、取消的判断，界面更加友好。介绍这个组件之前，可以先来看看bootstrap里面提示框的效果：bootstrap-confirmation组件就是基于这个提示框的效果来实现的。github上面有好多个bootstrap-confirmation组件，但基本大同小异。。1、效果展示最原始的效果自定义title、按钮文本2、源码说明3、代码示例 （1）引用文件：
&link href=\"~/Content/bootstrap/css/bootstrap.css\" rel=\"stylesheet\" /&\n\n
&script src=\"~/Content/jquery-1.9.1.js\"&&/script&\n
&script src=\"~/Content/bootstrap/js/bootstrap.js\"&&/script&&script src=\"~/Content/bootstrap-confirmation/bootstrap-confirmation.js\"&&/script&\n样式需要bootstrap.css的支持JavaScript需要jquery和bootstrap.js的支持。（2）对应的点击标签（可以是任意标签）&button type=\"button\" id=\"btn_submit1\" class=\"btn btn-primary\"&&span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"&&/span&删除&/button&\n（3）js初始化
&script type=\"text/javascript\"&\n
$(function () {\n
$('#btn_submit1').confirmation({\n
animation: true,\n
placement: \"bottom\",\n
title: \"确定要删除吗？\",\n
btnOkLabel: '确定',\n
btnCancelLabel: '取消',\n
onConfirm: function () {\n
//alert(\"点击了确定\");\n
onCancel: function () { //alert(\"点击了取消\"); \n\n
&/script&\n（4）更多属性、事件、方法 除了上述初始化的属性，还有一些常用的属性。比如：btnOkClass：确定按钮的样式；btnCancelClass：取消按钮的样式；singleton：是否只允许出现一个确定框；popout：当用户点击其他地方的时候是否隐藏确定框；比如你可以将btnOkClass设置成
btnOkClass : 'btn btn-sm btn-primary',六、图片分类、过滤组件MuxitUp这是一个效果非常炫酷的分组、过滤组件，。博主在网上看到一个它的demo，觉得效果确实很好，废话不多说，上图。怎么样，效果还行吧。这个组件在项目里面暂时没用上，但觉得以后有需要的可能，就将此收藏了一把。实现代码是网上copy过来的，没有深究，有兴趣可以看看。html+js代码实现如下：&html&\n&head&\n
&meta name=\"viewport\" content=\"width=device-width\" /&\n
&title&mixitup&/title&\n
&link href=\"~/Content/image/css/normalize.css\" rel=\"stylesheet\" /&\n
&link href=\"~/Content/image/css/layout.css\" rel=\"stylesheet\" /&\n\n
&script src=\"~/Content/jquery-1.9.1.js\"&&/script&\n
&script src=\"~/Content/mixitup-master/jquery.easing.min.js\"&&/script&\n
&script src=\"~/Content/mixitup-master/build/jquery.mixitup.min.js\"&&/script&\n
&script type=\"text/javascript\"&\n
$(function () {\n
var filterList = {\n
init: function () {\n
debugger;\n
// MixItUp plugin\n
$('#portfoliolist').mixitup({\n
targetSelector: '.portfolio',\n
filterSelector: '.filter',\n
effects: ['fade'],\n
easing: 'snap',\n
// call the hover effect\n
onMixEnd: filterList.hoverEffect()\n
hoverEffect: function () {\n
// Simple parallax effect\n
$('#portfoliolist .portfolio').hover(\n
function () {\n
$(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad');\n
$(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad');\n
function () {\n
$(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad');\n
$(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad');\n
// Run the show!\n
filterList.init();\n
&/script&\n&/head&\n&body&\n
&div class=\"container\"&\n
&ul id=\"filters\" class=\"clearfix\"&\n
&li&&span cass=\"filter active\" data-filter=\"app card icon logo web\"&所有分类&/span&&/li&\n
&li&&span class=\"filter\" data-filter=\"app\"&手机应用&/span&&/li&\n
&li&&span class=\"filter\" data-filter=\"card\"&卡片&/span&&/li&\n
&li&&span class=\"filter\" data-filter=\"icon\"&图标&/span&&/li&\n
&li&&span class=\"filter\" data-filter=\"logo\"&Logo&/span&&/li&\n
&li&&span class=\"filter\" data-filter=\"web\"&网页&/span&&/li&\n
&div id=\"portfoliolist\"&\n
&div class=\"portfolio logo\" data-cat=\"logo\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/Logo/5.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Bird Document&/a&\n
&span class=\"text-category\"&Logo&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio app\" data-cat=\"app\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/app/1.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Visual Infography&/a&\n
&span class=\"text-category\"&APP&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio web\" data-cat=\"web\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/web/4.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Sonor's Design&/a&\n
&span class=\"text-category\"&Web design&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio card\" data-cat=\"card\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/card/1.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Typography Company&/a&\n
&span class=\"text-category\"&Business card&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio app\" data-cat=\"app\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/app/3.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Weatherette&/a&\n
&span class=\"text-category\"&APP&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio card\" data-cat=\"card\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/card/4.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&BMF&/a&\n
&span class=\"text-category\"&Business card&/span&\n
&div class=\"label-bg\"&&/div&\n
&/div&\n\n
&div class=\"portfolio card\" data-cat=\"card\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/card/5.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Techlion&/a&\n
&span class=\"text-category\"&Business card&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio logo\" data-cat=\"logo\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/logo/1.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&KittyPic&/a&\n
&span class=\"text-category\"&Logo&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio app\" data-cat=\"app\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/app/2.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Graph Plotting&/a&\n
&span class=\"text-category\"&APP&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio card\" data-cat=\"card\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/card/2.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&QR Quick Response&/a&\n
&span class=\"text-category\"&Business card&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio logo\" data-cat=\"logo\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/logo/6.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Mobi Sock&/a&\n
&span class=\"text-category\"&Logo&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio logo\" data-cat=\"logo\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/logo/7.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Village Community Church&/a&\n
&span class=\"text-category\"&Logo&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio icon\" data-cat=\"icon\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/icon/4.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Domino's Pizza&/a&\n
&span class=\"text-category\"&Icon&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio web\" data-cat=\"web\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/web/3.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Backend Admin&/a&\n
&span class=\"text-category\"&Web design&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio icon\" data-cat=\"icon\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/icon/1.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Instagram&/a&\n
&span class=\"text-category\"&Icon&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio web\" data-cat=\"web\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/web/2.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Student Guide&/a&\n
&span class=\"text-category\"&Web design&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio icon\" data-cat=\"icon\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/icon/2.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Scoccer&/a&\n
&span class=\"text-category\"&Icon&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio icon\" data-cat=\"icon\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/icon/5.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&3D Map&/a&\n
&span class=\"text-category\"&Icon&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio web\" data-cat=\"web\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/web/1.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Note&/a&\n
&span class=\"text-category\"&Web design&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio logo\" data-cat=\"logo\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/logo/3.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Native Designers&/a&\n
&span class=\"text-category\"&Logo&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio logo\" data-cat=\"logo\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/logo/4.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Bookworm&/a&\n
&span class=\"text-category\"&Logo&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio icon\" data-cat=\"icon\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/icon/3.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Sandwich&/a&\n
&span class=\"text-category\"&Icon&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio card\" data-cat=\"card\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/card/3.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Reality&/a&\n
&span class=\"text-category\"&Business card&/span&\n
&div class=\"label-bg\"&&/div&\n
&div class=\"portfolio logo\" data-cat=\"logo\"&\n
&div class=\"portfolio-wrapper\"&\n
&img src=\"~/Content/image/logo/2.jpg\" alt=\"\" /&\n
&div class=\"label\"&\n
&div class=\"label-text\"&\n
&a class=\"text-title\"&Speciallisterne&/a&\n
&span class=\"text-category\"&Logo&/span&\n
&div class=\"label-bg\"&&/div&\n
&/div&&!-- container --&\n&/body&\n&/html&\n 七、总结 以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的朋友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，可以打赏博主，也可以点赞以资鼓励。不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。","updated":"T02:33:13.000Z","canComment":false,"commentPermission":"anyone","commentCount":15,"collapsedCount":0,"likeCount":59,"state":"published","isLiked":false,"slug":"","lastestTipjarors":[{"isFollowed":false,"name":"金鱼","headline":"","avatarUrl":"/da8e974dc_s.jpg","isFollowing":false,"type":"people","slug":"jin-yu-23-46","bio":"工程师","hash":"e16ccf895dd4e709b4052","uid":191500,"isOrg":false,"description":"","profileUrl":"/people/jin-yu-23-46","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"isFollowed":false,"name":"无名","headline":"关注我的是SB","avatarUrl":"/da8e974dc_s.jpg","isFollowing":false,"type":"people","slug":"gaomingyang","bio":null,"hash":"afbe760e2c46ad368ca6c3cb","uid":92,"isOrg":false,"description":"关注我的是SB","profileUrl":"/people/gaomingyang","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"isTitleImageFullScreen":true,"rating":"none","titleImage":"/v2-958f88bd1a96a166cab3c_r.png","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"JavaScript"},{"url":"/topic/","id":"","name":"Bootstrap (Twitter)"}],"adminClosedComment":false,"titleImageSize":{"width":1366,"height":667},"href":"/api/posts/","excerptTitle":"","column":{"slug":"dreawer","name":"极乐科技"},"tipjarState":"activated","tipjarTagLine":"真诚赞赏，手留余香","sourceUrl":"","pageCommentsCount":15,"tipjarorCount":2,"annotationAction":[],"hasPublishingDraft":false,"snapshotUrl":"","publishedTime":"T10:33:13+08:00","url":"/p/","lastestLikers":[{"bio":"IT","isFollowing":false,"hash":"fbde7e087abbcd","uid":322900,"isOrg":false,"slug":"li-chen-yang-12-48","isFollowed":false,"description":"","name":"李晨阳","profileUrl":"/people/li-chen-yang-12-48","avatar":{"id":"b7e3d074e223a76c82739","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"朝闻道，夕すごい","isFollowing":false,"hash":"5ee3b12a412d3614dcbfefe4dfb42e28","uid":574460,"isOrg":false,"slug":"waster112","isFollowed":false,"description":"","name":"waster","profileUrl":"/people/waster112","avatar":{"id":"f6e5407ffc918bc64ba5ebcfd6843cd0","template":"/{id}_{size}.png"},"isOrgWhiteList":false},{"bio":"不想一直这么平庸.","isFollowing":false,"hash":"09489fece681e7ed3dc38","uid":049500,"isOrg":false,"slug":"zhang-bao-le-56","isFollowed":false,"description":"后端学习中.","name":"张三岁啊","profileUrl":"/people/zhang-bao-le-56","avatar":{"id":"v2-939ef85c617e0e7b9d4f97dfb151f475","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":null,"isFollowing":false,"hash":"13bfedd2160c","uid":48,"isOrg":false,"slug":"yufeng-jiang","isFollowed":false,"description":"","name":"Yufeng Jiang","profileUrl":"/people/yufeng-jiang","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"GIS/工程测量","isFollowing":false,"hash":"db98dd61fb606","uid":88,"isOrg":false,"slug":"liu-kai-442","isFollowed":false,"description":"","name":"lovena","profileUrl":"/people/liu-kai-442","avatar":{"id":"50dffe6cb2d8ed90fe915e19ad0ad4d4","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"summary":"前言：上一篇分享过，上篇说过还有好东西会分享，博主是一个说话算话的人，这段时间，博主收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点…","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":true,"rating":"none","titleImage":"/v2-fd89ced4c80aa95ac88bcac2_r.jpg","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"JavaScript"},{"url":"/topic/","id":"","name":"React"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"极乐科技（）","isFollowing":false,"hash":"4b43cf6f3d97f480b3ca2c13e5b12752","uid":563500,"isOrg":false,"slug":"Dreawer","isFollowed":false,"description":"知乎专栏 && /dreawer ","name":"极乐君","profileUrl":"/people/Dreawer","avatar":{"id":"v2-8cb80f97b7d5f74c7a8997cbc4089e1f","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"dreawer","name":"极乐科技"},"content":"来源：作者：随风溜达的向日葵（转载已获得作者许可）本文用于指导开发团队从无到有搭建React的开发环境。文章并不会解释任何react语法规则，只关注如何利用已有的工具搭建一个便于开发和发布的环境。React本文记录了本人以及目前团队从无到有使用React的过程，我们将从webpack开始说起，一步一步展现React最基本的开发生态。在这里并不会介绍任何jsx或es6相关的语法，只聚焦于如何使用react生态搭建利于团队协作、有利于提升开发效率的开发环境。脚手架工具——webpack工欲善必须利其器，想要高效的开发react，必须保证有一个高效有序的开发环境。我们使用的是Facebook开源的脚手架工具——webpack来搭建一个完全不依赖服务器的开发环境。实现高效集成、实时编辑可见、动态编译jsx和es6等强悍功能。添加webpackwebpack最早是Facebook的instagram团队研发出的脚手架工具，用于支持前端系统的开发。虽然webpack一直都和react嵌套在一起使用，但是他的使用场景并不局限于react，你可以把他应用于所有的前端开发场景。webpack也是依赖nodejs和npm的，在安装webpack之前务必先安装nodejs的环境，nodejs和npm的安装参看:。可以像下面这样安装一个全局的webpack环境。$ npm install webpack -g\n 或者以依赖工程的方式安装# 进入项目目录\n# 确定已经有 package.json，没有就通过 npm init 创建\n# 安装 webpack 依赖\n$ npm install webpack --save-dev\n测试运行webpack（本例子的代码存放在：。下载后用 npm install 下载npm依赖即可使用。）Setp1:简单打包首先我们增加一些用于测试元素。先写一个index.html&!DOCTYPE html&\n&html lang=\"en\"&\n&head&\n
&meta charset=\"UTF-8\"&\n
&title&Title&/title&\n&/head&\n&body&\n
&script src=\"bundle.js\"&&/script&\n&/body&\n&/html&\n然后添加一个entry.js/**\n * Created by chkui on .\n */\nrequire(\"!style!css!./style.css\");\ndocument.write('&h1&hello webpack&/h1&');\n然后就可以执行打包命令了：$ webpack ./entry.js bundle.js\n运行以后，就会发现在目录中生成了一个bundle.js文件。浏览器中打开index.html就会看到执行效果。Step2:利用webpack分析工具打包增加一个名为module.js的文件：/**\n * Created by chkui on .\n */\nmodule.exports = 'It works from module.js.'\n在原来的entry.js增加引用：/**\n * Created by chkui on .\n */\nrequire(\"!style!css!./style.css\");\ndocument.write('&h1&hello webpack&/h1&');\n//新增对module.js的引用\ndocument.write(require('./module.js'));\n然后同样执行webpack打包命令：$ webpack ./entry.js bundle.js\n然后在打开index.html，会发现我们新增加的module.js的内容被正确输出。这是因为我们在页面中通过nodejs的require的方式引入的module.js，而使用webpack打包时会自动在依赖关系中引入module.js。加载器webpack提供了一个非常强大的loader功能，这个功能可以用于管理各种依赖关系模块，在webpack中所有的文件都视作一个模块。首先npm导入webpack loader：npm install css-loader style-loader\n添加一个用于测试的style.css文件：h1{\n
color:red;\n}\n在entry.js中添加引用：/**\n * Created by chkui on .\n */\nrequire(\"!style!css!./style.css\");//添加对css的引用\ndocument.write('&h1&hello webpack&/h1&');\ndocument.write(require('./module.js'));\n使用命令行打包：webpack ./entry.js bundle.js --module-bind 'css=style!css'\n会发现css的样式生效了。可以将繁琐的“!style!css!./style.css”简写成\"./style.css\"。使用配置管理细心的人会发现，我们每次使用命令行打包都带了大量的参数，这样不仅繁琐更不利于规模化使用。webpack同样可以使用标准化配置文件来替代命令行中的各种参数。webpack的配置文件是nodejs的文件，通常命名为 webpack.config.js。我们在工程中增加配置文件：/**\n * Created by chkui on .\n */\nmodule.exports = {\n
entry: './entry.js',//定义要引入的js文件\n
output: {\n
path: __dirname,\n
filename: 'bundle.js' //定义要输出的js文件\n
module: {\n
loaders: [//定义加载内容\n
{test: /\\.css$/, loader: 'style!css'}\n
}\n}\n现在，我们在命令行中输入webpack就可以实现和前面一样的打包。丰富打包输出内容可以使用：webpack --progress --colors\n命令来丰富打包输出的内容，更容易了解出现的问题。监听更新模式在我们进行编码开发的时候，每次对文件的编辑我们都想立即看到编译效果，如果每次编辑都要去打包，会非常麻烦。webpack提供了一个监听模式（类似grunt的watch），用于监听每次对文件的修改，修改后会立即进行增量更新。启用监听模式：webpack --progress --colors --watch\n监听模式使用的是内存增量更新。webpack会将所有需要打包的文件copy到内存，然后监控文件修改，如果文件发生了修改，会将修改的文件替换内存中的对应文件。因此开发完之后，切记进行一次手动打包才能生效。开发环境模式webpack更强大的是，他整合了nodejs的express提供了一个静态服务器。（虽然没有官方正式，我觉得webstrom和微信本地开发环境都是整合的nodejs的express）使用了开发环境模式，我们所有的动态修改和操作都可以实时看到效果，并且解决了静态资源各种路径引用的问题。首先npm安装工具：npm install webpack-dev-server -g\n然后使用命令行工具启用开发环境：webpack-dev-server --progress --colors\nwebpack的开发环境模式很强悍，比使用--watch更犀利的地方在于可以实现编辑即可见。浏览器立即同步刷新运行。开发环境模式可以延伸到生产环境实现代码同步级别的热部署。 开发环境扩展——webstorm的坑由于本人的前端页面使用webstorm开发，在使用过程中发现了一个webstorm的坑。webstorm有文件缓存的功能，在编辑完毕保存之后并不会实时的更新磁盘文件，这样的就导致webpack的开发环境无法同步更新文件。以下是解决方法：1.File-&settings-&System Settings2.找到弹出框的Use \"safe write\"，将其勾选解除。输出调试信息webpack的配置较为复杂，一不小心就会出现错误。它提供了一个输出调试信息的参数：$ webpack --display-error-details\n调试运行webpack命令出错的时候使用。Webpack 中涉及路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, \"app/folder\") 或 path.join(__dirname, \"app\", \"folder\") 的方式来配置，以兼容 Windows 环境。webpack插件某些时候，webpack的常规功能无法满足我们的需求，我们可以为webpack开发插件，或者使用其他开发团队已经完成的插件。下面是一个插件的标准格式：function MyPlugin(options) {\n
// Configure your plugin with options...\n}\n\nMyPlugin.prototype.apply = function(compiler) {\n
compiler.plugin(\"compile\", function(params) {\n
console.log(\"The compiler is starting to compile...\");\n
compiler.plugin(\"compilation\", function(compilation) {\n
console.log(\"The compiler is starting a new compilation...\");\n\n
compilation.plugin(\"optimize\", function() {\n
console.log(\"The compilation is starting to optimize files...\");\n
compiler.plugin(\"emit\", function(compilation, callback) {\n
console.log(\"The compilation is going to emit files...\");\n
callback();\n
});\n};\n\nmodule.exports = MyPlugin;\n需要实现什么功能，可以按照这个标准去开发自己的插件。React开发使用webpack搭建好开发环境后，我们就可以开始着手开发react了。开始之前，我们还是要优先完成开发环境的配置和搭建。react使用的语法是jsx，现在还新增了对es6的支持。为了可以高效开发，我们需要使用webpack的loader功能，将jsx或es6使用语法糖转义成浏览器可以识别的标准JavaScript语法。下面将继续在前文webpack的基础上继续说明如何开发react。安装必要的依赖工具react的基础工具包：$ npm install react --save-dev\nreact的dom组件：$ npm install react react-dom --save-dev\n在前面介绍webpack的时候已经介绍了加载器的概念，这里需要额外安装babel用于对react的jsx风格的编码进行解析，babel除了jsx外还可以解析es6等。安装babel：$ npm install babel-loader\n安装babel-loader之后\\node_modules目录中会额外多安装一个babel-core，这是babel的核心包。有了babel，我们还需要安装编码转换规则，用于解析jsx、es6等等。$ npm install babel-preset-es2015 babel-preset-react --save-dev\n除了babel提供的es6和jsx，webpack还可以使用各种loader来转换编码，比如coffeescript等。想要什么就去google找吧。完善本地开发环境命令前面的案例使用 webpack-dev-server 来热部署本地开发环境提升开发效率。但是每次都靠长长的命令行启动和停止太过于繁琐。我们可以利用npm的package.json配置脚本运行来统一管理脚本命令：{\n
\"name\": \"demo2-react\",\n
\"version\": \"1.0.0\",\n
\"description\": \"react demo\",\n
\"main\": \"index.js\",\n
\"scripts\":{\n
\"dev\": \"webpack-dev-server --progress --colors --inline\" //配置运行命令\n
//more\n}\n添加了scripts后，我们今后只需要运行$ npm run dev\n即可使用配置好的命令行参数启动本地开发环境服务器。终于可以开始码农的核心工作了（demo代码存放在：。下载后用 npm install 下载npm依赖即可使用）前面准备了这么久，就是为了随后我们可以快乐的编码。首先我们按照下面这个结构创建工程结构：/root\n--/dev\n----/js\n------/index\n--------/comps\n----------component1.jsx\n----------main.jsx\n--------index.js\n----/style\n------/index\n--------index.css\n----index.html\n然后根据工程的结构修改我们的webpack.config.js：/**\n * Created by Administrator on .\n */\nvar path = require('path');\nmodule.exports = {\n
entry: ['./dev/js/index/comps/main.jsx'],//定义要引入的js文件\n
output: {\n
path: __dirname,\n
filename: './dev/js/index/index.js' //定义要输出的js文件\n
module: {\n
loaders: [{\n
test: /\\.js[x]?$/,\n
exclude: /(node_modules|bower_components)/,\n
loader: 'babel-loader',\n
query: {\n
presets: ['es2015','react']\n
test: /\\.css$/,\n
loader: 'style!css'\n
test: /\\.(png|jpg)$/,\n
loader: 'url?limit=25000' //只解析小于25000字节的图片\n
}\n};\n和前面介绍webpack的例子相比，这里的配置文件新增了了一个babel-loader的配置。test后的正则表达式表示对所有的js或者jsx文件进行解析；exclude表示不解析npm安装目录下和bower安装目录下的文件；loader表示使用的解析工具；query表示扩展参数，这里的'es2015'和'react'表示启用babel-preset-es2015和bable-preset-react解析规则。这里需要注意的是解析的优先级的倒序的，即会先解析‘react’。然后我们添加编码内容（所有的例子都分别实现了jsx规范和es2015规范）：index.html：&!DOCTYPE html&\n&html lang=\"en\"&\n&head&\n
&meta charset=\"UTF-8\"&\n
&title&Title&/title&\n&/head&\n&body&\n
&div id=\"comp\"&&/div&\n
&script src=\"/dev/js/index/index.js\"&&/script&\n&/body&\n&/html&\n
main.jsx：/**\n * Created by chkui on .\n */\n\n//jsx\n/*\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar Comp1 = require('./component1.jsx');\nrequire('../../../style/index/index.css');\n\nReactDOM.render(\n
&div className=\"main\"&\n
react jsx demo:\n
&Comp1 /&\n
document.getElementById('comp')\n);\n*/\n\n//es2015\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Comp1 from './component1.jsx' /*切记，大写是变量小写是标签*/\nimport style from '../../../style/index/index.css'\n\nReactDOM.render(\n
&div className=\"main\"&\n
react es2015 demo:\n
&Comp1 /&\n
document.getElementById('comp')\n);\ncomponent1.jsx：/**\n * Created by Administrator on .\n */\n\n//jsx\n/*\nvar React = require('react');\nvar comp1 = React.createClass({\n
render: function () {\n
return (\n
&div className = \"index\"&\n
hello react!\n
}\n});\nmodule.exports = comp1;\n*/\n\n//es6\nimport React from \"react\"\nclass Comp1 extends React.Component{\n
//构造函数\n
constructor(...args){\n
super(...args);\n
//覆盖父类的渲染方法\n
render() {\n
return (\n
&div className = \"index\"&\n
hello react!\n
}\n}\nexport default Comp1;\n
编码完毕之后，我们使用我们设定好的脚本运行我们的本地开发环境：$ npm run dev\n启动时，所有的文本都会被读取到内存中，我们可以根据输出来聊天到底添加了哪些依赖的文件。启动完成后，浏览器上输入
即可看到我们用react开发的页面。此时修改js或css文件，编辑效果都会立刻呈现在浏览器上。React浏览器调试工具Facebook提供了基于chrome的页面调试工具，可以看到所有react组件及其效果。工具安装：首先最重要的是——翻墙-_-。不翻墙chrome的网上商店就别想了。然后在chrome网店搜索“React Developer Tool”。找到后添加到chrome。添加完成后可以发现在chrome中增加了react的图标。然后在demo页面按F12打开开发人员工具，会发现多了一个React栏目。选择这个栏目后，会显示出React组件的效果。—————————————————————————————————————————极乐科技专栏原创作者征集进行时……如果你乐于分享、愿意交流、爱钻研技术；如果你希望记录成长的过程，期待与大牛比肩；如果你希望得到更多的关注……欢迎加入我们原创作者团队，我们原创作者团队有大牛，有妹纸，有逗比！我们的原创作者团队能交流，善协作，爱学习！加入原创作者团队，结实更多的它他她！此外，对于优质原创内容，极乐科技会有相关激励！让劳有所得！—————————————————————————————————————————在学习过程如果有任何疑问，请来极乐网()提问，或者扫描下方二维码，关注极乐官方微信，在平台下方留言~","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T17:15:21+08:00","url":"/p/","title":"从0到1，细说 React 开发环境搭建那点事","summary":"来源：作者：随风溜达的向日葵（转载已获得作者许可） 本文用于指导开发团队从无到有搭建React的开发环境。文章并不会解释任何react语法规则，只关注如何利用已有的工具搭建一个便于开发和发布的环境。 React本文记录了本人以及目前团…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":4,"likesCount":29},"next":{"isTitleImageFullScreen":true,"rating":"none","titleImage":"/v2-ec0a90a483f3_r.jpg","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"前端开发"},{"url":"/topic/","id":"","name":"前端框架"},{"url":"/topic/","id":"","name":"JavaScript"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"勉强算个中级前端/扫地小哥","isFollowing":false,"hash":"9fab34b35a2a4b99e5d0a","uid":403800,"isOrg":false,"slug":"qiangdada520","isFollowed":false,"description":"一沙一世界，一花一天堂。无限掌中置，刹那成永恒。一花一世界，一树一菩提。（励志成为一个有文化的段子手）","name":"qiangdada","profileUrl":"/people/qiangdada520","avatar":{"id":"v2-c5e90a8062bc0","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"dreawer","name":"极乐科技"},"content":"摘要: 前段时间由于忙着跳槽的工作交接及熟悉新公司，已经停更博客两周了。不得不说，TX的开发模式的的确确是非常好的，整个团队也都是行业大牛，但是大牛并没有一点脾气，作为一个小白有问题问他们，他们总是乐此不疲的教导着我，感谢志伟哥，感谢项目组所有的人。老规矩，下面直接上干货。前言这里讲的主要是想谈谈基于Vue的一个组件开发。不得不说的一点就是，在实际的Vue项目中，页面中每一个小块都是由一个个组件（.vue文件）组成，经过抽离后，然后再合并一起组成一个页面。由于上家公司我负责多的是可视化这一块的开发，这边我也将带着大家进行一个Vue项目中的可视化组件的开发，这里用到的框架将是主流的可视化框架highcharts。一、Vue环境的搭建1、Mac用户首先安装包管理homebrew/usr/bin/ruby -e \"$(curl -fsSL /Homebrew/install/master/install)\"\n再安装nodebrew install node\n安装vuenpm install vue\n2、windows用户进入nodejs官网，然后下载对应自己电脑系统的版本安装成功,安装vuenpm install vue\n最后查看一下自己node，npm，vue版本（失败的话自行百度windows系统如何安装node）。下图是我目前node，npm及vue的版本如果这里出问题了，请全局安装vue-cli
npm install -g vue-cli\n二、Vue项目初始化进入你需要搭建Vue项目的目录下执行vue init webpack my-vue-component\n配置就按下图进行选择然后进入到my-vue-component目录执行# 下载项目的版本依赖\nnpm install\n由于我家里的网络，需要翻墙的npm根本动不了，这里我用的是淘宝镜像进行的依赖安装，没有淘宝镜像的先安装一下吧（实际项目中还是需要用npm，毕竟cnpm会忽略下载一些依赖的）npm install -g cnpm --registry=https://registry.npm.taobao.org\n安装完成，启动项目npm run dev\nOK,至此，Vue项目便搭建好了。三、highchars的导入与搭建首先通过cnpm进行highchars的导入cnpm install highcharts --save\n导入完成后就可以进行highchars的可视化组件开发了1、首先打开自己初始化好的项目（这里我用的是sublime，实际开发中我用的是atom）在初始化好了的components目录下新建一个chart.vue文件接下来搭建chart组件的架子&template&\n
&div class=\"x-bar\"&\n
&div :id=\"id\"\n
:option=\"option\"&&/div&\n
&/div&\n&/template&\n&script&\nimport HighCharts from 'highcharts'\nexport default {\n
// 验证类型\n
props: {\n
type: String\n
option: {\n
type: Object\n
mounted() {\n
HighCharts.chart(this.id,this.option)\n
}\n}\n&/script&\nchart架子搭好后，开始创建chart-options目录，里面创建一个options.js用来存放模拟的chart数据这里我模拟写了一个柱状图的数据module.exports = {\n
chart: {\n
type: 'bar',\n
series: [{\n
data: [50, 235, 809, 947]\n
}\n}\n四、引用chart组件这里直接就把引用写到App.vue这么一个接口文件中吧&template&\n
&div id=\"app\"&\n
&x-chart :id=\"id\" :option=\"option\"&&/x-chart&\n
&/div&\n&/template&\n\n&script&\n// 导入chart组件\nimport XChart from 'components/chart.vue'\n// 导入chart组件模拟数据\nimport options from './chart-options/options'\nexport default {\n
name: 'app',\n
data() {\n
let option = options.bar\n
return {\n
id: 'test',\n
option: option\n
components: {\n
}\n}\n&/script&\n\n&style&\n#test {\n
width: 400px;\n
height: 400px;\n
margin: 40px auto;\n}\n&/style&\n到这里，chart组件也引入成功，我们直接看一下最后页面中显示的效果吧这里需要说明一点的就是对于所有highchars组件的适用度。大家通过看我写的模拟数据也可以看出来，这里我是把一些通用的属性给直接忽略了。如果实际项目的开发中需要的话，大家可以把通用的一些属性的数据直接写到chart.vue文件中。通过props验证，写好default默认值作为通用属性。直接给大家看下我实际开发当中对于一些通用属性的处理吧这里还是需要看你们项目的需求，然后制定一套属于自己的通用的属性。然后再单独对每个组件进行操作。好了，Vue组件开发到这里也差不多了。如果有什么问题或者有什么槽要吐的话（求轻喷），欢迎文章下面留言一起交流探讨。","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T15:48:19+08:00","url":"/p/","title":"一入前端深似海，从此红尘是路人系列第八弹之浅析Vue组件开发","summary":"摘要: 前段时间由于忙着跳槽的工作交接及熟悉新公司，已经停更博客两周了。不得不说，TX的开发模式的的确确是非常好的，整个团队也都是行业大牛，但是大牛并没有一点脾气，作为一个小白有问题问他们，他们总是乐此不疲的教导着我，感谢志伟哥，感谢项目组所…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":9,"likesCount":30}},"annotationDetail":null,"commentsCount":15,"likesCount":59,"FULLINFO":true}},"User":{"landeanfen":{"isFollowed":false,"name":"懒得安分","headline":"","avatarUrl":"/v2-b17acc1ea99_s.jpg","isFollowing":false,"type":"people","slug":"landeanfen","bio":"软件工程师","hash":"1ce6768f96efdee53363","uid":172100,"isOrg":false,"description":"","profileUrl":"/people/landeanfen","avatar":{"id":"v2-b17acc1ea99","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{"dreawer":{"following":false,"canManage":false,"href":"/api/columns/dreawer","name":"极乐科技","creator":{"slug":"Dreawer"},"url":"/dreawer","slug":"dreawer","avatar":{"id":"v2-def9c21d9ca33ad157f4208","template":"/{id}_{size}.jpg"}}},"columnPosts":{},"columnSettings":{"colomnAuthor":[],"uploadAvatarDetails":"","contributeRequests":[],"contributeRequestsTotalCount":0,"inviteAuthor":""},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"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":{"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},"sys":{}}