开源中国

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

It appears you’re using an unsupported browser

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

精彩阅读

  • 最新推荐

  • 今日热门

  • 本周热门

  • 每日一博

  • 最新文章

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

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

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 发布于 4天前 阅读 1728 评论 17 点赞 14

如何在 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...
极光推送 发布于 4天前 阅读 224 评论 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 发布于 4天前 阅读 448 评论 2

开源中国杭州源创会报名开始,剖析无人驾驶背后的数据库(PostgreSQL)。

趁着六月美景正好,OSC源创会带着自由、开放、分享的开源精神,也带着满满的干货主题,邀请杭州的各位来约。
源创会

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

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

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

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

十大 Node.js 的 Web 框架,快速提升工作效率

Node.js 系统含有多种不同的结构,如 MVC、全栈、REST API 和生成器等。这些结构不仅提升了 Web 应用的开发效率,也优化了开发过程。在这里,我们收集整理了十个高效的 Node.js 框架,希望对你有帮助。 1、Node.js 开发框架 Sail.js Sails.js 就像是 Node.js 平台上的 Rails 框架。这是一个可靠可伸缩的开发框架,面向服务的架构,提供数据驱动的 API 集合。用来开发多玩家游戏、聊天应用和实时面板引用非常方便,也可用于开发企业级 Node.js 应用。 Sails.js 基于 Node.js, Connect, Express 和 Socket.io 构建。 控制器示例代码: module.exports = {   hi: function (req, res) {     return res.send("Hi there!");   },   bye: function (req, res) {     return res.redirect("http://www.OSChina.net");   } }; 2、Node.js 服务器端框架 Hapi.js Hapi.js 是一个用来构建基于 Node.js 的应用和服务的富框架,使得开发者把重点放在便携可重用的应用逻辑而不是构建架构。内建输入验证、缓存、认证和其他 Web 应用开发常用的功能。 示例代码: var Hapi = require('hapi'); // Create a server with a host and por...
编辑部的故事 发布于 1周前 阅读 3396 评论 14 点赞 3

JavaScript ES2017 中值得期待的功能

由于ES6 / ES2015花了大约6年的时间,才得以发布,因此负责JavaScript语言规范的技术委员会TC39,决定按年度周期来发布ES。这种变化允许ES语言规范,以更小和更迭代的版本形式进行发布。这样可以保证:如果特征语言规格在今年截止日期之前没有完成,那么它可以包含在明年的发布版本中。这种较小但功能强大的年度发布周期形式,允许语言规范持续增长。   ES2017介绍 对很大一部分JavaScript开发者来说,ES2017可以让他们感受到新的、闪亮的技术前沿工具。无论是完全接受这项新技术,还是简单地只使用其中测试工具的功能,我们都想知道ES2017中到底有什么。 如果你热衷于了解这个令人兴奋的社区提供的所有新技术,下面是ES2017所包含的技术细节。   主要特点 1、异步函数 TJ Holowaychuk是JavaScript社区的一个巨大贡献者。TJ曾在Express, Koa, Rework, 和Co这样的项目中工作过,他的代码直接或间接地成为这些开发项目中的重要组成部分。 他对Co包做出的贡献,对最近转移到Stage 4 的Async Await功能规格产生了巨大的影响。Co 是一个利用Promises和Generator函数允许以更加同步的方式来读取异步JavaScript代码语法的库。 用Promises处理Async函数的一种普遍流程如下所示: ...
葡萄城控件技术团队 发布于 1周前 阅读 853 评论 6 点赞 1

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

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

程序员想搞机器学习?看看Nodejs之父这一年摸爬滚打的心路历程

​作者 | Ryan Dahl 编译 | AI100(微信ID:rgznai100) 原文地址 去年,在我研究TensorFlow出了一番成果后,我开始申请Google Brain的首届见习项目(Google Brain Residency Program),最后居然成功了。受邀参加该项目的共有24人,每个人都有着不同的机器学习背景。 我们24个人,需要在Google位于山景城的深度学习研究实验室工作一年,每天跟Google的科学家和工程师们一起,共同来做TensorFlow的前沿研究。想想就把我给兴奋坏了。 如今,这个为期一年的项目已经结束了,确实收获满满。我也希望把学到的一些东西,结合我的心得,总结一下,分享出来,希望能为在机器学习的道路上耕耘的伙伴儿提供一些帮助。 先说说我起初拟定的目标吧。我的目标是修正老电影或电视剧的画面。 想象一下,画面粗糙的90年代电视剧,或是60年代黑白电影,要是能被修正为色彩华丽的4K画面,观看体验会有多棒! 而这事看上去完全可行:我们很轻松就能把4K视频转换成满是颗粒感的、低分辨率的、甚至是只有黑白两色的视频,只要训练出某个监督模型来反转这个过程就可以了。而且,可用的训练数据无穷无尽。咳咳,这个想法简直太强悍了! 带着这样的目标,我再一次(上一次是为Node.js项目)从纽约布...
天天天蓝321 发布于 2周前 阅读 140 评论 1

各种动态渲染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周前 阅读 1687 评论 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周前 阅读 939 评论 3 点赞 2

Node.js 8有哪些重要功能和修复?

5月30日12点,Node.js 8正式发布了,这个版本具有一系列新功能和性能改进,并且这些功能和改进将获得长期支持(LTS)。 下面就来介绍Node.js 8版本中最重要的功能和修复。 新版本的代号是Carbon。Node.js 8将从2017年10月起,正式成为当前的LTS版本,并持续到2019年12月31日。这也意味着Node.js 6版本将在2018年4月进入到维护模式,并在2019年4月结束维护支持。 下载Node.js 8版本:https://nodejs.org/download/rc/v8.0.0-rc.2/   Async Hooks API介绍 Async Hooks (以前称为AsyncWrap) API允许获取有关句柄对象生命周期的结构跟踪信息。 API发出的消息会将Node.js中所有句柄对象的生命周期告知给consumer。它试图解决类似于continuation-local-storage npm package这样的问题。 如果你正在使用continuation-local-storage,那么已经可以用称为cls-hook的async hooks来代替使用了 – 只是目前并不是使用async hooks的最好时机,所以需要谨慎使用!   Async Hooks API 在 Node.js 8 中如何工作 createHooks函数的注册功能会被每一个异步操作的不同生命周期事件调用。 const asyncHooks = require('async_hooks') asyncHooks.createHooks({ init, pre, post, ...
葡萄城控件技术团队 发布于 3周前 阅读 596

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 发布于 3周前 阅读 2370 评论 4 点赞 11

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

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

重构了cxlt-vue2-toastr插件

上次写完cxlt-vue2-toastr插件,写了一篇“学习vue 20天,我写了点东西”的文章,有点标题党的感觉,还好反响不错。当时写完这个插件就意识到问题所在,提示插件怎么还需要写在template中呢,更友好的方式应是直接调用方法,另外同时只能显示一个的问题,在这一版中也得到了解决。从写完上篇文章,就开始着手重构,隔几天晚上抽时间改点,今天终于发布了。
程序旅途 发布于 4周前 阅读 186 评论 4 点赞 2

