最新博文

• AMD规范

  JavaScript

  （一）模块的规范

  先想一想，为什么模块很重要？

  因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

  但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到Javascript模块现在还没有官方规范，这一点就更重要了。

  目前，通行的Javascript模块规范共有两种：CommonJS和AMD。我主要介绍AMD，但是要先从CommonJS讲起。

  （二）CommonJS

  2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。

  这标志"Javascript模块化编程"正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。

  node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。

  　　var math = require('math');

  然后，就可以调用模块提供的方法：

  　　var math = require('math');

  math.add(2,3); // 5

  因为这个系列主要针对浏览器编程，不涉及node.js，所以对CommonJS就不多做介绍了。我们在这里只要知道，require()用于加载模块就行了。

  （三）浏览器环境

  有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。

  但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上一节的代码，如果在浏览器中运行，会有一个很大的问题，你能看出来吗？

  　　var math = require('math');

  math.add(2, 3);

  第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。

  这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。

  因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

  （四）AMD

  AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

  AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

  　　require([module], callback);

  第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

  　　require(['math'], function (math) {

  math.add(2, 3);

  });

  math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

  目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。本系列的第三部分，将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。

  风口下的猪2019-06-09【JavaScript】

  阅读更多

• js模块化编程写法总结

  JavaScript

  时至今日，js也像中间层java、php等语言一样拥有“类”和“模块”的概念。在越来越多的项目开发中，传统的js写法已经不能满足需要，模块化编程越来越适用于现在具有“多人协助”、“多模块依赖关系复杂”等特性的实际项目。

  （一）原始写法

  模块就是实现特定功能的一组方法。

  只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

  function m1(){
  //...
  }

  function m2(){
  //...
  }

  上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。

  这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

  （二）对象写法

  为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

  var module1 = new Object({

  _count : 0,

  m1 : function (){
  //...
  },

  m2 : function (){
  //...
  }

  });

  上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性。

  　　module1.m1();

  但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

  　　module1._count = 5;

  （三）立即执行函数写法

  使用立即执行函数（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。

  　var module1 = (function(){

  var _count = 0;

  var m1 = function(){
  //...
  };

  var m2 = function(){
  //...
  };

  return {
  m1 : m1,
  m2 : m2
  };

  })();

  使用上面的写法，外部代码无法读取内部的_count变量。

  　　console.info(module1._count); //undefined

  module1就是Javascript模块的基本写法。下面，再对这种写法进行加工。

  （四）放大模式

  如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。

  　　var module1 = (function (mod){

  mod.m3 = function () {
  //...
  };

  return mod;

  })(module1);

  上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。

  （五）宽放大模式（Loose augmentation）

  在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

  　　var module1 = ( function (mod){

  //...

  return mod;

  })(window.module1 || {});

  与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。

  （六）输入全局变量

  独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

  为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

  　　var module1 = (function ($, YAHOO) {

  //...

  })(jQuery, YAHOO);

  上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

  风口下的猪2019-06-09【JavaScript】

  阅读更多

• var和let的区别

  JavaScript

  var我们经常看到，let见得很少，不过在js模块化编程项目中经常可见。

  （1）区别

  let 有块作用域

  var 没有作用域

  （2）例子

  比如for(let i=0;)在for循环外访问不到i的值，

  而for(var i=0;i<obj.length;i++),for循环之外还能访问到i的值。

  风口下的猪2019-06-09【JavaScript】

  阅读更多

• jquery中的dom选择器

  JavaScript

  很多时候，我们习惯使用的选择器是class类选择器和id选择器，其实除此之外，dom选择器还有另一种：其他属性选择器。

  举例一来看：

  <p>名称: <input id="new" type="text" name="user" class="sss"></p>

  （1）id选择器写法

  $("#new")

  （2）class选择器写法

  $(".sss")

  （3）其他属性选择器写法

  $("[type='text']")

  或者

  $("[name='user']")

  再比如

  <img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">

  用其他属性选择器还可以使用

  $("[src='img_pulpitrock.jpg']")

  或者

  $("[alt='Pulpit Rock']")

   

  总结：其他属性选择器写法上，要将属性键对值一起写，放在中括号中。其常用于input和img标签里

  风口下的猪2019-06-09【JavaScript】

  阅读更多

