如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

背景

• 设置禁用状态disabled，如：$(".js-example-disabled").prop("disabled",false);
• 默认值设置：$("#select2").val("1").trigger("change");
• 多选的默认值可以使用：$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过
• select2还有丰富的自定义事件

  JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
 
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
 
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
 
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
 
$("#select2").on("change", function (e) { log("change"); });

【select2的其他组件】

<div class="box1 div">

   <p>多选下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

  <optgroup label="系统设置">

  <option value="1">用户管理</option>

  <option value="2">角色管理</option>

  <option value="3">部门管理</option>

  <option value="4">菜单管理</option>

  </optgroup>

  <optgroup label="订单管理">

  <option value="5">订单查询</option>

  <option value="6">订单导入</option>

  <option value="7">订单删除</option>

  <option value="8">订单撤销</option>

  </optgroup>

  <optgroup label="基础数据">

  <option value="9">基础数据维护</option>

  </optgroup>

  </select>

</div>

JS代码

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能够选择的个数

      });

代码

Html代码

<div class="box2 div">
     <p>图文结合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系统设置">
  <option value="1">用户管理</option>
   <option value="2">角色管理</option>
   <option value="1">部门管理</option>
  <option value="1">菜单管理</option>
  </optgroup>
  <optgroup label="订单管理">
  <option value="1">订单查询</option>
  <option value="1">订单导入</option>
   <option value="1">订单删除</option>
  <option value="1">订单撤销</option>
   </optgroup>
  <optgroup label="基础数据">
  <option value="1">基础数据维护</option>
  </optgroup>
      </select>
</div>

JS代码

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text; 
            }
  var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };

各公司开发成功产品的方式已经在根本上发生了变化。智能手机、社交网络或云计算等新技术使苹果、谷歌或亚马孙等科技巨头在大约20年内成为最有价值的公司。

这是我的第一篇系列文章“精益创新——如何在今天开发成功的产品”。这是多年来创新的转变和产品开发的方法论。

所有这些变化的发生是由于人们消费产品的方式发生了转变而造成。为了迎合用户行为和对产品期待的变化，科技公司必须将产品方向转变为更灵活、更敏捷、特别是以用户为中心上，即从瀑布流到敏捷设计再到精益设计。

虽然现在仍然有95%的大型组织在用瀑布模型开发新产品，但行业领头公司已经在率先使用精益设计作为方法了。

瀑布模型（20世纪70年代）Waterfall 

瀑布模型是序列顺序的处理方法，进程就像瀑布一样稳定地推向目标。它要求项目产出全面的计划并提前开发。

瀑布过程

由于前期设计和分析花费了大量的时间和精力，设计变更会使成本变得更高，尤其是设计后阶段。每个设计节点都有清晰的目标，达成后将进入下一个阶段。这样防止了客户在最后发布前评论和反馈。即使征求了建议，项目在接受反馈方面也不那么灵活。虽然瀑布模型是一种不那么灵活的方法，但它对需要执行“计划”的团队（在预算范围内）更有益。

敏捷开发（20世纪90年代）Agile 

随着互联网的兴起，瀑布模型漫长的开发周期已经不再能够提前规划人们的需求。同时，随着电子商务的全球化和新经济模式的到来引发了更多的竞争。公司在开发产品的周期中不得不对市场趋势作出反应，因此，需要一个灵活的产品开发步骤。

“敏捷”指的是由17个软件工程师发布于2001年2月的一份宣言，他们必须就轻量开发方法进行讨论。它基于迭代的方法，而不是像瀑布模型一样在项目之初就进行深入的规划。开发团队为了保证首先完成最重要的任务，他们会不断调整项目的工作范围。

每次迭代的目的是为了实现一个可交付的产品。随着来自终端用户的持续反馈得到鼓励，敏捷开发能对不断变化的需求作出反应，因为随着时间推移它们都是被需要的。因此，在管理和减少需求变化的风险方面，这些方法对项目来说是正确的选择。

设计思维（21世纪初）Design Thinking 

我们都知道以人为中心的设计，设计思维作为一个概念已经存在一段时间了，只是名称不同（以用户为中心的设计、服务设计）。设计思维因得益于它解决问题的技巧和科学的方法而成为时尚。设计思维过程和方法的普及与2001年的IDEO有关。

“设计思维是一种以人为本的创新方法，它从设计师工具箱里汲取了灵感，将用户的需求、技术的可能性和商业成功的要求结合起来。”

汤姆布朗，IDEO创始人。

“设计师工具箱”是一个与设计师的方法和过程有关的应用——包括思考创造力、灵活的创意以及对用户行为和需求的清晰理解。设计思维是一个由4个基础阶段组成的结构化流程。

