开源中国

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

It appears you’re using an unsupported browser

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

精彩阅读

  • 最新推荐

  • 今日热门

  • 本周热门

  • 每日一博

  • 最新文章

捋一捋JavaScript对象的继承

文章针对不理解继承的程序员朋友去剖析和理解继承.
Jill1231 发布于 5天前 阅读 1823 评论 5 点赞 7

在angularJS中使用three.js的一些注意事项

因为考虑到项目需要我将之前自己做的demo放到了angularJS的一个component中,其实一开始是没有准备用框架的但是后面发现需要进行的双向绑定越来越多,后期表单数据的变化量也很大,最后还是选择用NG来做这些事情。过程不怎么顺利,在中间被几个坑卡了比较久,这里我记录一下这些问题,希望对大家有帮助,毕竟现在看来NG的资料不多,NG上用three.js的更少。
SwatNo27 发布于 6天前 阅读 182 评论 1

【福利】蓝色巨人的云计算PaaS平台IBM Bluemix免费试用!

IBM Bluemix,包含认知、物联网、大数据分析、安全、DevOps、应用、应用整合、移动、计算、网络、存储等 11 大类共 140 多个服务的云计算平台。
IBM Bluemix

你可能不知道的前端知识点之:IntersectionObserver

本文是我的 [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know) 系列的第 5 个知识点。 ## 简介 - 你想跟踪 DOM 树里的一个元素,当它进入可视区域时得到通知。 - 你想实现延迟加载图片功能 - 你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 `scroll` 事件或者用一个周期性的定时器,然后在回调函数中调用元素的 [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 获取元素位置实现这个功能。但是,这种实现方式性能极差,因为每次调用 `getBoundingClientRect()` 都会强制浏览器 [重新计算整个页面的布局](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) ,可能给你的网站造成相当大的闪烁。 `IntersectionObserver` 就是为此而生的,它可以检测一个元素是否可见,`IntersectionObserver` 能让你知道一个被观测的元素什么时候进入或离开浏览器的视口。 ## 兼容性 - Chrome 51+(发布于 2016-05-25) - Android 5+ (Chrome 56 发布于 2017-02-06) - Edge 15 (2017-04-11) - iOS **不支持** ## Polyfill WICG 提供了一个 [p...
justjavac 发布于 2周前 阅读 987 点赞 3

