开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
博客专区 - 开源中国社区

精彩阅读

  • 最新推荐

  • 今日热门

  • 本周热门

  • 每日一博

  • 最新文章

浅析前端页面渲染机制

作为一个前端开发,最常见的运行环境应该是浏览器吧,为了更好的通过浏览器把优秀的产品带给用户,也为了更好的发展自己的前端职业之路,有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的,进而了解如何更好的优化实践,本篇主要围绕这两点展开阐述。前端页面渲染机制可谓是老生常谈,但又很有必要再谈的话题,于是还是决定写一篇,即是对知识的回顾总结,又能与大家分享,何乐而不为。网上相关类型的文章也很多,有兴趣的可以多学习一下。
熊建刚 发布于 14小时前 阅读 132 评论 2

JavaScript异步编程

如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一。如果你对异步编程没有太清晰的概念,那么我建议你花点时间学习JavaScript异步编程,如果你对异步编程有自己的独特理解,也欢迎阅读本文,一起交流。
熊建刚 发布于 2天前 阅读 2256 评论 5 点赞 6

使用angular-cli发布i18n多国语言Angular应用

在模板html标签中增加i18n <h1 i18n>Hello world!</h1> 使用ng命令产生xlf格式的message.xlf文件 $ ng xi18n --output-path src/i18n 命令执行后,生成 src/i18n/messages.xlf 文件 <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="en" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html"> <source>Hello World!</source> <target/> </trans-unit> </body> </file> </xliff> 复制message.xlf,message.en.xlf(英文版本) message.zh.xlf中文版本 <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="en" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html"> <source>Hello World!</source> <target>Hello World!</target> </trans-unit> </bod...
lieefu 发布于 2天前 阅读 131

macOS开发之NSTableView的应用详解

NSTableView是AppKit中的表视图控件,是macOS开发中非常重要的一种视图控件。熟练应用NSTableView控件对mac软件开发十分重要。
珲少 发布于 2天前 阅读 90

武汉源创会现场漂亮小姐姐那么多,千里堵车也要来相会

有美食有美女的武汉站,就算千里堵车也要来相会,随着武汉站落幕,4月源创会行程圆满结束,武汉站所有分享PPT下载链接可在文末查看。
开源中国源创会

Web API 接口之WebSocket

webSocket相关知识
w-rain 发布于 2天前 阅读 496

JavaScript 热潮是一群精神病人的狂欢(翻译:转自hackernoon论坛)

翻译一篇来自hackernoon论坛里,吐槽javascript的文章
九千里 发布于 2天前 阅读 834 评论 9 点赞 1

用ideploy部署平台10分钟搞定持续交付环境,让部署不再麻烦!!

ideploy是一个用thinkjs+msyql+react+antdesign开发的构建部署平台。 如果觉得ideploy项目对您有用,请到github: https://github.com/wdfe/ideploy   码云:https://git.oschina.net/luyongfugx/ideploy 哈哈:)给我们star,多谢!! 以前端项目开发为例子,在项目迭代过程中,我们经常面临的问题是如何把构建后的静态资源包和页面包(html)部署到测试,预发布,正式环境的2个目录下(通常正式环境需要静态包和页面包在不同机器)。随着人员越来越多,项目越来越复杂,构建部署逐渐成为一个繁重的体力劳动,每次部署都要本地构建,scp到堡垒机,然后scp到目标机器。 ideploy部署平台正是为了解决这一问题而开发设计的。 在部署方面ideploy还提供了部署前diff文件,整理项目成员的修改提交次数等等非常实用的功能。下面我们就来看看如何搭建ideploy部署平台 首先需要说明的是本平台只能在linux下使用 git clone https://github.com/wdfe/ideploy.git 代码到本地(顺便做下广告:https://github.com/wdfe/ideploy.git   是ideploy的git地址,欢迎大家star) 安装nodejs 依赖:在根目录下运行npm install 安装ansible (依赖ansible做部署前后的命令行执行) 安装mysql 数...
卢勇福 发布于 3天前 阅读 335 评论 4 点赞 1

前端模块打包器的开发实践1:需求分析

Webpack Node JSModule CssModule
雕刻零碎 发布于 3天前 阅读 109

AngularJS之动态菜单操作指令

AngularJS 生命周期、动态菜单操作指令
w-rain 发布于 3天前 阅读 197

VUE2.0学习总结

年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助!
汤免费 发布于 4天前 阅读 5261 评论 23 点赞 14 打赏 1

少年,是时候换种更优雅的方式部署你的php代码了

让我们来回忆下上次你是怎么发布你的代码的: 1. 先把线上的代码用ftp备份下来 2. 上传修改了的文件 3. 测试一下功能是否正常 4. 网站500了,赶紧用备份替换回去 5. 替换错了/替换漏了 6. 一台服务器发布成功 7. 登录每一台执行一遍发布操作 8. 加班搞定 9. 老板发飙 ... 尤其现在的互联网行业,讲究快速迭代,小步快跑。像bug修复或者小功能的修改几乎每天都发版本,大功能的版本迭代每周也差不多会有一次。相信不少同行们像我上面说的这样发布自己的代码吧。或者可能先进一点,直接去服务器上执行一条类似git pull的命令拖下仓库中的代码,但是如果你的代码运行在集群中呢?每台机器登录一次执行一次git pull吗?如果发现代码有问题需要回滚呢? 如果你还在像我上面说的这种方式部署自己的代码的话,那么我希望你能耐心看完这篇文章,从此摆脱代码部署之痛。   其实绕了这么一圈今天是想向大家介绍一下用php写的代码发布工具:deployer。 deployer具有以下吸引人的特性: - 快速      采用了比如并发发布、ssh通道复用、缓存可用情况下使用缓存等技术加速代码部署 - 原子部署   在新发布的版本内执行所有定义的操作,诸如下载依赖、设置文件访问权限等都不会直接...
码王信息 发布于 5天前 阅读 1033 评论 13 点赞 3

这可能是php世界中最好的日志库——monolog

由于一些历史原因,php中并没有内建的日志接口,故长期以来也没一个功能完备并且应用广泛的日志库。在我的工作生涯中,如果系统需要记录一些应用日志的话,基本上就是封装一个日志类,然后把一些要记录的字段写入到磁盘文件。 这样就难免要一遍一遍的造轮子,并且在没有一个规范的情况下,记录下来的日志也是不方便分析的。但是希望读完本文后希望你们可以放弃自己造这种日志类的轮子了,因为几乎你不可能造得比我们今天要介绍的主角:monolog更圆。 monolog是一个为5.3以上版本php开发的日志库,但是需要注意的是现在主干版本只支持php 7以上版本,如果你的服务器环境还是php 5的话,可以使用monolog的1.x版本。 值得一提的是monolog是一个符合psr-3规范的日志类库,并且符合psr-4加载规范。如果有对psr规范不太了解的同学可以参看如下链接:http://www.php-fig.org/psr/,我们在这里就不具体介绍这些规范了,反正知道monolog是复合当前最新行业规范的日志库就够了。 如果想要在你的代码中引入monolog的话只需要执行: composer require monolog/monolog mongolog中有几个很重要的概念: 第一个:handler 日志管理器 存放handler的数据结构是一个“栈”,一个日志实例可以...
码王信息 发布于 1周前 阅读 267 评论 1

学习vue 20天,我写了点东西

往昔 最初团队里使用Angularjs进行开发,刚开始还好,到了项目后期越发感觉Angularjs太重了,以至于后来重构项目时,毅然放弃Angularjs,投入了Vue的怀抱。除了组建团队时,是我搭建了基于Angularjs的前端开发框架,之后都是由前端小组开发。前段时间,由于公司层面的原因,整个团队解散,不得已我又要写前端程序了。 虽然前期Angularjs的开发框架是我搭建的,但对前端来说我也是半路出家了。那个时候也不知道模块开发,更分不清commonJS、AMD、CMD,知道有个requirejs,就研究requirejs,研究了几天突然冒出一个叫grunt的构建工具,于是又研究grunt,同样研究了几天又窜出来个叫gulp的东西,丢了grunt又研究起gulp来,这真有点像小时候听的猴子摘桃的故事,看见好的就丢掉了之前的,最后什么都没得到。gulp搞的差不多了,不知又从哪里看到了一个叫webpack的东西,我的天哪,当时的感觉就是前端的东西太多东西了,那个时候是2015年下。 当下 再一次写前端程序已经到了2017年了,除了维护之前Angularjs的代码,还有新的项目,我选择了Vue 2.0。 学习一门新的技术是需要花费不少代价的,时间不说,动力也是不可或缺的。时间我有,动力也足,那就是半个月做完一个小的管理后台...
程序旅途 发布于 1周前 阅读 1489 评论 8 点赞 4