指令学习之angular-column-filter的实现

使用angular指令系统开发组件angular-column-filter,实现点击表格头显示筛选下拉框,选择下拉框内容可动态筛选数据的功能。
lonelydawn 发布于 4周前 阅读 91 评论 2

这 5 个前端组件库,可以让你放弃 jQuery UI

在建立Web应用时,通常都需要用到一些有用的UI组件。无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么都面临两种选择:要么自己来创建这些组件,要么使用现有的组件功能。 自行开发这些组件是复杂并耗时的,通常会花费大量的时间来独自完成这些组件,这也正是UI库和框架存在的意义。现存的这些库简化了创建UI组件的过程。你可以直接利用现有的框架,并自定义它们来满足自己的需求。 目前正在广泛使用的框架之一就是jQuery UI。这是一组扩展的使用jQuery构建的部件、效果和主题,分为一组一组的形式。既可以在单个软件包中下载jQuery UI的所有元素,也可以选择只下载感兴趣的组件和功能。使用这样的控件集能够为组件创建出一致的外观,并允许以更少的投入快速创建出应用。 虽然jQuery UI能起到很好的作用,但是还有其它的一些框架,拥有很好的高品质控件。在这篇文章中,将会分析其中的几个框架并做比较。 Kendo UI 这是一个付费框架,Kendo UI Framework提供了一系列超过70个用于加速开发过程的组件。这些组件是响应式的、可设置主题的、快速的和高度可定制的。 以下讲解Kendo UI的几件事情以及如何使用Kendo UI来创建炫酷的交互元素。 首先这...
葡萄城控件技术团队 发布于 1个月前 阅读 1560 评论 5 点赞 1

你想不到的fibonacci实现方式