• Ajax-XHR的四个步骤

  JavaScript

  AJAX 工作原理

  

   

  AJAX是基于现有的Internet标准

  AJAX是基于现有的Internet标准，并且联合使用它们：

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

   

  1.建立xmlHttpRequest对象：

  var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

   

  2.设置回调函数，并针对不同的相应状态进行处理：

  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
  }

   

  3.用open方法连接服务器端处理程序（接口）

  xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

   

  4.用send方法向服务器发送数据

  xmlhttp.send();

   

   

  值得注意的是：responseText和responseXML作为xmlHttpRequest的属性，接受服务器返回数据，但以php写处理程序时，其只能接受php echo出来的数据。

  风口下的猪2019-06-09【JavaScript】

  阅读更多

• aria和role

  css/sass/less

  一.摘要

  目前互联网应用日益增强，其中大部分是通过混合技术（AJAX、DHTML、JavaScript 和 SVG）创建或自定义一些模拟桌面GUI程序的的 Web widget 小组件来增强 Web 应用程序的交互，但部分类似Dialog 的对话框、弹出层，模拟select 的下拉菜单等小组件并没能提供所需的语义作支持，残障人士有可能无法读懂当前信息。

  屏幕读取器、语音识别软件和屏幕键盘均通过特定的语义标识（title、button~）读取网页组件本质信息，而WAI-ARIA 角色标准在语义化标识约定方面起至关重要的作用。现在不但Firefox、Safari 4.0、Google 早已支持 WAI-ARIA，而且IE8 也开始部分支持，各种的JavaScript库支持WAI-ARIA将会是一个趋势。

  二.介绍

  role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role="button"，辅助工具就可以认出这实际上是个button。

  aria的意思是Accessible Rich Internet Application。可以看出，它用来标识页面中涉及到动态交互的地方，这些交互通常是由js和相关技术来实现的，例如浮出层，对话框弹出，下拉列表以及伪元素等。

  aria-*的作用就是描述这个tag在可视化的情境中的具体信息。

  aria由一套属性组成，属性分为role以及对应的states和properties，aria将html元素分为六种role，每种有对应的states和properties，但有一些是共用的。

  风口下的猪2019-06-09【css/sass/less】

  阅读更多

• Composer使用–下载第三方扩展库

  PHP

  composer是针对php项目下载第三方扩展类库的下载工具。使用composer的前提是按照composer。然后进行一系列配置操作。配置操作如下:

  1.生成一个空的composer项目

  随意在一个地方新建一个文件夹，命名为MFFC(My First Framework on Composer)。并在其文件夹下新建一个composer.json文件。

  composer.json文件编译代码如下：

  {
    "require": {
    }
  }

  2.生成ventor文件夹

  cmd cd到MFFC文件夹，然后执行"composer update"命令。便会在MFFC文件夹下生成一个ventor文件夹，专门用于存放第三方扩展类库。

   

  3.composer.json文件修改

  3.1申明依赖

  修改composer.json文件，在require中申明要依赖的第三方类库及其版本（如果没有版本或不能确定版本，则可以用通配符*代替）。

  3.2配置config解决https等问题

  用以解决https的问题，则需要config配置“secure-http”:false。

  3.3增加自动加载属性

  定义autoload属性，file字段指向新生成的ventor文件夹下的autoload.php

   

  例如：

  {

  "require": {

  "php": ">=5.4.0",

  "illuminate/database": "*",

  "houdunwang/Crypt":"^1.0"

  },

  "config": {

  "secure-http": false

  },

  "autoload": {

  "files": [

  "vendor/autoload.php"

  ]

  }

  }

  4.安装依赖

  (1)cd到MFFC文件执行“composerc install”指令便可安装。

  (2)如果没有全局安装的话，则运行：“php composer.phar install”

  (3)如果要更新所有包，则运行：“composer update”

  注意：composer install或者composer update，将会更新所有的扩展包，要慎用。

   

  5.对某一个扩展包的操作

  （1）新增加载某一扩展包（这里以后盾网的加密扩展类库为例，即houdunwang/Crypt）

  执行“composer requeire houdunwang/Crypt”即可。

  如果要指定加载某一版本，则执行“    composer requeire“houdunwang/Crypt：1.2.*”      ”

  （2）更新某一扩展包

  执行“composer update houdunwang/Crypt”即可。

  （3）移除某一扩展包

  执行“composer remove houdunwang/Crypt”即可。

  风口下的猪2019-06-09【PHP】

  阅读更多