从目标群体的发现阶段开始，所确定的需求和问题将被合成一些主要的见解。这些见解是概念阶段的基础，这个阶段的目标是产出许多想法，而最有希望的想法将被作为原型进行开发。原型测试是最后一个阶段，这个阶段需要确保解决方案满足目标群体的需求。

设计思维之所以产生，是因为大公司缺乏创新能力，无法开发出能满足客户需求和客户问题的创新产品。如今，大多数的公司都使用分析思维来作为运营方式。这种分析思维阻碍了创造性（打破常规）思维的发展，而这种创造性思维是破坏性创新所必需的。

这种创造性，特别是大胆的思考（有些称为“疯狂思考”）与设计概念有关。为了创新，企业必须具备设计能力。为了设计，一个组织需要内部融合设计，以孕育出一种培养创造思维的文化。

设计思维的显著差异在于将用户置于每项活动的中心。此外，以人为本的设计强调体验胜于效率，因为良好的体验是用户与产品互动的动力。

精益创新（创业公司——21世纪初）Lean Innovation

2011年，随着Eric Ries《精益创业》这本书的出版，创新和产品开发实践已经向精益方向发展。精益创业的目标是避免开发那些没人需要的产品或服务。精益过程包含用户反馈和产品早期实验。

精益创新以“失败来了成功还会远吗？”的哲学而闻名。开发者接受这种失败，因为他们获得突破性成功前是要需要不断学习的。

精益方法也常被称为“客户开发”。它的目标是在搭建最终产品前，找出用户想要什么。精益的原则是建立你正在试着测试的假设和设想，而你通过在这些实验的学习，将会取得进步。

科技推动全球竞争

数字化和巨大的变革速度不再允许公司在不考虑客户需求的情况下简单地生产产品。在过去，向客户提供错误的产品只会导致项目失败。而今天，持续不能交付客户所需的产品，将导致整个商业模式的失败。诺基亚或柯达只是这里提到的两个最著名的失败案例。

智能手机、云计算和开源等技术使得产品的开发速度更快、成本更低。开发产品或进入市场的的门槛比以往任何时候都要低。这意味今天有更多的全球竞争。公司需要专注于了解用户和他们想要什么。客户可以很容易地转向其它产品。品牌忠诚度对消费者决策的影响逐年下降。

专注于商业模式，而不仅仅是产品（Focus on business models, not only on products）

精益和设计思维都是以客户为中心、基于迭代的方法。客户参与和反馈是取得进展的动力。精益创新的关键不同之处在于，它在围绕产品考虑整个商业模式时更进一步。

亚马逊成为电子商务的领导者的原因之一是他们对客户服务的坚定承诺。虽然他们没有靠这个挣过一分钱，但是却帮亚马逊获得了客户的信任和忠诚。如今，成功的公司区别于他们的商业模式，而不是他们的产品供应。

确保用户持续参与（Engage customers continuously）

在新世界中，成功的公司将有一个共同点：对用户行为和需求的超常理解。随着行为和需求的快速变化，确保建立客户需求的唯一途径就是让用户持续的参与到项目中来。准确的用户理解是长期商业模式成功的基石。

结合设计思维、精益设计和敏捷开发

虽然设计思维，精益设计和敏捷开发可以单独使用，但是最好的结果来自这些方法的结合。设计思维有助于深入了解客户的需求和行为，而敏捷开发则有助于地开发和交付解决方案，精益方法的实践帮助我们在用户参与的假设测试中可以获得更直接的验证和学习。

当持续使用“开发–测试–学习”这个模式循环，就可以逐步接近一个成功的产品和有率的商业模式。

UI设计的基本规范，包括网页设计和APP设计的规范罗列

• 如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

  万聚制作 2018-05-15 13:30:00

袋鼠云：可视化大屏打造智能数据方案全闭环

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

编者按：距热情似火的618国民年中购物节已经不到两个月时间，去年京东商城最终以累计下单金额高达1199亿元（行业口径）的战绩收官。而记者了解到每年借着“京东618”“双11”这两股全民消费热潮的新零售品牌远远不止淘宝与京东两家，已成为了整个产业链方方面面品牌的推广盛宴。

因此，每年的618购物节参与的企业数量可谓“芸芸之众”，这场一年比一年盛大的狂欢节也对支撑其后的运算资源、网络平台、存储与挖掘大数据提出了更高更严苛的要求。针对各家的技术资源体系、技术运维团队、大数据智能技术水平也成为了企业高管的“第一关注”。