在看BuckleScript的UserManual过程中有一个斐波那契的例子跟平常的实现方法不太一样。觉得挺有意思的就写此文的想法 BuckleScript中的例子 代码是ocaml 不过后面我会转换成Js ```ocaml let fib n = let rec aux n a b = if n = 0 then a else aux (n - 1) b (a+b) in aux n 1 1 ```` ## 正常递归版本 正常递归版本是一个既简单又直接的逻辑,也是我最喜欢的一个版本 ```javascript function fibonacci(n){ if(n==0)return 0 else if(n==1)return 1 else return fibonacci(n-1) + fibonacci(n-2) } ``` 代码优美逻辑清晰易懂,但是这个版本有一个问题即存在大量的重复计算造成性能的下降。 如:当n为5的时候要计算fibonacci(4) + fibonacci(3) 当n为4的要计算fibonacci(3) + fibonacci(2) ,这个时候fibonacci(3) 就重复计算了 ## for循环版本 递归有性能问题很容易就能想到是不是可以用循环来做 ```javascript function fibonacci(n){ var last = 1 var last2 = 0 var current = last2 for(var i=1;i<=n;i++){ last2 = last last = current current = last + last2 } return current } ``` 的确用循环来做性能好多了,但这并不代表递归不好。循环也有循环的问题即状态变量太...
diqye 发布于 1个月前 阅读 35 评论 4

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

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

我的前端学习历程

  很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了。这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上,我们不要给自己设定界限,只要拥有成长的力量,就能不断超越自己”。 下面以我自己的经历讲讲前端的学习过程。 Jquery基础知识准备   学习前端需要掌握的基础知识有jquery,css。做移动端开发最好掌握CSS3,CSS3的许多新特性会让布局简单很多。Jquery可以不用每个知识点都很熟练,但是最好都了解,用的时候知道有这个东西再进行细致学习会更牢固。必须掌握的几个点  1.选择器   基础的id样式选择器是必须掌握的,这里不多说。  2.事件绑定      不推荐的写法  <button id="foo" onclick="dosomething()">Bar</button>      缺点:这样做的结果就是html前端和js前端的工作混在了一起,原则上HTML代码只能体现网页的结构      建议写法 $(“#foo”).click(function(){});   优点:jQuery是追加绑定的,绑多少执行多少,还解决了IE的不兼容问题。    Jquery中的事件绑定方式有很多 click,live,bind,one,on…,它们之间的区别这里就不多讲了。on方法是官方推荐的绑定事件的一个方...
前端攻城狮-Dawn 发布于 2小时前 阅读 66

web前端必备学习指南

精华 工具 box-shadow generator 生成 box-shadow 的工具。 gradient-generator 渐变生成器。 Ultimate CSS Gradient Generator 也是渐变生成器 CSS Generators -CSSREFLEX CSS3 生成器 图床 https://sm.ms/ 有 API 可用。 新浪微博图床 Chrome扩展 Unix 时间戳 Unix timestamp 编程语言 JavaScript 前端资源教程 i5ting 廖雪峰JavaScript教程 JavaScript 标准参考教程(alpha) -阮一峰 JavaScript Promise迷你书 -azu 前端的异步解决方案之Promise和Await Async You Don’t Know JS (book series) You Don’t Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10+ 以上浏览器。 JavaScript 秘密花园 JavaScript 设计模式 系列 AlloyTeam ES2015(ES6) 《ECMAScript 6入门》 -阮一峰 EcmaScript6 全规范(含node) -ouvens 30分钟掌握ES6/ES2015核心内容(上) 30分钟掌握ES6/ES2015核心内容(下) ES2015规范 英文 TypeScript Typ...
前端攻城狮-Dawn 发布于 1小时前 阅读 44

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

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

15个常用的javaScript正则表达式

摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。表单验证处理必备,赶紧收藏吧! 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("iFat3")); 2 密码强度正则 //密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符 var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/; //输出 true console.log("=="+pPattern.test("iFat3#")); 3 整数正则 //正整数正则 var posPattern = /^\d+$/; //负整数正则 var negPattern = /^-\d+$/; //整数正则 var intPattern = /^-?\d+$/; //输出 true console.log(posPattern.test("42")); //输出 true console.log(negPattern.test("-42")); //输出 true console.log(intPattern.test("-42")); 4 数字正则 可以是整数也可以是浮点数 //正数正则 var posPattern = /^\d*\.?\d+$/; //负数正则 var negPat...
网页设计轻松学 发布于 6小时前 阅读 11

1.0.快速入门

Hello World
RippleChan 发布于 11小时前 阅读 6

iphone手机上微信自动播放H5背景音乐

<audio id="Jaudio" class="media-audio" src="bg.mp3" preload loop="loop"></audio > function audioAutoPlay(id){     var audio = document.getElementById(id);     audio.play();     document.addEventListener("WeixinJSBridgeReady", function () {             audio.play();     }, false); } audioAutoPlay('Jaudio');
nibilly 发布于 3小时前 阅读 5

Android软键盘遮挡的四种解决方案

在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入框被系统键盘遮挡了,大大降低了用户操作体验,这就是开发中非常常见的软键盘遮挡的问题,该如何解决? 简单解决方案  方法一 在你的activity中的oncreate中setContentView之前写上这个代码 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN); 方法二 在 项目的AndroidManifest.xml文件中界面对应的<activity>里加入 这样会让屏幕整体上移。如果加上的 是 android:windowSoftInputMode="adjustPan"这样键盘就会覆盖屏幕。     关于android:windowSoftInputMode activity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性。 这个属性能影响两件事情: 【一】当有焦点产生时,软键盘是隐藏还是显示 【二】是否减少活动主窗口大小以便腾出空间放软键盘     它的设置必须是下面列表中的一个值,或一个”state…”值加一个”adjust…”值的组合。在任一组设置多个值——多个”state…”values,例如&mdash有未定义...
sxl01890 发布于 2年前 阅读 2915 点赞 6

让angular-cli工程基于ExpressJS服务,为对接后台API做准备

在angular-cli生成的工程文件目录下,创建server子目录,在server目录下创建app.js和api.routes.js,app.js内容: //参考资料: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli#conclusion const express = require('express'); const path = require('path'); const http = require('http'); const bodyParser = require('body-parser'); // Get our API routes const api = require('./api.routes'); const app = express(); // Parsers for POST data app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); // Point static path to dist app.use(express.static(path.join(__dirname, '../dist'))); // Set our api routes app.use('/api', api); // Catch all other routes and return the index file app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../dist/index.html')); }); /** * Get port from environment and store in Express. */ const port = process.env.PORT || '3000'; app.set('port', port); /** * Create HTTP server. */ const server = http.createS...
lieefu 发布于 3个月前 阅读 308

easyui Maximum call stack size exceeded

easyui 里面的dialog关闭时报错:Maximum call stack size exceeded
菠萝啊哈哈 发布于 3年前 阅读 2611

单页应用 - Token 验证

Token的工作原理   Token工作原理   1. 登录时候,客户端通过用户名与密码请求登录 2. 服务端收到请求区验证用户名与密码 3. 验证通过,服务端会签发一个Token,再把这个Token发给客户端. 4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们是存在SessionStorage 5. 客户端每次像服务器请求API接口时候,都要带上Token. 6. 服务端收到请求,验证Token,如果通过就返回数据,否则提示报错信息. 这里还涉及到一些前端登录拦截(路由拦截,拦截器). 路由拦截 // 登录路由设置个字段,用来记录是否已经登录 path: '/login', name:'login', component: resolve => require(['./login.vue'], resolve), meta: { noCheckSession: true } // 路由拦截 router.beforeEach((to, from, next) => { if(to.matched.some(record => !record.meta.noCheckSession)) { let isLogin = auth.checkAuth() //我们登录成功后会设置个字段(authenticated)为true.这里就是获取那个字段. if(!isLogin){ console.error('Place login!') next({ path: '/login', query: { redirect: to.fullPath } // 跳转到登录页面 }) }el...
王福林 发布于 2个月前 阅读 56

requirejs json插件(done)

done
cyper 发布于 2年前 阅读 704

java电影网站开发经验2

主要还是唠叨了自己折腾网站遇到的一些问题,希望对某些人有所帮助。。
北京-卫斯理 发布于 3年前 阅读 503 评论 7 点赞 2

thymeleaf 学习笔记-基础篇

最近公司用到了thymeleaf模板引擎代替jsp,从网上找了些学习资料,整理一下,以便查看。
wangrikui 发布于 1年前 阅读 1428

用 Vue + Audio API 实现的热门小游戏,八分音符

预览地址: [https://8.diamondfsd.com/](https://8.diamondfsd.com/) (谷歌浏览器打开最佳,不支持移动端,不支持IE) > 会有麦克风权限申请,需要允许才可以正常玩耍,如果不小心点了禁止,可以在浏览器地址栏的右边,重新点击允许 Github: [https://github.com/k55k32/quaver](https://github.com/k55k32/quaver) **游戏截图** ![alt](https://file.diamondfsd.com/img/15be4483-b6be-4bdf-9617-7dedbce137c0b) ## 由来 最近看这个游戏比较火,个人也是比较闲。 今天花了一下午的时间,来完成这个当前比较火的小游戏,八分音符。 看了这个游戏,原理也很简单,我们只需要获得声音,然后把声音转换为数字,最后控制小人移动就可以了。 ## 声音的输入 我们发现这个游戏的原理很简单,就是通过声音来控制小人移动,声音越大,跳得越高。 所以要做这个小游戏,我们就首先要解决的问题就是,如何从浏览器获得声音。这方面的东西,我以前也接触的不多。所以我只能先面向谷歌编程。 最后我搜索到了这篇文章: [WebRTC](http://javascript.ruanyifeng.com/htmlapi/webrtc.html) , WebRTC主要让浏览器具备三个作用: > 获取音频和视频 > 进行音频和视频通信 > 进行任意数据的通信...
DiamondFsd 发布于 4个月前 阅读 23

js模块

#JS模块规范# (CommonJS,AMD,CMD,ES6模块) ## commonjs ## CommonJS定义的模块分为: - 模块引用 require - 模块定义 exports - 模块标识 module ``` //sum.js exports.sum = function(){...做加操作..}; //calculate.js var math = require('sum'); exports.add = function(n){ return math.sum(val,n); }; ``` > require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。 ***建议阅读*** http://www.cnblogs.com/skylar/p/4065455.html ###AMD### CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,为什么这么说呢?这需要分析一下浏览器端的js和服务器端js都主要做了哪些事,有什么不同了: 服务器端JS - 相同的代码需要多次执行 - CPU和内存资源是瓶颈 - 加载时从磁盘中加载 浏览器端JS - 代码需要从一个服务器端分发到多个客户端执行 - 带宽是瓶颈 - 加载时需要通过网络加载 于是乎,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。 AMD就只有一个接口:define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样: define...
别人说我名字很长 发布于 3天前 阅读 7

sublime-cesium

sublime插件,cesium语法提示
5457f2 发布于 6个月前 阅读 62

Ember.js 入门指南——异步路由

本文将为你介绍路由的高级特性,这些高级特性可以用于处理项目复杂的异步逻辑。
ubuntuvim 发布于 2年前 阅读 358

项目笔记

使用的框架 pom.xml引入的jar包 Spring//依赖注入 springMVC//处理请求 struts  //与springMVC作用相同,项目中没用使用多余 spring-jdbc //与mybatis作用类似 mybatis//ORM框架,数据库表与Java实体类 mysql-connector//数据库驱动 log4j/sl4j //日志记录 shiro//权限管理 dom4j //Java操作XML文件 alibaba-fastjson //阿里巴巴处理JSON数据 alibaba-droid //阿里巴巴数据库连接池 commons-xxx  //commons组件,包括文件上传等 ---------------------------------------------------------------------------------------------- 权限管理 用户、角色、权限(menu,可以有多级) 超级管理员:编辑菜单、编辑角色、编辑用户(普通管理员) 普通管理员:拥有超级管理员分发的权限,管理相应的模块(不涉及权限二次分发) 需要五张表进行关联 sys_user————sys_user_role————sys_role————sys_role_menu————sys_menu 用户登录时先查询其对应的角色,再根据角色查询其拥有的权限,在用户 界面显示权限对应的菜单 Shiro Apache Shiro 是一个Java开源框架,可用于身份验证和授权 身份验证:一般身份验证是通过用户名和密码的组合完成的。其他的身份验证方式还有,...
Oct-Sky 发布于 2周前 阅读 6

