前言 在面向对象语言中,我们很容易理解对象及对象的实例,
但是sequelize ORM框架中我们通常会说成模型和实例.
模型可以理解为对一个表结构的抽象定义,好比工厂的一条流水线,
实例可以理解为表结构中一个具体的数据结构,好比流水线生产出来的一个商品.
在sequelize 类中有一些api是针对实例操作 (可以理解成内存中的改变)
实例持久化以后,数据才写入我们物理存储单元中 (比如具体的数据库)
新建实例并持久化 定义模型 const Task = sequelize.define('task', {
title: Sequelize.STRING,
rating: { type
javascript 查看更多
levelup
是一个由谷歌构建的简单 key-value 数据库.
它在 Google Chrome 和许多其他产品中使用,使用 fast Snappy算法，可以将任意字节数组作为键和值.
leveldown
它提供了一个纯 C++ 绑定到 LevelDB.
在浏览器或者 memdown 中，有许多可选存储( 如 level.js )，用于内存存储中的. 它们通常支持键和值的字符串和缓冲区.
对于更丰富的数据类型集，可以用 encoding-down 包装存储.
level
它可以看做是包的一个集合,捆绑了 levelup , leveldown 和 encoding-down.
它的
javascript 查看更多
webpack打包报错 $ npm run build:prod
> jiajialink-admin@3.2.1 build:prod /Users/zhangzhi/code/jjzn/admin
> vue-cli-service build
⠧ Building for production...
WARNING Compiled with 3 warnings 8:22:16 PM
warning
asset size limit: The follo
javascript 查看更多
说明 发现一些朋友在群里询问如何线上发布vue项目.
从而暴露出来很多有意思的问题.
所以这篇博文简单介绍一下vue项目线上发布的情况.
本地环境 mac os
node 10.16
vue 2.6
vue-cli 4.0
线上环境 centOS6
node 10.16
nginx
vue是最近很火的前端框架,
所以它依赖的是浏览器,及我们可以从浏览器定位到你服务器nginx,然后nginx把指定的静态资源转发出来,最后我们在浏览器渲染看到
不管你的服务器是iis,apache还是nginx
只要http可以定位到服务器的静态资源即可.
很多人会有问号?
那为什么我在开发的时候用node命令
javascript 查看更多
basicShare 推荐一款极简的分享插件
之前用过百度分享,后来博客切换https服务后,
百度分享插件加载报错,
再加上目前主流的社会化分享目的地也就是 微信,微博,
或许是80后的我真的out了,
这个插件基本满足我的需要
极致简洁 UI效果
截图展示效果有点大....
看看实际效果:
分享
站点没有下载icon,所以前面的分享icon变成了方框□
css .basicShareBtn {
cursor: pointer;
background-color: #dff0d8;
border-color: #d6e9c6;
color: green;
font-size: 1
javascript 查看更多
前言 javascript因为他的不完美,
导致了字符串可以有好几种转化为数字的方法,
但是可用的方法越多,留下的坑也就比较多.
parseInt 几乎所有浏览器都能解析处理此方法.
console.log(parseInt('001一介布衣');
//有些老旧浏览器会返回 0
//现代浏览器会返回 1
此方法优点:
** 处理速度最快**
Number Number 几乎所有浏览器都支持解析,
但是它针对参数是否有引号会做出不同的解析.
console.log(Number('0028'));
输出:28
console.log(Number(023));
输出:19
当 Numbe
javascript 查看更多
javascript中的 object javascript中的object是由多个名/值对组成的无序的集合;
object 中每个属性对应任意类型的值;
定义对象可以使用构造函数或字面量的形式.
var obj = new Object;
obj.name = "一介布衣";
obj.show = function(){}; //添加行为
除了以上添加属性的方式，还可以使用Object.defineProperty定义新属性或修改原有的属性
Object.defineProperty Object.defineProperty(obj, prop, descriptor)
参数说明：
javascript 查看更多
前言 在node的程序中，如果有大数据量的计算，处理起来比较慢，可以用C来处理，然后通过回调（callback的形式），返回给node.
那么编写好的C组件如何可以在node.js环境中调用呢.
Node.js 插件是用 C++ 编写的动态链接共享对象，可以使用 require() 函数加载到 Node.js 中，且像普通的 Node.js 模块一样被使用. 它们主要用于为运行在 Node.js 中的 JavaScript 与 C/C++ 库之间提供接口.
node.js如何编写c++组件 以官方Hello World” 示例是一个简单的插件，用 C++ 编写，如下代码：
module.ex
electron 查看更多
new ClientRequest(options) electron框架下主线程发起HTTP/HTTPS请求.
ClientRequest实现了Writable Stream接口, 因此是一个EventEmitter类型.
参数 (Object | String) -如果 选项 是一个String类型, 它被解释为请求的URL.
如果它是一个Object类型, 那么它可以通过以下属性指定一个HTTP请求
method String (可选) - HTTP请求方法. 默认为GET方法.
url String (可选) - 请求的URL. 必须在指定了http或https的协议方案的独立表单
electron 查看更多
之前写过一篇 关于css相对定位不跟随滚动条移动点击查看.
正如我的博客内容页右侧目录的效果.
垂直滚动内容时,右侧目录始终定位在右上角不跟随滚动条.
但是,
当我的目录足够长,因为它不跟随滚动条垂直移动,
导致超出屏幕的部分无法看到.
右侧目录相对定位 'position': 'fixed',
'top': 25px,
'width': 400px
top 25px 是因为我的博客顶部菜单高度25px,所以为了不让菜单遮挡右侧目录,所以距离顶部25px
但是页面初始化后,我们并不想直接让目录相对定位到右上角,
因为右上角还有需要展示的模块,
我们更希望是滚动条滚动到目录模块时,这个模块始
css3 查看更多
jsx代码格式化错乱 当你在用vscode编写jsx代码时,也许你的编辑器设置了自动保存,或者自动格式化代码.
而vscode 对js文件中的 jsx 代码格式化是下面这个样子的:
如何修复这种情况
首先安装插件 Prettier
vscode扩展插件中搜索 Prettier 安装
修改配置文件 vscode 文件-> 首选项-> 设置->用户->文本编辑器->文件
右侧添加项:
"*.js": "javascriptreact"
或者在配置文件settings.json 中搜索 files.associations ,里面添加 "*
开发工具 查看更多
前言 早期桌面应用的开发主要借助原生 C/C++ API 进行，由于需要反复经历编译过程，且无法分离界面 UI 与业务代码，开发调试极为不便。后期出现的 QT 和 WPF 在一定程度上解决了界面代码分离和跨平台的问题，却依然无法避免较长时间的编译过程。近几年伴随互联网行业的迅猛发展，尤其是 NodeJS、Chromium 这类基于 W3C 标准开源应用的不断涌现，原生代码与 Web 浏览器开发逐步走向融合，Electron 正是在这种背景下诞生的。
electron Electron 是由 Github 开发，通过将Chromium和NodeJS整合为一个运行时环境，实现使用 HTML、CS
electron 查看更多
开源地址 https://github.com/electron/electron
关于Electron Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。
Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
核心团队和贡献者 Electron由Github上的一支团队和一群活跃的贡献者维护。
有些贡献者是独立开发者，有些则在用Electron构建应用的大型公司里工作。
版本 Electron的版本发布很频繁。
每当Chro
electron 查看更多
如何引用react 单页面直接使用react.js文件很简单，只需要像引入普通js文件一样，通过script标签引入即可
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.1
javascript 查看更多
levelup
LevelDB是一个Google构建的简单的k-v数据库.
在Google Chrome和其他产品中被使用.
LevelDB支持抽象字节数组作为键和值，单一get, put 和delete操作，批处理的put 和delete操作，双向迭代和使用快速Snappy
算法进行简单压缩.
LevelDB存储按照键的字母顺序进行排序的条目.
这种构造levelup的流接口,
奠定了levelup作为可读流的迭代器一个十分有效的查询机制.
leveldown是提供了存C++链接到LevelDB的存储器.
有很多交替存储是可用的，
如在浏览器中的level.js,或者是内存存储的mem
leveldb 查看更多
前言 electron由于集成Node.js和Chromium,所以它具有桌面GUI应用程序的开发的能力.
今天我们在electron环境下实现tcp连接示例.
使用node.js获得tcp能力 浏览器在js层是不能使用原生的tcp套接字的, 但是electron使用了node作为中间层, 所以我们可以依托node从而获得tcp能力.
net模块 Node.js Net 模块提供了一些用于底层的网络通信的小工具，包含了创建服务器/客户端的方法，我们可以通过以下方式引入该模块.
var net = require("net")
nodejs中的socket, 即可作为server, 也可以作
electron 查看更多
nginx反向代理node.js服务器
我们服务器上node.js部署的服务通常会用 pm2 或者 forever 等工具接管,
然后nginx反向代理对应node.js服务所绑定的端口.
server {
listen 80;
server_name yijiebuyi.com;
access_log **这里是log日志目录** main;
client_max_body_size 50m;
location / {
root html;
exp
linux 查看更多
前段时间写过一篇关于showdown和showdown-toc插件自动生成目录的博客 ⬅️点击查看
为什么要改进
showdown-toc作为专门为showdown开发的 toc 插件,搭配使用都非常方便
安装showdown ,showdown-toc
toc插件集成到showdown代码中
const Showdown = require('showdown');
const showdownToc = require('showdown-toc');
const showdownHighlight = require("showdown-highlight");
const to
开发工具 查看更多
gulpfile.js文件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require('gulp-uglify');
var cssmin = require('gulp-cssmin');
var wrap = require("gulp-wrap");
var expressService = require('gulp-express-service');
var wwwroot = './static/';
var paths = {
scripts: ['stat
开发工具 查看更多
markdown如何转化成html
markdown 文本转化成 html 成熟的工具有不少,
node 开源库中有
markdown-it
showdown
markdown-to-html
marked
markdown
上面的工具各有优势,自行google开源地址,找到一款最适合自己的.
本人博客一直是markdown编辑器撰写,
然后,一直再琢磨如何通过标题来自动生成内容目录,
造轮子的事情还是留给大牛们,
我们能把轮子使用好也是对大牛们的敬仰和支持.
markdown-it 介绍 开源地址: https://github.com/markdown-it/markdown-it
开发工具 查看更多
文章目录
java架构师
职责
坐标
要求
福利
薪资
Java高级开发
职责
坐标
要求
薪资
Java开发
职责
学历
坐标
要求
福利
薪资
职位已关闭
java架构师 职责
负责设计并参与产品的方案讨论、技术选型、架构设计等环节.
负责产品架构的搭建和实施.
根据行业内最新产品和技术的发展方向，制定产品架构发展战略规划
坐标
北京 - 西二旗城铁
要求
1、有5年以上开发或管理工作经验，3年以上互联网平台或大型网站架构经验；
2、熟悉J2EE和Struts，Hibernate/MyBatis，Spring等开源框架；
3、精通MySQL+Nginx/Ap
招聘 查看更多
JavaScript 中的跨域问题
http://yijiebuyi.com/A.js
http://yijiebuyi.com/B.js
上面情况在同一域名下,不同资源文件 [允许跨域]
http://yijiebuyi.com/blog/A.js
http://yijiebuyi.com/jobs/B.js
上面情况在同一域名下,不同资源目录下的文件 [允许跨域]
http://yijiebuyi.com/A.js
http://yijiebuyi.com:1234/B.js
上面情况在同一域名下,不同端口 [不允许跨域]
http://yijiebuyi.co
javascript 查看更多
Markdown是一种轻量级标记语言，创始人为約翰·格魯伯（英語：John Gruber）。
它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。 这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。[维基百科]
markdown可以让你专心写作而摆脱排版的困扰.
一些常用语法要花几分钟时间来记住.
标题
一个#表示一级标题，
几个#号对应表示几级标题，
最多支持六级标题.
注：标准语法一般在#后跟个空格再写文字
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
效果:
一级标题
开发工具 查看更多
在开发过程中,团队代码风格统一,会让我妈避免不必要的错误和低级 Bug、控制代码质量，这样我们最好会预定一套编码规范.
检验JavaScript编码规范的工具有哪些?
jslint
jshint
ESLint
下面简单看下这3个检验工具之间的差别:
jslint
jslint 的作者是 Douglas Crockford(《JavaScript: The Good Parts》的作者)。
Douglas Crockford 制订了一套 JavaScript 编码规则，
JSLint 通过检查和分析 JavaScript 代码，
将任何违反规则的代码警告给开发者，
且无法通过配置关闭一
javascript 查看更多
ES6 的发布,给 JavaScript 开发带来了很多实实在在的特性,那么对于 node.js 的开发者而言,V8对于ES6新特性的支持有哪些?
如何查看node 的新特性 process.versions
➜ /Users/zhangzhi >node
process.versions
{ http_parser: '2.5.0',
node: '4.2.4',
v8: '4.5.103.35',
uv: '1.7.5',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '4
nodejs 查看更多
关于 ES6规范及新特性
对象字面量申明增强
ES6 之前,申明对象字面量方式其实就是直接定义一个json对象.存在的仅仅是对象的属性和值.
ES6 之后,对象字面量被扩展支持直接设置原型，
简洁属性赋值和方法，
超类调用,
这也让对象字面量和类声明的关系更密切，并让基于对象的设计更便利
ES6之前:
var obj = {
__proto__: theProtoObj,
// 下面的写法不会设置内部原型
'__proto__': theProtoObj,
// 方法
toString() {
// 调用父对象的方法
return "d "
javascript 查看更多
ES6是对 javascript 语言的一次重大更新，是自从2009年ES5标准化后的第一次重大更新
主要的JavaScript引擎正在逐步实现这些特性，点击这里查看浏览器的兼容情况
这次更新涉及到的新特性还比较多,我们分几个部分来简单介绍 ES6 中模块导入
类似下面的语法:
import fs from 'fs';
import path from 'path';
这里的 import是在编译时决定的( 即在脚本开始执行之前 )
事实上，各个模块之间的依赖关系图所涉及的所有imports和exports都是在执行之前已经决定
如果我们的代码中需要按需加载的需求，即在运行时才进行模
javascript 查看更多
Html5 的扩展极大的方便了web开发.
比如视频播放,在Html5 之前,全部依赖 flash / 银光 这样的插件.
video 元素 Html5 的 video 元素扩展出来非常多的方法,属性,事件 等.
我们可以直接在此控件上播放,暂停 等操作.
现在，Safari 3以上、Firefox 4以上、Opera 10以上，以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持
表现形式:
<video widht="500" height="300" src="http://wwww.devdo.net/demo/test.mp4>
html5 查看更多
JavaScript 单元测试、更因其执行环境复杂无比、自动化门槛超高.
目前 JavaScript 越来越复杂庞大，其实更需要单元测试来确保品质.
但是由于 PhantomJS、Travis CI 等工具… 写 JavaScript 单元测试变得轻松许多.
今天来聊一下关于 javascript 单元测试 Unit Test 及 CI 持续集成工具.
Unit Test 单元测试
我们常写一些工具类的 JavaScript Function、甚至包装成组件、以方便未来重复使用.
单元测试 (Unit Test) 是另外一份代码、用来检查这些代码的正确性.
例如过去我们得替自己撰写 t
nodejs 查看更多
什么是m3u
m3u是一个纯文本文件,虽然我们平时看到播放器首先加载了此文件,但是它并不是一个音频文件。
播放器并不是播放它，而是根据它的记录找到网络地址进行在线播放
什么是m3u8
m3u8 是在 m3u 格式下扩展出来的,
可以播流或者点播形式，目的是实现时实性及保密性它会不让你获取它的视频所在地址
浏览器使用的是 m3u8 文件。
m3u8 跟音频列表格式 m3u 很像，可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。
播放器按顺序逐个播放，全部放完再请求一下 m3u8 文件，获得包含最新 ts 文件的播放列表继续播，周而复始。
整个直播过程就是依靠一个不断更新
html5 查看更多
#为什么用webpack
如果我们 前端 javascript 能像 node.js 一样 require 去引用一个依赖包,那么前端的世界就不会像现在这么乱
现在为什么乱?
假设:
a.js 依赖 b.js
b.js 依赖 c.js
c.js 依赖 d.js
如果在我们前端去引用这些依赖的时候,往往是这样的:
<script src='a.js'></script>
<script src='b.js'></script>
<script src='c.js'></script>
<scri
javascript 查看更多
概述
CommonJS是服务器端模块的规范，Node.js采用了这个规范。
根据CommonJS规范，一个单独的文件就是一个模块。
加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。下面就是一个简单的模块文件example.js。
console.log("evaluating example.js");
var invisible = function () {
console.log("invisible");
}
exports.message = "hi";
exports.say = function () {
c
javascript 查看更多
什么是levelDB
google 公司开发的一款 高性能KV型nosql数据库 ,你可以点击链接查看以前的介绍.
node.js 下使用leveldb 请移步到这里.
但是之前的所有leveldb 操作接口都是基于 callback 回调.所以今天这篇就是分享下leveldb 数据接口实现promise 规范.
什么是promise
promise 规范让javascript拜托callback回调
请移步到上面的博文查看
levelup
levelup 是 leveldb 在node.js 上的实现开源包.
github地址: https://github.com/L
leveldb 查看更多
javascript 在浏览器中的加载是如何的?
如何你的 script 上没有任何 异步,阻塞 等标注:
浏览器会异步加载 javascript 文件,但是会按照引用文件中的书写顺序从上到下执行解析 javascript
Defer属性标记
defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。
也就是说defer属性的 script 就类似于将 script 放在body中的加载 效果一致.
但是defer属性在各个浏览器中支持程度有点不同,就是说,有的浏览器不完全支持.
Async属性标注
as
javascript 查看更多
javascript 访问本地文件,已经成为可能.
HTML5 file api
该规范主要定义了以下数据结构：
File
FileList
Blob
HTML5 访问文件和大部分语言是一致的,先获取文件句柄，然后调用文件访问接口，打开文件句柄，读取文件!
选择文件
首先检测一下当前浏览器是否支持File Api：
function isSupportFileApi() {
if(window.File && window.FileList && window.FileReader && window.Blob
html5 查看更多
坐标: 深圳 , 南山区
职位: web 开发工程师
岗位职责：
1、负责后台相关业务系统的设计和研发；
2、负责平台开放接口的设计和研发；
3、优化性能、维护现有系统的功能模块、扩展的基础框架；
任职要求：
1、本科学历以上，计算机或相关专业，2年以上工作项目经验；对javascript语言本身有较为深刻的理解。
2、 了解NodeJS及其相关框架 ，要求至少有1年以上的服务器端研发经验；
3、对数据结构和算法设计有一定的理解；
4、熟悉MongoDB或MySQL ，有较强的SQL编程、优化能力；
5、熟悉Linux，熟悉常用的Shell命令；
6、熟练使用Git代码管理工具及
招聘 查看更多
为什么是 node.js 桌面应用
准确的说,这只是一个浏览器, node-webkit 项目是 chromium 和 node.js 搭建起来的本地运行时环境.
我们知道node.js 是javascript 在服务器端通过强大的 V8 引擎实现的.
chromium 内置了 V8 引擎
所以 node-webkit 就这样结合起来了.
回到刚才的问题,为什么说是桌面应用
Node支持的与操作系统交互的功能，文件系统，网络 , 操作系统资源等，
以及Node之上的第三方库都可以在node-webkit中进行使用
所以他很像是一个桌面级应用,但是又有区别
和传统桌面应用不
nodejs 查看更多
node.js 既然是依靠google V8引擎驱动的,而chrome浏览器内置了V8,所以就诞生了 node-webkit 这样的项目.
它的执行宿主也是 浏览器,但是由于 node.js 的支持,我们可以轻松访问当前执行环境的OS ,这不就是PC 客户端程序的功能吗.
可见 node-webkit 项目利用了web UI 的优势,node.js 访问本地OS 的优势,从而用 javascript 实现了一个本地 客户端程序.
今天我们首先来看下一个简单的 node-webkit 项目中 package.json 中,各项所代表的意义.
实例:
{
"name": "Ser
nodejs 查看更多
文章目录
对比
为什么使用 JSX
JSX 是 Javascript 代码里直接写XML的语法
JSX (Javascript XML syntax transform) 是使用XML语法编写Javascript的一套解析工具；
X代表XML；也可以理解为扩展(eXtension)，因为实现JSX功能本身就是使用Javascript；
React建议使用JSX（但非必要）
实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码
React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX
javascript 查看更多
让你的浏览器 console 加入 query 方便测试调试.
这样我们去操作 dom 就像 javascript 文件中书写代码一样方便.
而且查找结果实时输出到 console 中
你可以很轻松的发现 jquery 选择器是不是有误
操作的结果是不是你想要的
如何实现
你需要在你的 console 中引入一段 jquery
var jquery = document.createElement(‘script’);
jquery.src = “http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”;
docu
开发工具 查看更多
你有招聘/求职机会,请联系 QQ:378989619 免费发布!
地点: 北京
坐标: 朝阳门
3-5 年web开发经验
本科
职位: javascript全栈攻城狮
我们找这样的你：
• 仰望星空，脚踏实地。
• 计算机、通信、数学等相关专业毕业，有激情有梦想有野心，结果导向。
• 扎实的技术功底，优秀的沟通能力，能够身先士卒完成产品迭代。
• 能从技术和工程的角度与产品团队有效沟通合作。
• 对Web frontend, server stack, API design, data visualization有较深研究
• 较好的英文沟通能力。
我
招聘 查看更多
在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.
css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题
达到的效果
如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化
之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好
所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,漂浮在顶部右侧,不再跟随滚动条移动
简单说,当右侧侧边栏有内容时,跟随滚动条上下移动
当滚动到右侧无内容时,最小边的模块一直漂浮在右上角,如下图
入群讨论 和 订阅公众号 模块始终
css3 查看更多
UglifyJS2 这个工具使用很长时间了,但之前都是在 gulp 自动构建 时用到了 UglifyJS 算法进行压缩.
最近玩了一下 UglifyJS2 ,做了一个 在线压缩javascript工具 欢迎点击玩耍.
为什么要压缩 javascript 因为每个人开发者的书写习惯,定义参数习惯,已经使用习惯都不一样.
所以相同的功能出自不同开发者代码各异.这里牵扯到一个代码所占空间.
以前端为例来说明
大家通常都会认为,现在在网络时代,动不动就是10M光纤,拨号上网让人感觉是上个世纪的方式.....
说法是没有问题,但是,我们今天讨论的并不是终端下载速度.
而是前端压缩对服务器有何利
nodejs 查看更多
工欲善其事,必先利其器
所以逐渐 开发上线一些好玩的小工具
工具可以帮助我们完成很多事情,尤其是在线工具,不需要环境支持,不需要包的依赖,纯绿色,无公害 到今天为止,2个小工具上线,同时还专为为工具打造了一个聚合页
目前博客首页无入口,你可以点击下面链接进入
http://yijiebuyi.com/tools.html
在线生成二维码工具
支持二维码大小,前景色,背景色,长链接,多文字....等等
点击这里 在线生成二维码
欢迎玩耍,有想法,意见等可以进群讨论 --> 看右侧进群方式
回头还会专门开一篇博文讲述关于二维码生成
在线压缩 javascript
如果你的项目中
开发工具 查看更多
前几天和大家分享了一篇 javascript生成二维码,实现微信跳转
里面提到了一个二维码的容错率,知道今天发现了一个bug ,又重新找了找关于javascript 生成二维码的资料.回头我会整理一下,提供微信端跳出内置浏览器的最佳方案
什么是容错率
顾名思义,就是容许犯错的概率
二维码的容错率
是指生成的二维码允许犯错吗? 不是!
二维码的容错率,是指你生成的二维码就算被遮挡了一部分,或者有一部分没有完全显示出来,当时用户通过各种各样品牌的手机都能扫描成功,这个被遮挡部分在全部的比值,就相当于一个容错率
所以二维码的容错率,跟贴切的叫法是,二维码的冗余度有多大.
什么是冗余度
开发工具 查看更多
在任何一个项目中都缺少不了配置文件
具有下面的特点: 数据量不大,信息需要长期保存,容易维护
当然你也可以在数据库中建一张表,去存放这些信息,一点错都没有,但是,是不是有点牛刀杀鸡的感觉
今天和大家分享的是配置文件的定制,根据你的运行环境不同动态配置一张灵活的 config 配置文件.
之前的一篇博文 根据 ENV 环境变量不同加载不同的配置文件
这一篇可以说是上一篇的子章节,上一篇说的太笼统,
这一次针对一个点,然后铺开说一个功能
我的博客全部用绝对路径
为什么?
因为总有些人直接过来 copy 我的文章,然后不加出处,不署名,这是别人辛辛苦苦的劳动果实,作为一个I
nodejs 查看更多
javascript 中对于时间类型的处理 如何把日期字符串如“2015-09-19 09:48:46”转换为Date对象
第一种方法: 我们可以按下面的方法来拆分上面的时间字符串
var str="2015-09-19 09:48:46";
var strArray=str.split(" ");
var strDate=strArray[0].split("-");
var strTime=strArray[1].split(":");
var time=new Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2],strTime[0]
javascript 查看更多
上一篇博客中和大家分享了关于 字符串转时间类型
这一篇顺便整理下 javascript 中 Date 类型的一些方法
var time = new Date();
var year=time.getYear(); //获取当前年份(2位)
var year1=time.getFullYear(); //获取完整的年份(4位,2015-????)
var moonth=time.getMonth(); //获取当前月份(0-11,0代表1月)
time.getDate(); //获取当前日(
javascript 查看更多
javascript 中 new Array() 和 var arr=[ ] 创建数组到底有何不同?
今天就探讨一个 JavaScript 中很常见的问题.
var arr=[]
这是一种字面量定义数组的方法
var arr=new Array()
这是调用数组构造函数生成的数组
上面的2种定义数组的方法到底一样不一样
目前我们大致的认同是下面这样的
用new 关键字去内存开辟一个存储地址比较耗资源,耗内存. 而字面量方式直接在内存开辟一个存储字段相对简单,不耗资源.
我们首先不去否定上面的结论对不对.
首先从功能上来说 var =arr=[] 和 var arr= new
javascript 查看更多
因为没有新增 css 类别,所以关于css 的东西暂时归类到了 Html5
今天干活遇到的几个问题,下班前和大家分享
透明遮罩层
居中内容不透明
居中div显示内容
因为我的html5页面只在手机端展示,所以不考虑万恶的IE低版本浏览器
并且我把单独的css内容直接定义在html 标签里,这样你们看起来更加直观
透明遮罩层
<div id="nav_img_ios" style="display:none;height:100%; width:100%;
position:fixed; _position:absolute; top:0; z-index:10
html5 查看更多
现在的二维码相当火,借着移动互联网的风口也快飞起来了.现在各种语言的各种开源包,基本都有对应的生成二维码的源码.但是今天我们分享的不是服务器生成二维码,而是前端页面如果用 javascript 来生成一个二维码.这种动态生成二维码的需求越来越多.如果都要依靠服务器端赖生成,第一:面临资源紧缺的状况,如果在大的并发环境,这种cpu密集型计算必定导致一个问题,就是请求排队,那就不用谈了.用户不会一直在傻傻的等你.第二:就算你顺利生成了二维码,还面临一个网络传输带宽的压力,虽然它很小很小,但是当在一个并发压力大的环境下,依然面临带宽被占的问题.这样说来,如果能在客户端生成二维码,貌似是最好的解决方案
javascript 查看更多
去年12月，多位重量级Node.js开发者不满Joyent对Node.js的管理，自立门户创建了io.js。io.js的发展速度非常快，先是于2015年1月份发布了1.0版本，并且很快就达到了2.0版本，社区非常活跃。而最近io.js社区又宣布，这两个项目将合并到Node基金会下，并暂时由“Node.js和io.js核心技术团队联合监督”运营。本文将聊一聊Node.js项目的一些历史情况，与io.js项目之间的恩怨纠葛，他们将来的发展去向。希望能从历史的层面去了解这个开源项目在运营模式上是如何演变和发展的Node.js项目的由来自从JavaScript被Brendan Eich创造出来后，
javascript 查看更多
今天发现一个问题,当我在微信内置浏览器访问一介布衣博客时 ,竟然展示了广告...这当然很惊奇:一. 我在投放广告的时候选择了移动端不展示.二.我的blog 是响应式布局,就因为一个横条广告,彻底毁了. (在移动端浏览器不显示广告,但是微信内置浏览器显示blog底部横幅广告)所以,必须要解决掉.首先我需要准备一个公共方法,来判断当前浏览器是不是微信内置浏览器 ,正好用的了我之前写到的一篇blog .我们直接在公共的地方把此方法定义下:functionisWeiXin(){
varua=window.navigator.userAgent.toLowerCase();
if(ua.match(/M
javascript 查看更多
最近在做一个html5的小项目,虽然很小,但是考虑到用户网络制式,流量,甚至海外访问的速度优先保证.所以对于一些功能的实现不再考虑依赖任何第三方的包.今天和大家分享的是 html5 页面下拉到最底部时实现自动刷新加载新数据.当然,也不一定是html5下适用,web页面都适用.首先要清楚3个定义:文档高度这是整个页面的高度可视窗口高度这是你看到的浏览器可视屏幕高度滚动条滚动高度滚动条下滑过的高度所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.那我们就来定义三个不同的方法,分别获取上面3个高度值//文档高度
functiongetDocumentTop(){
varsc
html5 查看更多
使用html5 开发一个手机端页面如何能像app一样实现下拉刷新,或者上推刷新.我们试图用html5+css+javascript 来实现一下,没有用到任何第三方插件或者开源js包.先看下效果:这是微信内置浏览器打开后的效果,再看下从顶部按住下拉刷新的效果首先有一个目标div这个 div 用来监听 touchstart ,touchmove ,touchend 三个事件.这3个 事件分别表示 手指触摸屏幕开始, 手指在屏幕移动 , 手指触摸结束那么这个 目标div 一旦被监听后,你的手指放在此div内,就会触发上面的事件. 2. 当触发某个事件时,我们希望看到上面一个下拉的拉伸效果,并且提示
javascript 查看更多
手写的纯javascript 实现xmlhttprequest .屛弃了所有第三方javascript 包,这样做的目的主要是节省空间,现在很多第三方框架动辄几十K,上百k 等.如果我们只用到其中一个很小的 ajax 功能,完全没有必要这样做.而且当前的应用环境是手机端的展示,所以对于流量的考虑至关重要.看下代码实现:functionajax(option,callback){
//option参数必须是对象,里面包括(type请求方式,url请求路径,param请求参数)
if(typeofoption==='object'){
//option没有定义请求url,直接返回错
javascript 查看更多
node.js 连接 ms SqlServer ,你没有看错,就是这样.我们抛开一切操作系统的歧视, 当你需要用到的数据源存储在 SqlServer 中,那么就会遇到我们今天要说的情况.一. mssql 下载安装github地址:https://github.com/patriksimek/node-mssql mssql 默认使用Tedious驱动.Tediousby Mike D Pilsbury (pure javascript - windows/osx/linux) 默认支持(windows/osx/linux 等系统)所以你在mac 下用node.js 连接 sqlserver 是
nodejs 查看更多
前面分3篇博文介绍了 Ecmascript 5.1 数组扩展方法ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(三)今天和大家分享数组中关于归并的2个扩展方法 reduce , reduceRight我们逐一简绍reduce 此扩展函数相比其他方法略繁琐一点.reduce(callbak(previous, current, index, array, [initialValue])[in
javascript 查看更多
前面分2篇博文介绍了 Ecmascript 5.1 数组扩展方法中的迭代方法:ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)今天和大家分享数组中关于索引的2个扩展方法indexOflastIndexOf依次看下:1. indexOfindexOf(searchItem,[fromIndex])第一参数 searchItem 是查询的目标元素第二参数 fromIndex 是查询的起始位置 (可选参数,为空表示从索引0处开始查找)数组查询按照从左到右的顺序,从 fromIn
javascript 查看更多
接着上一篇的ECMAScript 6 数组扩展方法数组元素迭代方法还剩下 filter , some , every3. filter过滤数组,将数组元素迭代,依次调用回调函数array.filter(callback);实例:我们遍历迭代a数组,然后每个元素对2整除,符合条件的返回.vara=[1,2,3];
varb=a.filter(function(item,index,a){
returnitem%2==0;
});
console.log(b);filter 第一个参数是回调函数function(item,index,a)item 是当前迭代元素index 当前迭代元素所在索引a
javascript 查看更多
2011年发布了 ECMAScript 5.1 ,到现在普及程度也不高.如今马上要 ECMAScript 6 马上要发布标准了,何年何月才能普及到.从2013年 各大浏览器开始支持 ECMAScript 5.1包括:Chrome 24，Firefox 19，IE 10.0，Opera 12，Safari 6 等浏览器及更高版本得到支持.今天介绍ECMAScript 5.1 中数组新增的方法:先推荐一位朋友的博客 IT笔录 ,涉及到开发,系统,运维方方面面,各位攻城狮可以去赏脸拜读一下!操作数组元素的迭代方法:forEach() , map(), filter(), every(), some(
javascript 查看更多
javascript中闭包的作用我们之前专门聊过一次,点击查看闭包的形成环境先从javascript的简史说起:javascript 这门充满缺陷和坑的语言,在各大浏览器厂商的支持下,web大势所趋的形势下发展成一家独大的浏览器宿主语言,非常不容易,有兴趣的可以查阅下它的发展背景,当初创建javascript的作者Brendan Eich 在网景公司高层压力下,10天内写成的这门语言的第一个初版,他自己感觉非常不满意,用他自己的话说是这样的:"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：‘它的优秀之处并非原创
javascript 查看更多
webstorm 是一款非常好用的javascript 开发 IDE ,当然使用它是需要商业付费的,可以使用30天.IDE是开发的高效工具,但并不是所有web开发都使用它,萝卜青菜,各有所爱!有的人为了高逼格甚至还在专研Emacs ,还有的在为自己的vim安装插件,这些都阻挡不了webstorm 的发展,去看看这家公司你会发现多少优秀的IDE出自他们手上,这是工匠精神吗?你想提高编程效率,除了有一款高效的IDE ,还要知道如何使用它,或者是如何快键便利的使用它.记住,能用快键键的时候,千万不要用鼠标上去划拉,所以今天整理出一部分,能记住最好,记不住,强迫自己记住!下面的快键键只是针对macbo
开发工具 查看更多
其实关于promise 的博客,前端时间专门写了一篇关于 promise 规范的文章,promise规范 让 javascript 中的异步调用更加人性化.简单回忆下:promise/A规范定义的“Deferred/Promise”模型其实是实现了“发布/订阅”模型.通过Deferred对象发布事件，包括下面2种事件完成 --> resolve事件,失败 --> reject事件,通过Promise对象进行对应完成或失败的订阅类似于任务状态转变时事件被触发.将会对应的执行事件绑定函数.每个Promise任务都有三种状态：默认(pending)、完成(fulfilled)、失败(re
nodejs 查看更多
上一篇博文和大家分享了ENV定制开发,测试,发布环境变量.定制了以后如何来用,今天这篇就是要介绍如何使用自定义的不同环境变量.大概有些同学会有疑问.为什么各种环境不直接配成一致的.如果可以这么做的话,再好不过的.什么时候可能需要不同的配置.如果你想在开发环境下打印出log ,但是在正式运行环境不想打印log.你想在开发环境加载原 javascript 文件, 在正式运行环境下压缩javascript 文件.或者你想在开发环境加载一套 config 配置,在正式运行环境加载另外一套 config 配置.等等......一切你需要定制化的时候. 3. 我需要一个普通的json配置文件即可,为何要用
nodejs 查看更多
env 命令可以显示Linux系统当前用户环境变量,当然mac下也是可以的.注意是当前用户的环境变量.查看ENV环境变量:zhangzhi@moke:~$ENV
TERM_PROGRAM=iTerm.app
ANDROID_HOME=/Users/zhangzhi/Library/Android/sdk
SHELL=/bin/bash
TERM=xterm-256color
CLICOLOR=1
TMPDIR=/var/folders/b9/x5dylknd4x735wwy54f3g41h0000gn/T/
GRADLE_HOME=/usr/local/gradle-2.2.1
Apple_P
linux 查看更多
javascript 一统江湖的势头越来越猛,越来越重的前端,不得不实施前后端分离,angular.js 成功把前端javascript抽象成了一个复杂的MVC框架,注意,它是一个框架,可不是普普通通的插件,或者工具包.另一位兄弟则是跳出浏览器宿主的限制,活跃在了服务器端,大名鼎鼎的 node.js还有一位齐头并进的好哥们 mongodb ,它不仅让你使用熟悉的javascript范围数据库,而且还自己实现了javascript引擎.可能创建 javascript 语言的大牛,看到今天js的发展事态,想必脊梁骨也是阵阵发凉.我们好像扯远了,开题先痛痛快快意淫一把怎能善罢甘休,O(∩_∩)O~由
nodejs 查看更多
很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验.angular.js 作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angular.js 官方出了一个模块 angular-translate 来解决多语言国际化问题.我们前端采用 bower 包管理工具来管理依赖,点击链接查看bower 使用方法,这里不再详细说明.上面列出的3个模块我们都要用到,一会详细说明:今天和大家分享的内容目录:使用angular-translate 模块的前期准备工作创建过滤器做html页面内容的国际化创建服务做javascript 脚本里的内容国际化使用 an
angularjs 查看更多
随着前端项目越来越复杂,随便引入几个第三方javascript脚本库貌似已经习以为常,但是随着越来越多的包被引入,开发人员维护起来也是一件相当头疼的事,比如第三方库的版本更新,安装,卸载等.twitter推出了一个前端包管理器 bower 帮我们解决了这些头疼的事情.bower 完全借鉴了npm构思和实现原理,所以后面你会看到它的使用几乎和npm是一模一样.当然,bower 是运行在node.js 基础上,所以你的当前环境确保已经安装 node.js .bower 的基础功能是什么?1.注册模块每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配2.文件存储把文件存储在一个有效的网
javascript 查看更多
一些零散的点,如果读的时候自己能串起来就更好了.1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图.成功解耦了应用逻辑,数据模型,视图.2.它的视图也不是后台统一替换后渲染页面,而是视图被动态实时替换.视图上可以通过指定的 angular.js 指令来绑定模型数据.模型数据的变化又会直接影响视图的变化.3.控制器就像一座桥梁,负责连接模型和视图, 模型里包括数据和与数据进行交互的方法.视图只负责把模型数据的映射显示给用户.4.angular.js 会记录数据模型中的数据在任意时间点的
angularjs 查看更多
angular.js 下使用$q 创建一个 promose 链式调用.我们在前几天分享了一篇,关于javascript中 promose 规范的博客 (点击查看)现在很多很多的开源javascript库 实现了 promise 规范大名鼎鼎的npm 包 Qgithub地址:https://github.com/kriskowal/q 相仿的在 angular.js 下 $q 是一个小型轻量级的 promise 实现.作者据说是$q是从Kris Kowal的Q中获得灵感从而产生的一个promise/deffered实现我们如何使用$q 定义一个 promise .
vargetPersonLis
angularjs 查看更多
node.js 开发的站点,如果你也是用了nginx实现反向代理.那么在服务端可以轻松实现 gzip 压缩,让站点浏览更顺畅.前提条件: node.js + nginx 反向代理node.js 需要做的工作:express 4.0以下版本:app.use(express.compress());//主要是这句
app.use(express.json());
app.use(express.urlencoded());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookie
javascript 查看更多
目前还处于人口红利期的移动互联网发展的大红大紫,不断侵蚀传统pc份额,所以做一个全终端自动适配的站点已经成了主流.我的博客也是因为之前对于移动浏览器兼容太差,有些朋友提意见说UI体验也不太好,百度m站的UI亮瞎双眼......所以决定换换UI,因为页面结构大变,已经做好了被搜索引擎惩罚的准备.但是移动端考虑到网络环境,抛开wifi不谈,4G普及率不高,3G应该目前移动端网名主流实用的网络制式,2.5G和2G的用户就悲剧了,站点再优化貌似对这部分人来说加载几十K,几百K甚至上几M都是 wait , wait , wait ,loading....所以3G用户在浏览加载过程中,能节省几百K,加载速
javascript 查看更多
Promise是commonjs规范中的内容.现已经纳入了ES6，并且高版本的chrome、firefox浏览器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API.这里说的是指Promise/A+ 规范.Promose 主要用于异步调用规范,它有三种状态， 等待（pending）、已完成（fulfilled）、已拒绝（rejected）等待 --> 已完成 / 等待 --> 已拒绝 但是已完成和已拒绝状态不可能互相转化.为什么要出现 Promose 规范:一直以来,对于javascript的异步回调,我们祖祖辈辈都是用callback方式 (貌似
javascript 查看更多
此篇博文其实是上一篇的一个小细节,单独拿出来说一下,否则上一篇叉开的分支太多,太乱.因为上一篇和大家分享了node.js 中使用util.inherits实现继承 我们单独给出一个小demo ,_base.js 父类继承了 events.EventEmitter 类.varevents=require('events');
varutil=require('util');
function_base(){
this.emitter=newevents.EventEmitter(this);
};
util.inherits(_base,events.Even
javascript 查看更多
上一篇博客说到了node.js继承events类实现事件发射和事件绑定函数,其中我们实现了一个公用基类 _base ,然后在模型中差异化的定义了各种业务需要的模型并继承 _base 公共基类.但是其中的继承是一笔带过,今天详细的说下node.js中继承.varevents=require('events');
varutil=require('util');
function_base(){
this.emitter=newevents.EventEmitter(this);
};
util.inherits(_base,events.EventEmitte
nodejs 查看更多
events 是node.js的核心api ,几乎大部分node.js 的api都继承 events 类(javascript中没有类,也不存在继承,确切说是模拟类和继承,点击查看)比如我们常见的 http , stream ,fs .....等等.因为node.js的实现就是异步非阻塞io,通过事件轮询触发异步回调的机制,在单线程运行模式下,合理应用服务器资源才是制胜法宝,正是因为事件轮询才使得异步IO在高并发处理下游刃有余,所以大部分的包去继承 events 似乎合情合理.下面我们可以看一个常见的事件处理,但是我们用的时候似乎并没有当回事:varreq=http.request(param
nodejs 查看更多
前天写了一篇关于匿名函数的原型链和集成的文章(点击链接查看),里面蜻蜓点水式的把实例,原型对象和构造函数带过去了.这种抽象的东西不是很好记忆,我们通过一个示例来说明可能更好了解.functionPerson(name){
this.name=name;
}在javascript中,你可以把上面的代码看做一个函数,一个类,一个方法,都没有问题.但是你又能看到其他静态语言的一些身影, 比如: this.name=name; 这是标准的初始化内部属性/变量的语句,第一反应这应该是构造函数.其实,在javascript中,任何一个函数你都可以把它看做是构造函数,它没有明显的特征.那什么时候它就明显了呢
javascript 查看更多
javascript中函数成为一等公民后,导致很多其他语言函数所没有的功能,也正是这些特性让javascript更加灵活.函数可以是一个变量,可以是一个参数,可以是一个返回值,可以是一个类,可以是一个方法.....够灵活吧.其中高阶函数是javascript中闭包的实现基础,而闭包又是javascript高度灵活的体现.今天和大家分享的是一种特殊的函数,匿名函数.如其名一样,就是没有名字的函数,这种匿名函数用到的地方很多,比如jquery 的大部分实现都用了匿名函数.为什么要这样用? 因为javascript语言本身的缺陷使得它是一门没有私有作用域的语言,它不像一些高级语言一样,有命名空间或者
javascript 查看更多
我们在接触客户端javascript的时候,调试利器就是firebug ,也是当年为何喜欢用上firefox 浏览器的主要动力,当然,后来 chrome 插件里也出现了firebug的身影.....但是服务器端开发语言node.js 一直以来调试不是特别方便,可能是之前被 virtual studio惯坏了,这种用 console.log() 去打印变量甚至回调数据实在是太蹩脚.当然,有一款很强大的IDE ,webstrom对node.js提供了最全面的支持,也可以轻松配置来实现调试,下回有必要和大家分享一次.今天要分享的是关于node-inspector 下调试node.js程序.第一步:n
nodejs 查看更多
又有一周没有写博客了,这样下去会变成荒地的,所以在睡觉之前必须要发一篇,本想把angular.js 系列接下去.....但是最近的 angular.js 用到快吐血,暂时不想再提,上手是熟练了,但是感觉长进不大,项目催的太急,空闲的时间少之又少,就连这篇博客都是从看电影的时间里抽出来的,我又堕落了,阿门!熟悉 node.js 的朋友应该不陌生它身上牛逼闪闪的几个"大字" ,什么 '单线程' , '非阻塞' ,' 异步IO' ,'事件轮询' ,'高并发' 等等.......确实很牛,但是最近我发现
nodejs 查看更多
上一篇博客已经说了关于javascript中的封装,其中也说了javascript中本来是没有类的,我们上一篇的封装也是用javascript中的函数去模拟一个类,最后我们还模拟了一个构造函数.那么今天和大家分享的关于继承,同样不是真正严格意义上面向对象的继承,而是通过javascript中的原型链关系实现函数之间的属性,方法共享.下面简单分享几种封装的方法.既然说到继承,我们必须有一个基类functionPerson(){
this.eat=function(){
return'吃食物';
}
}
Person.prototype.sport=function(){
javascript 查看更多
javascript 是一门很灵活的语言,也是一门有缺陷的语言.比如我们今天要谈的,如何用面向对象的手法来封装javascript ,javascript是没有类的概念的.所以今天谈到的封装,其实就是用javascript的函数来实现的.varPeople{
name:’一介布衣’,
age:’30'
};这就是javascript中的一个对象,里面封装了2个属性.实例化一个对象的实例 peoplevarpeople=newPeople();
console.log(people.name,people.age);//一介布衣,30如果我们需要在函数里返回一个对象,如下代码:funct
javascript 查看更多
要搞清楚闭包,首先要知道javascript中的作用域.什么是作用域,你可以简单的理解成当前上下文环境.javascript 中的作用域有2种属于全局作用域.属于局部作用域全局作用域:比如我们在浏览器端编写的 javascript 代码,varname=‘test’;我们直接定义了一个变量name ,那么这个变量当前作用域就是全局,对于浏览器端全局就是window更确切的说,name 是window 对象的一个属性.console.log(window.name);//test
console.log(name);//test
console.log(this.name);//test上面三种
javascript 查看更多
上一篇博客我们已经简单的在index.html 实现了一个控制器代码.后面的学习我们会遵循一个控制器管理一个视图,一个路由对应一个视图的单一原则,所以再不会将controller控制器代码直接写到 index.html 中.我们会应用到angular.js中强大的模块来开发,比如路由,服务,过滤器,指令等模块.所以这一篇博客很有必要把各个模块之间的依赖关系,定义,使用等问题陈述一下.那么angular.js 到底是如何加载启动起来的呢.<!DOCTYPEhtml>
<htmlng-app="YIJIEBUYI">
<head>
<s
angularjs 查看更多
我们在上一篇angular.js输出hello world .我们在view中给模型的一个参数name赋值 “hello world” .这是一种简单的赋值,我们可以在视图中通过 ng 指令(以ng-开头的指令)实现了简单的赋值,如果遇到复杂的逻辑运算操作,那么视图里是无法执行复杂操作的,这时控制器就派上用场了.简单讲:控制器 controller 就是实现视图和模型之间数据传递,方法调用,改变模型等一系列操作,他是javascript函数(也可以看做类或者类型)控制器有几点需要注意的地方:1.一个控制器最好只包含一个视图的业务逻辑.以后你会看到我们的目录结构Client/scripts/co
angularjs 查看更多
在node.js开发中,你一定用到过 console 类来打印一些东西或者debug.但是你在使用console类之前一定没有require 相关的包.有的人会说,console 是node.js核心自带模块,不需要require ,错了,这里容易理解错.核心代码库是你安装node.js时已经包含了并编译了此模块.核心模块定义在node源代码的lib/目录下.但是用的时候还是要require 一下.比如上一篇博文提到的node.js里querystring类的使用,这个就是核心代码库自带的,但是你用的时候还是要require('querystring');而我们常常拿来直接就用
nodejs 查看更多
javascript经过浏览器大战的几次更新换代,终于一统江湖,稳坐第一把交椅,经过你会发现javascript语法和实现并不尽人意,但是丝毫不影响它的发展.我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪!起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等.在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定
javascript 查看更多
自google退出后,国内主流搜索引擎必须是百度,好多站长也抛google于脑后,一心针对百度优化.今天和大家分享一个百度站内搜索.(一)如果你用了百度的站长工具,左侧其他工具-->站内搜索就可以申请定制自己的站内搜索框.(二)之前三思悦站内搜索用google搜索,但是现在根本打不开的状态,让人很难堪,由于页面UI不想去变动的情况下如何用url跳转实现百度站内搜索呢.之前的google搜索是这样的跳转链接:https://www.google.com.hk/#hl=zh-CN&q=site:sansiyue.com+' + key上面的参数key是通过url编码后的关键词
心得 查看更多
jquery是前端开发者最喜欢的javascript开发框架之一,就像他的宣传语一样,写更少的代码,做更多的事情,现在拥有一大波开发者粉丝,甚至微软将它作为官方库,这一切说明jquery在开发者心中确实有很高的地位.jquery有一个强大的构造函数jQuery() 也就是我们常常简写的 $ ,这个构造函数强大之处在于,它能识别复杂的选择表达式进而找到你想要的元素.所以使用jquery的前提是会使用他的选择表达式,下面几种类似css选择器$(document)//选择整个文档对象 $('#documentID')//选择ID为myId的网页元素 $('a[name=me
javascript 查看更多
Sublime Text以其轻巧,漂亮和强大的功能被广大程序员所喜爱,完善的插件,代码缩略图,多窗口切换等,真是不可多得的一款跨平台编辑器.Sublime Text 2是一款共享软件，免费和收费的差别仅仅是偶尔会跳出一个购买弹出框.插件安装要使用Package Control组:在线安装方法按Ctrl+`调出console粘贴以下代码到底部命令行并回车：importurllib2,os;pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos
开发工具 查看更多
Github 托管这各式各样的开源项目,编程语言多种多样,当长久以来Ruby语言开发的项目居首.原因是因为Github 本身就是由Ruby 社区诞生出来的,所以长久以来它是Ruby的大本营.逐渐其他语言开发的开源项目也托管过来,久而久之语言种类越来越多,但是从未撼动过Ruby 的地位.但是到目前为止,javascript已经在github上稳坐第一把交椅,我个人认为是这几点因素:(1)如今前端javascript以垄断形式抢占web浏览器,可见前端javascript 工程师一抓一大把.(2)2009年发布至今的node.js 运行在服务器后端环境的javascript,以前得天独厚的web开
javascript 查看更多
node.js 是一个服务器端运行JavaScript脚本的环境,这个环境下保持了客户端JavaScript的api一致,并且强制使用单进程单线程模式下工作的方式也与运行在浏览器宿主下的javascript保持一致,看似没有其他服务器端语言的任何优势,错了,上面提到的单进程单线程模式其实就是它的一大优点.单线程+单进程(1)程序大部分api与客户端javascript保持一致(当然服务器端javascript可以随意执行io操作及调用一些系统层面的接口)(2)javascript语言历史悠长,门槛不高,涉及到javascript语言的工程师多如牛毛(3)单线程单进程模式促使程序执行上下文不需要
nodejs 查看更多
在node.js环境下使用mongoskin 操作mongoDB .mongoskin 的安装非常简单 npm install mongoskinmongoskin 的使用,上一篇博文已经说过,你可以返回去瞄一眼, 我是伟大的传送带下面的内容针对 mongoskin 操作 mongoDB 的api来说明:查这应该是所有数据库的灵魂,通过简单的api可以帮助我们从海量数据库总准备找到自己想要的数据.查询多条数据原生方法: find()使用: db.集合名.find([option]) [option] 为可选条件,可以空,也可以指定条件,如 {name:'xiaoxiao'}查
mongodb 查看更多
node.js 下的定时器setTimeout(匿名函数,毫秒数) 表示多少毫秒后触发一次此匿名函数.setInterval(匿名函数,毫秒数) 表示多少毫秒后重复触发此匿名函数.了解javascript 的人都应该非常熟悉这两个函数,但是这些定时器却不是 ECMAScript 标准里所包含的函数,起码不是现在标准里的.node.js 是运行的google V8环境下的服务器端javascript 脚本,当然V8是严格按照 EMCAScript 标准来实现的.但是,V8 也实现了这些定时器函数 .因为它们好用,功能强大,已经广泛被浏览器厂商默认支持.可以说已经是深入人心.据说 ECMAScri
nodejs 查看更多
何为核心? 重要的/不可缺的!node.js作为一门跨平台服务器端编程语言,必然也有它的核心.node.js继承了javascript 客户端语言该有的优势,同时摒弃了客户端javascript的一些缺点,比如在客户端javascript环境下,全局变量可以到处被定义,随意被覆盖,代码污染严重,所以node.js有了模块的概念,在模块里定义的全局变量如果没有被export ,那么此变量是私有的,只能在定义的模块是使用.不用提醒我,我并没有跑题,正因为模块机制,导致node.js的一些核心模块也编译成各自独立的二进制文件,他们就放在 node 源代码中 lib 文件夹下.为啥是二进制文件?你不用
nodejs 查看更多
用Sublime Text2写javascript非常爽作为nodejs开发必备神器,前面有单独介绍此编辑器的文章今天要说的是一款javascript格式化插件打开你的Sublime Text2按下快捷键 Ctrl+Alt+p 打开命令面板输入install 这时下拉框第一项就会显示安装包控制器(这个需要初始化安装,不明白的搜索本站关于sublime Text2 的介绍) 然后回车进入安装包控制器界面打开安装包控制器后,输入 jsformat 回车安装即可.安装后如何使用?在你写javascript代码时,按下 Ctrl+Alt+f 快捷键后,js代码自动格式化对齐,赶快试一试吧!如果你mac
开发工具 查看更多
在前几篇博客中谈到了用javascript中利用函数的函数模拟类,既然有类,那就应该存在面向对象的三大基本属性,或者说可以模拟出面向对象的三大基本属性.今天我们要学习的就是面向对象的继承 – javascript原型继承.为什么叫原型继承,因为我们知道javascript本没有类,它完全是基于原型对象的一门弱类型语言.所以javascript依靠原生对象创建出来的新对象就继承了原生对象的一些属性和方法.上面模拟了一个person类,person构造函数里初始化了姓名,然后我们创建一个学生的对象,并起名为 ‘小小’ 最后程序运行结果显示 小小.其实student 对象并没有定义姓名属性,为什么会
javascript 查看更多
上一博文说到了 javascript 中的原型继承,还说到了和大家分享 call , apply 实现继承,所以,就有了这篇博文.我们还是定义一个person 类 和一个 student 类,如下上面的student 类的构造函数传入了3个参数,当我们用call 实现 student 继承 person 的时候时,person的构造函数只实现了2个参数的传入,所以第三个参数必须要student自己来实现.及学生有了成绩的这个属性.student 类还重新定义eat 方法,到底之类重写父类的方法时,父类的同名方法会不会被覆盖? call 能不能实现 student 继承 person ? 这些疑
javascript 查看更多
常见的时间类型字符串:vardate1="2014-03-0912:00:00";javascript 对 类似上面这种时间转化不感冒,它更青睐的是这种字符串格式的时间 "2014/03/09 12:00:00" ,我们姑且称作date2所以有种非常简单的方法就是将 date1 的格式转换成 date2 的格式然后再转化时间类型.如下vartime1=newDate(Date.parse(date1.replace(/-/g,"/")));上面一行代码实现了date1 转 时间类型.求时间差方法:var days=time1-time
javascript 查看更多
从今天开始学习优秀前端开源框架jQuery源码.本系列主要针对 jQuery1.6 源码分析学习.准备工作:初始jQuery 框架.(function(){
// javascript 代码……
})();所有的jQuery 代码都包含在这个自调用匿名函数中什么是匿名函数?类似这样的函数定义(function(a,b) {
console.info( a+b);
})( 5,6);匿名函数其实是一种函数字面量,就像对象字面量一样{name:”小小”,age:1} 第一对圆括号括起来的function(){….} 是匿名函数的函数体,第二对圆括号 (5,6) 是匿名函数的参数,此函数字面量
javascript 查看更多
javascript 是一门容易上手也是一门如意犯错的语言,为什么这么说,它零活的类型转化有时让你摸不到头脑.类型有没有定义都无所谓,一旦你的变量前少了var ,那可能会造成一个严重的bug ,污染了全局变量,甚至修改了全局变量的值,导致其他引用该变量的程序出错.函数形参和实参可以不匹配,不匹配到什么程度呢? 类型可以不匹配,甚至参数数量也可以不匹配……..等等javascript里的一些坑,如果你发现了一定要绕过去,如果你发现不了,那可能浪费你很多的时间去调试一个bug1.关于 NaN 类型,这是个非数值类型,那它的值是什么呢? 谁都不知道,的确,它自己都不知道.所以看下面的坑if(NaN=
javascript 查看更多
嗯,没错,今天就是要讲下javascript中的类,哈哈,希望不要对大家有所误解!稍微对javascript有所了解的人应该知道,javascript这门弱类型语言没有类的概念,它是基于对象的.看了上面这句不仅有人低估起来了,既然有对象,为啥能没有类呢? 的确,javascript 是一门很怪异的弱类型语言,它的怪异之处以后慢慢讲,而它基于的对象并不是从类实例化过来的对象,而是原型对象.原型对象从哪来? 用一个不确切的比喻来说好比造物主创造世界的时候初始化了一些原生的东西,比如男人,女人,这是俩个活生生的原型而不是类型,也就是说javascript本身就内置了几种对象,而以后创建的对象都是从这
javascript 查看更多
简单说下关于javascript中的对象.javascript 不是一门面向对象的语言,而是一门基于对象的语言,它的所有类型都基于Object原型而存在.但是我们常说 javascript中包括值类型 ,比如 boolean ,number, string 等值类型,其实这些值类型被称为 伪对象,他们对应javascript中三个内置对象分别是:Boolean , Number , String 而解析器将这三个对象的方法和属性同样绑定在对应字面量值类型上(boolean,number,string) 所以javascript中值类型也是也拥有了方法和属性,一般推荐直接使用这3个内置对象的字面
javascript 查看更多
如你所想,确实有点标题党手里有本鸟哥的<<linux私房菜>>对于一个linux菜鸟来说受益很大,所以我也来道私房菜,对鸟哥致敬!!eval 很神秘,你不觉得吗? 你可能常常会用到这个函数,但是有不太明天它到底是干什么的,其实我之前也一样非常糊涂,所以写了这篇博和大家一起学习探讨.很早一段时间我认为 eval 是个格式化函数,为什么这样认为,起因是ajax接收后台传过来的json格式字符串,javascript直接接收后台传入的json格式总是不识别,只要用神奇的 eval 函数转化一下就ok了,下面我们一起来认识一下 evalevalw3c 给出的定义是: eval(
javascript 查看更多
javascript 代码下判断 DOM 下是否存在某个元素if(document.getElementByIdx_x(‘but’)){
alert(‘元素存在’);
}else{
alert(‘元素不存在’);
}但是在JQuery 下如判断某个元素是否存在.jquery 内置没有直接判断dom中某个元素是否存在的方法.$(“#but”) 获取到的是jquery 对象,是一个object,无法判断此元素是否存在.但是jquery 对象有个length 属性,表示当前jquery 对象中获取到几个 domElement 元素.所以我们的jquery代码可以这样写:if($(“#but”).le
javascript 查看更多
this的指向是由它所在函数调用的上下文决定的，而不是由它所在函数定义的上下文决定的。(1)在全局范围内,this就是指全局对象.alert(this);this直接指向了当前环境的全局对象 window(2)调用函数时,this指向全局对象.例如 test();functiontest(){
alert(this);
}
test();因为调用test() 的环境就是全局,结合开开头第一句话,this 指向当前执行环境,而非定义环境,所以很容易理解当前this就是指向 window(3)函数的方法调用时,this指向调用方法的对象. 例如 obj.test(); 这时this 指 obj对
javascript 查看更多
原理:浏览器跨域ifram禁止互相调用/传值.但是调用iframe时 window.name 却不变,正是利用这个特性来互相传值,当然跨域下是不容许读取ifram的window.name值.所以这里我们还要准备一个和主页面http://www.a.com/main.html 相同域下的代理页面http://www.a.com/other.html ,iframe调用子页面 http://www.b.com/iframe.aspx执行流程:浏览器执行主页面 http://www.a.com/main.html 时创建iframe 加载子页面 http://www.b.com/iframe.asp
javascript 查看更多
javascript的垃圾回收机制是运行环境自动收集机制.也就是说执行环境负责管理代码在执行过程中使用的内存.垃圾回收原理:找出内存中不再继续使用的变量,将其所占用的内存释放,开发人员不再关心内存的使用情况,内存的分配已经无用内存的释放完全实现了自动化管理.垃圾回收的方法有2种:(1)标记清除(2)引用计数标记清除:是目前javascript最常用的一种垃圾回收机制,当变量进入执行环境,将被标记为 “进入环境”当变量离开执行环境时,将被标记为 “离开环境”.垃圾收集器在运行时会给存储在内存中的所有变量都加上一个标记,然后检查哪些变量还在环境中使用,将去掉这些变量的标记,检查哪些变量被环境中的变
javascript 查看更多
数值转化的3个函数(1) Number()(2) parseInt()(3) parseFloat()(1)可以用于任何类型转化为 数值型.(2),(3)专门用于字符串转化为 数值型.Number() 函数转化规则:Boolean 类型: true 转化为1, false 转化为0.数值型: 只是简单的传入和返回.Null类型: 转化为0.undefined: 转化为NaN.字符串:遵循如下规则(1)如果字符串只包含数字,直接转化为对应的数值.(2)如果字符串包含有效的浮点格式 如 “3.3″ 则直接转化为对应的浮点格式.(3)如果字符串中包含16进制格式字符串,如 “0xf” 则直接转化为对
javascript 查看更多
Undefined:Undefined 类型只有一个值 undefined ,表示变量未定义此类型派生自Null 类型,所以出现一个很有趣的东西 if(null==undefined)alet(‘true’);将执行并弹出 true,因为条件是恒等的.当我们定义javascript变量的时候,其实默认就赋值为 undefined.var test; 其实等价于 var test=undefined;所以:当你要给一个对象定义变量时,最好这样, var testClass=null; 这样 testClass的默认值不少 undefined,保持的是一个空引用的null,下一步给testClas
javascript 查看更多
Array 是javascript语言中的一种引用类型,表示js里的数组.Array 对象的创建大致有4种方法.(1) var arr=new Array(); 上面使用构造函数创建了一个新的数组对象 arr,此数组为空数组,里面没有任何元素.(2)var arr=new Array(num);上面的num为整数,表示创建一个包含num个元素的空数组.(3)var arr=new Array(11,’xiaoxiao’,function(){alert(’3′)})上面调用构造函数时填充了3个参数,其实可以更多,表示创建一个数组并依次把参数当做新数组的元素填充到数组中.可见js的数组中元素可以
javascript 查看更多
大名鼎鼎的my97 日期选择控件,做开发的攻城狮应该或多或少都了解.今天正好有个需求是现实双月份,而且截至日期要大于开始日期等需求,第一时间想到了my97控件.首先把最后的效果图放上来一睹为快!我的页面首先有2个文本框,一个开始日期,一个结束日期<inputtype=“text”id=“startTime”placeholder=“起始日期”/>-
<inputtype=“text”id=“endTime”placeholder=“结束日期”/>首先去 my97 官网下载控件,引用的时候最需要引用一个主文件即可,其他样式,图片等都不需考虑,脚本内部做了引用.<sc
javascript 查看更多
正如标题所写,Function 确实是一个对象.而我们定义的任何一个函数其实都是Function 对象的一个实例,也可以理解为指向 Function 对象的一个实例.既然是对象的一个实例,那肯定指向了Function 类型的一个引用. 既然指向了一个引用类型的内存地址,那你也可以简单的把我们定义的函数理解为一个变量,这个变量指向了一个引用类型的地址,这个地址指向了Function 对象的一个实例.既然我们定义的函数其实是一个变量,那这个函数实例地址可以同时指向多个变量.看下面的代码:var add = new Function("n", "m", &qu
javascript 查看更多
javascript 环境里的时间戳随处可见,这个值表示的是从 1970年1月1日午夜0点开始计数到现在的一个毫秒数.获取JavaScript中的时间戳有几种方法:vartimestamp=Date.parse(newDate());此方法精确到了秒,毫秒位数上全部都是0vartimestamp=(newDate()).valueOf();此方法精确到了毫秒位.如果考虑到浏览器兼容性的问题,上面的方法可以兼容市面上大多的浏览器,推荐使用.vartimestamp=newDate().getTime();此方法和上面得到的值一样.vartimestamp=Date.now();如果是在V8环境下
javascript 查看更多
DatecurDate=newDate();
varpreDate=newDate(curDate.getTime()–24*60*60*1000);//前一天
varnextDate=newDate(curDate.getTime()+24*60*60*1000);//后一天
javascript 查看更多
我们知道javascript中的比较操作符有2种,== 和 ===== 是只比较值, === 不仅比较值还比较类型 ,详细的区别自动google去.这里简单说下判断比较操作符 ==== 此操作符比较常用,但是隐藏的”坑”也不少,你在开发过程中有没有跳到 == 操作符设下的”坑”呢?由于javascript中的类型转化非常灵活,我们知道除了null,undefined,false,0,”空字符串 转化为布尔型 false 外,其他都是 true,其中有一个例外,NaN 是个非数字类型,NaN!=NaN 成立.这个非常特殊.javascript中比较操作符规则:(1)当基本类型比较时,两边会转化成
javascript 查看更多
javascript 中的对象比较并不是值的比较.所以类似object 和json类型格式比较时要考虑是否包含相同的属性并具有相同的属性值.贴一个用于对象比较的函数.只需传入两个对象即可返回 true 或者 falsefunctioncompareObject(o1,o2){
if(typeofo1!=typeofo2)returnfalse;
if(typeofo1=='object'){
for(varoino1){
if(typeofo2[o]=='undefined')returnfalse;
if(!compareObject(o1[o],o2[o])
javascript 查看更多
Date.prototype.Format=function(fmt){//author:meizz
varo={
“M+”:this.getMonth()+1,//月份
“d+”:this.getDate(),//日
“h+”:this.getHours(),//小时
“m+”:this.getMinutes(),//分
“s+”:this.getSeconds(),//秒
“q+”:Math.floor((this.getMonth()+3)/3),//季度
“S”:this.getMilliseconds()//毫秒
};
if(/(y+)/.test(fmt))fmt=fmt.repl
javascript 查看更多
其实javascript中并没有像其他强类型语言里的模块作用域.何为模块作用域,比如C#代码中if(true)
{
stringrtnString="成功";
}else
{
stringrtnString="失败";
}
return rtnString;上面的代码在C#里编译时会报错,因为rtnString 分别在 if 和 else 分支做了定义,而外部并没有定义,所以报错,所以你可以简单的把强类型里面的 花括号 { } 理解为模块作用域.其他强类型语言大体也可以这样理解.所以在javascript中function showNum(count)
javascript 查看更多