• Flux 架构入门教程
    过去一年中,前端技术大发展,最耀眼的明星就是React。 React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架。也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架。 Facebook官方使用的是 Flux 框架。本文就介绍如何在 Reac...
  • JavaScript 模块的循环加载
    "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本。 // a.js var b = require('b'); // b.js var a = require('a'); 通常,"循环加载"表示存在强耦合,...
  • Node.js 命令行程序开发教程
    一种编程语言是否易用,很大程度上,取决于开发命令行程序的能力。Node.js 作为目前最热门的开发工具之一,怎样使用它开发命令行程序,是 Web 开发者应该掌握的技能。最近,Npm的网志有一组系列文章,我觉得写得非常好。下面就是我在它的基础上扩展的教程,应该是目前最好的解决方案了。一、可执行脚本我们从最简单的讲起。首先,使用 JavaScript 语言,写一个可执行脚本 hello 。#!/usr/bin/env node console.log('hello world'); 然后,修改 hello 的权...
  • 浏览器加载 CommonJS 模块的原理与实现
    就在这个周末,npm 超过了 cpan ,成为地球上最大的软件模块仓库。 npm 的模块都是 JavaScript 语言写的,但浏览器用不了,因为不支持 CommonJS 格式。要想让浏览器用上这些模块,必须转换格式。 本文介绍浏览器加载 CommonJS 的原理,并且给...
  • 如何让 node 运行 es6 模块文件,及其原理
    如何让 node 运行 es6 模块文件,及其原理 最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目,所以,node 不能运行 es6 模块文件就会很不便。 让 node 运行 es6 模块文件的方式有两种: 转码 es6 模块为 commonjs 模块 hook node 的 require 机制,直接让 node 的 re...
  • 构建工具是如何用 node 操作 html/js/css/md 文件的
    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对字符串的操作。 操作源代码的方式又主要分成两种: 当作字符串,进行增、删、改等操作 按照某种语法、规则,把字符串读取成一个对象,然后对这个对象进行操作,最后导出新的字符串 1. 操作 html 文件 html 的语法比较简单,并且一般操作 html 都是插入、替换、模板引擎渲染等在字符串上的操作,所以使用第...
  • 通用、封装、简化 webpack 配置
    通用、封装、简化 webpack 配置 现在,基本上前端的项目打包都会用上 webpack,因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候,总是免不了要配置 webpack,很是麻烦。 简化 webpack 配置的一种方式是使用社区封装好的库,比如 roadhog。roadhog 封装了 webpack 的一些基础配置,然后暴露一些额外配置的接口,并附加本地数据模拟功能(mock),详情可以参考 roadhog 主页。 另一种方式是自己封装 webpack,这样做自己能够更好的...
  • lua 模块管理的一点改进
    lua 从 5.2 开始,简化了 5.1 中的模块管理方式,然后一直保持到现在这个样子。 模块用 require 加载,同名模块在一个 vm 中只加载一次,第 2 次开始会返回上次加载的结果。加载模块时会利用 package.path 或 package.cpath 中定义的字符串模板,把模块名转换为文件名,依次尝试打开文件。 我在新项目中,由于整合了不少模块,感觉现有的这套机制有点点不够用。所以我做了一点点小改动,支持了类似 python ...
  • 扩展 lua require 的行为
    今天同事提了个需求,他希望可以给部分 lua 代码(由策划编写)做一个沙盒关起来。在 lua 里做沙盒很容易,只需要控制函数的环境就可以了。不过另一个附加需求是,这些代码还可以直接利用 require 加载。 而我们又不想去修改系统的 api 接口,那么怎么做到这点呢? 首先, 我希望使用的时候看起来像这样: local xxx = require "xxx" (myEnv) 和传统的 require 用法不同,可以在后面追加一个参数...
  • 一文搞懂 webpack4 从零学习的常用配置
    作者 | 双越,前端高级工程师,慕课网精英讲师来源 | 慕课网(imooc.com)webpack 的核心价值就是前端源码的打包,即将前端源码中每一个文件(无论任何类型)都当做一个 pack ,然后分析依赖,将其最终打包出线上运行的代码。webpack 的四个核心部分entry 规定入口文件,一个或者多个output 规定输出文件的位置loader 各个类型的转换工具plugin 打包过程中各种自定义功能的插件webpack 如今已经进入 v4.x 版本,v5.x 估计也会很快发布。不过看 v5 的变化相比...
  • Webpack 是怎样运行的?
    来自:知乎【饿了么大前端】专栏,作者@凯大胳膊。https://zhuanlan.zhihu.com/p/52826586在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率。我们知道一份Webpack配置文件主要包含入口(entry)、输出文件(output)、模式、加载器(Loader)、插件(Plugin)等几个部分。但如果只需要组织 JS 文件的话,指定入口和输出文件路径即可完成一个迷你项目的打包。下面我们来通...
  • 【第1664期】Vue组件库工程探索与实践之单元测试
    前言《Vue组件库工程探索与实践》系列文章第三篇来了,这篇聊聊组件库单元测试和持续集成功能的实现。今日早读文章由@京东用户体验设计部(JDC) @FransLee投稿分享。正文从这开始~~单元测试是软件工程领域的一个重要概念,指对软件中的最小可测试单元进行检查和验证,它是代码正确性验证的最重要的工具。单元测试也是组件库实现自动化测试与集成的基础。单元测试会封闭执行最小化单元的代码,使添加新功能和追踪问题更容易。对代码进行单元测试有很多好处:可节省手动测试的时间有助于减少开发新特性时产生的副作用有利于改进设计...
  • 分析Webpack中的require.context原理
    作者 | 二哲来源 | web前端开发(web_qdkf)前言require.context 其实是一个非常实用的 api。但是 3-4 年过去了,却依旧还有很多人不知道如何使用。而这个 api 主要为我们做什么样的事情?它可以帮助我们动态加载我们想要的文件,非常灵活和强大(可递归目录)。可以做 import 做不到的事情。今天就带大家一起来分析一下,webpack 的 require.context是如何实现的。准备工作在分析这个 api 之前呢,我们需要先了解一下一个最简单的文件,webpack 会编译...
  • PHP开发者,务必了解一下Composer
    Composer是一个非常流行的PHP包依赖管理工具,已经取代PEAR包管理器,对于PHP开发者来说掌握Composer是必须的.对于使用者来说Composer非常的简单,通过简单的一条命令将需要的代码包下载到vendor目录下,然后开发者就可以引入包并使用了.其中的关键在于你项目定义的composer.json,可以定义项目需要依赖的包(可能有多个),而依赖的包可能又依赖其他的包(这就是组件的好处),这些都不用你烦心,Composer会自动下载你需要的一切,一切在于composer.json的定义.Com...
  • webpack输出文件分析以及编写一个loader
    webpack构建流程webpack是时下最流行的前端打包构建工具,本质上是一个模块打包器,通过从入口文件开始递归的分析寻找模块之间的依赖,最终输出一个或多个bundle文件。webpack的构建是一个串行的流程,从启动到结束,会依次执行以下流程: 1. 初始化配置从配置文件和命令行中读取参数并合并参数,生成最终的配置项,并且执行配置文件中的插件实例化语句,生成Compiler传入plugin的apply方法,为webpack事件流挂上自定义钩子。 2. 开始编译生成compiler示例,执行compile...
  • 前端模块化详解(完整版)
    前言在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端,随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,此时在JS方面就会考虑使用模块化规范去管理。模块化固然有多个好处,然而一个页面需要引入多个js文件,就会出现以上这些问题。而这些问题可以通过模块化规范来解决,下面介绍开发中最流行的commonjs, AMD, ES6, CMD规范。
  • 面向前端工程师的Nodejs入门手册(一)
    文章通过实例的方式,让你了解Nodejs能够做什么,可以解决一些什么样的问题,并且知道它的使用场景。默认你已经安装了Nodejs和npm包管理器,并且熟悉一些简单的操作,如nodejs代码的运行启动,npm包的安装命令等基础操作。第一个服务端应用1.hello world首先通过一个前端工程师最常接触却不属于前端范畴的内容去了解一下Nodejs,创建一个http服务。接下来再来实现一个前端工作中与服务端最紧密的内容来看看Nodejs的魅力,数据接口。userId=12345const http = require;const url = require;const qs = require;// 生成一段返回值const genResponse = userId => ;// http服务http.createServer.listen(8000, ()=> { console.log('listen on 8000!
  • AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解
    抽象语法树,是一个非常基础而重要的知识点,但国内的文档却几乎一片空白。本文将带大家从底层了解AST,并且通过发布一个小型前端工具,来带大家了解AST的强大功能Javascript就像一台精妙运作的机器,我们可以用它来完成一切天马行空的构思。我们对javascript生态了如指掌,却常忽视javascript本身。AST的能力十分强大,且能帮你真正吃透javascript的语言精髓。事实上,在javascript世界中,你可以认为抽象语法树是最底层。通过抽象语法树解析,我们可以像童年时拆解玩具一样,透视Javascript这台机器的运转,并且重新按着你的意愿来组装。抽象语法树,的确是一种标准的树结构。