11个与众不同、令人叹为观止的单页网站

单页网站能够给网站浏览者提供一个简洁、叹为观止的体验。在单一的页面内展示完你需要的内容可能是一个富有挑战性的过程,但许多网页设计师喜欢用这种方法把网站的内容放在一个令人惊讶的页面设计中。从单页所用的图片和文字,以叹为观止的视觉差滚动效果,这里有几种不同的方法来创建一个单页网站。不是每个网站都适合用这种形式展示内容,但是如果你采取这种方法,请努力加油!
方雨_Yu 发布于 3年前 阅读 29

Web Components是不是Web的未来

今天 ,Web 组件已经从本质上改变了HTML。初次接触时,它看起来像一个全新的技术。Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以自由的进行定制组件。面对新的技术,你可能会觉得无从下手。那这篇文章将为你揭开Web组件神秘的面纱。如果你已经熟知HTML标签和DOM编程,已经拥有了大量可用的Web组件,那么你已经是Web组件专家了。 Web组件的现状 随着各式各样的用户需求,浏览器的原生组件已经无法满足需求。Web组件也就变得越来越重要。 我们将以自定义一个传统三方插件为例来介绍Web组件。 首先,需要引用插件的CSS和JavaScript资源: <link rel="stylesheet" type="text/css" href="my-widget.css"/><script src="my-widget.js"></script> 接下来,我们需要向页面中添加占位符。 <div data-my-widget></div> 最后,我们需要使用脚本来找到并且实例化这个占位符为Web组件。 '[data-my-widget]' 通过以上是三个基本步骤。已经完成了在页面中添加了自定义插件,但是浏览器无法确定自定义组件的生命周期,如果通过以下方式声明则使自定义组件生命周期变得清晰了。 el.innerHTML = '<div data-my-widget> '; 因为这不是一个内置的组件,我们现在必须手动实例...
葡萄城控件技术团队 发布于 3年前 阅读 69

html5 使用window.history进行前端mvc跳转

html5 使用window.history进行页面刷新,对于history在过去的html版本中使用罪过的无非就是go,forward,back等,在html5突出了“回退栈”的功能,即所有的变化只发生在前端,这种方式下url变化,但实际上该url所对应的页面很可能不存在,url部分只作为回退栈的tag而存在
IamOkay 发布于 3年前 阅读 3136

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 发布于 4天前 阅读 1728 评论 17 点赞 14

web前端工程师新手必读

  公司招了几个刚毕业的学生,作为重构的新手让我来带。   首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会,对我工作的肯定和认可,让我带这样的一个重构团队,同时我也明白任务的艰巨,但我一定会将工作做好,不负公司对我的期望。(哈哈,好像从小到大,老师都是教育我们要这样先说的。)   在网站的发展史上,初期的网站建设根本不需要网页重构这个职位,Web 1.0时代的网页,只需要程序员,一堆堆的表格嵌套就完成,或者美工进行配合完成,先由美工负责设计好,再用一些自动化的软件拉伸几下,直接将设计好的图就可以通过软件输出表格的布局了,根本不需要重构这个多余的职位。随着Web 2.0的到来和W3C的规范得到世人的认可,内容和样式的分离更方便进行开发和维护,传统的表格布局和内容混排的方式逐渐地被淘汰,美工已不能完全一手包办越来越复杂的效果和高要求的页面布局了。此因催生了一个新的职位 —— 前端工程师。   鄙人刚好作为一名Web 2.0成长起来的前端工程师,虽然说做的项目不多,但乐于与人分享。虽然分享的也许只是一些很表面甚至有些过时的东西,但也只希望为大家提个醒,最好能起到抛砖引玉的作用。   一、前端工程师的职能和作用。...
前端攻城狮-Dawn 发布于 3天前 阅读 811

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

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

阿里前端两年随想

其实按照我的情怀和尿性,文章的标题应该是 前端登堂入室宝典、前端成长就这三招 之类,奈何这是篇软文 ~ 看官先别急Command + W,尤其是和我经历类似 做着其它岗位的工作,却多少会接触一些前端 发现有些兴趣,但又不肯定这应该是自己未来 也会有些成就感,但似乎挫折和沮丧来的更多一些 我可以负责任的说,这是一篇有态度的软文 欲语泪先流 我希望做些有用的事情,甚至可以做个有用的人 才毕业工作的第一年我是满足的,学到了很多新知识,写的代码不但能work,还能真的跑在生产环境中 我提交代码上线,忐忑的测试之后没有问题,看着屏幕傻笑了一下午,虽然整个两年半可以说失落更多一些,但那天我是幸福的 最后的半年我想走了,那里有人真心对我好,工作氛围也不错,待遇也不至于让人失望,可我还是想走了 有天早上醒来莫名其妙的沮丧,下午我看着代码发呆的时候忽然想起我早上做的梦,客户铺天盖地的投诉我做的产品问题太多,忽然觉得满世界都是委屈,情不自禁的满脸都是泪 除了登录后首页,我负责的产品根本没人使用,永远躺在免费的Package中,客户投诉对我来说是一种奢望。公司方向也好,个人努力也罢,我一直在做一些可有可无的事情 那天才了解,我的成就感不像大...
前端攻城狮-Dawn 发布于 3天前 阅读 481 评论 1 点赞 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 发布于 4天前 阅读 448 评论 2

谁说 JavaScript 简单的?

这里有一些 Javascript初学者应该知道的技巧和陷阱。如果你已经是专家了,顺便温习一下。 Javascript也只不过是一种编程语言。怎么可能出错嘛? 1. 你有没有尝试给一组数字排序? Javascript 的sort()函数在默认情况下使用字母数字(字符串Unicode码点)排序。 所以[1,2,5,10].sort() 会输出 [1, 10, 2, 5]. 要正确的排序一个数组, 你可以用 [1,2,5,10].sort((a, b) => a — b) 很简单的解决方案, 前提是你得知道有这么个坑 2. new Date() 很棒 new Date() 可以接受: 没有参数: 返回当前时间 一个参数 x: 返回1970年1月1日 + x 毫秒。 了解 Unix 的人知道为什么。 new Date(1, 1, 1) 返回 1901, 二月 , 1号\。因为,第一个参数表示1900年加1年,第二个参数表示这一年的第二个月(因此是二月) — 脑回路正常的人会从1开始索引 — ,第三个参数很明显是这个月的第一天,所以1 — 有时候索引确实从1开始 — 。 new Date(2016, 1, 1) 不会给1900年加上2016。它仅代表2016年。 3. Replace 并不“替代” let s = "bob" const replaced = s.replace('b', 'l') replaced === "lob" s === "bob" 我觉得这是一件好事,因为我不喜欢函数改变它们的输入。 你还应该知...
前端攻城狮-Dawn 发布于 4天前 阅读 352