Angular2视图操作之ViewChild&ViewChildren

熟悉Angular1.X版本的同学应该知道,Angular1.X在指令中的link函数中提供了element参数,让我们可以对元素的原生dom进行获取和操作,在新版本的Angular中,则以decorator的形式,提供了ViewChild,ViewChildren,以及对应的ContentChild和ContentChildren让我们可以获取元素的dom对象,本文讲解较为常用的ViewChild和ViewChildren这两个decorator 注意:使用时需要从@angular/core中引入ViewChild和ViewChildren ViewChild: ViewChild可以获取到当前组件视图中的单个元素,获取方式有两种: 第一种(通过模板引用变量): <main #mychild> <!-- my html content --> </main> @ViewChild('mychild') myChild : ElementRef constructor() { } ngAfterViewInit() { console.log(this.myChild) } 第二种(直接指定组件类): <my-child></my-child> @Component({ selector: 'my-child', templateUrl: './xxxxx.html' }) class ChildComponent { constructor() { } } @ViewChild() myChild : ChildComponent; ngAfterViewInit() { console.log(this.myChild) } 这两种方式有何区别呢? 区别在于,第一种方式取得的mychild变量是经过包装的,他...
lee1994522 发布于 1周前 阅读 266 评论 1 点赞 2

该死的IEEE-754浮点数,说「约」就「约」,你的底线呢?以JS的名义来好好查查你

> IEEE 754 表示:你尽管抓狂、骂娘,但你能完全避开我,算我输。 ## 一、IEEE-754浮点数捅出的那些娄子 首先我们还是来看几个简单的问题,能说出每一个问题的**细节**的话就可以跳过了,而如果只能泛泛说一句“因为IEEE754浮点数精度问题”,那么下文还是值得一看。 第一个问题是知名的`0.1+0.2 != 0.3`,为什么?菜鸟会告诉你“因为IEEE 754的浮点数表示标准”,老鸟会补充道“0.1和0.2不能被二进制浮点数精确表示,这个加法会使精度丧失”,巨鸟会告诉你整个过程是怎样的,小数加法精度可能在哪几步丧失,你能答上细节么? 第二个问题,既然十进制`0.1`不能被二进制浮点数精确存储,那么为什么`console.log(0.1)`打印出来的确确实实是`0.1`这个精确的值? 第三个问题,你知道这些比较结果是怎么回事么? ```javascript //这相等和不等是怎么回事? 0.100000000000000002 == 0.100000000000000010 // true 0.100000000000000002 == 0.100000000000000020 // false //显然下面的数值没有超过Number.MAX_SAFE_INTEGER的范围,为什么是这样? Math.pow(10, 10) + Math.pow(10, -7) === Math.pow(10, 10) // true Math.pow(10, 10) + Math.pow(10, -6) === Math.pow(10, 10) ...
Stinson_Zhao 发布于 2周前 阅读 214 评论 3

阿里云 ECS 部署:nginx+MySQL+Laravel+PHP7+Redis+Node.js

阿里云 ECS 部署:nginx+MySQL+Laravel+PHP7+Redis+Node.js
Jimmy98 发布于 2周前 阅读 300

JavaScript精简之说

自学完JavaScript之后,整理出一篇较全面的说明,供大家参考,也供自己以后复习。
Ambitions1 发布于 2周前 阅读 841 评论 5 点赞 8

CSS实现背景图片透明,文字不透明效果的两种方法

方法一(毛玻璃效果):背景图 + 伪类 + flite:blur(3px) 方法二(半透明效果):背景图 + 定位 + background:rgba(255,255,255,0.3)
SuperXWang 发布于 2周前 阅读 25

负载均衡原理的解析

开头先理解一下所谓的“均衡” 不能狭义地理解为分配给所有实际服务器一样多的工作量,因为多台服务器的承载能力各不相同,这可能体现在硬件配置、网络带宽的差异,也可能因为某台服务器身兼多职,我们所说的“均衡”,也就是希望所有服务器都不要过载,并且能够最大程序地发挥作用。 一、http重定向 当http代理(比如浏览器)向web服务器请求某个URL后,web服务器可以通过http响应头信息中的Location标记来返回一个新的URL。这意味着HTTP代理需要继续请求这个新的URL,完成自动跳转。 性能缺陷: 1、吞吐率限制 主站点服务器的吞吐率平均分配到了被转移的服务器。现假设使用RR(Round Robin)调度策略,子服务器的最大吞吐率为1000reqs/s,那么主服务器的吞吐率要达到3000reqs/s才能完全发挥三台子服务器的作用,那么如果有100台子服务器,那么主服务器的吞吐率可想而知得有大?相反,如果主服务的最大吞吐率为6000reqs/s,那么平均分配到子服务器的吞吐率为2000reqs/s,而现子服务器的最大吞吐率为1000reqs/s,因此就得增加子服务器的数量,增加到6个才能满足。 2、重定向访问深度不同 有的重定向一个静态页面,有的重定向相比复杂的动态页面,那么实际服务器的负载差异是...
源子姗 发布于 2周前 阅读 3799 评论 8 点赞 3

Redux框架浅析

Redux是javascript的状态容器,它提供了可预测的状态管理。注意Redux和React并没有特别的联系,你不管使用什么框架,Redux都可以作为一个状态管理器应用到这些框架上。 Redux的三大定律: 单一数据源 state是只读的 使用纯函数执行修改 解释一下这三大定律,首先是单一数据源,整个应用的state都储存在一个javascript对象中,Redux用一个store对象来储存整个state,我们可以把这个store对象理解成一个全局变量,整个应用中只有一个store对象。  第二state是只读的,那个要想改变state,就只能通过store对象,store对象有一个方法叫做dispatch,dispatch有个参数叫做action,我们可以把这个action理解为一个装载信息载体的普通的javascript对象,最后要改变state,只需调用store.dispatch(acation)即可。 第三使用纯函数执行修改,那么我们有了一个action,执行了store.dispatch(action),比如action是一个删除文章的信息载体,那么我们执行了store.dispatch(acation)之后,state是怎么变化呢,就需要一个纯函数来执行对state的修改。在Redux中,我们称这个纯函数为reducer,既然reducer是一个函数,那么就会有参数和返回值,这里reducer的参数为先前的state和要处理的act...
gefufeng 发布于 2周前 阅读 262

解决复选框checked=checked无效问题