而记者采访了多家新零售企业的CIO,提及如何更好地应对即将到来的今年“618”，他们大多表示：“增加服务器及运算资源、优化技术架构提高冗余、完成即时大数据挖掘分析是今年的三大要务。”的确，在保证全民购物节完美的用户操作体验之外，对自身企业在这场没有硝烟的商战中获得的宝贵数据充分分析并加以利用也成为了CIO们所考量的重点，让精准营销落地同时指导未来的市场规划。

如何更好的挖掘大型项目节点中企业获得的巨量数据？如何将挖掘数据中的信息得以简明有效的呈现，最终迅速指导市场策略？记者在618前夕走访了国内新锐的数据智能解决方案企业——袋鼠云。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司，在今年动作频频，完善提升自身数据智能产品线研发的同时，也在今年大量引入高端人才，全面完善数据智能整体品牌价值。

记者在采访中了解到，袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础，通过袋鼠云的数据内容策划团队的有效建模，配以令人印象深刻的专业视觉设计，通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司，在今年动作频频，完善提升自身数据智能产品线研发的同时，也在今年大量引入高端人才，全面完善数据智能整体品牌价值。

记者在采访中了解到，袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础，通过袋鼠云的数据内容策划团队的有效建模，配以令人印象深刻的专业视觉设计，通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云CEO在采访中向记者介绍了典型客户“中国茅台”可视化大屏项目实施情况，他告诉记者：“世界第一白酒品牌“中国茅台”之所以选择袋鼠云建设数据可视化大屏项目，主要是基于要解决全面打造企业数据中台以及将中国茅台品牌能力直观生动地呈现给领导与参观客户。”

“基于此，袋鼠云为他们从数据管理与应用方式方法上改变思路， 有些甚至是全新的角度与理念，目的也是为了让‘中国茅台’的企业数据价值更好的被利用。”他告诉记者：“因为茅台品牌社会面很广，袋鼠云后期基于数据，提供的诸如舆情分析系统、反黄牛数据系统等富有社会成效的定制功能，获得客户的高度认可。”

数据智能（DI）不仅仅是把数据放在一起，而是要聚集产生化学反应。“中国茅台”这个客户应用就很典型，他继续向记者介绍:“我们给客户的数据分析与决策都是动态的，实时监控大屏即时展现茅台酒的交易总额是多少？哪个地区的茅台酒目前是销量最高的？哪些客户最热衷于他们的产品？这些动态的数据分析结果都能实时呈现在展会现场的可视化大屏幕上。另外茅台做的可视化大屏，也直观地体现了茅台用户群体的年轻化趋势，这和我们之前想象中茅台的消费者较高年龄层的情况不一样。这次可视化大屏解决方案帮助茅台更清晰地了解了自己的终端用户，要知道以前客户数据分散在经销商、渠道商那里，到底谁喝了茅台酒，茅台集团是无法获知的。”

而实时采集数据，实时处理分析数据也是袋鼠云口中的“一大门槛”。记者了解到，类似袋鼠云这样的从数据采集--数据存储--数据应用--数据呈现整体打造闭环的数据智能解决方案服务商在行业里具有很大优势。在中国茅台的典型方案中这一点就展露无遗。他向记者介绍：“中国茅台选择过去传统服务商时，手机端与电脑端的开发商是不同的，因此移动端和PC端后台数据没有打通，形成了非即时的数据孤岛。而采用了袋鼠云“全域”智能数据解决方案后，所有的标准制定都是相同的，数据得以深入而全面的加工。而精准营销、反黄牛、打标签、舆情监测、秒杀系统等等富有成效的模型都是基于企业数据的被统一联结并做出实时分析结果。”

记者谈到实时数据可视化这个部分时，袋鼠云CEO显得自信满满。他告诉记者：“数据的实时性采集非常重要，“袋鼠云”实现了TB级别甚至是PB级别的大数据进行实时处理，实现秒级反馈是最基本的要求。”他继续告诉记者：“这得益于袋鼠云的技术团队多数来自于阿里云，针对业务暴增、恶劣环境等极端情况下的峰值保障应急处理的技术与能力具有相当的经验。”记者还了解到，袋鼠云现在的技术团队都曾经历过“天猫双11”等等大型活动，并协助茅台、百草味、秒钱、申通E等多家公司顺利完成了大促护航等工作。

记者观察：一方面基于人才技术优势打造团队“硬气功”，另一方面深化客户项目落地可视化效果的“软实力”，在袋鼠云眼中一个睥睨新业界的发展蓝图已清晰可见。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前言：css3的出现使得我们可以通过前端技术，让网页内容变得更丰富，更华丽。今天来玩玩好玩的颜色渐变。