Web前端知识体系精简

Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉。   JAVASCRIPT 篇 0、基础语法 Javascript基础语法包括:变量定义、数据类型、循环、选择、内置对象等。 数据类型有string,number,boolean,null,undefined,object等。其中,string,number和boolean是基础类型,null和undefined是JS中的两个特殊类型,object是引用类型。       Javascript可以通过typeof来判断基础数据类型,但不能够准确判断引用类型, 因此需要用到另外一个方法,那就是Object的toString。 JS常用的内置对象有Date、Array、JSON,RegExp等。 一般来讲,Date和Array用的最频繁,JSON可以对对象和数组进行序列化和反序列化,还有一个作用就是实现对象的深拷贝。 RegExp即正则表达式,是处理字符串的利器。 1、函数原型链 Javascript虽然没有继...
前端攻城狮-Dawn 发布于 6天前 阅读 830

web前端开发学习路线

导语:首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整。新手学习前端的话,一定要想想    首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整。新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁。初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新。在这里一定要对自己做分析,然后找出一种适合的学习方法。   Web前端的学习误区   网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。   入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时,很多人...
前端攻城狮-Dawn 发布于 4天前 阅读 241 评论 1 点赞 1

每个前端开发者必会的20个JavaScript面试题

问题1:JavaScript 中 undefined 和 not defined 的区别 JavaScript 未声明变量直接使用会抛出异常:var name is not defined,如果没有处理异常,代码就停止运行了。 但是,使用typeof undeclared_variable并不会产生异常,会直接返回 undefined。 var x; // 声明 x console.log(x); //output: undefined console.log(typeof y); //output: undefined console.log(z); // 抛出异常: ReferenceError: z is not defined 问题2:下面的代码输出什么? var y = 1; if (function f(){}) { y += typeof f; } console.log(y); 正确的答案应该是 1undefined。 JavaScript中if语句求值其实使用eval函数,eval(function f(){}) 返回 function f(){} 也就是 true。 下面我们可以把代码改造下,变成其等效代码。 var k = 1; if (1) { eval(function foo(){}); k += typeof foo; } console.log(k); 上面的代码输出其实就是 1undefined。为什么那?我们查看下 eval() 说明文档即可获得答案 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。 恰恰 function f(){} 语句的返回值是 undefined,所以一切都说通...
前端攻城狮-Dawn 发布于 5天前 阅读 286

从事前端开发必须要了解的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 发布于 3天前 阅读 220

如何在 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...
极光推送 发布于 4天前 阅读 224 评论 1

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

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

写给想成为前端工程师的同学们

前端工程师是做什么的? 前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。 2005年的时候大多数网页长这样: 现在的网页一般是这样的: 前端工程师的发展之路和前景是怎么样的? 前端是一个相对比较新的行业,互联网发展早期(1995年~2005年)是没有专业的前端工程师的。随着互联网的发展,大约从2005年开始,正式的前端工程师角色被行业认可,到了2010年,互联网开始全面进入移动时代,前端工程师的地位越来越重要,前端领域的技术发展也越来越快,各种新的思想、设计模式、工具和平台都快速发展,对前端工程师的技能要求也越来越高。 有一些数据可以说明前端行业的发展迅速。 在2010年之后最流行的新编程语言中有相当部分和前端有关,比如 Dart、Clojure、CoffeeScript 和 TypeScript。 作为前端最重要的编程语言 JavaScript,在最近几年里不论是代码量还是关注数都稳居 Github 平台热门编程语言榜。 行业对前端需求...
前端攻城狮-Dawn 发布于 6天前 阅读 736

JavaScript ES2017 中值得期待的功能

由于ES6 / ES2015花了大约6年的时间,才得以发布,因此负责JavaScript语言规范的技术委员会TC39,决定按年度周期来发布ES。这种变化允许ES语言规范,以更小和更迭代的版本形式进行发布。这样可以保证:如果特征语言规格在今年截止日期之前没有完成,那么它可以包含在明年的发布版本中。这种较小但功能强大的年度发布周期形式,允许语言规范持续增长。   ES2017介绍 对很大一部分JavaScript开发者来说,ES2017可以让他们感受到新的、闪亮的技术前沿工具。无论是完全接受这项新技术,还是简单地只使用其中测试工具的功能,我们都想知道ES2017中到底有什么。 如果你热衷于了解这个令人兴奋的社区提供的所有新技术,下面是ES2017所包含的技术细节。   主要特点 1、异步函数 TJ Holowaychuk是JavaScript社区的一个巨大贡献者。TJ曾在Express, Koa, Rework, 和Co这样的项目中工作过,他的代码直接或间接地成为这些开发项目中的重要组成部分。 他对Co包做出的贡献,对最近转移到Stage 4 的Async Await功能规格产生了巨大的影响。Co 是一个利用Promises和Generator函数允许以更加同步的方式来读取异步JavaScript代码语法的库。 用Promises处理Async函数的一种普遍流程如下所示: ...
葡萄城控件技术团队 发布于 1周前 阅读 853 评论 6 点赞 1

十大 Node.js 的 Web 框架,快速提升工作效率

Node.js 系统含有多种不同的结构,如 MVC、全栈、REST API 和生成器等。这些结构不仅提升了 Web 应用的开发效率,也优化了开发过程。在这里,我们收集整理了十个高效的 Node.js 框架,希望对你有帮助。 1、Node.js 开发框架 Sail.js Sails.js 就像是 Node.js 平台上的 Rails 框架。这是一个可靠可伸缩的开发框架,面向服务的架构,提供数据驱动的 API 集合。用来开发多玩家游戏、聊天应用和实时面板引用非常方便,也可用于开发企业级 Node.js 应用。 Sails.js 基于 Node.js, Connect, Express 和 Socket.io 构建。 控制器示例代码: module.exports = {   hi: function (req, res) {     return res.send("Hi there!");   },   bye: function (req, res) {     return res.redirect("http://www.OSChina.net");   } }; 2、Node.js 服务器端框架 Hapi.js Hapi.js 是一个用来构建基于 Node.js 的应用和服务的富框架,使得开发者把重点放在便携可重用的应用逻辑而不是构建架构。内建输入验证、缓存、认证和其他 Web 应用开发常用的功能。 示例代码: var Hapi = require('hapi'); // Create a server with a host and por...
编辑部的故事 发布于 1周前 阅读 3396 评论 14 点赞 3

关于前端的思考与感悟

