你爱的网站是怎么做出来的？这款谷歌插件能分析网站设计架构
编者注:谷歌插件是用来向谷歌添加或修改功能的浏览器扩展程序。 这些扩展程序通常使用HTML、Java和CSS等语言编写而成。谷歌插件可以从谷歌应用网站上下载。本文选自Katharine Schwab近日在fastcodesign上发表的This Chrome Extension Is Like X-Ray Vision For Web Design。
你每天浏览的网站是什么？ 它使用了哪种编程语言？ 是什么字体？ 如何对在线访问者进行追踪？ 这些细节通常需要采取一些挖掘工具来获取 - 但是有一个新的，叫做WhatRuns的谷歌浏览器插件，会立即显示出互联网上任何网站使用的工具和程序。
截图:使用What runs 分析的36kr 网站
但现在，只需点击一下What runs图标，即可发现Twitter是用Python和PHP语言编写的。 纽约时报使用了许多字体，包括切尔滕纳姆自定义版本。 毫不奇怪，YouTube使用了许多Google的工具，如字体的API和开源Google Web Toolkit。
What runs插件是由企业家Jijo Sunny创建的。 它最初是被用来识别排名前50的广告网络，然后延伸到分析框架和脚本，并最终扩展到检测在网站幕后所运行的各个组件，从小部件到字体分析。 虽然它并不全面，但创始人在他们的博客中写道：现在我们专注于最受欢迎的工具，今后，我们还会扩展到一些早先使用的技术。
对网站设计师而言，WhatRuns，或许是一个用来确定其他网站，使用什么样的技术，非常有用的工具。 对于那些正在寻找完成后端任务新途径的人来说，这是一个发掘灵感的金矿。 当你找到所喜欢的网站时，你可以进行网络订阅，以便随时更新它所使用的技术。
（本文由36Kr编译组授权发布，未经许可不得转载。编辑/郝鹏程）
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
地球的事儿，我们都知道！
36氪的科技资讯小分队
今日搜狐热点Bootstrap整体框架之JavaScript插件架构
转载 &更新时间：日 14:13:44 & 作者：github_
这篇文章主要介绍了Bootstrap整体框架之JavaScript插件架构的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家介绍了JavaScript插件架构的知识点，供大家参考，具体内容如下
1. JavaScript插件架构
如下是插件alert的全部代码，每个插件都定义在如下类似的作用域中：
+function ($) {
'use strict';
// ALERT CLASS DEFINITION
// ======================
var dismiss = '[data-dismiss="alert"]'
var Alert = function (el) {
$(el).on('click', dismiss, this.close)
Alert.VERSION = '3.3.7'
Alert.TRANSITION_DURATION = 150
Alert.prototype.close = function (e) {
var $this = $(this)
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
var $parent = $(selector === '#' ? [] : selector)
if (e) e.preventDefault()
if (!$parent.length) {
$parent = $this.closest('.alert')
$parent.trigger(e = $.Event('close.bs.alert'))
if (e.isDefaultPrevented()) return
$parent.removeClass('in')
function removeElement() {
// detach from parent, fire event then clean up data
$parent.detach().trigger('closed.bs.alert').remove()
$.support.transition && $parent.hasClass('fade') ?
.one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(Alert.TRANSITION_DURATION) :
removeElement()
// ALERT PLUGIN DEFINITION
// =======================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.alert')
if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
var old = $.fn.alert
$.fn.alert
$.fn.alert.Constructor = Alert
// ALERT NO CONFLICT
// =================
$.fn.alert.noConflict = function () {
$.fn.alert = old
return this
// ALERT DATA-API
// ==============
$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
}(jQuery);
//通过将作用域内的Alert类赋值给jQuery的alert对象的Constructor属性，在IIFE作用域外也可以使用Alert类,比如这行代码
var Alert = $.fn.alert.Constructor
BootStrap所有的插件在开发中都遵循了同样的规则，也为自定义插件提供了规范和依据(如下三个规则)：
1.HTML布局规则：基于元素自定义属性的布局规则，比如使用类似于data-target的自定义属性
2.JavaScript实现步骤(所有插件都遵循jQuery插件开发的标准步骤，所有事件保持统一的标准)
3.插件调用方法(插件使用方式可以是HTML声明式或者调用式)
1.1 HTML布局规则
基于元素自定义属性的布局规则，类似于data-* 的自定义属性
默认情况下，所有插件都可以通过设置特定的HTML代码和相应的自定义属性来实现。
在页面加载的时候，js代码会自动检测到这些标记，并自动绑定相应的事件，不需要添加额外的代码。
点击按钮之后就会关闭警告框：
&div class="alert"&
&button type="button" class="close" data-dismiss="alert"&&/button&
&strong&警告!&/strong&你输入的项目不合法！
下拉菜单：在button按钮上添加data-toggle=”dropdown”属性，单机按钮时，默认隐藏的dropdown-menu会显示
//例子：下拉菜单.html
&div class="btn-group"&
&button type="button" class="btn btn-default" data-toggle="dropdown"&
我的书籍&span class="caret"&&/span&
&ul class="dropdown-menu"&
&li&&a href="#"&编程&/a&&/li&
&li&&a href="#"&设计&/a&&/li&
&li&&a href="#"&深入&/a&&/li&
1.2 JavaScript实现步骤(所有插件都遵循jQuery插件开发的标准步骤，所有事件保持统一的标准)
BootStrap中所有JavaScript插件走遵循统一的实现步骤，维护方便，自定义插件也方便，步骤如下：
1.声明立即调用函数，比如+function($){“use strict”;…}(jQuery);
参数中传入jQuery的对象，通过参数引入变量，好处是：1.函数内部的符变量代表了局部变量，而不是全局变量中代表jQuery的符变量，以达到防止变量污染的目的。2.内部的代码都是私有代码，外部代码无法访问。只能通过第三步，在.fn上设置了插件(比如.fn.alert=)的形式，通过符变量才能将整个插件通过唯一的借口$.fn.alert暴露出去，从而保护了内部代码。
//function前边的+，主要目的是防止前面有未正常结束的代码(比如遗漏了分号)，导致前后代码被编译器认为是一体的，从而导致代码运行出错。
+function($){
"use strict";
}(window.jQuery);
2.定义插件类(或者选择器)以及相关原型方法。比如Alert,prototype.close
定义插件类Alert，然后在定义一些原型函数，比如close函数方法。
先定义选择器，所有符合该自定义属性的元素可以触发下面的事件。
var dismiss = '[data-dismiss="alert"]';
var Alert = function(el) {
//传入元素，如果元素内部有dismiss上设置的自定义属性，则click事件会触发原型上的close方法
$(el).on('click',dismiss,this.close);
Alert.prototype.close = function(e) {
3.在jQuery上定义插件并重设插件构造函数，例如$.fn.alert.Constructor=Alert
在jQuery上定义插件，以便通过jQuery.插件名称的方式，也能够使用该插件。
function Plugin(option) {
return this.each(function () {
var $this = $(this)
//获取存储的Alert对象，如果是第一次执行变量data的值为undefined
var data = $this.data('bs.alert')
//缓存没有，就new一个alert对象，存储在元素的jQuery对象上的‘bs.alert'数据字段
if (!data) $this.data('bs.alert', (data = new Alert(this)))
//支持传入方法名参数，执行该方法,这里就是data.close()
if (typeof option == 'string') data[option].call($this)
//jQuery插件的定义使用了标准的方式，在fn上进行扩展,在jQuery上定义alert插件
//保留其他插件的$.fn.alert代码(如果定义)以便在noConflict之后，可以继续使用改旧代码
//先备份之前插件的旧代码，以便在后面防冲突的时候使用
var old = $.fn.alert
$.fn.alert
//在附加扩展之后，重新设置插件的构造器(即Constructor属性)，这样就可以通过Constructor属性查询到插件的真实类函数，使用new操作符实例化的时候也不会出错
//js区分大小写，所以这里的Constructor只是一个普通属性，跟constructor不同，通过将作用域内的Alert类赋值给jQuery的alert对象的Constructor属性，在IIFE作用域外也可以使用Alert类
$.fn.alert.Constructor = Alert
不声明第三步的话，HTML声明式的方式也是可以用的。所以第三步是专门为某些喜欢用js代码触发事件的人所准备的。需要注意的是，如果第三步不需要，第四步的方冲突的功能也就没办法用了~
4.防冲突处理(noConflict)，例如$.fn.alert.noConflict
目的是让BootStrap插件和其他UI库的同名插件并存。
$.fn.alert.noConflict = function() {
//恢复以前的代码
$.fn.alert = old
//将$.fn.alert.noConflict()设置为BootStrap的alert插件
return this
比如A库中有个同名.fn.alert插件，则BootStrap在执行之前就通过old先备份了，然后执行.fn.alert.noConflict后就会还原该old对象插件
而使用BootStrap的alert插件的话，则通过var alert = $.fn.alert.noConflict()的形式，将BootStrap的alert插件转移到另外一个变量上，从而继续使用。
5.绑定各种触发事件(data-api)
由于已经为jQuery提供了默认的$.fn.alert扩展插件功能，就可以手工编写js代码来触发事件了。
这里主要是为声明式的HTML触发事件。即：在HTML文档里已经按照布局规则声明了相关的自定义属性(比如data-dismiss=”alert”)，然后通过这里的代码初始化默认的单击事件行为。
ALERT DATA-API
这段JavaScript代码将click委托事件监听器绑定在document元素上，并给click事件赋予命名空间
jQuery将事件绑定在document文档对象上的好处，就是js事件代理的优点
$(document).on('click.bs.alert.data-api',dismiss,Alert.prototype.close)
命名空间的话好处：，具体如下
jQuery1.7开始，jQuery引入了全新的事件绑定机制，jQuery .on() 和 off() 两个函数统一处理事件绑定，也是jQuery触发DOM元素事件的最佳方法。有时候既要trigger手动触发事件，也要从DOM元素上解绑事件，比如:
$('.item').on('click', doThisCoolThing);
$('.item').on('click', doThisOtherCoolThing);
$('.item').trigger('click'); // 两个click事件都触发
$('.item').off('click'); // 两个click事件都解绑
使用事件命名空间我们可以在创建事件的时候指派名称到事件处理器，并在使用trigger()和off()时通过这个名称指定到特定的函数。调用的时候就可以通过使用不同的命名空间灵活的指派事件. 比如：
$('.item').on('click.navigate', doThisCoolThing);
$('.item').on('click.notify', doThisOtherCoolThing);
$('.item').trigger('click.navigate'); // 只有带有navigate这个命名空间的方法才会触发
$('.item').off('click.notify'); // 只有带有notify这个命名空间的方法才会解绑
也可以使用多个命名空间，无论使用哪个名字都会生效，通过命名空间代码规范（产品.模块.事件）让事件的层次更清晰：
$('.item').on('click.navigate.notify', doThisCoolThing);
$('.item').trigger('click.navigate'); // 将触发click事件
$('.item').off('click.notify'); // 将解绑click事件
参考资料：
1.3 插件调用方法(插件使用方式可以是HTML声明式或者调用式)
1.插件可以js代码调用，都提供多种调用方式(无参数传递，传递对象字面量，直接传入一个需要执行的方法名称字符串)
$("#myModal").modal();
$("#myModal").modal({keyboard:false});
$("#myModal").modal('show');
每个插件都有一个Constructor属性，表示原始的构造函数，比如fn.alert.Constructor也可以通过(‘选择器').data(‘bs.插件名称')获取特定插件的实例
2.html声明式就是直接在html中进行声明data-* 自定义属性即可
若想禁用方法
//命名空间为data-api的全部事件禁用
$(document).off('.data-api');
//禁用特定插件的默认行为，禁用该插件所在命名空间下事件即可
$(document).off('.alert.data-api');
//禁用该alert插件的click事件
$(document).off('click.alert.data-api');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具基于插件技术的软件架构有何优势？
　作者: 品途网　编辑:
　　【IT168 评论】随着软件规模和复杂性的不断增加，在软件设计中，软件的局部和整体的系统结构显得越来越重要，对此人们提出了软件体系结构的概念。　　根据软件体系结构的发展历程，我们可以把软件体系结构分为四个阶段：无结构、萌芽、初级和高级阶段。自上世纪 90 年代步入高级阶段以来，软件开发的目标是使软件具备较好的自适应性、互操作性、可扩展性和可重用性，软件开发强调采用构件化技术和体系结构技术。　　软件体系结构在软件开发和维护中发挥着重要作用，在软件开发中，软件工程队软件体系结构设计支持的需求越来越迫切。同时越来越多人认可软件体系结构是整个软件设计成功的基础和关键所在，在项目实施和项目维护升级阶段表现尤为明显。在项目的实施阶段，体系结构是建立开发人员的组织、分工、协调开发人员关系和配合的依据。在项目的维护升级阶段，对软件对任何扩充和修改都要在体系结构的指导下进行，以维护整体设计的合理性和正确性，并为维护升级的复杂性和代价分析提供依据。经过长时间的积累，软件开发人员借鉴了硬件组成原理，基于组件式程序设计思想，提出了插件式软件体系结构，这一理论给软件开发工程注入了无限的活力。　　插件式体系结构是一种非常灵活的组件式结构，它把程序的功能分散在插件中来完成。插件是可独立开发的程序模块，它能够动态地插入到系统中，并且可以被自由地删除和替换。因此它能够提高软件开发的并行性和开发效率，降低设计开发难度，缩短开发周期，增强应用程序的可运行性、可测试性和可维护性。归纳起来，基于插件技术的软件架构的优势主要为：插件体系结构能够提高软件的复用度插件体系机构因为强大的独立性，可以提高软件开发的并行性，为软件产业的大规模生产提供支持。插件体系能够缩短软件的研发周期、节约研发成本，带给程序开发人员更多的灵活性，产品在软件发布以后还可以添加新的插件和完善已有的功能。插件体系结构方便软件的升级和维护。传统的应用程序因为采用单一的固定的模块，功能模块不易维护和替换，但是插件却可以动态的变更功能，对软件的升级和维护带来很大的帮助。插件体系结构可以满足用户不断变化的需求，缩短项目交付周期，而这传统点体系机构很难满足和实现。插件体系结构提供了更多的开发可能性，任何对该软件感兴趣的程序员都可以加入软件开发大军中，以集体的力量丰富完善软件。　　目前，我们看到插件技术已经被成功应用到国内外的多种软件中，如浏览器 chrome，图像处理软件 photoshop，java 开发平台 eclipse，报表 finereport，社区软件 discuz 等，虽然这些软件都采用了插件技术，但是不同的产品的实现方式也是多种多样和各不相同。然而毫无疑问，随着用户需求的不断增加，边缘创新的不断冲击，软件工程的不断发展，基于插件技术的软件开发方法将得以普及。
IT168企业级鍗氬?鍒嗙被锛