在做权限管理的时候,做了一个功能,就是当勾选栏目,把所有的权限全勾上。刚开始使用了如下代码: function check(id,check) { if (check) { $("." + id).find("input[type='checkbox']").attr("checked", true); } else { $("." + id).find("input[type='checkbox']").attr("checked", false); } }   第一遍勾选和取消是有效的,但是第二遍以后就没反应了,查看了属性,发现checked属性一直存在,但是没显示勾。就考虑移除checked属性看看。 function check(id,check) { if (check) { $("." + id).find("input[type='checkbox']").attr("checked", true); } else { $("." + id).find("input[type='checkbox']").removeAttr("checked"); } }   这次看到checked属性勾上有了,取消就没了,可是问题还是没解决,还是第二遍以后就没反应了。看jQuery手册上说1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false); function check(id,check) { if (check) { $("." + id).find("input[type='checkbox']").prop("checked", true); } else { $("." + id).find("input[type='checkbox']")....
梁宏伟 发布于 4个月前 阅读 27

智慧能源物联网云平台方案

多比智慧能源云平台以能源管理智能化为核心, 通过对各种耗能设备(如照明系统,动力系统,电梯系统,空调系统等),各种能源(电、水、天然气、油、煤、蒸汽、压缩空气、工业氮气等)实时采集、动态监测、能耗分析、成本核算、绩效考核和报表发布等功能,实现企业能源管理精细化,促进节能降耗。以有效手段实现工业园区、学校/医院、公共建筑的安全、有序、节约的使用能源。   智慧能源云平台-能耗分析 概要显示当月、当年用能情况,并与往年同期用能进行对比,掌握用能趋势。实时动态监测企业当前用电功率。通过设置每日用能的计划值,实现用能的定额管理,并与实际用能进行对比,对可能出现的用能突增进行预警。将各类用能折算为标准煤,全局掌握企业用能情况。 平台简介 多比智慧能源节能服务云平台采用物联网技术,通过物联网云平台接入大量智能传感控制器,监控水、电、气不同能源的使用情况,从而实现对建筑楼宇内的照明、空调、锅炉、配电、动力、环境以及其他特殊系统等进行实时数据采集、开关状态监测,最终为集中远程能源监控管理提供了节能管理云平台服务。   智慧能源云平台电力接线图 智慧能源节能服务云平台通过对建筑的各种设备实施综合自动化监控与管理,...
javatwo 发布于 4个月前 阅读 57

Sea.js 整合 Jquery

Sea.js 整合 Jquery
自东土大唐而来 发布于 5个月前 阅读 24

对 Sea.js 进行配置 seajs.config

可以对 Sea.js 进行配置,让模块编写、开发调试更方便。 seajs.config seajs.config(options) 用来进行配置的方法。 seajs.config({   // 别名配置   alias: {     'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',     'json': 'gallery/json/1.0.2/json',     'jquery': 'jquery/jquery/1.10.1/jquery'   },   // 路径配置   paths: {     'gallery': 'https://a.alipayobjects.com/gallery'   },   // 变量配置   vars: {     'locale': 'zh-cn'   },   // 映射配置   map: [     ['http://example.com/js/app/', 'http://localhost/js/app/']   ],   // 预加载项   preload: [     Function.prototype.bind ? '' : 'es5-safe',     this.JSON ? '' : 'json'   ],   // 调试模式   debug: true,   // Sea.js 的基础路径   base: 'http://example.com/path/to/base/',   // 文件编码   charset: 'utf-8'}); 支持以下配置选项: alias Object 当模块标识很长时,可以使用 alias 来简化。 seajs.config({   alias: {     'jquery': 'jque...
Yue_h 发布于 3年前 阅读 1351

Electron(二)安装vscode工具与接受消息操作

安装前提是大家都已经搭建成功了electron环境,接下来我们接着上次的内容继续往下走, 本文主要是讲解工具的使用,首先当然是下载vscode ,传送门在这里 vscode中文网点击下载就好了啊!   被我下载下来了 接下来的点击就行了   代码部分已经贴出来了 接下来看第二部分 大家可以验证一下 这里我简单修改了一下之后我们到终端,移动到对应目录  electron index.html就可以运行了 是不是很酷炫, 由于图片的注释被遮盖了 在这里我发一下代码, main.js   const {ipcMain} = require('electron')//全局模块 引入electron ipcMain.on('asynchronous-message',(event,arg) =>{//监听web page里发出的message console.log("mian1" + arg) event.sender.send('asynchronous-reply','pong')//在main process里向web page发出message }) ipcMain.on('asynchronous-message',(event,arg) =>{ console.log("main2" + arg) event.returnValue = 'pong' }) testp.js     const {ipcRenderer} = require('electron') function init(){ ipcRenderer.on('asynchronous-reply',(event,arg) =>{ alert("web2" + arg) }) } function say_hello(){ mess...
白鹭人生 发布于 2个月前 阅读 18

<a href="#" onclick="">的一个小技巧

的一个小技巧
wangwenya 发布于 3年前 阅读 208

Flex 布局教程(一)

Flex 布局教程(一)
shaochuan 发布于 1个月前 阅读 2

stickUp.js学习

stickup是我学习bootstrap框架时候用的一个插件,用来固定导航栏,并且可以导航单页应用,使用的时候遇到一些问题,阅读源码来排查错误,这里记录一下我的理解
码农哲 发布于 3年前 阅读 134

xmlplus 组件设计系列之一 - 图标

网页上使用的图标分可为三种:文件图标、字体图标和 SVG 图标。对于文件图标,下面仅以 PNG 格式来说明。 ## PNG 图标 对于 PNG 图标的引用,有两种方式。一种是直接由 HTML 元素 img 的 src 属性给出。下面是一个简单的示例。 ```js Icon: { css: "#icon { width: 68px; height: 68px; }", xml: "", fun: function (sys, items, opts) { this.attr("src", '/images/components/' + this + ".png"); } } ``` 这里假定图标文件位于目录 `/images/components/` 中,于是可以按如下的方式便捷地引用所需的图标。注意组件 Icon 巧妙地使 id 属性值与图片文件名关联,这样可以避免创建额外的属性。 ```js Example: { css: "#example > * { padding: 10px; background: #F9F9F9; }", xml: " \ \ \ \ " } ``` 另一种引用 PNG 图标的方式是给相应的对象添加 `background-image` 样式,并且由样式中给出图标所在路径。下面是一个简单的示例。 ```js Icon: { css: "#icon { width: 68px; height: 68px; }", xml: " ", fun: function (sys, items, opts) { this.css("background-image", '/images/components/' + this + ".png"); } } ``` 这种形式与前面由 img 标签给出的图标有许多相...
qudou 发布于 2天前 阅读 2

通过ADB命令操作设备

后续用到更多的命令会继续添加!
小强强强 发布于 2年前 阅读 273

xmlplus 组件设计系列之四 - 列表

列表组件是极其常用的一类组件,是许多视图组件系统的必须包含的。列表可以做的很简单,只显示简洁的内容。列表也可以做的很复杂,用于展示非常丰富的内容。 ## 组成元素 列表离不开列表项以及包含列表项的容器。下面是最简单的列表组件,它包含一个列表项组件 Item 以及一个列表项容器组件 List。 ```js Item: { xml: " " }, List: { xml: " " } ``` 此列表组件尽管简单,但所构建的框架为我们的继续扩展奠定了基础。 ## 动态操作 如上定义的列表组件的最基本的用法如下所示。这种用法与原生列表标签的用法没什么区别。我们将进行做进一步的改造。 ```js Example: { xml: "\ Item 1\ Item 2\ " } ``` 列表组件普遍包含添加、删除以及修改这三种操作。为简单起见,不妨先来实现这些操作。由于我们定义的列表项足够的简单,所以这里不再定义新的操作接口,而直接使用系统接口。 ```js Example: { xml: " \ \ append\ remove\ modify\ ", fun: function (sys, items, opts) { sys.append.on("click", function() { sys.list.append("Item").text("Item 1"); }); sys.remove.on("click", function() { sys.list.first() && sys.list.first().remove(); }); sys.modify.on("cl...
qudou 发布于 2天前 阅读 1

ionic中的ion-option-button

代码 <ion-option-button class="button-assertive" ng-click="df(itemData)">     批准 </ion-option-button> 效果图
龙马行空 发布于 2年前 阅读 171 评论 1

ionic中的返回按钮--$ionicHistory

ionic中返回按钮的解决方案
龙马行空 发布于 2年前 阅读 287

【探秘ES6】系列专栏(六):解构赋值

新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第六篇,带你了解ES6的解构赋值。
一配 发布于 1年前 阅读 84

离线安装atom编辑器插件

首先找到插件在GitHub上的地址,然后复制URL 2 git clone插件的内容到atom的packages文件夹下 3 打开dos或者终端进入要安装的插件的文件夹中,输入apm install(如果安装了npm也可以用npm install) 4 重启atom就安装成功了
godfather1103 发布于 1年前 阅读 295

日期处理 yy-mm-dd HH:mm:ss时间格式转换毫秒,两个时间格式毫秒数相减,返回“xx天x

jQuery日期处理 yy-mm-dd HH:mm:ss时间格式转换毫秒,两个时间格式毫秒数相减,返回“xx天xx小时xx分钟xx秒”
白高林 发布于 1年前 阅读 14

jquery.pagination ajax + springmvc使用

jquery.pagination
羞涩的胖子 发布于 1年前 阅读 65 点赞 1

基于angular项目对前端的浅谈

angular项目真的意义和鄙人对于前端的笑笑看法
i5--lou 发布于 10个月前 阅读 135 点赞 2

当前行高亮的两种方法(CSS、JS)

1. 利用CSS的hover: ``` table tr:hover{ background: #00FFFF; } ``` 2. 利用js的mouseover和mouseout事件: ``` $(document).on("mouseover",".myRow",function(){ $(this).css({ "background-color":"#00FFFF" }); }); $(document).on("mouseout",".myRow",function(){ $(this).css({ "background-color":"#FFFFFF" }); }); ```
hustnzj 发布于 9个月前 阅读 119

纯前端打造一个简易实时预览的markdown编辑器

纯前端打造一个简易实时预览的markdown编辑器
宝具滑 发布于 9个月前 阅读 99

VUE2.0学习总结

年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助!
汤免费 发布于 4天前 阅读 5261 评论 23 点赞 14 打赏 1

Angular2.0视频教程来了!(视频和PPT的链接都在底部)

各位道友大家好:        “Angular2.0视频教程”来了!这是全球第一个完整的Angular 2.0系列视频教程,到目前为止也是唯一的,该系列的视频在优酷和youtube同步播出。        还是大漠穷秋老师,还是熟悉的声音,还是淡淡的小幽默。3年前,大漠老师在慕课网发布了“AngularJS实战” http://www.imooc.com/learn/156 系列视频教程,迄今为止已经有14万人学习,整体评分9.6分。很多道友反馈说,通过学习这门课程找到了心仪的工作,大漠老师感到非常开心,说明他的付出是有价值的。        这一次,大漠老师再度倾力打造,从开发环境到完整案例,涵盖了Angular2的方方面面。如果你自己看文档,或者在网上寻寻觅觅,看那些碎片化的文章,可能需要几十个小时,甚至几个月才能摸到门道。而你来听大漠老师的系统讲解,只要8小时,你就是Angular开发专家了!整个课程全部基于大漠老师自己开发的NiceFish这个小项目,如果你想先睹为快,请自己检出代码上手试玩 http://git.oschina.net/mumu-osc/NiceFish 。         同时,大漠老师还给大家带来了一波小福利,每一节课都会送出2本《揭秘Angular2》,https://item.jd.com/12027521.html ,整个课程共送...
大漠穷秋 发布于 3个月前 阅读 42172 评论 83 点赞 50 打赏 6

少年,是时候换种更优雅的方式部署你的php代码了

让我们来回忆下上次你是怎么发布你的代码的: 1. 先把线上的代码用ftp备份下来 2. 上传修改了的文件 3. 测试一下功能是否正常 4. 网站500了,赶紧用备份替换回去 5. 替换错了/替换漏了 6. 一台服务器发布成功 7. 登录每一台执行一遍发布操作 8. 加班搞定 9. 老板发飙 ... 尤其现在的互联网行业,讲究快速迭代,小步快跑。像bug修复或者小功能的修改几乎每天都发版本,大功能的版本迭代每周也差不多会有一次。相信不少同行们像我上面说的这样发布自己的代码吧。或者可能先进一点,直接去服务器上执行一条类似git pull的命令拖下仓库中的代码,但是如果你的代码运行在集群中呢?每台机器登录一次执行一次git pull吗?如果发现代码有问题需要回滚呢? 如果你还在像我上面说的这种方式部署自己的代码的话,那么我希望你能耐心看完这篇文章,从此摆脱代码部署之痛。   其实绕了这么一圈今天是想向大家介绍一下用php写的代码发布工具:deployer。 deployer具有以下吸引人的特性: - 快速      采用了比如并发发布、ssh通道复用、缓存可用情况下使用缓存等技术加速代码部署 - 原子部署   在新发布的版本内执行所有定义的操作,诸如下载依赖、设置文件访问权限等都不会直接...
码王信息 发布于 5天前 阅读 1033 评论 13 点赞 3

负载均衡原理的解析

开头先理解一下所谓的“均衡” 不能狭义地理解为分配给所有实际服务器一样多的工作量,因为多台服务器的承载能力各不相同,这可能体现在硬件配置、网络带宽的差异,也可能因为某台服务器身兼多职,我们所说的“均衡”,也就是希望所有服务器都不要过载,并且能够最大程序地发挥作用。 一、http重定向 当http代理(比如浏览器)向web服务器请求某个URL后,web服务器可以通过http响应头信息中的Location标记来返回一个新的URL。这意味着HTTP代理需要继续请求这个新的URL,完成自动跳转。 性能缺陷: 1、吞吐率限制 主站点服务器的吞吐率平均分配到了被转移的服务器。现假设使用RR(Round Robin)调度策略,子服务器的最大吞吐率为1000reqs/s,那么主服务器的吞吐率要达到3000reqs/s才能完全发挥三台子服务器的作用,那么如果有100台子服务器,那么主服务器的吞吐率可想而知得有大?相反,如果主服务的最大吞吐率为6000reqs/s,那么平均分配到子服务器的吞吐率为2000reqs/s,而现子服务器的最大吞吐率为1000reqs/s,因此就得增加子服务器的数量,增加到6个才能满足。 2、重定向访问深度不同 有的重定向一个静态页面,有的重定向相比复杂的动态页面,那么实际服务器的负载差异是...
源子姗 发布于 2周前 阅读 3799 评论 8 点赞 3

前端实用资源网站整理

1. 腾讯web前端团队github https://github.com/AlloyTeam/Mars 阿里巴巴国际UED团队 http://www.aliued.com/ 阿里巴巴矢量图库 http://www.iconfont.cn/ 2.animate:github https://daneden.github.io/animate.css/ 3.脚本之家在线工具:正则,颜色,编码转换等 http://tools.jb51.net/regex/create_reg 4.动画在线生成: http://www.aseoe.com/tools/css3-animation/ 5.国外特效网站 https://codepen.io/ 6.ZUI 前端UI框架 http://zui.sexy/
遗叶枫流 发布于 4天前 阅读 474 点赞 1

JavaScript 热潮是一群精神病人的狂欢(翻译:转自hackernoon论坛)

翻译一篇来自hackernoon论坛里,吐槽javascript的文章
九千里 发布于 2天前 阅读 834 评论 9 点赞 1

EasyUI 1.5.1 美化主题大包 Insdep Theme 1.0.3 已发布,开源下载

jQuery EasyUI 1.5.x of insdep theme 更新截图请移至下方,附部分美化截图 关于  Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正在美化中。后期会提供更多的主题、组件及第三方插件美化样式。 演示地址:https://www.insdep.com/example/ 下载地址:https://www.insdep.com 问答地址:https://bbs.insdep.com 下次更新预告:https://www.insdep.com/index.php?m=content&c=index&a=lists&catid=163 本次更新日志:https://www.insdep.com/list-107-1.html 项目地址:http://git.oschina.net/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme QQ交流群:184075694 (优先发布主题体验内测包) 关于兼容性  本主题兼容性同步官方,IE最低支持IE9,建议IE10+否则会影响整体性能。 更新与升级:  本主题支持样式平滑升级及主题样式的平滑切换,每一次更新都可以直接覆盖升级,你可以放心使用。 使用前必读:  请将你的原默认样式换成本主题的easyui.css即可,另外需要额外加载jquery.insdep-extend.min.js主题包初始化扩展文件。 jquery...
magicweng 发布于 3个月前 阅读 6559 评论 6 点赞 13 打赏 1

AngularJS之动态菜单操作指令

AngularJS 生命周期、动态菜单操作指令
w-rain 发布于 3天前 阅读 197

Angular2优质学习资源收集

以下都是我自己经常看的一些内容,这个列表会不定期更新,发现好的就加上去。 文档博客书籍类 官方网站: https://angular.io 中文站点: https://angular.cn Victor的blog(Victor是Angular路由模块的作者): https://vsavkin.com/@vsavkin Todd Motto的Blog: https://toddmotto.com/ ThoughtRAM上的Blog频道: https://blog.thoughtram.io/categories/angular-2/ Angular University: http://blog.angular-university.io/ Deborah's Developer MindScape: http://blogs.msmvps.com/deborahk/ Jason Watmore's Blog: http://jasonwatmore.com/ RxJS官方网站: http://reactivex.io/ RxJS中文版文档(这是我看过的最好的关于RxJS的中文文档,注意,没有之一!向译者致敬!): https://www.gitbook.com/book/buctwbzs/rxjs/details 一本开源的Angular2书籍:https://zhangchen915.gitbooks.io/angular2-training/ 开源项目类 Angular Angury项目: https://augury.angular.io/ Angular Team在github上的地址: https://github.com/angular ng2-bootstrap: https://ng-bootstrap.github.io/#/home NGPrime: http://www.primefaces.org/primeng/#/ Angular-Material2...
大漠穷秋 发布于 3个月前 阅读 7431 评论 21 点赞 14 打赏 1

学习vue 20天,我写了点东西

往昔 最初团队里使用Angularjs进行开发,刚开始还好,到了项目后期越发感觉Angularjs太重了,以至于后来重构项目时,毅然放弃Angularjs,投入了Vue的怀抱。除了组建团队时,是我搭建了基于Angularjs的前端开发框架,之后都是由前端小组开发。前段时间,由于公司层面的原因,整个团队解散,不得已我又要写前端程序了。 虽然前期Angularjs的开发框架是我搭建的,但对前端来说我也是半路出家了。那个时候也不知道模块开发,更分不清commonJS、AMD、CMD,知道有个requirejs,就研究requirejs,研究了几天突然冒出一个叫grunt的构建工具,于是又研究grunt,同样研究了几天又窜出来个叫gulp的东西,丢了grunt又研究起gulp来,这真有点像小时候听的猴子摘桃的故事,看见好的就丢掉了之前的,最后什么都没得到。gulp搞的差不多了,不知又从哪里看到了一个叫webpack的东西,我的天哪,当时的感觉就是前端的东西太多东西了,那个时候是2015年下。 当下 再一次写前端程序已经到了2017年了,除了维护之前Angularjs的代码,还有新的项目,我选择了Vue 2.0。 学习一门新的技术是需要花费不少代价的,时间不说,动力也是不可或缺的。时间我有,动力也足,那就是半个月做完一个小的管理后台...
程序旅途 发布于 1周前 阅读 1489 评论 8 点赞 4

JavaScript精简之说

自学完JavaScript之后,整理出一篇较全面的说明,供大家参考,也供自己以后复习。
Ambitions1 发布于 2周前 阅读 841 评论 5 点赞 8

Web API 接口之WebSocket

webSocket相关知识
w-rain 发布于 2天前 阅读 496

用ideploy部署平台10分钟搞定持续交付环境,让部署不再麻烦!!

ideploy是一个用thinkjs+msyql+react+antdesign开发的构建部署平台。 如果觉得ideploy项目对您有用,请到github: https://github.com/wdfe/ideploy   码云:https://git.oschina.net/luyongfugx/ideploy 哈哈:)给我们star,多谢!! 以前端项目开发为例子,在项目迭代过程中,我们经常面临的问题是如何把构建后的静态资源包和页面包(html)部署到测试,预发布,正式环境的2个目录下(通常正式环境需要静态包和页面包在不同机器)。随着人员越来越多,项目越来越复杂,构建部署逐渐成为一个繁重的体力劳动,每次部署都要本地构建,scp到堡垒机,然后scp到目标机器。 ideploy部署平台正是为了解决这一问题而开发设计的。 在部署方面ideploy还提供了部署前diff文件,整理项目成员的修改提交次数等等非常实用的功能。下面我们就来看看如何搭建ideploy部署平台 首先需要说明的是本平台只能在linux下使用 git clone https://github.com/wdfe/ideploy.git 代码到本地(顺便做下广告:https://github.com/wdfe/ideploy.git   是ideploy的git地址,欢迎大家star) 安装nodejs 依赖:在根目录下运行npm install 安装ansible (依赖ansible做部署前后的命令行执行) 安装mysql 数...
卢勇福 发布于 3天前 阅读 335 评论 4 点赞 1

前端模块打包器的开发实践1:需求分析

Webpack Node JSModule CssModule
雕刻零碎 发布于 3天前 阅读 109

是时候使用Vue2和Yii2进行前后端分离开发啦

本文介绍使用Vue2单页面程序作为前台,以Yii2搭建后台提供API,进行前后端分离开发的入门知识。本文适合Vue2,Yii2爱好者观看。预计花费时间30分钟,跟随教程操作。
_Elvis 发布于 3周前 阅读 4000 评论 16 点赞 8

Jquery效率总结

1. 使用最新版本的jQuery  jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。  下面就来看看,不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句:    $('.elem')    $('.elem', context)    context.find('.elem')  我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次。结果如下:  可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。  其他语句的测试,比如.attr("value")和.val(),也是新版本的jQuery表现好于老版本。  2. 用对选择器  在jquery中,你可以用多种选择器,选择同一个网页元素。每种选择器的性能是不一样的,你应该了解它们的性能差异。  (1)最快的选择器:id选择器和元素标签选择器  举例来说,下面的语句性能最佳:    $('#id')    $('form')    $('input')  遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。  (2)较慢的选择器:class选择器  $('.className')的性能,取决于不同的浏览器。  Firefox、Safari、Chrome、...
woter 发布于 1周前 阅读 412

JSON使用总结

1.JSON定义        JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。        JSON语法声明了一个对象,是一种用于传输和生成数据的协定        对象:对象包含再{}之间        属性:采用Key-Value对来表示。属性之间使用逗号分开。  string : value         数组:数组存放再[]之间   [ elements ]         元素:元素之间用逗号分开        值:值可以是字符串,数字,对象,数组,true,false,null 2.JSON例子        {         "name":"andy",         "people":{"name":"andy","age":"28"},         "friend":["name":"value",                       {"name":"value","age":"28"}                      ]         } 3.在服务器上解释 JSON        处理 JSON 的两步骤:        针对编写服务器端程序所用的语言,找到相应的 JSON 解析器/工具箱/帮助器 API。         使用 JSON 解析器/工具箱/帮助器 API 取得来自客户机的请求数据并将数据转变成脚本...
beibugulf 发布于 2天前 阅读 68

JavaScript实现Tab栏切换

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <!-- 开始书写css代码  -->     <style>         *{margin:0;padding:0;}         .box {             width: 400px;             height: 350px;             margin: 0 auto;         }         #tab {             margin-top: 150px;         }         .box p {             height: 40px;         }         .box span {             display: block;             width: 97px;             height: 40px;             float: left;             text-align: center;             line-height: 40px;             cursor: pointer;         }         .current {             background-color: pink;         }         .box div{             width: 400px;             height: 260px;             background:...
流凡 发布于 3天前 阅读 59

Bootstrap 介绍

Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目 版本为: v3.3.7 | 文档更新于:2017-04-24 官方网站地址:http://v3.bootcss.com/
流氓兔- 发布于 3天前 阅读 55

bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

用js控制bootstrapTable的高度有几种方法 1、 <table class="table-striped qiliangqifei-tab" id="qiliangqifei"> <thead> <tr> <th data-valign="middle" >气费年月</th> <th>当期气量 </br > Sm<sup>3</sup></th> <th>当期气费 </br >(元)</th> </tr> </thead> <tbody> <tr> <td>2016-12</td> <td>100</td> <td>100</td> </tr> <tr> <td>2016-10</td> <td>100</td> <td>100</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready( function (){ $( '#qiliangqifei' ).bootstrapTable( { height: 260 } ); }); </script> 2、 <table class="table-striped " data-toggle="table" data-height="350" id="qiliangqifei"> <thead> <tr> <th data-valign="middle" >气费年月</th> <th>当期气量 </br > Sm<sup>3</sup></th> <th>当期气费 </br >(元)</th> </tr> </thead> <tbody> <tr> <td>2016-12</td> ...
tianyawhl 发布于 1个月前 阅读 613

武汉源创会现场漂亮小姐姐那么多,千里堵车也要来相会

有美食有美女的武汉站,就算千里堵车也要来相会,随着武汉站落幕,4月源创会行程圆满结束,武汉站所有分享PPT下载链接可在文末查看。
开源中国源创会

NSTextField控件应用详解

在OS X软件开发中,并不像iOS平台中有UILabel控件,macOS上无论是显示简单的文本还是提供用户可编辑的文本框,都是采用NSTextField控件。
珲少 发布于 7小时前 阅读 43

$.Deferred初学

``` play2 点击 添加数字... ``` > 下面这段出自阮一峰博客 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html deferred对象的最大优点,就是它把这一套回调函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作----不管是ajax操作还是本地操作,也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法,指定回调函数。 ``` var def = $.Deferred(); //新建递延对象 function wait(def){ var task = function(){ def.resolve("哈话"); } setTimeout(task,3000); return def; //返回递延对象 } $.when(wait(def)).done(function(str){ //$.when()只接受递延对象作为参数,因此wait函数的return def意图很明显啦 alert("我拉"+str); }) }); ```...
LM加强 发布于 7小时前 阅读 2

vue2 axios post 传参数

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8">         <title>post交互</title>         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">         <meta name="apple-mobile-web-app-capable" content="yes">         <meta name="apple-mobile-web-app-status-bar-style" content="black">         <style>         </style>         <link rel="stylesheet" href="css/mui.min.css">         <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>         <script type="text/javascript" src="js/vue.min2.2.js"></script>         <script type="text/javascript" src="js/axios.min.js"></script>         <script type="text/javascript" src="js/public.js"></script>         <link href="css/mystrap.css" rel="stylesheet" type="text/css" />         <link rel="stylesheet" type="text/css" href="css/app.css" />     </head>     <body...
mellen 发布于 8小时前 阅读 3

URL加随机数的作用

大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的时候总是使用IE缓存,为了解决这个问题一般可以用一下方法:         1:在ajax或者dwr提交的url后面加时间戳。         例如      http_request.onreadystatechange = funcName;      http_request.open("GET", url, true);      比如url是test .jsp      那么我们在它后面加上?time=new Date();      即url=test.jsp?time=new Date();         2 :在url后面加一个随机数。       url=test.jsp?number=Math.random();  URL随机数的作用就是避免游览器缓冲JS
Aeroever 发布于 8小时前 阅读 2

iPhone6对flex的兼容

因为测试机型有限(iPhone6s,华为,小米note,红米),之前使用弹性盒子flex一直都没有遇到不兼容的问题,今天老板手机iPhone6上面乱了。 目前就只发现6对flex,flex-wrap,justify-content等弹性盒子样式不兼容,需要给样式前面加上-webkit-才行。 .container { ** display: -webkit-flex;** display: flex; } nav { width: 200px; } .flex-column { ** -webkit-flex: 1;** flex: 1; }
dfatxm 发布于 8小时前 阅读 1

有关WPF界面布局的10个例子

有关WPF界面布局的10个例子
北风其凉 发布于 9小时前 阅读 4

vue2 在页面加载的时候 获取http数据并显示

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8">         <title>post交互</title>         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">         <meta name="apple-mobile-web-app-capable" content="yes">         <meta name="apple-mobile-web-app-status-bar-style" content="black">         <style>         </style>         <link rel="stylesheet" href="css/mui.min.css">         <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>         <script type="text/javascript" src="js/vue.min2.2.js"></script>         <script type="text/javascript" src="js/axios.min.js"></script>         <script type="text/javascript" src="js/public.js"></script>         <link href="css/mystrap.css" rel="stylesheet" type="text/css" />         <link rel="stylesheet" type="text/css" href="css/app.css" />     </head>     <body...
mellen 发布于 9小时前 阅读 2

ionic2 生命周期

1.ionViewDidLoad ionViewDidLoad() { console.log('ionViewDidLoad Page'); } 2.ionViewWillEnter ionViewWillEnter(){ console.log('ionViewWillEnter'); } 3.ionViewDidEnter ionViewDidEnter(){ console.log('ionViewDidEnter'); } 4.ionViewDidLeave ionViewDidLeave(){ console.log('ionViewDidLeave'); }
小黑202 发布于 9小时前 阅读 1

JS下载文件

html代码 ```html ``` js代码 ```javascript downloadFile = function (url) { var download = document.getElementById("download"); download.href = url; download.click(); } ```
BaronChen 发布于 9小时前 阅读 9

_flex前端中文显示其余字母数字正常显示

1. 以直接返回字符串的方式(不显示) 2. 原因 <mx:horizontalAxis>                             <mx:CategoryAxis categoryField="col01"/>  </mx:horizontalAxis> flex x轴渲染器不能解析中文汉字 3. 解决方案:在下面的渲染 <mx:horizontalAxisRenderer>                                 <mx:AxisRenderer axis="{categoryAxis1}"  tickPlacement="none"                                                  canDropLabels="true"                                                  showLabels="true" fontFamily="Arial"/>                             </mx:horizontalAxisRenderer> 加上fontFamily="Arial"...
黑土地里捡豆包 发布于 9小时前 阅读 7

WebFont-前端字体

一.参考文献 1.http://www.cnblogs.com/yes-V-can/p/5716853.html 2.http://blog.csdn.net/zhouwangling_/article/details/53096649 二.使用方法 1.下载字体 网上百度自己要使用的字体,一般下载的是ttf格式,需要4种(或5)格式,其他的格式可以通过在线工具基于ttf转换 web-fontmin(这个在线转换工具更好用,注意,左边编辑框里的字全删除再上传ttf,不然只会转换框里的那些字体) 在线格式转换点此(注:该网站我成功转过,有时候会报错,多试几次)   2.css加载 @font-face { font-family: "李旭科书法"; src: url("../font/李旭科书法.eot"); /* IE9 */ src: url("../font/李旭科书法.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../font/李旭科书法.woff") format("woff"), /* chrome, firefox */ url("../font/李旭科书法.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url("../font/李旭科书法.svg#李旭科书法") format("svg"); /* iOS 4.1- */ font-style: normal; font-weight: normal; } 3.使用:在需要使用该字体的地方用即可: .class{ font-family:'李旭科书法'...
Clover286 发布于 9小时前 阅读 3

jQuery中ready与load事件

jQuery有3种针对文档加载的方法 ``` $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码... }) $(document).load(function() { // ...代码... }) 一个是ready一个是load,这两个到底有什么区别呢? ``` ready与load谁先执行: 大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行。 DOM文档加载的步骤: 要想理解为什么ready先执行,load后执行就要先了解下DOM文档加载的步骤: 1. 解析HTML结构。 2. 加载外部脚本和样式表文件。 3. 解析并执行脚本代码。 4. 构造HTML DOM模型。//ready 5. 加载图片等外部文件。 6. 页面加载完毕。//load 从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了,但是load要在第(6)步完成之后才执行。 结论: ready与load的区别就在于资源文件的加载,ready构建了基本的DOM结构,所以对于代码来说应该越快加载越好。在一个高速浏览的时代,没人愿意等待答案。假如一个网站页面加载超过4秒,不好意思,你1/4的用户将面临着流失,所以对于框架来说用户体验是至关重要的,我们应该越早处理DOM越好,我们不需...
LM加强 发布于 9小时前 阅读 4

个人总结的一个前端的规范文档.md

> 这个是平时在和前端打交道时发现一些小伙伴代码不够规范,遂有兴趣参考了国内外有公开规范的互联网公司的内容综合来总结出一个适合自己的. > 中间有部分示例是一些经典问题的较优的解决方案,值得学习 正文如下 --------------------------- # 通用篇 ## 多 IDE or 编辑器平台代码格式统一 ### `Tab`缩进 使用 **4个`Soft-Space`** 保证全平台代码表现一致性 > Eclipse设置在 Window->Preferences->general->editors->text editors display tab width:4 勾选 Insert Spaces for tabs Show Print Margin Print Margin column:80 其他编辑器 or IDE 类似设置。 ### 不要混用tab和space; ### 不要在一处使用多个tab或space; ### 换行符统一用'LF'。 ## 命名规则 ### 项目命名 项目名全部采用小写方式, 以中划线分隔。 比如: `my-project-name`。 ### 目录名 目录名参照上一条规则,有复数结构时,要采用复数命名法,比如说: `scripts`, `styles`, `images`, `data-models`。 ### HTML文件名 多个单词组成时,采用中划线连接方式,比如说: `error-report.html`。 ### CSS,SCSS 样式文件命名 多个单词组成时,采用中划线连接方式,比如说:`retina-sprites.scss`。 ------...
WallenHan 发布于 9小时前 阅读 6

倒计时效果

说明:前端实现,jQuery 一.参考文献 1.GitHub:https://github.com/Reflejo/jquery-countdown 二.使用方法 1.引入依赖 <link rel="stylesheet" type="text/css" href="../css/media.css"> <script type="text/javascript" src="../js/jquery1.91.min.js"></script> <script type="text/javascript" src="../js/jquery.countdown.min.js"></script> 2.初始化 HTML <!-- 倒计时开始 --> <div class="wrapper"> <div class="cell"> <div id="holder"> <div id="counter"></div> </div> </div> </div> <!-- 倒计时结束 --> JS 如下这个例子是根据官网Complete usage改变的,其他情况请参考官网。另:样式可根据需求改 $(function(){ $('#counter').countdown({ image: "../img/digits.png", stepTime: 60, format: 'mm:ss', startTime: "10:00",//10分钟倒计时 timerEnd: function() { //倒计时结束执行 }, }); })  ...
Clover286 发布于 9小时前 阅读 2

正则表达式里面 .* 和 .*? 有什么区别

在实战中遇到看不懂的正则表达式,给百度问答一哥们解答了。
LM加强 发布于 9小时前 阅读 1

jeecg 更新记录会把创建时间、创建人置空

  这是是由于自己生成的代码,做更新操作的时候,没有把这些加到修改框里,导致提交的时候这些值是空 在update页面增加几个隐藏input即可   <input type="hidden" id="createName" name="createName" value='${sEmployInfoPage.createName}' /> <input type="hidden" id="createBy" name="createBy" value='${sEmployInfoPage.createBy}' /> <input type="hidden" id="createDate" name="createDate" value='${sEmployInfoPage.createDate}' />
hello_bear 发布于 10小时前 阅读 2

高性能的javascript 笔记

待续
-波仔- 发布于 10小时前 阅读 3

vue axios 的坑之一

methods: {                     reverseMessage: function() {                                                               axios.get('sites.php').then(function(response) {                                                         this.sites=response.data.sites;                             console.log(this.sites);                           this.message= sites[1].Name; 出错问题: 在then 这个里边的赋值方法this.sites=response.data.sites;会出现报错,什么原因呢?在Google上查了下,原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。 修改如下: methods: {                     reverseMessage: function() {                       var self= this;                        axios.get('sites.php').then(function(response) {                            self.sites=response....
mellen 发布于 10小时前 阅读 33

Content-disposition中Attachment和inline的区别

java web中下载文件时,我们一般设置 Content-Disposition 告诉浏览器下载文件的名称,是否在浏览器中内嵌显示. Content-disposition: inline; filename=foobar.pdf 表示浏览器内嵌显示一个文件 Content-disposition: attachment; filename=foobar.pdf 表示会下载文件,如火狐浏览器中   spring mvc中 @ResponseBody @RequestMapping(value = "/download",produces="application/octet-stream") public byte[] downloadFile(HttpServletRequest request, HttpServletResponse response,String contentType2) throws IOException { byte[]bytes=FileUtils.getBytes4File("D:\\Temp\\cc.jpg"); response.addHeader("Content-Disposition", "inline;filename=\"a.jpg\""); return bytes; } 如上代码中是内嵌显示图片呢?还是会弹框下载呢? 答案是:弹框下载 为什么呢?设置为inline应该是内嵌显示啊! 因为response content type设置成了"application/octet-stream" 注意:我们说是内嵌显示还是下载,那 一定是针对可内嵌显示的类型 ,例如"image/jpeg","image/png"等. 看下面的例子:设置response content type为" image/jpeg " @ResponseBody @RequestMapping(valu...
zjg23 发布于 11小时前 阅读 1

前端那些事之react--redux篇

前端那些事之react--redux篇
朱跃进 发布于 11小时前 阅读 1

JavaScript异步编程

如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一。如果你对异步编程没有太清晰的概念,那么我建议你花点时间学习JavaScript异步编程,如果你对异步编程有自己的独特理解,也欢迎阅读本文,一起交流。
熊建刚 发布于 2天前 阅读 2256 评论 5 点赞 6

负载均衡原理的解析

开头先理解一下所谓的“均衡” 不能狭义地理解为分配给所有实际服务器一样多的工作量,因为多台服务器的承载能力各不相同,这可能体现在硬件配置、网络带宽的差异,也可能因为某台服务器身兼多职,我们所说的“均衡”,也就是希望所有服务器都不要过载,并且能够最大程序地发挥作用。 一、http重定向 当http代理(比如浏览器)向web服务器请求某个URL后,web服务器可以通过http响应头信息中的Location标记来返回一个新的URL。这意味着HTTP代理需要继续请求这个新的URL,完成自动跳转。 性能缺陷: 1、吞吐率限制 主站点服务器的吞吐率平均分配到了被转移的服务器。现假设使用RR(Round Robin)调度策略,子服务器的最大吞吐率为1000reqs/s,那么主服务器的吞吐率要达到3000reqs/s才能完全发挥三台子服务器的作用,那么如果有100台子服务器,那么主服务器的吞吐率可想而知得有大?相反,如果主服务的最大吞吐率为6000reqs/s,那么平均分配到子服务器的吞吐率为2000reqs/s,而现子服务器的最大吞吐率为1000reqs/s,因此就得增加子服务器的数量,增加到6个才能满足。 2、重定向访问深度不同 有的重定向一个静态页面,有的重定向相比复杂的动态页面,那么实际服务器的负载差异是...
源子姗 发布于 2周前 阅读 3799 评论 8 点赞 3

是时候使用Vue2和Yii2进行前后端分离开发啦

本文介绍使用Vue2单页面程序作为前台,以Yii2搭建后台提供API,进行前后端分离开发的入门知识。本文适合Vue2,Yii2爱好者观看。预计花费时间30分钟,跟随教程操作。
_Elvis 发布于 3周前 阅读 4000 评论 16 点赞 8

最受欢迎的 5 款 Node.js 端到端测试框架

笔者在本文中会结合自身实践和 GitHub 趋势对比最受欢迎的 Node.js E2E 测试解决方案,期望对大家的技术选型有帮助
wangshijun 发布于 4周前 阅读 1522 评论 3 点赞 2

Chrome DevTools:在 Profile 性能分析中显示原生 javascript 函数

原生函数(native function)是 JavaScript 语言的一部分,这些函数有别于开发者编写的自定义函数。当我们在 profiler 中查看代码的调用栈时,这些函数是被过滤掉的。我们在 profiler 中看到的只有自己写的代码。
justjavac 发布于 1个月前 阅读 1800 评论 2 点赞 4

JSON:如果你愿意一层一层剥开我的心,你会发现...这里水很深——深入理解JSON

我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过`JSON.stringify`后的字符串是怎样的?**先不要急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看,写完再去仔细对比你的控制台输出,如果有误记得看完全文并评论,哈哈。** ```javascript var friend={ firstName: 'Good', 'lastName': 'Man', 'address': undefined, 'phone': ["1234567",undefined], 'fullName': function(){ return this.firstName + ' ' + this.lastName; } }; JSON.stringify(friend);//这一行返回什么呢? ``` 第二个问题,如果我想在最终JSON字符串将这个'friend'的姓名全部变成大写字母,也就是把"Good"变成"GOOD",把"Man"变成"MAN",那么可以怎么做? 基于以上两个问题,我们再追本溯源问一下,JSON究竟是什么东西?为什么JSON就是易于数据交换?JSON和JS对象的区别?JS中`JSON.parse`、`JSON.stringify`和不常见的`toJSON`,这几个函数的参数和处理细节到底是怎样的? 欢迎进入本次“深挖JSON之旅”,下文将从以下几个方面去理解JSON: - 首先是对“JSON是一种轻量的数据交换格式”的理解; - 然后来看经常被混为一谈的JSON和JS对象的区别; - 最后...
Stinson_Zhao 发布于 1个月前 阅读 6226 评论 25 点赞 42 打赏 2

Javascript常用的设计模式详解

一:工厂模式 工厂模式类似于现实生活中的工厂可以产生大量相似的商品的流水线,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。 简单的工厂模式可以理解为解决多个相似的问题;这也是它的优点;如下代码:  ​ function CreatePerson(name) { var obj = new Object(); obj.name = name; obj.sayName = function(){ return this.name; } return obj; } var p1 = new CreatePerson("longen"); var p2 = new CreatePerson("tugenhua"); console.log(p1.name); // longen console.log(p1.sayName()); // longen console.log(p2.name); // tugenhua console.log(p2.sayName()); // tugenhua // 返回都是object 无法识别对象的类型 不知道他们是哪个对象的实列 console.log(typeof p1); // object console.log(typeof p2); // object console.log(p1 instanceof Object); // true ​ 如上代码:函数CreatePerson能接受一个参数name参数,可以无数次调用这个函数,每次返回都会包含一个属性和一个方法的对象。 工厂模式是为了解决多个类似对象声明的问题;也就是为了解决实列化对象产生重复的问题。 优点:能解决多个相似的问题。 缺...
源子姗 发布于 1个月前 阅读 3151 评论 15 点赞 10

2016 年崛起的 JS 项目

长江后浪推前浪,如果你能花 30 分钟读完我 6 个小时翻译的内容,相信你不会被后浪拍死在沙滩上,对 2017 该学什么有个清晰的认识。
wangshijun 发布于 1个月前 阅读 5505 评论 32 点赞 11

js中几种实用的跨域方法原理详解

好用!!!
源子姗 发布于 2个月前 阅读 2433 评论 10 点赞 6

工具系列——webpack2的学习

最近上课比较忙,一直没有时间整理一些知识,今天把webpack2的一些常见用法都给总结了一下。
龙马行空 发布于 2个月前 阅读 1927 点赞 2

用VUEJS做一个网易云音乐(基于2.x)

> 前言:自己学习VUEJS也一段时间,但一直没有做出来一东西。我自己一直喜欢用网易云音乐app,于是乎就做了这个app。 ## 技术栈 - vue全家桶 (vue vue-router vuex) - axios - Muse-UI(一个基于Vue2.x的material design 风格UI框架) ## 功能与思路分析 我之前学习JS的时候对Html5 audio研究过,也写过一些例子,那时的功能并不是很全面。在写这个程序之前,我好好的查阅了当前的HTML5中的audio标签,发现博客园上一位园友总结的很不错([这里](http://www.cnblogs.com/tianma3798/p/6033108.html))。于是就先把网易云音乐最基本的功能实现,歌单部分(这也是我喜欢网易云音乐的原因之一),然后目前实现了音乐的上一曲、下一曲,播放、暂停。列表功能。 ### 后台 后台采用.net做为后台提供系统请求所用的API([源码](https://github.com/javaSwing/MusicAPI)),原理很简单就是用.net伪装成一个客户端去访问网易云音乐的API然后,把返回的json数据转发出来。同时服务端做下跨域处理。 核心代码: ``` /// /// 请求网易云音乐接口 /// /// 要请求的接口类型 /// 要请求的接口类型的对象 /// 请求结果(JSON) public static string Request(T config) where T : RequestData...
JavaSwing 发布于 2个月前 阅读 4582 评论 25 点赞 25

前端打包构建工具Gulp、Rollup、Webpack、Webpack-stream

Gulp、Rollup、Webpack、Webpack-stream使用入门
别人说我名字很长 发布于 2个月前 阅读 3504 评论 11 点赞 2

Vue 短信验证码组件开发详解

1、该组件基于Vue 2.1.X版本;
woter 发布于 3个月前 阅读 2516 评论 9 点赞 5

【加密解密】高级加密标准AES加密(Javascript实现)

2006年,高级加密标准已然成为对称密钥加密中最流行的算法之一。
壶漏子 发布于 3个月前 阅读 2465 评论 16 点赞 12

微信小程序模块化开发实践

## 准备 - 了解微信小程序是什么? [微信小程序官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/index.html) - 了解应用状态管理方案: [Redux], 也是[Flux架构](http://www.ruanyifeng.com/blog/2016/01/flux.html)的具体实现 - 了解Javascript打包工具: [webpack] - 了解ES6/7代码转译(transcompile)工具: [Babel], 原理大致是借助语法分析工具(Esprima之类的), 将代码解析成抽象语法树, 再"重写"成最终的代码. - Javascript测试工具: jest, mocha等等, 请根据需要选择. ## TL;DR; 微信小程序目前版本的API实现需要兼顾方方面面, 所以仍然使用callback写法, 众所周知的`Callback-Hell`是传统js语法上的历史问题, 但毕竟称手的工具是开发效率的源泉. 因此笔者对当前版本的微信小程序API做了简单的封装 [weapp]. 同时, 微信小程序框架本身专注于交互和UI的实现, 并未提供内置的状态管理, 如果众多的异步操作都直接在App或者Page中一一实现, 相信写起来会是一场噩梦, 而且不易于测试, 笔者又因此针对微信小程序实现了一个基于Redux方案的状态管理模块, 用以方便的在小程序中实现应用状态管理 [redux-weapp]. 特别地, 微信小程序构建(编译)时不支持从App scope之外requi...
xixilive 发布于 4个月前 阅读 4604 评论 6 点赞 2

类型签名在Javascript中的探索

## 简介 类型签名轻轻诉说着函数最不可告人的秘密。短短一行,就能暴露函数的行为和目的。O(∩_∩)O~ ## 作用 虽然js是动态类型的语言,但并不意味否定类型的存在,我们在写代码的时候还是要和Number,Boolean,String,Array等打交道,只不过没有在语言层面做类型检查。 - 简洁美观(对于我来说这一点就足够了) - 降低阅读代码成本 - 有效节约沟通成本(附带装X技能) 以下是描述同一个函数的 - A:fs.readFile 函数有三个参数 第一个是字符串的文件路径,第二个是编码,第三个是回掉函数 回掉函数内部第一个代表错误,第二个代表文件内容(字符串) 无返回值 - B:fs.readFile :: String:路径 -> String:编码 -> (Error -> String) -> () - C:fs.readFile :: String -> String -> (Error -> String) -> () - 编译期间检查错误(js未实现) - 生成文档 ## 简单的例子 ```javascript // Number -> Number -> Number function add(a,b){ return a + b; } ``` `add` 上方的一行注释描述了函数从入参到返回值的过程,即 `add` 函数接受两个数字返回数字 - `Number`代表数字类型 - 最后一个`Number` 代表函数返回值的类型 前面两个`Number`分别代表函数的第一参数和第二个参数 ## 数组 函数...
diqye 发布于 4个月前 阅读 1344 评论 10 点赞 2

一入前端深似海,从此红尘是路人系列第十一弹之如何合理利用Git进行团队协作(二)

久违的Git协作后续终于得空和大家一起分享了,希望可以对大伙有用。
qiangdada 发布于 4个月前 阅读 5309 评论 13 点赞 40 打赏 2

【原创】Chrome最新版(53-55)再次爆出BUG!

前言 今年十月份,我曾发布一篇文章《Chrome53 最新版惊现无厘头卡死 BUG!》,不过那个BUG在最新的 Chrome 54 中已经修正。   而今天即将发布的Chrome弱智BUG: 仅 Chrome 53 - Chrome 55(2016-12-05发布的)中存在问题 国内双核浏览器 Chrome 45 中没有问题 Firefox,Edge,IE11-IE8浏览器中都没有问题   发现问题 最近在和客户沟通中,发现一个奇怪问题: 1. 页面中存在一个选项卡控件,选项卡里面是IFrame,页面初始显示时有纵向滚动条出现 2. 来回切换选项卡一次,原来选项卡页面的滚动条居然消失了!! 3. 奇怪的时,此时在选项卡页面内滑动鼠标滚轮,还是能够上下滚动页面的   页面打开时的样子:   来回切换一次选项卡后的样子:   奇怪的是,此时鼠标滚动还能上下滚动页面:   当然首先怀疑的就是自己写的代码问题,但是查了一遍居然毫无头绪。在此期间我们还发现如下问题: 1. FineUIPro从最新版v3.3,到之前v3.2,v3.1,v3.0.... 无一例外都有这个问题。这就有点不可思议了,我们开源版有 1300 多位捐赠用户,专业版有 100 多个企业客户,如此明显的一个BUG不可能这么多版本都没有被发现!! 假设之前的版本根本就没有这个问题,那么就是浏览器版本升级...
三生石上 发布于 5个月前 阅读 5840 评论 50 点赞 23

原生CSS网格布局学习笔记

>注:此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者(读前需要先去了解一下原生CSS网格的语法),原生CSS网格布局(Native CSS grid)截止目前还没有被任何正式版本的浏览器实现。[原文地址](https://css-tricks.com/things-ive-learned-css-grid-layout/) _以下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权。在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习。这比直接学习[网格布局的所有东西](https://css-tricks.com/snippets/css/complete-guide-grid/)要好太多了。 浏览器原生CSS网格预计会在2017年年初得到支持\. **在这之前你需要在浏览器中开启这个实验性的功能** (Firefox实验版默认是开启的). _[Chrome Canary](https://www.google.com/chrome/browser/canary.html)是当前最好的实现._ 同时,火狐有一个非常好的插件叫CSS Grid Inspector, 它能显示出网格的线,它是目前唯一可以在浏览器中运行的此类工具。 在 chrome的地址栏中输入`ch...
GeoffZhu 发布于 5个月前 阅读 3511 评论 6 点赞 3

我的react组件化开发道路(二) 分页 组件开发

上一篇文章主要写了关于react组件化开发的一些基本配置,慢慢的深入到每个组件的详细介绍中,今天我们就来分享react的分页组件
梅大帅锅 发布于 5个月前 阅读 1582 评论 4 点赞 5 打赏 1
顶部