万事开头难。 当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候,突然就深刻的体会到了这句话确实太有道理了。 最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。曾看到过有人对前端市场人才的稀缺这样吹捧过: 现在,几乎整个互联网行业都缺前端工程师,不仅在刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在。没错,优秀的前端工程师简直比大熊猫还稀少。不仅在国内的互联网行业,在国外,前端工程师一样是需求旺盛、供不应求的香饽饽。 对于这样的吹捧,不反对也不支持。但是这些传闻似乎对大家具有强烈的吸引力,遇到过一个搞python开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作,越来越多的人准备成为一名前端工程师。 因为由于每个人的位置,经历的不同,对事总会有不同层面的理解。而作为一个从成都的菜鸟,蜕变成一名北京的菜鸟,也来谈谈自己对于前端的理解。 一、地域差异 在成都的大部分公司,有一种专门负责切图排版的网页工程师。他们需要懂一些PS,然后会使用HTML与CSS排版。而这类人往往是刚参加工作不久的毕业生,响应式布局对他...
前端攻城狮-Dawn 发布于 3天前 阅读 192 点赞 1

JavaScript 中的 this 全面解析

this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》,让我对this的问题豁然开朗。故写下此篇文章,分享一下我的心得。 隐式绑定 关于this,一般来说,谁调用了方法,该方法的this就指向谁,如: 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 如果存在多次调用,对象属性引用链只有上一层或者说最后一层在调用位置中起作用,如: 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上,取决于是否是严格模式。 function foo() { console.log( this.a ) } var obj1 = { a: 2, foo: foo } var bar = obj1.foo; // 函数别名! var a = "oops, global...
前端攻城狮-Dawn 发布于 4天前 阅读 162

如何将 HTML5 性能发挥到极致

HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下,对性能的需求显得更为重要,而HTML5性能优化前与优化后有着极大的差别,如何优化才能提高性能,对此熟知的人很少。本文以LayaAir引擎为例,通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。 主题包括:  代码执行基本原理  基准测试  内存优化  图形渲染性能  减少CPU使用量  其他优化策略 第1节:代码执行基本原理 LayaAir引擎支持AS3、TypeScript、JavaScript三种语言开发,然而无论是采用哪种开发语言,最终执行的都是JavaScript代码。所有看到的画面都是通过引擎绘制出来的,更新频率取决于开发者指定的FPS,例如指定帧频率为60FPS,则运行时每个帧的执行时间为六十分之一秒,所以帧速越高,视觉上感觉越流畅,60帧是满帧。 由于实际运行环境是在浏览器中,因此性能还取决于JavaScript解释器的效率,指定的FPS帧速在低性能解释器中可能不会达到,所以这部分不是开发者能够决定的,开发者能作的是尽可能通过优化,在低端设备或低性能浏览器中,提升FPS帧速。 LayaAir引擎在每帧都会重绘,在性能优化时,除了关注每帧执行逻辑代码带来的CPU消耗,还需要注意每帧调用绘图指令的数量...
前端攻城狮-Dawn 发布于 4天前 阅读 161

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

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

如何成为一名优秀的web前端工程师(前端攻城师)?

  我所遇到的前端程序员分两种:   第一种一直在问:如何学习前端?   第二种总说:前端很简单,就那么一点东西。   我从没有听到有人问:如何做一名优秀、甚至卓越的WEB前端工程师。   何为:前端工程师?   前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。   Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!   它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。   随着近两三年来RIA(Rich Internet Applications的缩写,中文含义为:丰富的因特网应用程序)的流行和普及带来的诸如:Flash/Flex,Silverlight、XML和服务器端语言(PHP、ASP.NET,JSP、Python)等语言,前端开发工程师也需要掌握。   前端开发的入门门槛其实很低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。   HTML 甚至不是一门语言,他仅仅是简单的标记语言!   CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。   Jav...
前端攻城狮-Dawn 发布于 2天前 阅读 203

ajax 和jsonp 不是一码事 细读详解

摘要: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX。 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX。 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者...
乱蓬头 发布于 4分钟前

在CentOS上搭建PHP服务器环境

摘要: 原文地址http://www.cnblogs.com/liulun/p/3535346.html 安装apache: yum install httpd httpd-devel 启动apache: /etc/init. 原文地址http://www.cnblogs.com/liulun/p/3535346.html 安装apache: yum install httpd httpd-devel  启动apache: /etc/init.d/httpd start 此时输入服务器的IP地址,应该看到apache的服务页面,端口不用输,apache默认就是使用80端口 安装mysql: yum install mysql mysql-server 启动mysql: /etc/init.d/mysqld start 安装php yum install php php-devel 重启apache使php生效 /etc/init.d/httpd restart 此时可以在目录:/var/www/html/下建立一个PHP文件 代码: <?php phpinfo(); ?> 然后访问这个文件,就能看到PHP的一些信息,php.ini配置文件的路径可以在这个页面上看到 安装php的扩展 yum install php-mysql php-gd php-imap php-ldap php-odbc php-pear php-xml php-xmlrpc 安装完扩展之后需要再次重启apache /etc/init.d/httpd restart 测试mysql是否链接成功的php代码 <?php $con = mysql_connect("10.0.@.@@","@@","@@"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("mydb", $con); $resu...
乱蓬头 发布于 18分钟前 阅读 1

开源中国杭州源创会报名开始,剖析无人驾驶背后的数据库(PostgreSQL)。

趁着六月美景正好,OSC源创会带着自由、开放、分享的开源精神,也带着满满的干货主题,邀请杭州的各位来约。
源创会

解读 CSS 布局之水平垂直居中

摘要: flexbox是个很强大的布局模块,三个属性就搞定居中,而且不论父容器还是居中元素都可以不定宽高 水平居中 align="center" 直接在标签对象内加align="center"即可让对象内图片横向水平居中显示 align="center"使用方法: <div align="center">aaa</div> text-align:center <style> .divcss5{text-align:center} </style> <div class="divcss5">aaa</div> text-align是针对父元素进行设置,只能对图片,按钮,文字等行内元素(display为inline或inline-block等)起作用,起作用的首要条件是子元素必须没有被float影响。但要说明的是在IE6、7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效 <style> body{ text-align:center} .div{ margin:0 auto;} </style> <div class="div">aaa</div>   使用display:table-cell来居中 表格中只要用到 td(或 th)元素的 align="center" 和 valign="middle" 这两个属性就可以完美处理,而且表格默认对它里面的内容进行垂直居中。在css中控制表格内容...
乱蓬头 发布于 28分钟前

监听浏览器返回事件,安卓返回事件

浏览器返回事件
Rable_PHP 发布于 1小时前 阅读 2

web前端必备学习指南

精华 工具 box-shadow generator 生成 box-shadow 的工具。 gradient-generator 渐变生成器。 Ultimate CSS Gradient Generator 也是渐变生成器 CSS Generators -CSSREFLEX CSS3 生成器 图床 https://sm.ms/ 有 API 可用。 新浪微博图床 Chrome扩展 Unix 时间戳 Unix timestamp 编程语言 JavaScript 前端资源教程 i5ting 廖雪峰JavaScript教程 JavaScript 标准参考教程(alpha) -阮一峰 JavaScript Promise迷你书 -azu 前端的异步解决方案之Promise和Await Async You Don’t Know JS (book series) You Don’t Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10+ 以上浏览器。 JavaScript 秘密花园 JavaScript 设计模式 系列 AlloyTeam ES2015(ES6) 《ECMAScript 6入门》 -阮一峰 EcmaScript6 全规范(含node) -ouvens 30分钟掌握ES6/ES2015核心内容(上) 30分钟掌握ES6/ES2015核心内容(下) ES2015规范 英文 TypeScript Typ...
前端攻城狮-Dawn 发布于 1小时前 阅读 44