• Windows下安装Composer的详细教程

  PHP

  1.安装composer-Setup.exe到php.exe所在目录

  运行composer-Setup.exe，会自动搜索的php.exe的安装路径，如果没有，就手动选择PHP下的php.exe的安装路径，安装。

   

  2.在PHP目录下，打开的php.ini文件，开启OpenSSL的扩展

  去掉extension= php_openssl.dll前面的分号，就是打开注释。

  

   

  3.新建一个环境变量下的用户变量

  变量名随便写，变量值就填写的PHP的安装路径。

   

  4.将composer.phar和composer.bat放入php.exe所在目录

   

  5.cmd下运行composer查看结果

  cmd下输入"composer"

  风口下的猪2019-06-09【PHP】

  阅读更多

• Wamp如何设置访问域名,即除了localhost，通过其他字符串访问127.0.0.1

  PHP

  步骤如下:

  1.修改hosts文件

  在电脑c盘下按照路径 C:\WINDOWS\system32\drivers\etc\hosts找到hosts文件

  在末尾添加字符串eg:

  127.0.0.1      localhost

  127.0.0.1      www.tp50.com

   

  2.修改httpd.conf文件

  在wamp server中Apache中找到httpd.conf

  添加以下代码：

  <VirtualHost *:80>

  ServerName                www.fullstack.com

  DocumentRoot          "E:/wamp64/www/"

  </VirtualHost>

  注意点：

  （1）ServerName字段是指访问127.0.0.1通过什么名称，其值为名称；

  （2）DocumentRoot字段是通过127.0.0.1要访问其内存的具体位置，其值为路径字符串

   

  3.重启wamp

  风口下的猪2019-06-09【PHP】

  阅读更多

• 关于php集成环境mysql wamp 修改密码后phpMyAdmin拒绝访问解决办法

  PHP
  2.将wamp\apps\phpmyadmin3.4.9\config.inc.php  

     $cfg['Servers'][$i]['password'] = '';

     修改为

     $cfg['Servers'][$i]['password'] = 'your_passwd';

     然后将wamp\apps\phpmyadmin3.4.9\libraries\config.default.php

     $cfg['Servers'][$i]['password'] = ''; （大概在200行左右）

     修改为

     $cfg['Servers'][$i]['password'] = 'your_passwd';

  3.一般数据库的默认用户名是“root”，密码默认为空。在进入数据库管理界面时点击“用户”或者“账户”，对数据库用户名权限进行修改以修改密码。

  风口下的猪2019-06-09【PHP】

  阅读更多

• 如何更改WAMPServer默认配置之更改MySql默认ROOT帐号的密码

  PHP

  在WampServer安装完成后，通过http://localhost/打开后可以看到WampServer自带的一个简单的页面，里面有phpinfo、phpmyadmin和sqlitemanager三个工具。打开phpmyadmin会在下方看到警告提示，root用户没有设置密码，我们先为root帐户设置密码。
  点击phpmyadmin页面中部的“用户”，可以看到“用户一览”，这时候应该有几行用户信息，点击root localhost这一行最右侧的编辑权限图标，在新页面找到“更改密码”，为root用户设置密码，并点击“执行”。
  然后刷新页面，会看到错误提示，这是因为帐户已经设置密码，到WampServer程序安装目录，在apps目录找到phpmyadmin的目录，打开phpmyadmin目录里面的config.inc.php文件，找到下面这一行：
  $cfg['Servers'][$i]['password'] = '';
  在等号右面的单引号里面输入刚才设置的密码，重新打开phpmyadmin的页面并刷新，这时候phpmyadmin就可以正常访问了。

  风口下的猪2019-06-09【PHP】

  阅读更多