以下是 JavaScript 错误 Top 10：

       为了便于阅读，我们将每个错误描述都缩短了。接下来，让我们深入到每一个错误，来确定什么会导致它，以及如何避免创建它。 
1. Uncaught TypeError: Cannot read property 
        如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多（LOL…）。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。

       发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。
        我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

Javascript代码  

class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
} 这里有两件重要的事情要实现：

• 组件的状态（例如 this.state）从 undefined 开始。
• 当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。 这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。
  

       这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。

Javascript代码

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);
    // Assign state itself, and a default value for items
    this.state = {
      items: []
    };
  }
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

       在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。
        2. TypeError: ‘undefined’ is not an object
        这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测 试。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

      3.TypeError: null is not an object
        这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 您可以在 Safari Developer Console 中轻松测试。

有趣的是，在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===：  

       在现实世界的例子中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。 因为 DOM API 对于空白的对象引用返回值为 null。
        任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。 JS 代码按照 HTML 中的规定从上到下进行解释。 所以，如果 DOM 元素之前有一个标签，脚本标签内的 JS 代码将在浏览器解析 HTML 页面时执行。 如果在加载脚本之前尚未创建 DOM 元素，则会出现此错误。
        在这个例子中，我们可以通过添加一个事件监听器来解决这个问题，这个监听器会在页面准备好的时候通知我们。 一旦 addEventListener被触发，init() 方法就可以使用 DOM 元素。

Html代码

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
    }
  }
  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });
</script>
<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

4. (unknown): Script error 
       当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。 例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。 
        要获得真正的错误消息，请执行以下操作： 
        1. 发送 ‘Access-Control-Allow-Origin’ 头部 
        将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。 如有必要，您可以将域替换为您的域：例如，Access-Control-Allow-Origin：www.example.com。 但是，处理多个域会变得棘手，如果你使用 CDN，可能由此产生更多的缓存问题会让你感觉到这种努力并不值得。 在这里看到更多。 
         这里有一些关于如何在各种环境中设置这个头文件的例子： 
         在 JavaScript 文件所在的文件夹中，使用以下内容创建一个 .htaccess 文件：
代码

       Header add Access-Control-Allow-Origin "*"  

       将 add_header 指令添加到提供 JavaScript 文件的位置块中：
代码

       location ~ ^/assets/ {  add_header Access-Control-Allow-Origin *;  }  

        将以下内容添加到您为 JavaScript 文件提供资源服务的后端： 

代码 

        rspadd Access-Control-Allow-Origin:\ *  

        在 <script> 中设置 crossorigin="anonymous"

在您的 HTML 代码中，对于您设置了Access-Control-Allow-Origin header 的每个脚本，在 script 标签上设置crossorigin =“anonymous”。在脚本标记中添加 crossorigin 属性之前，请确保验证上述 header 正确发送。 在Firefox 中，如果存在crossorigin属性，但Access-Control-Allow-Origin头不存在，则脚本将不会执行。 

5. TypeError: Object doesn’t support property

       这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。

       这相当于 Chrome 中的 “TypeError：”undefined“ is not a function” 错误。 是的，对于相同的逻辑错误，不同的浏览器可能具有不同的错误消息。 
        对于使用 JavaScript 命名空间的 Web 应用程序，这是一个 IE l浏览器的常见的问题。 在这种情况下，99.9％ 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。 例如：如果你 JS 中有一个命名空间 Rollbar 以及方法 isAwesome 。 通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用isAwesome方法：
Javascript代码 

this.isAwesome();  

        Chrome，Firefox 和 Opera 会欣然接受这个语法。 另一方面 IE，不会。 因此，使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。

6. TypeError: ‘undefined’ is not a function
        当您调用未定义的函数时，这是 Chrome 中产生的错误。 您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。

       随着 JavaScript 编码技术和设计模式在过去几年中变得越来越复杂，回调和关闭中的自引用范围也相应增加，这是这种/那种混淆的相当常见的来源。
       考虑这个代码片段：
Javascript代码

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // what is "this"?
  }, 0);
};

执行上面的代码会导致以下错误：“Uncaught TypeError：undefined is not a function”。 你得到上述错误的原因是，当你调用setTimeout()时，实际上是调用window.setTimeout()。 因此，在窗口对象的上下文中定义了一个传递给setTimeout()的匿名函数，该函数没有clearBoard()方法。
一个传统的，旧浏览器兼容的解决方案是简单地将您的 this 保存在一个变量，然后可以由闭包继承。 例如：
Javascript代码 

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // save reference to 'this', while it's still this!
  this.timer = setTimeout(function(){
    self.clearBoard(); 
  }, 0);