我的前端学习历程

  很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了。这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上,我们不要给自己设定界限,只要拥有成长的力量,就能不断超越自己”。 下面以我自己的经历讲讲前端的学习过程。 Jquery基础知识准备   学习前端需要掌握的基础知识有jquery,css。做移动端开发最好掌握CSS3,CSS3的许多新特性会让布局简单很多。Jquery可以不用每个知识点都很熟练,但是最好都了解,用的时候知道有这个东西再进行细致学习会更牢固。必须掌握的几个点  1.选择器   基础的id样式选择器是必须掌握的,这里不多说。  2.事件绑定      不推荐的写法  <button id="foo" onclick="dosomething()">Bar</button>      缺点:这样做的结果就是html前端和js前端的工作混在了一起,原则上HTML代码只能体现网页的结构      建议写法 $(“#foo”).click(function(){});   优点:jQuery是追加绑定的,绑多少执行多少,还解决了IE的不兼容问题。    Jquery中的事件绑定方式有很多 click,live,bind,one,on…,它们之间的区别这里就不多讲了。on方法是官方推荐的绑定事件的一个方...
前端攻城狮-Dawn 发布于 2小时前 阅读 66

Angular 路由的使用

## 引入路由模块 ``` import { Routes, RouterModule } from '@angular/router'; ``` ## 配置路由 ``` import { HomeComponent } from './home.component'; export const ROUTES: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: 'HomeComponent' }, { path: 'order', loadChildren: './order/order.module#OrderModule' } ]; ``` ## 引入ngModule ``` @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(ROUTES) ], declarations: [ AppComponent, HomeComponent ], bootstrap: [ AppComponent ] }) ``` ## 错误 - 路由 Error: Cannot find module './order/order.module'. webpack打包 路由中loadChildren的使用需要下面配置 ``` loaders: [ 'awesome-typescript-loader', 'angular-router-loader' ] ```...
yan5845hao 发布于 2小时前 阅读 2

iphone手机上微信自动播放H5背景音乐

<audio id="Jaudio" class="media-audio" src="bg.mp3" preload loop="loop"></audio > function audioAutoPlay(id){     var audio = document.getElementById(id);     audio.play();     document.addEventListener("WeixinJSBridgeReady", function () {             audio.play();     }, false); } audioAutoPlay('Jaudio');
nibilly 发布于 3小时前 阅读 5

Bootstrap

Bootstrap
xpttxsok 发布于 4小时前 阅读 3

关于a标签的onclick与href的执行顺序

onclick的事件被先执行,其次是href中定义的(页面跳转或者javascript) 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加上return false; 一般是这样写onclick="xxx();return false;". 在href中定义的函数如果有返回值的话,当前页面的内容将被返回值代替 如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动; 所以,比较推荐的写法是<a href="JavaScript:void(0)" onclick="fn(this)"> <a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com');return false;">跳转3</a> <a href="javascript:void(0)" onclick="subgo()">点我</a> 在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。 <a href="#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。 实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0) h...
yizhichao 发布于 4小时前 阅读 4

15个常用的javaScript正则表达式

摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。表单验证处理必备,赶紧收藏吧! 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("iFat3")); 2 密码强度正则 //密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符 var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/; //输出 true console.log("=="+pPattern.test("iFat3#")); 3 整数正则 //正整数正则 var posPattern = /^\d+$/; //负整数正则 var negPattern = /^-\d+$/; //整数正则 var intPattern = /^-?\d+$/; //输出 true console.log(posPattern.test("42")); //输出 true console.log(negPattern.test("-42")); //输出 true console.log(intPattern.test("-42")); 4 数字正则 可以是整数也可以是浮点数 //正数正则 var posPattern = /^\d*\.?\d+$/; //负数正则 var negPat...
网页设计轻松学 发布于 6小时前 阅读 11

1.0.快速入门

Hello World
RippleChan 发布于 11小时前 阅读 6

为什么我们的web前端变的越来越复杂

     前端发展了也有些年头了,曾记得很多年前,聊起前端,都觉得是很简单,那个时候都没有前端工程师这个职位。可现在,前端已经逆袭了,已经不是原来的样子了,各种技术层出不穷,显的越来越高深莫测了。前端真的变得那么难了吗?在我看来,前端还是原来的前端,虽然有些关变换,但不应该像现在一样复杂。 框架太多了,新技术太多了       我们总是迷失在各种技术了,总是迷失在新技术带了的各种概念里。angular rect  bootstrap 等等,他们给我们带来便利的同时也给我们带来了麻烦。我们真的需要这些框架吗?学会了这些框架就等于学会了前端吗?      或许很多时候我们学习这些不是为了去解决问题,是为了显示我们是多么的有格调,我们掌握了多少流行的东西,更或者是用来粉饰我们的简历。我们已经远离的技术的真正价值。记得几个月前和一个前端在讨论,他问我现在有哪些流行的技术;我说,我把手机上的1px的线能显示一个像素就是流行技术了(手机端一个像素的线会大于一个像素)。   这些新技术虽然带给我们方便,但我们不能迷失在里面,我们要去解决问题;再有一个例子,css3的动画有BUG,但是我在网上很少见人去讨论这些问题,讨论多就是各种框架的使用。我们...
前端攻城狮-Dawn 发布于 15小时前 阅读 323 评论 1

通过CSS,实现元素反转

      今天突然看到ES6还有Reflect 概念,我怎么以前没注意过,赶快去CANIUSE上查一下吧,却意外看到CSS Reflections,竟然可以有这样的属性!       通常我们反转一个元素,可以用transform的roate,让它旋转。这个很好理解,但是它旋转后,原位置的元素就看不见了,它发生了视觉位移(实际占位不变)。另外它只是旋转,并非“镜像”的效果!       那么CSS Reflections有什么效果,简单说就是“照镜子”!在原来元素保留不变的情况下,再产生一个“镜像”元素,效果如下: CSS语法及用法  -webkit-box-reflect: <direction> <offset> <mask-box-image> <direction> 方向 为  上下左右:above, below, left or right. <offset> 偏移值 为长度或百分比 ,指定镜像离元素盒子反转时边缘的距离,默认为0 <mask-box-image> 一个覆盖镜像的遮罩图片元素,默认为无遮罩.  遮罩层可以这样写,类似于灰度图,:  -webkit-gradient(linear, left top, left bottom, from(grey), color-stop(0.5, transparent), to(white)), 我试着用url("一个图片地址") 的办法,放入一个渐变的、透明的png图片,是没有遮罩效果的。   此镜像会随着元素变化而变化 ,它甚至可以加...
noonoo 发布于 16小时前 阅读 5

Polymer template dom-if属性