给 Web 开发人员推荐的开源图形库 —— 动画

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。 以下是为 Web 开发者推荐的一些精品开源图形库,旨在专注于最常见的问题和最常用的东西。将针对动画(Animation)、数据可视化(Data Visualization)、2D/3D 分别整理,欢迎保持关注。 动画 一、效果(Effects) 1、切换和过渡 Animate.css 一个跨浏览器的 css3 动画库,内置了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)、放大缩小(等多达 60 多种动画效果,几乎包含了所有常见的动画效果。在炫酷的同时,还一直保持着易于使用的特点。 效果预览:点此查看 Magic Animations 一个独特的 CSS3 动画特效包,可以自由地使用在 Web 项目中。包括:Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各类效果。 效果预览:点此查看 Effeckt.css 同样是一个包含众多精妙的 CSS3 切换和动画效果库,例如:弹窗、按钮、导航、列表、页面切换等,适用于网站和移动 Web 开发。 效果预览:点此查看 还有: Velocity...
编辑部的故事 发布于 2周前 阅读 5975 评论 8 点赞 32

Vue transition源码浅析

# Vue transition源码分析 > 本来打算自己造一个transition的轮子,所以决定先看看源码,理清思路。Vue的transition组件提供了一系列钩子函数,并且具有良好可扩展性。 ## 了解构建过程 既然要看源码,就先让Vue在开发环境跑起来,首先从GitHub clone下来整个项目,在文件```./github/CONTRIBUTING.md```中看到了如下备注,需要强调一下的是,npm run dev构建的是runtime + compiler版本的Vue。 ``` sh # watch and auto re-build dist/vue.js $ npm run dev ``` 紧接着在package.json中找到dev对应的shell语句,就是下面这句 ``` json "scripts": { "dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev", ... } ``` Vue2使用rollup打包,-c 后面跟的是打包的配置文件(build/config.js),执行的同时传入了一个TARGET参数,web-full-dev。打开配置文件继续往里找。 ``` javascript ... const builds = { ... 'web-full-dev': { entry: resolve('web/entry-runtime-with-compiler.js'), dest: resolve('dist/vue.js'), format: 'umd', env: 'development', alias: { he: './entity-decoder' }, banner }, ... } ``` 从上面的构建配置中,找到构建入口...
GeoffZhu 发布于 2周前 阅读 311

JavaScript 与 异步编程

## 什么是异步(Asynchrony) 按照[维基百科](https://en.wikipedia.org/wiki/Asynchrony_(computer_programming%29)上的解释:独立于主控制流之外发生的事件就叫做异步。比如说有一段顺序执行的代码 ```js void function main() { fA(); fB(); }(); ``` fA => fB 是顺序执行的,永远都是 _fA_ 在 _fB_ 的前面执行,他们就是 __同步__ 的关系。加入这时使用 `setTimeout` 将 fB 延后 ```js void function main() { setTimeout(fA, 1000); fB(); }(); ``` 这时,fA 相对于 fB 就是异步的。main 函数只是声明了要在一秒后执行一次 fA,而并没有立刻执行它。这时,fA 的控制流就独立于 main 之外。 ## JavaScript——天生异步的语言 因为 `setTimeout` 的存在,至少在被 ECMA 标准化的那一刻起,JavaScript 就支持异步编程了。与其他语言的 `sleep` 不同,`setTimeout` 是异步的——它不会阻挡当前程序继续往下执行。 然而异步编程真正发展壮大,Ajax 的流行功不可没。Ajax 中的 A(Asynchronous)真正点到了异步的概念——这还是 IE5、IE6 的时代。 ## 回调函数——异步编程之痛 异步任务执行完毕之后怎样通知开发者呢?回调函数是最朴素的,容易想到的实现方式。于是从异步编...
老帖子 发布于 2周前 阅读 706 点赞 3

捋一捋JavaScript创建对象

##创建对象 回顾前面我们谈到通过object构造函数创建单个对象 ``` // 创建一个object的实例,然后再为它添加属性和方法 var person = new Object(); person.name = "jill"; person.age = 18; person.job = "software Engineer"; person.sayName = function () { alert(this.name); } ``` 通过对象字面量创建单个对象 ``` var person = { name:"jill", age:18, job:"software Engineer", sayName:function () { alert(this.name); } } ``` 通过object构造函数或对象字面量创建单个对象的方式有个缺点:**使用同一个接口创建很多对象,会产生大量的重复代码** ###工厂模式 **解决了创建多个相似对象的问题** ``` function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); } return o; } var person1 = createPerson('jill',18,'software'); var person2 = createPerson('vane',23,'student'); ``` 工厂模式虽然解决了创建多个相似对象的问题,但却没有解决**对象识别的问题(即怎样知道一个对象的类型)** -------------------------------------------- ###构造函数模式 **解决...
Jill1231 发布于 3周前 阅读 2257 评论 20 点赞 11

捋一捋JavaScript对象的理解

###理解对象 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。 我们可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中的值可以是数据或函数。 每个对象都是基于一个引用类型创建的,即创建自定义对象的最简单方式就是创建一个Object的实例,然后再为它添加属性和方法 早期的JavaScript开发人员使用这个模式创建新属性 ``` //创建了一个名为person的对象,并为它添加了三个属性(name、age和job)和一个方法(sayName()) var person = new Object(); person.name = "jill"; person.age = 18; person.job = "software Engineer"; person.sayName = function () { alert(this.name); } ``` 几年后,对象字面量成为创建这种对象的首选模式。 ``` var person = { name:"jill", age:18, job:"software Engineer", sayName:function () { alert(this.name); } } ``` 这些属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的行为 #### 属性类型 ECMA-262第5版在定义了只有内部才用的特性时,描述了属...
Jill1231 发布于 3周前 阅读 917 评论 6 点赞 3

极简的Angular2示例, Electron环境运行

![](http://git.oschina.net/chai2010/hello-ng2/raw/master/ng2-electron.png) Angular2本身提供了cli命令行工具, 可以生成完整的工程. 但是命令行生成的工程太过复杂, 对于新学习Angular的用户会有太多的干扰. 我们尝试完全脱离cli工具, 只是通过TypeScript提供的tsc命令, 纯手工构造一个极简的Angular2示例. 完整代码: http://git.oschina.net/chai2010/hello-ng2 ## 配置淘宝的镜像 通过以下命令安装: npm install -g cnpm --registry=https://registry.npm.taobao.org 完成后用 `cnpm` 代替 `npm` 命令. ## HTML启动页面 首先构造一个 hello-ng2 目录, 用于存放工程文件. 在目录下创建 demo.html 页面, 内容如下: ```html Angular2应用 加载UI组件 ``` 我们采用的是HTML5语法, 完全省略了最外层没有任何意义的``标签. 其中包含了一个我们自定义的``标签, 对应我们要创建的 Angular 窗口组件. 然后通过`require`加载当前目录下的`demo`模块(对应demo.js文件), 然后运行其中的`main`函数启动Angular程序. ## Angular组件 Angular严重依赖ES7中的注解语法, 如果要在JS中使用该特性, 将需要一个转码工具将ES7注解语法转为ES2015或更早的格式, 因为只有这样才能在浏览器中正...
chai2010 发布于 3周前 阅读 903 评论 3 点赞 2

从javascript发展说到vue

Vue是基于javascript的一套MVVC前端框架,在介绍vue之前有必要先大体介绍下javascript产生背景及发展的历史痕迹、前端MVVC模式等,以便于大家更好的理解为什么会有vue/react等框架的出现。 1.1 javascript发展概要及MVVC模式 【Web刚起步阶段】 那会,只有可怜的HTML(超文本标记语言(HyerText Markup Language)),浏览器请求某个URL时,web服务器就把对应的html文件返回给浏览器,浏览器做解析后展示给用户。随着时间推移,为了给能不同用户展示不同的页面信息,就慢慢发展出来基于服务器的可动态生成html的语言,比如asp、php、jsp等。 但是,当浏览器接收到一个html后,如果要更新页面的内容,就只能重新向服务器请求获取一份新的html文件,即刷新页面。在那古老的2G的流量珍贵的年代,这种体验是很容易让人奔溃的,而且还浪费流量。 【进入javascript阶段】 还好,聪明的前辈们在1995年底,在浏览器中引入了javascript。Javascript是一种脚本语言,浏览器中带有javascript引擎,用于解析并执行javascript代码,然后就可以在客户端操作到html页面中的DOM,这样就解决了不刷新页面情况,动态的改变用户html页面的内容。再后来,大家发现编写原生的javascript代码太繁琐...
goodman_fz 发布于 4周前 阅读 645 点赞 2

Three.js 初期踩坑

基于Three.js建立项目所需要的3d地图场景,实现多角度和距离的观察运动点或坐标系。基础...
SwatNo27 发布于 1个月前 阅读 820 评论 2

最流行的5个前端框架对比

如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。 本文依据各个框架的GitHub流行度来顺序介绍。 Bootstrap Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛弃。 创作者: Mark Otto 和 Jacob Thornton. 发行: 2011 当前版本: 3.3.7 人气: GitHub上有111,000颗星 说明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动的Web项目。 核心概念/原则: RWD和移动端优先。 框架大小: 154 KB 预处理器: Less和Sass 响应式布局:是 模块化:是 启动模板/布局:是 图标集: Glyphicons Halflings设置 附加/附件:无捆绑,许多第三方插件可用。 独特组件: Jumbotron 文档资源:良好 自定制:基本GUI定制器。但是你需要手动输入颜色值,因为没有颜色选择器可用。 浏览器支持: Fir...
葡萄城控件技术团队 发布于 1个月前 阅读 8038 评论 19 点赞 12

使用 Webix 创建 Email 客户端

Webix 是一个JavaScript UI 库,提供了多达88个UI小部件和功能丰富的 CSS/HTML5 JavaScript 控件。使用 Webix 可以有效地...
waylau 发布于 1个月前 阅读 393 评论 2 点赞 3

vue与TypeScript集成配置最简教程

# vue与TypeScript集成配置最简教程 [TOC] ## 前言 Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手。 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。 ## 初始化项目 首先用vue-cli建立webpack项目。这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开。 ```shell # vue init webpack vue-typescript ? Project name vue-typescript ? Project description A Vue.js project ? Author ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No ``` 安装TypeScript相关依赖和项目其余依赖,用npm或cnpm ```shell # cd /vue-typescript # npm install typescript ts-loader --save-dev # npm install ``` ## 配置 修改目录下`bulid/webpack.base.conf.js`文件,在文件内`module>rules`添加以下规则 ```json { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } }, ``` 在src目录下新建...
lzp4ever 发布于 1个月前 阅读 402 点赞 2

<HTTP权威指南>读书笔记 ---- 网关、隧道及中继

网关、隧道及中继 -- Web是一种强大的内容发布工具。随着时间的流逝,人们已经从只在网上发送静态的在线文档,发展到共享更复杂的资源,比如数据库内容或动态生成的HTML页面。Web浏览器这样的HTTP应用程序为用户提供了一种统一的方式来访问因特网上的内容。HTTP也已成为应用程序开发者的一种基本构造模块,开发者们可以在HTTP上捎回其他的协议内容(比如,可以将其他协议的流量包裹在HTTP中)。Web上所有的资源都可以使用HTTP协议,而且其他应用程序和应用程序协议也可以利用HTTP来完成它们的任务。 ### 网关 HTTP扩展和接口的发展是由用户需求驱动的。要在Web上发布更复杂资源的需求出现时,人们很快就明确了单个应用程序无法处理所有这些能想到的资源。为了解决这个问题,开发者提出了**网关**(gateway)的概念,网关可以作为某种翻译器使用,它抽象出了一种能够到达资源的方法。网关是资源和应用程序之间的粘合剂。应用程序可以(通过HTTP或其他已定义的接口)请求网关来处理某条请求,网关可以提供一条响应。网关可以向数据库发送查询语句,或者生成动态的内容,就像一个门一样:进去一条请求,出来一个响应。有些网关会自动将HTTP流量转换为其他协议,这样HTTP客户端无需了...
小马就是神 发布于 1个月前 阅读 912 评论 2

Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天

## 前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用,利用socket.io实现实时聊天。 ## 技术栈 ``` vue2+vue-router+webpack+vuex+sass+svg构图+es6/7 ``` ## 源码地址 源码地址:[https://github.com/bailichen/vue-weixin](https://github.com/bailichen/vue-weixin) ## 项目运行 ``` git clone https://github.com/bailichen/vue-weixin.git cd vue-weixin npm install npm run dev (访问本地,运行后访问 http://localhost:8882) ``` ### 效果演示 [项目演示请点击这里](http://cangdu.org:8003/dialogue) (请用chrome手机模式预览) ### 移动端扫描下方二维码 ![](http://cangdu.org/files/images/code.png) ### 说明 > 本项目主要用于熟悉vue2+vuex的用法 > 如有问题请直接在Issues中提出,或加qq:812571880 > 如果觉得对您学习vue有点点帮助,请右上角star一下吧 ^_^ # 目标功能 - [x] 微信 - [x] 通讯录 - [x] 发现 - [x] 我 - [x] 设置 - [x] 新消息提醒 - [x] 勿扰模式 - [x] 聊天 - [x] widows 微...
cangdu 发布于 1个月前 阅读 2304 评论 17 点赞 16

如何在 React Native 中写一个自定义模块

## 前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm,一般指两层含义:一是 Node.js 开放式模块登记和管理系统,另一种是 Node.js 默认的模块管理器,是一个命令行软件,用来安装和管理 node 模块。本文旨在探讨如何在 React Native 中写一个自定义的 npm 模块(类似于插件),并上传到 npm 上供他人使用。 ## npm 使用介绍 npm 是一个 Node.js 模块,安装 Node.js 会默认安装 npm,可以在终端中使用以下命令来查看 npm 的版本: ``` npm -v ``` 升级 npm: ``` sudo npm install npm -g ``` 安装模块(安装完毕后会产生一个node_modules目录,其目录下就是安装的各个node模块): ``` npm install ``` 查看 npm 配置: ``` npm config list ``` 设置代理: ``` //设置 http 代理 npm config set proxy http://server:port //设置 https 代理 npm config set https-proxy http://server:port ``` 上面介绍了一些 npm 基本命令,接下来就可以在本地创建一个模块啦。 首先打开终端中新建一个你想在此创建自定义模块的文件夹,然后在命令行中登录 npm。输入以下命令: ``` np...
极光推送 发布于 1个月前 阅读 294 评论 1

vue ajax跨域请求

一.设置config/index.js || proxyTable添加 proxyTable: {      '/api': {             target: 'http://192.168.48.239:8080/ydzl',             changeOrigin: true,             pathRewrite: {                 '^/api': ''             }       } 二.mian.js 添加vue全局属性 Vue.prototype.HOST = '/api' 三.如果是post的话 1.修改数据格式 transformRequest: [function (data) {                     // Do whatever you want to transform the data                         let ret = ''                         for (let it in data) {                           ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'                         }                         return ret                       }], 2.修改请求头 headers: {                         'Content-Type': 'application/x-www-form-urlencoded'                   ...
cnchens 发布于 1个月前 阅读 634 评论 2

使用webpack+vue+less开发,使用less-loader,配置全局less变量

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,在阅读这篇文章的时候,笔者假设你已经有了一定的less编码经验。以下将不会讲解less的用法。 我们在构建一个页面的时候,会定义一些基本参数,例如主色调,文字颜色,标题颜色,副标题颜色,字体大小等等。 通过统一的参数,可以保证页面整体风格的一致性。 在使用Vue模板进行开发的时候,我们把每个页面组件化,组件内的样式就写在组件自身的`
DiamondFsd 发布于 1个月前 阅读 273 评论 1

合格前端系列第五弹-Virtual Dom && Diff

不一样的姿势打开所谓的virtual dom && diff
qiangdada 发布于 1个月前 阅读 503 评论 1 点赞 2

给 Web 开发人员推荐的开源图形库 —— 动画

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。 以下是为 Web 开发者推荐的一些精品开源图形库,旨在专注于最常见的问题和最常用的东西。将针对动画(Animation)、数据可视化(Data Visualization)、2D/3D 分别整理,欢迎保持关注。 动画 一、效果(Effects) 1、切换和过渡 Animate.css 一个跨浏览器的 css3 动画库,内置了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)、放大缩小(等多达 60 多种动画效果,几乎包含了所有常见的动画效果。在炫酷的同时,还一直保持着易于使用的特点。 效果预览:点此查看 Magic Animations 一个独特的 CSS3 动画特效包,可以自由地使用在 Web 项目中。包括:Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各类效果。 效果预览:点此查看 Effeckt.css 同样是一个包含众多精妙的 CSS3 切换和动画效果库,例如:弹窗、按钮、导航、列表、页面切换等,适用于网站和移动 Web 开发。 效果预览:点此查看 还有: Velocity...
编辑部的故事 发布于 2周前 阅读 5975 评论 8 点赞 32

【福利】蓝色巨人的云计算PaaS平台IBM Bluemix免费试用!

IBM Bluemix,包含认知、物联网、大数据分析、安全、DevOps、应用、应用整合、移动、计算、网络、存储等 11 大类共 140 多个服务的云计算平台。
IBM Bluemix

怎么轻松学习JavaScript

      js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径。我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条“轻松学习js之路”。js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。 B:本身内容很多,如函数库、对象库就一大堆。 C:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。就好像又是新的一样,让你对曾经学的面向对象产生了怀疑...... D:辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后,变量、函数、对象你也都略知一二,但一到公司开发项目的时候,却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库,如:jquery,angular,boostrap,amaze,layui,ueditor等,而这些库又多如牛毛,同时还有自己的难点。让你都不知道该学哪个好,甚至都怀疑自己学的是不是js了,好像有多个版本的js一样,总是学不完...... 那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验: 首先要紧紧抓住它的地位 ...
前端攻城狮-Dawn 发布于 4小时前 阅读 123

从事前端开发必须要了解的CSS原理

  从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢?   一、浏览器的发展与CSS   网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不完全支援的标准,然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以 URL(统一资源定位符)指示,此乃网页的地址;以 http: 开首的便是通过 HTTP协议登陆。很多浏览器同时支援其他类型的 URL 及协议,例如 ftp: 是 FTP(档案传送协议)、gopher: 是 Gopher 及 https: 是 HTTPS(以SSL加密的HTTP)。   早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的 HTML 代码的产生。但随着 HTML 的成长,为了满足设计师的要求,HTML 获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。   1994年哈坤·利提出了 CSS 的最初建议。伯特·波斯(BertBos)当时正...
前端攻城狮-Dawn 发布于 4小时前 阅读 67

在angularJS中使用three.js的一些注意事项

因为考虑到项目需要我将之前自己做的demo放到了angularJS的一个component中,其实一开始是没有准备用框架的但是后面发现需要进行的双向绑定越来越多,后期表单数据的变化量也很大,最后还是选择用NG来做这些事情。过程不怎么顺利,在中间被几个坑卡了比较久,这里我记录一下这些问题,希望对大家有帮助,毕竟现在看来NG的资料不多,NG上用three.js的更少。
SwatNo27 发布于 6天前 阅读 182 评论 1

最流行的5个前端框架对比

如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。 本文依据各个框架的GitHub流行度来顺序介绍。 Bootstrap Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛弃。 创作者: Mark Otto 和 Jacob Thornton. 发行: 2011 当前版本: 3.3.7 人气: GitHub上有111,000颗星 说明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动的Web项目。 核心概念/原则: RWD和移动端优先。 框架大小: 154 KB 预处理器: Less和Sass 响应式布局:是 模块化:是 启动模板/布局:是 图标集: Glyphicons Halflings设置 附加/附件:无捆绑,许多第三方插件可用。 独特组件: Jumbotron 文档资源:良好 自定制:基本GUI定制器。但是你需要手动输入颜色值,因为没有颜色选择器可用。 浏览器支持: Fir...
葡萄城控件技术团队 发布于 1个月前 阅读 8038 评论 19 点赞 12

10个JavaScript难点

**译者按:**能够读懂这篇博客的JavaScript开发者,运气不会太差... 原文: [10 JavaScript concepts every Node.js programmer must master](http://www.infoworld.com/article/3196070/node-js/10-javascript-concepts-nodejs-programmers-must-master.html) 译者: [Fundebug](https://fundebug.com/) **为了保证可读性,本文采用意译而非直译,并且对示例代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。** ### 1. 立即执行函数 **立即执行函数**,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作: ```javascript (function() { // 代码 // ... })(); ``` **function(){…}**是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数。**立即执行函数**也可以理解为立即调用一个匿名函数。**立即执行函数**最常见的应用场景就是:将var变量的作用域限制于你们函数内,这样可以避免命名冲突。 ### 2. 闭包 对于闭包(closure),当外部函数返回之后,内部函数依然可以访问外部函数的变量。 ```javascript function f1() { ...
Fundebug 发布于 1周前 阅读 1069

你可能不知道的前端知识点之:IntersectionObserver

本文是我的 [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know) 系列的第 5 个知识点。 ## 简介 - 你想跟踪 DOM 树里的一个元素,当它进入可视区域时得到通知。 - 你想实现延迟加载图片功能 - 你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 `scroll` 事件或者用一个周期性的定时器,然后在回调函数中调用元素的 [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 获取元素位置实现这个功能。但是,这种实现方式性能极差,因为每次调用 `getBoundingClientRect()` 都会强制浏览器 [重新计算整个页面的布局](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) ,可能给你的网站造成相当大的闪烁。 `IntersectionObserver` 就是为此而生的,它可以检测一个元素是否可见,`IntersectionObserver` 能让你知道一个被观测的元素什么时候进入或离开浏览器的视口。 ## 兼容性 - Chrome 51+(发布于 2016-05-25) - Android 5+ (Chrome 56 发布于 2017-02-06) - Edge 15 (2017-04-11) - iOS **不支持** ## Polyfill WICG 提供了一个 [p...
justjavac 发布于 2周前 阅读 987 点赞 3

vue中点击获取当前对象

Vue.js可以传递$event对象,event.currentTarget对象就是当前元素 toggleList: function (event) { $("p.boxItem.selected").removeClass("selected"); //获取点击对象 var toggle = event.currentTarget; $(toggle).addClass("selected"); }
guying1028 发布于 3个月前 阅读 834

淘宝前端工程师:国内web前端开发十日谈

一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘。我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要。   我一直认为自己是“初级”前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅。时势造就了一批技能薄弱但备受追捧的“弄潮者”,这在很大程度上影响我们对“技术本质”的洞察力,多年来也一直未有成体系的“前端技术”布道佳作,以至于当下多数人对前端技术的了解,盖始于表述并不严谨的岗位招聘描述,而这正恰恰反映了Web前端开发对自身的模糊定位。对于很多Web前端工程师来说,初尝禁果的快感无法持续很久,就陷入一轮又一轮的迷惘,思索自己的职业规划,试图寻找到适合自己的成长道路、看清自身技能的瓶颈,寻找突破。但遗憾的是,Web前端技术被广泛接纳时日尚短,没有多少励志的成功样板可供遵循。然而情况不总是这么糟,毕竟Web前端技术是一门“技术”,和计算机科学系出同门,只是因为互联网的高速崛起而被蒙上了迷雾,遮住了双眼,让我们傻傻看不清时局。   那么,如何定义Web前端技...
前端攻城狮-Dawn 发布于 4天前 阅读 613

合格前端系列第六弹-从指向看JavaScript

this?原型/原型链?继承?闭包?我们不妨从指向这个概念去理解JavaScript中的这些点!
qiangdada 发布于 1天前 阅读 27 点赞 1

Angular开发环境搭建问题集中解答

2017-06-10,第三次在斗鱼直播讲Angular相关的内容,这次主要解答环境搭建相关的内容。因为看到很多群里面的反馈,仍然有一些道友卡在环境问题上。 @angular/cli的安装配置以及一些需要注意的坑。 真实的案例项目NiceFish应该怎么搭建环境并把项目启动起来,对于的系列开源项目在这里http://git.oschina.net/mumu-osc/NiceFish 基于Angular的前端项目如何与Server端真正对接(前后端分离开发、分离部署,nginx的配置,IDEA如何导入maven项目等等) 如果您有需要,请点击这个链接收看https://v.douyu.com/show/ra2JEMJbo8oMNxml 注意:这是新手内容,如果您已经会了,不要浪费时间在上面。我会经常直播写代码的,欢迎下回来看看。
大漠穷秋 发布于 1个月前 阅读 758 点赞 1

CSS 布局经典问题初步整理

本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。
brianway 发布于 2个月前 阅读 3795 评论 9 点赞 11 打赏 1

项目中的 dva

# 为什么写这篇 Blog ---------- 起初,是由于项目的需要,开始正式接触 dva。 dva 的开发模式不同于传统页面的开发,学习起来有一定的技术门槛。 在 [dva](https://github.com/dvajs/dva) 的作者[sorrycc Blog](https://github.com/sorrycc/blog/issues) 里逗留了数个日夜,对新的开发模式好像是理解了,于是就迫不及待的下载了一个 demo,准备开发 CRUD。 故事情节的发展往往不会这么顺利,开发过程中发现,学会 dva 和在项目中使用 dva 进行完整开发完全是两码事:因为项目不仅仅是代码开发,还要关注项目的整体生命周期,代码规范,打包上线等等。 ![初学 dva 时心里变化](https://static.oschina.net/uploads/img/201706/28145521_JbhX.png "初学 dva 时心里变化") 如果你和我一样,不能容忍在你的项目存在看不懂的东东,哪怕是一个配置文件,存在必有价值,不明白的东东就该 ~~DELETE~~ 掉,那么来到这里就对了,本文就是对 dva 做一次“大手术”,肢解它的技术组成,掌握项目中的 dva。 学习的过程中,难免会花费很多时间去查阅资料,有时候整篇英文文档看的让人直抓狂,本文总结作者在学习过程中看到的一些好的技术 Blog,贴上相关技术比较友好的 API 文档,帮助各...
dk_virus 发布于 4周前 阅读 67

本月推荐:15 个有用的 JavaScript 和 CSS 库

五月 JavaScript 和 CSS 库推荐!
编辑部的故事 发布于 2个月前 阅读 4411 评论 11 点赞 13

我的web前端面试经历————百度

写在前面的话 博主就读于电子科技大学,大三狗一枚! 面试是个漫长的过程,从海投到收获电话面试,一面、二面、三面,一个步骤出错那么后面就宣告终结。同时,面试过程中你也可能会遇到一些面试官的刁难,甚至部分面试官会说些比较打击你的话,但是大部分面试官都是很棒的! 面试前的准备 基础知识 必须有牢固的基础知识,足够丰富的项目经历(就我而言差不多是三个完整项目经历,时间累计差不多接近一年)。 至少这上面的面试题你能全答出来,说得足够清楚! web前端面试宝典1 web前端面试宝典2 表述能力 表述能力,你要能把你的答案给面试官描述清楚,注意专业词汇,这将大大提高面试官对你的印象分! 简历 简历尽量一页,不要超过两页。简历内容要直奔主题,姓名、电话、邮箱、学校、项目经历!兴趣爱好之类的大部分面试官会视为垃圾信息直接过滤掉,如果你Github有什么star很多的项目千万记得贴上,这点加分非常高!如果你有自己的博客,博客上有一些含金量较高的文章的话也记得贴上自己的博客。当然最重要的一块肯定是你掌握了哪些技术,但是千万不要用网上现在比较火的进度条去表示你对技术的掌握情况,这是非常愚蠢的行为,到底什么算掌握、熟悉、精通? 简历内容,总...
前端攻城狮-Dawn 发布于 1周前 阅读 592

合格前端系列第三弹-实现一个属于我们自己的简易MVVM库

时隔半年,重新写一遍有关数据双向绑定的文章,模拟当今流行的vue框架实现一个属于自己的mvvm库。
qiangdada 发布于 2个月前 阅读 3661 评论 11 点赞 10

web前端到底怎么学?干货资料!

我觉得我这片入门文章可以小火,究其原因 有以下几点 web前端是如此的火热,关注度也逐年升高 由于前端开发的火热 和 一些IT巨头公司 对 web前端开发 人员的需求旺盛,让越来越多的孩子转入前端 前端开发领域 是it技术语言领域唯一一个 男女老少都可以快速入门并快速提升兴趣的领域(嘿嘿:妹子那绝对是最多的!) 我文风实在是太逗比了,我颜值实在是太帅了 不知不觉,我废话又多了起来,段子手的天性就是改不了? ok ,我们切入今天的正题 : web前端到底怎么学? 那么在讲 web前端怎么学 这个大命题之前呢,依据我本人的尿性,还是得先把你拉入坑,让你在坑里好好学 O(∩_∩)O 由于第一篇文章,有说到 O(∩_∩)O 好了,我们已经相识了,我们进入相知的阶段(我擦,太快了吧?) web前端的历史渊源 和一些出处,童鞋们大概都有所了解了。 下面我们进入【相爱】阶段(我都不认识你,就tm相爱了?) 歌词云:* 想说爱你不容易 *! 但是我会想方设法让你爱上她(web前端开发)。 一般据我经验,在喜欢并且决定和她恋爱之前,我都会做一下充分准备和调查,有必要了解和研究清楚 ‘她’ 的几个特性和习惯 web前端的基本工作职责 和基础技能(要清楚) web前端的分类和门派(简要...
前端攻城狮-Dawn 发布于 4天前 阅读 231

Javascript之图片的延迟加载或者懒加载

作用:保证页面打开的速度(3s之内打不开页面,就已经算是死亡页面了) 原理:     1)对于首屏内容中的图片:首先给对应的区域一张默认图片占着位置(默认图片需要非常小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟时间),再开始加载真实图片     2)对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片     扩展:数据的异步加载:开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面滚动到对应区域的时候,在重新请求数据,然后绑定渲染数据 首先让img标签中的src为空,让imgdisplay:none;在外面的div上的背景图上面绑定一个背景图片,然后等页面加载完毕之后,在进行加载图片; 使用定时器或者window.onload事件,然后把获取到的url地址绑定到元素img标签上的src上;但是,如果获取的真实图片地址是错误的src地址时,不仅控制台会报错,而且页面会出现碎图/叉子图,影响视觉,以下为处理事件     var oImg = new Image; //创建一个临时的img标签     oImg.src = 真实的img的src地址     oImg.onload=function(){  //-> 当图片能够正常加载         ...
沉非 发布于 1天前 阅读 9

<HTTP权威指南>读书笔记 ---- 网关、隧道及中继

网关、隧道及中继 -- Web是一种强大的内容发布工具。随着时间的流逝,人们已经从只在网上发送静态的在线文档,发展到共享更复杂的资源,比如数据库内容或动态生成的HTML页面。Web浏览器这样的HTTP应用程序为用户提供了一种统一的方式来访问因特网上的内容。HTTP也已成为应用程序开发者的一种基本构造模块,开发者们可以在HTTP上捎回其他的协议内容(比如,可以将其他协议的流量包裹在HTTP中)。Web上所有的资源都可以使用HTTP协议,而且其他应用程序和应用程序协议也可以利用HTTP来完成它们的任务。 ### 网关 HTTP扩展和接口的发展是由用户需求驱动的。要在Web上发布更复杂资源的需求出现时,人们很快就明确了单个应用程序无法处理所有这些能想到的资源。为了解决这个问题,开发者提出了**网关**(gateway)的概念,网关可以作为某种翻译器使用,它抽象出了一种能够到达资源的方法。网关是资源和应用程序之间的粘合剂。应用程序可以(通过HTTP或其他已定义的接口)请求网关来处理某条请求,网关可以提供一条响应。网关可以向数据库发送查询语句,或者生成动态的内容,就像一个门一样:进去一条请求,出来一个响应。有些网关会自动将HTTP流量转换为其他协议,这样HTTP客户端无需了...
小马就是神 发布于 1个月前 阅读 912 评论 2

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 发布于 3个月前 阅读 338 点赞 1

给 Web 开发人员推荐的开源图形库 —— 动画

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。 以下是为 Web 开发者推荐的一些精品开源图形库,旨在专注于最常见的问题和最常用的东西。将针对动画(Animation)、数据可视化(Data Visualization)、2D/3D 分别整理,欢迎保持关注。 动画 一、效果(Effects) 1、切换和过渡 Animate.css 一个跨浏览器的 css3 动画库,内置了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)、放大缩小(等多达 60 多种动画效果,几乎包含了所有常见的动画效果。在炫酷的同时,还一直保持着易于使用的特点。 效果预览:点此查看 Magic Animations 一个独特的 CSS3 动画特效包,可以自由地使用在 Web 项目中。包括:Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各类效果。 效果预览:点此查看 Effeckt.css 同样是一个包含众多精妙的 CSS3 切换和动画效果库,例如:弹窗、按钮、导航、列表、页面切换等,适用于网站和移动 Web 开发。 效果预览:点此查看 还有: Velocity...
编辑部的故事 发布于 2周前 阅读 5975 评论 8 点赞 32

10个JavaScript难点

**译者按:**能够读懂这篇博客的JavaScript开发者,运气不会太差... 原文: [10 JavaScript concepts every Node.js programmer must master](http://www.infoworld.com/article/3196070/node-js/10-javascript-concepts-nodejs-programmers-must-master.html) 译者: [Fundebug](https://fundebug.com/) **为了保证可读性,本文采用意译而非直译,并且对示例代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。** ### 1. 立即执行函数 **立即执行函数**,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作: ```javascript (function() { // 代码 // ... })(); ``` **function(){…}**是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数。**立即执行函数**也可以理解为立即调用一个匿名函数。**立即执行函数**最常见的应用场景就是:将var变量的作用域限制于你们函数内,这样可以避免命名冲突。 ### 2. 闭包 对于闭包(closure),当外部函数返回之后,内部函数依然可以访问外部函数的变量。 ```javascript function f1() { ...
Fundebug 发布于 1周前 阅读 1069

捋一捋JavaScript对象的继承

文章针对不理解继承的程序员朋友去剖析和理解继承.
Jill1231 发布于 5天前 阅读 1823 评论 5 点赞 7

73款阿里巴巴开源软件详解!

详细解读阿里巴巴开源技术,包括框架、组件、引擎、数据库/存储、平台/系统、解决方案、工具、中间件、Web Sever、设计等十大类73款!
阿里巴巴

怎么轻松学习JavaScript

      js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径。我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条“轻松学习js之路”。js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。 B:本身内容很多,如函数库、对象库就一大堆。 C:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。就好像又是新的一样,让你对曾经学的面向对象产生了怀疑...... D:辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后,变量、函数、对象你也都略知一二,但一到公司开发项目的时候,却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库,如:jquery,angular,boostrap,amaze,layui,ueditor等,而这些库又多如牛毛,同时还有自己的难点。让你都不知道该学哪个好,甚至都怀疑自己学的是不是js了,好像有多个版本的js一样,总是学不完...... 那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验: 首先要紧紧抓住它的地位 ...
前端攻城狮-Dawn 发布于 4小时前 阅读 123

web前端到底怎么学?干货资料!

我觉得我这片入门文章可以小火,究其原因 有以下几点 web前端是如此的火热,关注度也逐年升高 由于前端开发的火热 和 一些IT巨头公司 对 web前端开发 人员的需求旺盛,让越来越多的孩子转入前端 前端开发领域 是it技术语言领域唯一一个 男女老少都可以快速入门并快速提升兴趣的领域(嘿嘿:妹子那绝对是最多的!) 我文风实在是太逗比了,我颜值实在是太帅了 不知不觉,我废话又多了起来,段子手的天性就是改不了? ok ,我们切入今天的正题 : web前端到底怎么学? 那么在讲 web前端怎么学 这个大命题之前呢,依据我本人的尿性,还是得先把你拉入坑,让你在坑里好好学 O(∩_∩)O 由于第一篇文章,有说到 O(∩_∩)O 好了,我们已经相识了,我们进入相知的阶段(我擦,太快了吧?) web前端的历史渊源 和一些出处,童鞋们大概都有所了解了。 下面我们进入【相爱】阶段(我都不认识你,就tm相爱了?) 歌词云:* 想说爱你不容易 *! 但是我会想方设法让你爱上她(web前端开发)。 一般据我经验,在喜欢并且决定和她恋爱之前,我都会做一下充分准备和调查,有必要了解和研究清楚 ‘她’ 的几个特性和习惯 web前端的基本工作职责 和基础技能(要清楚) web前端的分类和门派(简要...
前端攻城狮-Dawn 发布于 4天前 阅读 231

我的web前端面试经历————百度

写在前面的话 博主就读于电子科技大学,大三狗一枚! 面试是个漫长的过程,从海投到收获电话面试,一面、二面、三面,一个步骤出错那么后面就宣告终结。同时,面试过程中你也可能会遇到一些面试官的刁难,甚至部分面试官会说些比较打击你的话,但是大部分面试官都是很棒的! 面试前的准备 基础知识 必须有牢固的基础知识,足够丰富的项目经历(就我而言差不多是三个完整项目经历,时间累计差不多接近一年)。 至少这上面的面试题你能全答出来,说得足够清楚! web前端面试宝典1 web前端面试宝典2 表述能力 表述能力,你要能把你的答案给面试官描述清楚,注意专业词汇,这将大大提高面试官对你的印象分! 简历 简历尽量一页,不要超过两页。简历内容要直奔主题,姓名、电话、邮箱、学校、项目经历!兴趣爱好之类的大部分面试官会视为垃圾信息直接过滤掉,如果你Github有什么star很多的项目千万记得贴上,这点加分非常高!如果你有自己的博客,博客上有一些含金量较高的文章的话也记得贴上自己的博客。当然最重要的一块肯定是你掌握了哪些技术,但是千万不要用网上现在比较火的进度条去表示你对技术的掌握情况,这是非常愚蠢的行为,到底什么算掌握、熟悉、精通? 简历内容,总...
前端攻城狮-Dawn 发布于 1周前 阅读 592

从事前端开发必须要了解的CSS原理

  从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢?   一、浏览器的发展与CSS   网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不完全支援的标准,然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以 URL(统一资源定位符)指示,此乃网页的地址;以 http: 开首的便是通过 HTTP协议登陆。很多浏览器同时支援其他类型的 URL 及协议,例如 ftp: 是 FTP(档案传送协议)、gopher: 是 Gopher 及 https: 是 HTTPS(以SSL加密的HTTP)。   早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的 HTML 代码的产生。但随着 HTML 的成长,为了满足设计师的要求,HTML 获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。   1994年哈坤·利提出了 CSS 的最初建议。伯特·波斯(BertBos)当时正...
前端攻城狮-Dawn 发布于 4小时前 阅读 67

淘宝前端工程师:国内web前端开发十日谈

一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘。我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要。   我一直认为自己是“初级”前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅。时势造就了一批技能薄弱但备受追捧的“弄潮者”,这在很大程度上影响我们对“技术本质”的洞察力,多年来也一直未有成体系的“前端技术”布道佳作,以至于当下多数人对前端技术的了解,盖始于表述并不严谨的岗位招聘描述,而这正恰恰反映了Web前端开发对自身的模糊定位。对于很多Web前端工程师来说,初尝禁果的快感无法持续很久,就陷入一轮又一轮的迷惘,思索自己的职业规划,试图寻找到适合自己的成长道路、看清自身技能的瓶颈,寻找突破。但遗憾的是,Web前端技术被广泛接纳时日尚短,没有多少励志的成功样板可供遵循。然而情况不总是这么糟,毕竟Web前端技术是一门“技术”,和计算机科学系出同门,只是因为互联网的高速崛起而被蒙上了迷雾,遮住了双眼,让我们傻傻看不清时局。   那么,如何定义Web前端技...
前端攻城狮-Dawn 发布于 4天前 阅读 613

你可能不知道的前端知识点之:IntersectionObserver

本文是我的 [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know) 系列的第 5 个知识点。 ## 简介 - 你想跟踪 DOM 树里的一个元素,当它进入可视区域时得到通知。 - 你想实现延迟加载图片功能 - 你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 `scroll` 事件或者用一个周期性的定时器,然后在回调函数中调用元素的 [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 获取元素位置实现这个功能。但是,这种实现方式性能极差,因为每次调用 `getBoundingClientRect()` 都会强制浏览器 [重新计算整个页面的布局](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) ,可能给你的网站造成相当大的闪烁。 `IntersectionObserver` 就是为此而生的,它可以检测一个元素是否可见,`IntersectionObserver` 能让你知道一个被观测的元素什么时候进入或离开浏览器的视口。 ## 兼容性 - Chrome 51+(发布于 2016-05-25) - Android 5+ (Chrome 56 发布于 2017-02-06) - Edge 15 (2017-04-11) - iOS **不支持** ## Polyfill WICG 提供了一个 [p...
justjavac 发布于 2周前 阅读 987 点赞 3

最流行的5个前端框架对比

如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。 本文依据各个框架的GitHub流行度来顺序介绍。 Bootstrap Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛弃。 创作者: Mark Otto 和 Jacob Thornton. 发行: 2011 当前版本: 3.3.7 人气: GitHub上有111,000颗星 说明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动的Web项目。 核心概念/原则: RWD和移动端优先。 框架大小: 154 KB 预处理器: Less和Sass 响应式布局:是 模块化:是 启动模板/布局:是 图标集: Glyphicons Halflings设置 附加/附件:无捆绑,许多第三方插件可用。 独特组件: Jumbotron 文档资源:良好 自定制:基本GUI定制器。但是你需要手动输入颜色值,因为没有颜色选择器可用。 浏览器支持: Fir...
葡萄城控件技术团队 发布于 1个月前 阅读 8038 评论 19 点赞 12

快速使用CSS 弹性盒子

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现;2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。   弹性盒子是 CSS3 的一种新的布局模式,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。: CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。   1:最基本的 <style> /*body { direction: rtl;/*设置 direction 属性为 rtl (right-to-left), 弹性子元素的排列方式也会改变 ,整体从右到左 }*/ .flex-container{ display: flex; display: -webkit-...
切切歆语 发布于 7天前 阅读 36

OS X开发:NSButton按钮控件应用

NSButton按钮控件的应用总结
珲少 发布于 7天前 阅读 33

Angular开发环境搭建问题集中解答

2017-06-10,第三次在斗鱼直播讲Angular相关的内容,这次主要解答环境搭建相关的内容。因为看到很多群里面的反馈,仍然有一些道友卡在环境问题上。 @angular/cli的安装配置以及一些需要注意的坑。 真实的案例项目NiceFish应该怎么搭建环境并把项目启动起来,对于的系列开源项目在这里http://git.oschina.net/mumu-osc/NiceFish 基于Angular的前端项目如何与Server端真正对接(前后端分离开发、分离部署,nginx的配置,IDEA如何导入maven项目等等) 如果您有需要,请点击这个链接收看https://v.douyu.com/show/ra2JEMJbo8oMNxml 注意:这是新手内容,如果您已经会了,不要浪费时间在上面。我会经常直播写代码的,欢迎下回来看看。
大漠穷秋 发布于 1个月前 阅读 758 点赞 1

从JavaScript属性描述器剖析Vue.js响应式视图

学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切皆对象,基本可以描述对象在JavaScript中的地位,而且JavaScript中对象的强大也使其地位名副其实,本篇介绍JavaScript对象属性描述器接口及其在数据视图绑定方向的实践,然后对Vue.js的响应式原理进行剖析。
熊建刚 发布于 1个月前 阅读 2953 评论 9 点赞 13

捋一捋JavaScript创建对象

##创建对象 回顾前面我们谈到通过object构造函数创建单个对象 ``` // 创建一个object的实例,然后再为它添加属性和方法 var person = new Object(); person.name = "jill"; person.age = 18; person.job = "software Engineer"; person.sayName = function () { alert(this.name); } ``` 通过对象字面量创建单个对象 ``` var person = { name:"jill", age:18, job:"software Engineer", sayName:function () { alert(this.name); } } ``` 通过object构造函数或对象字面量创建单个对象的方式有个缺点:**使用同一个接口创建很多对象,会产生大量的重复代码** ###工厂模式 **解决了创建多个相似对象的问题** ``` function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); } return o; } var person1 = createPerson('jill',18,'software'); var person2 = createPerson('vane',23,'student'); ``` 工厂模式虽然解决了创建多个相似对象的问题,但却没有解决**对象识别的问题(即怎样知道一个对象的类型)** -------------------------------------------- ###构造函数模式 **解决...
Jill1231 发布于 3周前 阅读 2257 评论 20 点赞 11

vue中点击获取当前对象

Vue.js可以传递$event对象,event.currentTarget对象就是当前元素 toggleList: function (event) { $("p.boxItem.selected").removeClass("selected"); //获取点击对象 var toggle = event.currentTarget; $(toggle).addClass("selected"); }
guying1028 发布于 3个月前 阅读 834

微信平台的前端框架推荐

作者:欧钟源 链接:https://www.zhihu.com/question/31602784/answer/114993908 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。   1、Frozen UI 手Q出品,组件更丰富,视觉舒适度也不错,适合我这种前端较生疏,需要开箱即用的程序员。   推荐度:5星 演示地址:FrozenUI Demo   2、WeUI 官方出品,情怀满满,但是组件不够用。作为一个浏览器特性参考还是不错的。   推荐度:4星 演示地址:WeUI 3.SUI Mobile 阿里出品,风格仿IOS的,色调偏冷。不好搭配颜色。   推荐度:2星 演示地址:http://m.sui.taobao.org/demos/ 4.Amaze UI Amaze UI是典型工程师思维的产物,只图实现,不考虑体验。不少工程师喜欢用这个,各种组件搭配起来很省事。但作为普通用户,肯定觉得这种UI风格很Low。全直角,纯色,在视觉上非常不讨喜。   推荐度:1星 演示地址:Amaze UI Touch 5.MUI 用MUI开发的APP有一种深入骨髓的廉价感。   推荐度:1星 演示地址:Hello MUI...
voole 发布于 6天前 阅读 22

锤子科技官方网站已经升级到了Angular 4.x

锤子科技www.t.tt已经把网站升级到了Angular 4.x,越来越多的企业正在使用Angular新版本。Google Angular项目组对此深受鼓舞,有志者,一起来。
大漠穷秋 发布于 3个月前 阅读 1070 点赞 2

漂亮的css

南桥北木 发布于 5天前 阅读 20

合格前端系列第五弹-Virtual Dom && Diff

不一样的姿势打开所谓的virtual dom && diff
qiangdada 发布于 1个月前 阅读 503 评论 1 点赞 2

Javascript 之Json

``` number:和JavaScript的number完全一致; boolean:就是JavaScript的true或false; string:就是JavaScript的string; null:就是JavaScript的null; array:就是JavaScript的Array表示方式——[]; object:就是JavaScript的{ ... }表示方式。 ``` 在JavaScript中,我们可以直接使用JSON,因为JavaScript内置了JSON的解析。 把任何JavaScript对象变成JSON,就是把这个对象序列化成一个JSON格式的字符串,这样才能够通过网络传递给其他计算机。 ``` var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'] }; ``` ``` JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}' ``` 反序列化 拿到一个JSON格式的字符串,我们直接用JSON.parse()把它变成一个JavaScript对象: ``` JSON.parse('[1,2,3,true]'); // [1, 2, 3, true] JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', ag...
欧虞山 发布于 2小时前 阅读 3

正则表达式

[0-9a-zA-Z\_]可以匹配一个数字、字母或者下划线; [0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串,比如'a100','0_Z','js2015'等等; [a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符(前面1个字符+后面最多19个字符)。 ^表示行的开头,^\d表示必须以数字开头。 $表示行的结束,\d$表示必须以数字结束。 ``` var re1 = /ABC\-001/; var re2 = new RegExp('ABC\\-001'); re1; // /ABC\-001/ re2; // /ABC\-001/ ``` 分析邮件名称部分: 26个大小写英文字母表示为a-zA-Z 数字表示为0-9 下划线表示为_ 中划线表示为- 由于名称是由若干个字母、数字、下划线和中划线组成,所以需要用到+表示多次出现 邮箱正则表达式: ``` ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$ ```
欧虞山 发布于 2小时前 阅读 1

怎么轻松学习JavaScript

      js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径。我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条“轻松学习js之路”。js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。 B:本身内容很多,如函数库、对象库就一大堆。 C:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。就好像又是新的一样,让你对曾经学的面向对象产生了怀疑...... D:辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后,变量、函数、对象你也都略知一二,但一到公司开发项目的时候,却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库,如:jquery,angular,boostrap,amaze,layui,ueditor等,而这些库又多如牛毛,同时还有自己的难点。让你都不知道该学哪个好,甚至都怀疑自己学的是不是js了,好像有多个版本的js一样,总是学不完...... 那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验: 首先要紧紧抓住它的地位 ...
前端攻城狮-Dawn 发布于 4小时前 阅读 123

从事前端开发必须要了解的CSS原理

  从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢?   一、浏览器的发展与CSS   网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不完全支援的标准,然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以 URL(统一资源定位符)指示,此乃网页的地址;以 http: 开首的便是通过 HTTP协议登陆。很多浏览器同时支援其他类型的 URL 及协议,例如 ftp: 是 FTP(档案传送协议)、gopher: 是 Gopher 及 https: 是 HTTPS(以SSL加密的HTTP)。   早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的 HTML 代码的产生。但随着 HTML 的成长,为了满足设计师的要求,HTML 获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。   1994年哈坤·利提出了 CSS 的最初建议。伯特·波斯(BertBos)当时正...
前端攻城狮-Dawn 发布于 4小时前 阅读 67

【福利】蓝色巨人的云计算PaaS平台IBM Bluemix免费试用!

IBM Bluemix,包含认知、物联网、大数据分析、安全、DevOps、应用、应用整合、移动、计算、网络、存储等 11 大类共 140 多个服务的云计算平台。
IBM Bluemix

JavaScript之数组、Map、对象

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。 定义数组方式一: ``` var person = new Array(); person[0] = 'name'; person[1] = 'sex'; person[2] = 'age'; person.push('job'); console.log(person); ``` 控制台打印结果: ``` ["name", "sex", "age"] ``` va定义数组方式二: ``` var people = ['name','sex','age'] console.log(people ); ``` 控制台打印结果: ``` ["name", "sex", "age"] ``` ``` console.log(people.slice(1,3)); ``` 控制台打印结果: ``` ["sex", "age"] ``` ``` var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 alert(element); }); ``` JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。 定义对象方式一: ``` var people = new Object(); people.name = 'ou'; people.sex = '男'; people.age = 23; console.log(people); ``` 控制台打印结果: ``` Object {name: "ou", sex: "男", age: 23} ``` 定义对象方式二: ``` var person = {} person.name = 'ou'; person.sex = '男'; person.age = 2...
欧虞山 发布于 4小时前 阅读 2

前后端分离之后,在微信内置浏览器获取openid

微信支付
percy94 发布于 4小时前 阅读 1

Vue2.0环境搭建

第一次接触vue,记录下我的环境搭建过程。感谢我的队友给我的指导。
乱世中的单纯 发布于 4小时前 阅读 1

blob转base64位 base64位转blob

//**dataURL to blob** function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } //**blob to dataURL** function blobToDataURL(blob, callback) { var a = new FileReader(); a.onload = function (e) { callback(e.target.result); } a.readAsDataURL(blob); } //test: //var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ=='); //blobToDataURL(blob, function (dataurl) { // console.log(dataurl); //});...
originDu 发布于 6小时前 阅读 2

禁止双击选中文字

FF用样式 :-moz-user-select:none; FF以外的浏览器用:onselectstart="return false"(直接加在需要作用的标签)   <div class="test" onselectstart="return false" style="-moz-user-select:none;">选不到我(屏蔽双击选中文字的区域)</div>
originDu 发布于 6小时前 阅读 1

XHR failed loading: 原因:CORS 头缺少 'Access-Control-Allow-Origin'

XHR failed loading: 原因:CORS 头缺少 'Access-Control-Allow-Origin'
yizhichao 发布于 7小时前 阅读 2

webpack 入门

# webpack - webpack 会把js、css,图片打包成一个js文件 - 将各种资源,js、样式、图片都作为模块来使用和处理 - 这里是列表文本可以让各个模块进行加载,预处理,再进行打包,有grunt和gulp所有基本功能 ## 优点: - 支持commonjs和AMD模块 - 支持很多模块加载的调用,可以使模块加载器更灵活定制 - 可以通过配置打包成多个文件,有效利用浏览器的缓存功能提升性能 - 使用模块加载器,可以支持sass,less等处理器进行打包并且支持静态资源样式及图片进行打包 ## loaders webpack最核心功能,通过使用不同的loader,webpack通过调用外部脚本或工具可以对各种各样的格式的文件进行处理,比如: - 1,分析json文件并把它转化成为js文件 - 2,将es6文件转换成现在浏览器可识别的js文件 - 3,jsx文件转换成js文件 ## loader使用 loader需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,loaders的配置选项可以包括以下几个方面: - test:一个匹配loaders处理文件的扩展名的正则表达式 - loader:loader名称 - include/exclude:收到添加必须出来的文件或屏蔽不需要处理的文件 - query:为loaders提供额外的设置选项 ## webpack操作css npm install --sav...
aeato 发布于 8小时前 阅读 1

浅谈display:flex

浅谈display:flex display:flex 意思是弹性布局   首先flex的出现是为了解决哪些问题呢? 一、页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。 2.当.left,.right 的宽度是固定的,浏览器宽度变的过窄时,.right会被挤到下面 用display:flex布局,可以解决这两个缺点 刚吃的html部分不变,css部分 父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同 1:2分时 同样分为3份时 flex是所占的比例,这样的布局就方便很多。    二、div上下左右居中 我之前写过div上下左右居中的几种方法 其中有一个写了margin:auto auto;这个方法的使用前提就是先把父元素设为display:flex html部分 css部分  在未知div宽高时,用这种方法比较方便 这是我在使用flex布局时用到的两个比较常见又好用的例子...
法斗斗 发布于 8小时前 阅读 2

前端修炼JS篇--this

``` this会出问题: 变window 1 定时器 2. 行间 3. attachEvent 4. 套一层函数 ```
秀才也疯狂 发布于 8小时前 阅读 3

Tomcat 架构探索

《How tomcat work》这是本来源的书籍参考
FeanLau 发布于 9小时前 阅读 8 评论 1

清除背景轮廓

1.做好的页面在手机端测试时,发现部分浏览器,tap后会出现一个半透明的灰色背景,(被批...),起初以为是outline作怪,加上后发现没反应,最后发现是tap后的背景高亮,要重设这个表现,则需要设置-webkit-tap-highlight-color为所需色彩,直接透明吧: a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);} 2.另外,如何去掉textarea,input的默认样式(IOS上的圆角及内阴影等,Android未测试): input,textarea{-webkit-appearance:none;}
originDu 发布于 9小时前 阅读 4

用promise封装原生ajax请求

// 简单的ajax原生实现   var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';   var result;      var XHR = new XMLHttpRequest();   XHR.open('GET', url, true);   XHR.send();      XHR.onreadystatechange = function() {       if (XHR.readyState == 4 && XHR.status == 200) {           result = XHR.response;           console.log(result);       }   }         var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';      // 封装一个get请求的方法   function getJSON(url) {       return new Promise(function(resolve, reject) {           var XHR = new XMLHttpRequest();           XHR.open('GET', url, true);           XHR.send();              XHR.onreadystatechange = function() {               if (XHR.readyState == 4) {             ...
帅的人连bug都讨厌 发布于 9小时前 阅读 3

ES6 的 Promise 对象

开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作。一般会这样去写: $.ajax({ url: '......', success: function (data) { $.ajax({ // 要在第一个请求成功后才可以执行下一步 url: '......', success: function (data) { // ...... } }); } }); 这样的写法的原理是,当执行一些异步操作时,我们需要知道操作是否已经完成,所有当执行完成的时候会返回一个回调函数,表示操作已经完成。 使用回调函数的形式理解起来并不困难,但是实际的应用当中会有以下的缺点: 在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的 Callback Hell。 如果几个异步操作之间并没有前后顺序之分(例如不需要前一个请求的结果作为后一个请求的参数)时,同样需要等待上一个操作完成再实行下一个操作。 为了解决上述的问题,Promise 对象应运而生,在 EMCAScript 2015 当中已经成为标准。 什么是 Promise 一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以...
帅的人连bug都讨厌 发布于 9小时前

ES6学习心得

帅的人连bug都讨厌 发布于 9小时前 阅读 1

http://ip.taobao.com/service/getIpInfo.php?ip=114.222.51.186. Response to preflight request doesn't

http://blog.csdn.net/xpzhang123/article/details/50592995
yizhichao 发布于 9小时前 阅读 1

Headroom.js 滚动隐藏和展示页面元素,从而为页面留下更多空间。

headroom能使导航栏当页面下滚时消失,当页面上滚时候又出现。
momo1987 发布于 10小时前 阅读 1

捋一捋JavaScript对象的继承

文章针对不理解继承的程序员朋友去剖析和理解继承.
Jill1231 发布于 5天前 阅读 1823 评论 5 点赞 7

你可能不知道的前端知识点之:IntersectionObserver

本文是我的 [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know) 系列的第 5 个知识点。 ## 简介 - 你想跟踪 DOM 树里的一个元素,当它进入可视区域时得到通知。 - 你想实现延迟加载图片功能 - 你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 `scroll` 事件或者用一个周期性的定时器,然后在回调函数中调用元素的 [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 获取元素位置实现这个功能。但是,这种实现方式性能极差,因为每次调用 `getBoundingClientRect()` 都会强制浏览器 [重新计算整个页面的布局](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) ,可能给你的网站造成相当大的闪烁。 `IntersectionObserver` 就是为此而生的,它可以检测一个元素是否可见,`IntersectionObserver` 能让你知道一个被观测的元素什么时候进入或离开浏览器的视口。 ## 兼容性 - Chrome 51+(发布于 2016-05-25) - Android 5+ (Chrome 56 发布于 2017-02-06) - Edge 15 (2017-04-11) - iOS **不支持** ## Polyfill WICG 提供了一个 [p...
justjavac 发布于 2周前 阅读 987 点赞 3

捋一捋JavaScript创建对象

##创建对象 回顾前面我们谈到通过object构造函数创建单个对象 ``` // 创建一个object的实例,然后再为它添加属性和方法 var person = new Object(); person.name = "jill"; person.age = 18; person.job = "software Engineer"; person.sayName = function () { alert(this.name); } ``` 通过对象字面量创建单个对象 ``` var person = { name:"jill", age:18, job:"software Engineer", sayName:function () { alert(this.name); } } ``` 通过object构造函数或对象字面量创建单个对象的方式有个缺点:**使用同一个接口创建很多对象,会产生大量的重复代码** ###工厂模式 **解决了创建多个相似对象的问题** ``` function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); } return o; } var person1 = createPerson('jill',18,'software'); var person2 = createPerson('vane',23,'student'); ``` 工厂模式虽然解决了创建多个相似对象的问题,但却没有解决**对象识别的问题(即怎样知道一个对象的类型)** -------------------------------------------- ###构造函数模式 **解决...
Jill1231 发布于 3周前 阅读 2257 评论 20 点赞 11

最流行的5个前端框架对比

如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。 本文依据各个框架的GitHub流行度来顺序介绍。 Bootstrap Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛弃。 创作者: Mark Otto 和 Jacob Thornton. 发行: 2011 当前版本: 3.3.7 人气: GitHub上有111,000颗星 说明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动的Web项目。 核心概念/原则: RWD和移动端优先。 框架大小: 154 KB 预处理器: Less和Sass 响应式布局:是 模块化:是 启动模板/布局:是 图标集: Glyphicons Halflings设置 附加/附件:无捆绑,许多第三方插件可用。 独特组件: Jumbotron 文档资源:良好 自定制:基本GUI定制器。但是你需要手动输入颜色值,因为没有颜色选择器可用。 浏览器支持: Fir...
葡萄城控件技术团队 发布于 1个月前 阅读 8038 评论 19 点赞 12

从JavaScript属性描述器剖析Vue.js响应式视图

学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切皆对象,基本可以描述对象在JavaScript中的地位,而且JavaScript中对象的强大也使其地位名副其实,本篇介绍JavaScript对象属性描述器接口及其在数据视图绑定方向的实践,然后对Vue.js的响应式原理进行剖析。
熊建刚 发布于 1个月前 阅读 2953 评论 9 点赞 13

各种动态渲染Element方式 的性能探究

###一、性能优化的原则及方法论 树立原则:动态渲染进入一个Dom元素,首先需要保证动态渲染操作必须尽可能少对原有dom树的影响,影响重绘及重排。 确定方法论:必须寻找一个**容器**来缓存渲染期间生成的dom结构(操作必须尽可能少对原有dom树的影响),然后再进行一次渲染到目标element中。 ### 二、生成期间DOM缓存的选择 - DocumentFragment(文档碎片对象,选择原因:脱离于文档流) - 临时Element(选择原因:新element脱离于文档流) - createElement,再一步步进行渲染 - 通过描述Dom的String(下称:DomString),转化为Dom对象 - 临时Element+innerHTML+cloneNode返回最外层element元素对象,再进行插入appendChild,必要时还需要选择器方法讲某一个Element对象提取出来 - XML字符串通过解析生成Element对象(注意,不是HTMLxxxElement对象,是Element对象),然后将该对象appendChild进去 - 临时字符串(选择原因:借助innerHTML渲染,一次渲染) ###三、DocumentFragment的优缺点 基本模式: ```javascript var fragment = document.createDocumentFragment(); fragment.appendChild( ... //生成Element的IIFE ) ``` ```javascript //IIFE示例,根据配置创建元素...
雕刻零碎 发布于 2个月前 阅读 1753 评论 2 点赞 4

Fit项目分页组件的编写

项目中涉及列表显示的地方都会用到分页控件,为了能更好地与当前网站的样式匹配,这次要自己实现一个。 所以选择了模板中提供的分页样式,基于模板改造以能够动态生成:       一 控件的行为规则 a) 可设置显示几个页码(默认5个,只能是奇数) 如果当前页显示5个,则默认前后各有两个,比如当前页是5,显示页码为“3 4 5 6 7 如果当前页在最前面,比如为1,显示页码为:1 2 3 4 5 同样当前页在最后面,比如为9,显示页码为:5 6 7 8 9 如果总页数少于5,比如只有3页,则页码全部显示:1 2 3 b) 关于跳转首页(<<)、尾页(>>)、上一页(<)、下一页(>) 如果当前页是第一页,首页和上一页禁用 如果当前页是最后一页,尾页和下一页禁用 c) 当前页的样式要区别于其它页码       二 代码编写 a) 分页组件类、属性、常量   PAGE_COUNT为默认显示的页码数量,这里为了便于测试设置成了2;静态属性分别为当前页、总页数、数据总条数,但刚刚发现TotalPage、TotalCount实际上是冗余的,两者可以互相计算得出,这要尽早重构。   b) 局部变量   根据目前的实现,需要这么一坨局部变量。startPage、endPage限定了显示页码的范围。将跳转链接放在了hrefStr,以后其它列表需...
zhixin9001 发布于 2个月前 阅读 965 评论 3 点赞 2

3d基础知识研究--如何用js在canvas2d上做出3d效果

    逛 TypeScript 官网时发现了一个 js canvas 做的 3D 灯光渲染效果(详见参考1),一看源代码,竟然是用 getContext("2d") 做的,而且代码并不长,才两百多行,当时就被震惊了!!!区区这点代码就能白手起家写出三维光线追踪渲染效果?!WTF!还有这种操作?!感觉这一定是涉及非常基础、核心的 3D 相关原理的代码。虽然之前用过很多 3D 软件,也学过一点 Direct3D 和 WebGL,但是对 3D 基础知识始终是一知半解的,向量、矩阵变换等计算也不是太清楚,于是立即决定深入研究一下。     折腾了一阵原代码,发现他的坐标空间是这样的,X正朝右,Y正朝上,Z正深入画布:          让我恍然大悟的是透视的处理方式,并不是每个物体的每个部分去计算离相机有多远,而是从相机中心点发射出许多射线(每像素一个射线),射线撞到的最近的物体就取这个物体的颜色,这样自然就能产生近大远小的效果。为了直观地理解摄像机的工作原理,我用 MaxScript 在 3DsMax 里建立了射线的模型,下面会说创建过程,先看结果:          这里设置了画布大小为 10 * 10 像素,每个像素对应一根射线,起点就是相机所在位置。     来看下近大远小的透视是如何形成的。为了清晰...
gonnavis 发布于 2个月前 阅读 2461 评论 4 点赞 11

合格前端系列第四弹-如何监听一个数组的变化

看这篇文章之前请先参考上一篇文章https://my.oschina.net/qiangdada/blog/906220(合格前端系列第三弹-实现一个属于我们自己的简易MVVM库)
qiangdada 发布于 2个月前 阅读 3554 评论 8 点赞 11

合格前端系列第三弹-实现一个属于我们自己的简易MVVM库

时隔半年,重新写一遍有关数据双向绑定的文章,模拟当今流行的vue框架实现一个属于自己的mvvm库。
qiangdada 发布于 2个月前 阅读 3661 评论 11 点赞 10

CSS 布局经典问题初步整理

本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。
brianway 发布于 2个月前 阅读 3795 评论 9 点赞 11 打赏 1

Web Components简述

要说最近几年来,前端开发最火的一个趋势或最火的前端开发框架是什么,第一想到的是,组件及推崇组件化开发的React框架。本文将介绍Web Components规范并就组件的几大特性进行讨论
熊建刚 发布于 2个月前 阅读 2106 评论 8 点赞 3

This其实不难,通过实例全面解析JS中的This

GitHub地址:https://github.com/SimonZhangITer/MyBlog/issues/12 > this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》,让我对this的问题豁然开朗。故写下此篇文章,分享一下我的心得。 # 隐式绑定 关于this,一般来说,谁调用了方法,该方法的this就指向谁,如: ```javascript function foo(){ console.log(this.a) } var a = 3; var obj = { a: 2, foo: foo }; obj.foo(); // 输出2,因为是obj调用的foo,所以foo的this指向了obj,而obj.a = 2 ``` 如果存在多次调用,`对象属性引用链只有上一层或者说最后一层在调用位置中起作用`,如: ```javascript function foo() { console.log( this.a ) } var obj2 = { a: 42, foo: foo } var obj1 = { a: 2, obj2: obj2 } obj1.obj2.foo(); // 42 ``` ## 隐式丢失 一个最常见的this绑定问题就是被`隐式绑定`的函数会丢失绑定对象,也就是说他回应用默认绑定,从而把this绑定到全局对象或者undefined上,取决于是否是严格模式。 ```javascript function foo() { console.log( this.a ) } var obj1 = { a:...
Simon_ITer 发布于 2个月前 阅读 2531 评论 12 点赞 5

Linux系列——各种环境安装集合

网上各种安装环境的文章脏乱差,我这弄了一套标准的出来,完善中
龙马行空 发布于 3个月前 阅读 3365 评论 12 点赞 9

前端一站式异常监控捕获方案

#### 一、前端异常监控的重要性   软件异常监控常常直接关联到软件本身的质量,完备的异常监控体系常常能够快速定位到软件运行中发生的问题,并能帮助我们快速定位异常的源头,提升软件质量。   在服务器开发中,我们常常使用日志来记录请求的错误和服务器异常问题,但是在客户端,前端应用直接部署运行在用户的浏览器中,如果发生错误,应该怎样去捕获并传送给服务器呢?前端错误日志传送给服务器很简单,在异常发生时直接发请求就可以了,下面我们主要讨论下错误的捕获方案。 #### 二、现有的异常监控方案 - window.onerror全局异常捕获   目前前端捕获页面异常的方式主要有两种,window.onerror捕获整个页面中运行的错误,它的局限是对于跨域的JavaScript脚本需要添加跨域支持,也就是需要涉及服务器的修改成本,否则无法获取到运行时具体的堆栈错误信息,而是"script error"的信息,不利于我们定位问题。 ```javascript window.onerror = function(msg, file, row, column, errorObj) { console.log(msg); // script error. console.log(file); // console.log(row); // 0 console.log(column); // 0 console.log(errorObj); // {} setTimeout(function() { // ...
ouven 发布于 3个月前 阅读 1621 点赞 2

Angular vs React 最全面深入对比

如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见。 选择的方法 在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案来帮助我们更加了解框架,也更加让选择变得更容易 框架本身的问题: 是否成熟?谁在背后支持呢? 具备的功能? 采用什么架构和模式? 生态系统是否丰富? 需要自我反思的问题: 我和我的团队能否轻松学习并掌握? 是否适合我的项目? 开发体验是否足够好? 严格说来,Angular和React的比较是不公平的,因为Angular是一个功能丰富的框架,而React是一个UI的组件库,所以我们在接下来的分析中会将一些经常和React在一起使用的类库放在一起讨论。 OK,开始… …   成熟度 作为一名成熟的开发人员或者是能够决定架构及技术走向的人员,一项必备的技能就是能够在工作和项目中平衡成熟技术与最前沿框架之间的关系,既能保持人员及技术的前进,又能保证项目或产品的交付质量,所以,必须小心以下可能的风险: 该框架...
葡萄城控件技术团队 发布于 3个月前 阅读 4520 评论 27 点赞 7

合格前端系列第二弹-Vue组件开发续篇

大家可以先参考我另外一篇有关vue组件开发的文章,https://my.oschina.net/qiangdada/blog/786981 (一入前端深似海,从此红尘是路人系列第八弹之浅析Vue组件开发)。
qiangdada 发布于 3个月前 阅读 3775 评论 6 点赞 2

浅析前端页面渲染机制

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

JavaScript异步编程

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

负载均衡原理的解析

开头先理解一下所谓的“均衡” 不能狭义地理解为分配给所有实际服务器一样多的工作量,因为多台服务器的承载能力各不相同,这可能体现在硬件配置、网络带宽的差异,也可能因为某台服务器身兼多职,我们所说的“均衡”,也就是希望所有服务器都不要过载,并且能够最大程序地发挥作用。 一、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、重定向访问深度不同 有的重定向一个静态页面,有的重定向相比复杂的动态页面,那么实际服务器的负载差异是...
源子姗 发布于 3个月前 阅读 5202 评论 9 点赞 3
顶部