When if becomes falsey, the stamped content is hidden but not removed from dom. When ifsubsequently becomes truthy again, the content is simply re-shown. This approach is used due to its favorable performance characteristics: the expense of creating template content is paid only once and lazily. Set the restamp property to true to force the stamped content to be created / destroyed when the if condition changes. 简而言之,如果需要移除或新建dom则添加restamp=true属性。如下实例: <template is="dom-if" if="{{loadDialog}}" restamp=true id="dialogTemplate"> ...//中间dom </template> 如果不添加restamp=true,则loadDialog为true/false时,中间dom只是显示(show)或隐藏(hide),添加restamp=true之后,中间dom会新建(create)或移除(destroy)....
孟飞阳 发布于 17小时前 阅读 4

浅析 JavaScript 中的 Function.prototype.bind() 方法

Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数的值。 例如,在 f() 函数上调用 bind() 方法并传入参数 obj ,即 f.bind(obj) ,这将返回一个新函数, 新函数会把原始的函数 f() 当做 obj 的方法来调用,就像 obj.f() 似的,当然这时 f() 函数中的 this 对象指向的是 obj 。 简单使用情形一 var o={ f: function () { var self=this; var fff=function() { console.log(self.value); //此时 this 指向的是全局作用域 global/window,因此需要使用 self 指向对象o }; fff(); }, value: "Hello World!" }; o.f(); // Hello World! 上例是我们常用了 保持 this 上下文的方法,把 this 赋值给了中间变量 self,这样在内部嵌套的函数中能够使用 self 访问到对象o,否则仍使用 this.value,内部嵌套函数的this此时指向的是全局作用域,最后的输出将会是 undefined,代码如下: var o={ f: function () { var self=this; var fff=function() { ...
孟飞阳 发布于 17小时前 阅读 1

Web前端性能优化——编写高效的JavaScript

前言 随着计算机的发展,Web富应用时代的到来,Web 2.0早已不再是用div+css高质量还原设计的时代。自Gmail网页版邮件服务的问世开始,Web前端开发也开启了新的纪元。用户需求不断提高,各种新的技术层出不穷,前端工程师的地位也越来越重要。然而任何事物都是有两面性的,随着前端技术的发展,前端业务越来越繁重,这大大增加了JS代码量。因此,要提高Web的性能,我们不仅需要关注页面加载的时间,还要注重在页面上操作的响应速度。那么,接下来我们讨论几种能够提高JavaScript效率的方法。   一、从JavaScript的作用域谈起 当JavaScript代码执行时,JavaScript引擎会创建一个执行环境,又叫执行上下文。执行环境定义了变量或函数有权访问的其他数据,决定了它们的行为,每个执行环境都有一个与它关联的变量对象,环境中定义的所有函数、变量都保存在这个对象中。在页面加载的时候,JavaScript引擎会创建一个全局的执行环境,所有全局变量和函数都是作为window对象(浏览器中)的属性和方法创建的。在此之后,每执行一个函数,JavaScript引擎都会创建一个对应的执行环境,并将该环境放入环境栈中,所以当前正在执行的函数的执行环境是在环境栈的最顶部的,当函数执行完毕之...
前端攻城狮-Dawn 发布于 18小时前 阅读 183

前端上传图片

# 前端上传图片 ## 1使用FormData对象 直接上代码 html代码 ``` ``` js代码 ``` function fsubmit(){ var data = new FormData($('#form1')[0]); $.ajax({ url: 'server.php', type: 'POST', data: data, dataType: 'JSON', cache: false, processData: false, contentType: false, success:function(ret){ console.log(ret) } }) return false; } ``` ## 2使用FileReader * HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 ### FileReader有3个读取文件的方法 1. **readAsText**:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。 2. **readAsBinaryString**:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。 3. **readAsDataURL**:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等...
汤免费 发布于 19小时前 阅读 5

归档的解决方案

看下面的Storage部分的代码,实际存储了10000多行的代码结构: { "0": { "type": 0, "name": "" }, "f6j80rh3fe": { "name": null, "type": "fund" }, "fbejlpoifa": { "name": null, "type": "" }, "fbent79b6v": { "name": null, "type": "" }, "fbenrn993p": { "name": null, "type": "" }, "fbenmmtg8w": { "name": null, "type": "" }, "fbenj0w010": { "name": null, "type": "" }, "fbenciwnw6": { "name": null, "type": "" }, "fbemtik0ti": { "name": null, "type": "" }, "fbemqpvun9": { "name": null, "type": "" }, "fbels5qobg": { "name": null, "type": "" }, "fbeloh7ooh": { "name": null, "type": "" }, "fbelk15z5x": { "name": null, "type": "" }, "fbel9e6ui6": { "name": null, "type": ""...
FeanLau 发布于 20小时前 阅读 3

推荐:Webpack2入门到深入的中文文档

对比于wepack2官网(https://doc.webpack-china.org/)的中文文档,该PDF文档更加通俗易懂
JamesView 发布于 20小时前 阅读 23

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

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

各种动态渲染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周前 阅读 1687 评论 2 点赞 4

开源中国杭州源创会报名开始,剖析无人驾驶背后的数据库(PostgreSQL)。

趁着六月美景正好,OSC源创会带着自由、开放、分享的开源精神,也带着满满的干货主题,邀请杭州的各位来约。
源创会

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周前 阅读 939 评论 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 发布于 3周前 阅读 2370 评论 4 点赞 11

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

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

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

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

CSS 布局经典问题初步整理

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

Web Components简述

要说最近几年来,前端开发最火的一个趋势或最火的前端开发框架是什么,第一想到的是,组件及推崇组件化开发的React框架。本文将介绍Web Components规范并就组件的几大特性进行讨论
熊建刚 发布于 1个月前 阅读 2069 评论 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 发布于 1个月前 阅读 2410 评论 12 点赞 5

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

网上各种安装环境的文章脏乱差,我这弄了一套标准的出来,完善中
龙马行空 发布于 2个月前 阅读 3255 评论 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 发布于 2个月前 阅读 1583 点赞 2

Angular vs React 最全面深入对比

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

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

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

浅析前端页面渲染机制

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

JavaScript异步编程

如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一。如果你对异步编程没有太清晰的概念,那么我建议你花点时间学习JavaScript异步编程,如果你对异步编程有自己的独特理解,也欢迎阅读本文,一起交流。
熊建刚 发布于 2个月前 阅读 3569 评论 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、重定向访问深度不同 有的重定向一个静态页面,有的重定向相比复杂的动态页面,那么实际服务器的负载差异是...
源子姗 发布于 2个月前 阅读 4950 评论 9 点赞 3

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

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

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

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

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

原生函数(native function)是 JavaScript 语言的一部分,这些函数有别于开发者编写的自定义函数。当我们在 profiler 中查看代码的调用栈时,这些函数是被过滤掉的。我们在 profiler 中看到的只有自己写的代码。
justjavac 发布于 3个月前 阅读 1871 评论 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 发布于 3个月前 阅读 6822 评论 26 点赞 43 打赏 2
顶部