精华内容
下载资源
问答
  • 前端值得轮子

    2020-08-17 11:21:29
    UI 轮子轮播、Tab、懒加载…… 照着饿了么UI库、Bootstrap 挨个实现就好。 做这种轮子比较考验 CSS 功力,你需要用尽量少的代码适应尽量多的场景。 流行 UI 模式的实现瀑布流、视差滚动、fullpage等。 原理简单又...

    链接:https://www.zhihu.com/question/29380608/answer/130729912

    UI 轮子
    轮播、Tab、懒加载……
    照着饿了么UI库、Bootstrap 挨个实现就好。
    做这种轮子比较考验 CSS 功力,你需要用尽量少的代码适应尽量多的场景。
    流行 UI 模式的实现瀑布流、视差滚动、fullpage等。
    原理简单又炫酷,何乐不为。

    DOM 操作的轮子
    实现得最好的当然就是 jQuery。
    由于 jQ 这么流行,所以你实现的结果很可能跟 jQ 的 API 一模一样。
    因此现在很少有人造这个轮子,但是在十年前,大家都是在早 DOM 轮子。
    这要求你对 DOM 和 API 设计有很多经验。
    至于 Virtual DOM,你可以在某种程度上认为是一种 DOM API 的封装,不过它的难点其实不在这里。

    JS 缺失的标准库的实现
    Date 很烂,所以有了 Moment
    Array 很烂,所以有了 Underscore Lodash
    JS 没有加载器,所以有了 require.js 等
    JS 自定义事件不好用,所以你可以自己造一个
    有的浏览器不支持 ES5,所以有了 es5shim。

    模板引擎……
    就一个正则替换还好意思叫引擎,实现这种轮子的第一要务是如何给出漂亮的 debug 信息,至于渲染速度的,我认为只能排在第二位。

    框架轮子
    MVC 可以造轮子,虽然不流行了,但对老项目很有用。MVVM 在不考虑 IE 的前提下造一个轮子也绝非难事。FLUX 单向数据流的轮子就更好造了。工程化轮子现在搞前端不会工程化怎么行。
    基于 Gulp 做一套自动化构建尽显逼格。
    所以你看,前端搞了这么多年,只不过就是每年把上面轮子重新造一遍而已

    展开全文
  • 最近面试的心得,前端还是得学精学细啊,所以我打算手动几个轮子 参考博文 手写call、apply、bind实现及详解 知识点准备 call apply bind 手写一个call // An highlighted block var Person = { name:...

    最近面试的心得,前端还是得学精学细啊,所以我打算手动造几个轮子

    参考博文 手写call、apply、bind实现及详解

    知识点准备

    • call

    • apply

    • bind


    手写一个call

    // An highlighted block
    var Person = {
    	  name: 'Richard',
    	  say() {
    	  	console.log(this);
    	  	console.log(`我叫${this.name}`)	
    	   },
    	  
    }
    var Person1 = {
    	  name: 'Silcence'
    }
    Person.say.call(Person1); //我叫Silence
    
    • 初步实现

    // An highlighted block
    Function.prototype.Mycall = function(context){
     	console.log(this); //在Function类的原型上是否有say 
    	//如果有, context.say 就是this 
        context.say = this;
    	context.say();	
    }
    Person.say.Mycall(Person1)
    

    在Function的原型上找到say方法,并赋予context

    • 问题所在

      • 未考虑无参数传递时的情况
        在这里插入图片描述
        未传参时 this指向Window

      • 未考虑多个参数的情况,若有多个参数应把参数传递给扩展方法

      • 给上下文定义的应是一个唯一的方法

    • 处理后的版本

      • Symbol()函数会返回symbol类型的值,每个从Symbol()返回的值都是唯一的
        console.log(Symbol(‘foo’) === Symbol(‘foo’));
      var Person = {
         name: 'Richard',
         say(name2) {
       	  	console.log(this);
       	  	console.log(`我叫${this.name}`)	
       	  	console.log(`这是传入的参数:${name2}`);
          },
         
       }
       var Person1 = {
       	  name: 'Silcence'
       }
       Function.prototype.Mycall = function(context){
        	console.log(this); //在Function类的原型上是否有say 
       	//如果有, context.say 就是this
       	
       	context = context||window // 参数为空时的处理 
           let fn = Symbol(context); //让context唯一
       	context.fn = this;
       	let arg = [...arguments].slice(1);  //除掉第一个参数,剩余的为传入参数   ...把类数组转换为真正的数组
       	context.fn(...arg)//执行fn
           delete context.fn //删除方法		
       }
        //Person.say.call(Person1);	
       
       //自定义call方法 
        Person.say.Mycall(Person1,'八哥');
      

      手写一个apply

      • ES6扩展运算符

        具体用法参照此篇文章 ES6扩展运算符

        和call方法大致相同,传参时第二个参数为数组

      var Person = {
        name: 'Richard',
        say(name2) {
        	console.log(this);
        	console.log(`我叫${this.name}`)
      	console.log(`这是传入的参数:${name2}`);	
         },
      	  
      }
      var Person1 = {
      	  name: 'Silcence'
      }
      Function.prototype.Mycall = function(context){
       	console.log(this); //在Function类的原型上是否有say 
      	//如果有, context.say 就是this
      	
      	context = context||window // 参数为空时的处理 
          let fn = Symbol(context); //让context唯一
      	context.fn = this;
      	let arg = [...arguments].slice(1);
      	context.fn(...arg)//执行fn
          delete context.fn //删除方法		
      }
       //Person.say.call(Person1);	
      
      //自定义call方法 
       Person.say.Mycall(Person1,['八哥']);
      

    手写一个Bind

    • Bind的定义

      fun.bind(thisArg[, arg1[, arg2[, …]]])

      • bind() 函数会创建一个新的绑定函数
      • 注意,一个 绑定函数 也能使用 new 操作符创建对象,这种行为就像把原函数当成构造器,thisArg 参数无效。也就是 new 操作符修改 this 指向的优先级更高。
    • 初步实现

    var Person = {
         name: 'Richard',
         say(name2) {
         	console.log(this);
         	console.log(`我叫${this.name}`)
       	console.log(`这是传入的参数:${name2}`);	
          },
         
    }
    var Person1 = {
         name: 'Silcence'
    }
    Function.prototype.myBind = function(thisArg){
       if (typeof this!== 'function'){
       	return;
       }
       var that = this;
       var args = [...arguments].slice(1)
       return function(){
       	//因为同样支持柯里化形式的传参,我们需要再次存储参数
       	let newArg = [...arguments]
       	console.log(newArg)
       	return that.apply(thisArg,args.concat(newArg));	
       }	
    }
    
    var result = Person.say.myBind(Person1)
    result('八哥');	
    

    关于柯里化传参

    • List item
    • new操作符的坑

      • 正如上文所提,来new一个绑定函数
      • //todo 这里我还不太理解
    Function.prototype.bind2 = function(context) {
     if (typeof this !== "function") {
       throw new TypeError("Error");
     }
    
     const that = this;
     // 保留之前的参数,为了下面的参数拼接
     const args = [...arguments].slice(1);
    
     return function F() {
       // 如果被new创建实例,不会被改变上下文!
       if (this instanceof F) {
         return new that(...args, ...arguments);
       }
    
       // args.concat(...arguments): 拼接之前和现在的参数
       // 注意:arguments是个类Array的Object, 用解构运算符..., 直接拿值拼接
       return that.apply(context, args.concat(...arguments));
     };
    };
    
    /**
    * 以下是测试代码
    */
    
    function test(arg1, arg2) {
     console.log(arg1, arg2);
     console.log(this.a, this.b);
    }
    
    const test2 = test.bind2(
     {
       a: "a",
       b: "b"
     },
     1
    ); // 参数 1
    
    test2(2); // 参数 2
    
    展开全文
  • 在知乎上回答了个问题,觉得写得甚好,便也将内容复制到了我的公众号上了。造轮子是一种快速的学习方式,而还有一种进阶则可以是从Github中生成轮子。总的来说就是:1. 查看...

    在知乎上回答了个问题,觉得写得甚好,便也将内容复制到了我的公众号上了。造轮子是一种快速的学习方式,而还有一种进阶则可以是从Github中生成轮子


    总的来说就是:


    1. 查看很多Github项目的源码及提交历史

    2. 写胶水代码生成自己的框架

    下面就是我之前造的一些轮子的过程:


    一、 SPA框架

    两年多以前,当时我们项目用的技术栈是:Backbone + Mustache + jQuery。在我们当时的环境下,主要组成有:

    1. Backbone提供了一个Router
    2. Mustache提供了模板
    3. jQuery抽象了DOM
    4. Ajax请求

    所以,这就是我造的第一个轮子的重要组成部分。

    接着,我就开始造轮子了:我称呼这个框架为Lettuce, GitHub - phodal/lettuce: Mobile Framework for Romantic. 简约的移动开发框架

    我参考了一本名为《Building A JavaScript Framework 》的电子书,以及《JavaScript框架设计》一书。因为没有任何框架的设计经验,所以只好试图按照书上的一点一滴来进行。在这个过程中,我开始深入JavaScript。

    从 GitHub - Submersible/self: Python-like class sugar. No more "var that = this"! 这个库中,我开始创建了自己的类的用法。

    接着,开始写Ajax,照例还是参考了jQuery和Zepto的代码。同样的还有Event、Promise等等的一些类。

    然后就是Router,源码来自于:A modern JavaScript router in 100 lines,又参考了早期的Backbone代码。

    以及模板引擎,照例代码也不全是我写的,用的是John Resig - JavaScript Micro-Templating

    最后就是一个简单的PageView:

    var SimpleView = new Lettuce.prototype.Class({});SimpleView.prototype.init = function () {};SimpleView.prototype.render = function (template, elementId) {
        document.getElementById(elementId).innerHTML = template;};var simpleView = {
        SimpleView: SimpleView};Lettuce.prototype = Lettuce.extend(Lettuce.prototype, simpleView);

    这其中最复杂的部分就是结合别人的代码,换句话来说,就是写胶水代码。Blabla,最后我就有了一个SPA框架。

    相关文章:一步步搭建JavaScript框架——初始化项目不过,这其中参考了几十个框架,这点对提升自己很重要。

    二、Slide框架

    八个多月前,当时的情形是我需要有一个可以定时放映地Slide框架,而当时大部分的框架都不能满足我的要求。

    实际上我只需要一个定时的功能,而Impress的最新代码又太复杂了。

    接着,我看了Github上的提交历史,我发现挺简单的,就自己创一个新的框架,称为GitHub - phodal/echoesworks: Next-Generation Tech Blog/Presentation/Slider Framework

    我需要下面的一些元素:

    1. Markdown解析器
    2. Slide框架
    3. Github代码显示
    4. 进度条

    同样的,我在Github上搜索不同的组件,最后再把他们结合到一起。

    相关文章:

    1. EchoesWorks —— 打造下一代技术Blog/Presentation 框架2. EchoesWorks构建: LocalStorage与跨Tab通信接着,我又造了不同的几个框架:

    1. GitHub - phodal-archive/geng: DSL Step 1 —— Parse: 天干物燥,小心火烛2. GitHub - phodal-archive/tile.js: a pure javascript tiled map render3. GitHub - phodal/resume: RESUME Generator随着造的轮子越来越多,写胶水代码的能力越来越强,我就开始创造一些更有意思的轮子。

    三、Luffa

    Luffa是最近造的一个轮子,对于不写测试的人来说可能没有那么有意思。

    我称其为基于Virtual DOM与Diff DOM的测试代码生成,GitHub - phodal/luffa: A Test Framework Helper for Fun当时我们项目用的是Jasmine和Jasmine jQuery作为测试框架。在写测试的时候,觉得看起来太麻烦了,就想着写一个框架来Diff DOM的变化。

    然后就是Virtual DOM那些东西了。

    virtual-dom可以说由下面几部分组成的:

    1. createElement,用于创建virtual Node。

    2. diff,顾名思义,diff算法。

    3. h,用于创建虚拟树的DSL——HyperScript。HyperScript是一个JavaScript的HyperText。

    4. patch,用于patch修改的内容。

    所以,我们可以很容易地创建出一个这样的框架来Diff测试中DOM元素的修改。

    0?wx_fmt=jpeg相关文章:基于Virtual DOM与Diff DOM的测试代码生成最后因为创建Growth就没有继续了: GitHub - phodal/growth: Be Awesome Developer


    阅读原文到我的Github Ideas墙上查找。

    展开全文
  • 很遗憾,被巨大孤独感包围着的你,终究还是追不上前端造轮子的速度。 上个月,前端领域又诞生了一个新的“轮子” —— Fastpack,号称可以轻松快速打包 JavaScript 应用。它的目标是做到对于中型应用(约 1000 个...

    每月新增开源项目。顾名思义,每月更新一期。我们会从社区上个月新收录的开源项目中,挑选出有价值的、有用的、优秀的、或者好玩的开源项目来和大家分享。数量不多,但我们力求推荐的都是精品。目前这些开源项目主要来源于编辑们的搜集和用户的投递,所以如果你有更好的开源项目推荐,欢迎积极投递。

    戳这里查看投递软件的正确姿势 >>> https://www.oschina.net/question/2918182_2266982

    Web 开发 — Web 不死!Web 永存!

    fastpack/fastpack Fastpack —— 轻松快速打包 JavaScript 应用

    如果你追前端轮子的速度足够快,那么你的孤独就追不上你。很遗憾,被巨大孤独感包围着的你,终究还是追不上前端造轮子的速度。

    上个月,前端领域又诞生了一个新的“轮子” —— Fastpack,号称可以轻松快速打包 JavaScript 应用。它的目标是做到对于中型应用(约 1000 个模块)的打包时间小于 1000ms,增量重新打包时间低于 100ms。基准测试结果如下:

    可以看到,与目前主流的打包工具 Webpack 和 Parcel 相比,Fastpack 的时间打包时间具有不小的优势,有兴趣的童鞋不妨尝试一下。不过会不会有童鞋尝试使用这个轮子之后,冒出“还不如我自己造个轮子”的念头?叫 Veryfastpack?

    tokio-rs/tokio Tokio —— 使用 Rust 编写的快速可靠异步编程框架

    目前看来,Rust 依然还只是一门小众的编程语言。不过 Rust 已经表示他们将会在今年发布一个重大版本 —— Rust 2018。所以它依然值得我们关注。Rust 是由 Mozilla 主导开发的一门现代系统编程语言,现阶段 Rust 定位的方向还是高性能服务器端程序开发,非常适合对性能要求较高的系统编程领域。

    这里推荐的 Tokio 是使用 Rust 编写的异步编程框架,它将复杂的异步编程抽象为 Futures、Tasks 和 Executor,并提供了 Timer 等基础设施。Tokio 快速、可靠,且可扩展。

    Tokio 是一个事件驱动的非阻塞 I/O 平台,用于使用 Rust 编程语言编写异步应用。在高层设计上,它提供了一些主要组件:

    • 多线程、工作窃取(work-stealing)的 task scheduler 。

    • 由操作系统的事件队列(epoll,kqueue,IOCP 等)支撑的 reactor 。

    • 异步 TCP 和 UDP 套接字。

    这些组件提供构建异步应用所需的运行时组件。

    hnes/libaco —— 一个极速的轻量级 C 非对称协程库

    很少推荐关于 C 语言的开源项目,一是因为与其他语言相比,C 语言相关的开源项目比较少,再则就是优秀的 C 语言开源项目也不多。本次推荐的 libaco 是一个高性能的网络开发库,质量相当高,7月份开源发布出来的时候,曾登上过 Github Trending 排行榜。

    作者对 libaco 的定义是一个极速的轻量级 C 非对称协程库(10 ns/ctxsw + 一千万协程并发仅耗内存 2.8GB ),相当耀眼的数据表现。下面简要介绍一下这个项目:

    • 除了一个生产级别的 C 协程库实现,还包含了一个详细的文档描述了如何实现一个 最快且正确 的协程库以及其严格的数学证明
    • 核心实现不超过 700 行代码,包含了一个协程库应该有的全部功能;
    • 在 AWS c5d.large 机器上的性能测试结果指出,一次协程间上下文切换仅耗时 10 ns (独立执行栈);
    • 用户在创建新的协程时,可以选择其拥有一个独占的执行栈,或者是与其它任意数量的协程一起共享一个执行栈;
    • 拥有极致的内存使用效率:一千万个协程并发执行仅消耗 2.8GB 的物理内存( tcmalloc, 每一个协程使用 120B 的复制栈)。

    上文中的"最快"指的是在满足 Sys V ABI Intel386 或者 AMD64 约束下最快的上下文切换实现。

    Funny OSS — 有趣的开源软件

    browsh-org/browsh —— 基于文本的现代 Web 浏览器

    Browsh 是一个纯文本浏览器,可以运行在大多数的 TTY 终端环境和任何 Web 浏览器。它能渲染现代浏览器所能渲染的任何东西:HTML5、CSS3、JS、视频甚至 WebGL。其主要目的是在远程服务器上运行,并通过 SSH/Mosh 或浏览器内的 HTML 服务进行访问,以显著降低带宽,从而提高浏览速度并降低带宽成本。

      

    左:渲染为 TTY 模式;右:渲染为浏览器模式

    有人不禁会问,为什么要用这么一个浏览器呢?须知道,世界上还有很多地方的网络环境不是那么好,对于带宽有限的他们,这类产品能很好地兼容内容和体验之间的矛盾,让互联网的便利普及更多的用户。

    chubin/cheat.sh —— 一个只能在命令行访问的文档查询网站

    cheat.sh 是一个网站,更是一个实用的速查工具。通过使用命令行执行 curl http://cheat.sh,便可快速查找任何编程语言的一些语法和关键字。

    cheat.sh 具有以下这些功能特性:

    • 简洁的 curl/browser 界面

    • 涵盖 55 种编程语言,一些 DBMSes 和 1000 多个最重要的 UNIX/Linux 命令

    • 无需安装,随处可用

    • 超快,通常在 100 毫秒内即可返回答案

    • 可以直接在代码编辑器中使用,无需打开浏览器

    本期的推荐到此结束,更多有趣有料的开源软件尽在开源中国社区等你来发现~!

    最后,欢迎关注【开源中国】微信公众号(ID: oschina2013),获取更多技术干货和第一手开源资讯!

    展开全文
  • 用React+ReactHook+Egg造轮子全栈开发旅游电商应,完整版12章,本课程将带你在解锁 React.js 和 Egg.js 的高阶玩法的同时,完成轮子的构建过程,再用造好的轮子开发一个全栈项目。你将在掌握全栈技能的同时,获取...
  • 使用原生打造markdown转换为html–造轮子 地址:https://gitee.com/itwangyang_coder/markdown-to-html
  • 如何把自己写的包发布到npm上 ...包中的组件要基于全局的组件封装,在此不介绍了。 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名,使用 vue init webpack-simple 命令是...
  • index.html <!doctype html> <html lang="zh-Hans"> <head>... content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 再也不怕面试官问会造轮子吗?前端端学会造轮子,提高你的代码复用率、增强面向对象的编程思维,在Vue项目中封装cookie、localStorage工具类
  • 造轮子——前端路由

    千次阅读 2019-06-26 15:16:05
    【摘要】 【造轮子】是学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章。为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习...
  • 二话不说轮子我都会还怕你面试问吗?一天一个轮子,干就完了。 关注公众号加入微信交流群 车轮计划 计划天天变 框架 原生Ajax JS基础 承诺 无极/种族 路由 新的 通话/申请/绑定 对象创建 深拷贝,浅拷贝 算法...
  • 到底要不要重复造轮子?

    千次阅读 2019-03-07 18:38:27
    到底要不要重复造轮子? 在软件开发领域有一句著名的话:不要重复造轮子 那这句有道理吗? 我个人觉得: 这句话有道理,也没道理,这句话是有矛盾和冲突的! 任何事情都有两面性 我们必须要知道一件事情,在...
  • 程序员如何通过造轮子走向人生巅峰?

    万次阅读 多人点赞 2020-01-07 10:02:07
    程序员圈经常流行的一句话:“不要重复造轮子”。在计算机领域,我们将封装好的组件、库,叫做轮子。因为它可以拿来直接用,直接塞进我们的项目中,就能实现对应的功能。 有些同学会问,人家都已经做好了,你再来...
  • 1、1年以上的前端开发人群,有 Vue.js 基础,想要针对 Vue 深入进阶 2、对 Vue3.0 感兴趣,对 Vue 源码学习、造轮子感兴趣 3、想要迅速上手 Vue3.0 用于项目开发 04 训练营上课方式及专属服务 ▶上课时间:12月21日...
  • 关于重复造轮子是否必要,中庸点来说便是仁者见仁智者见智,这有点有点玄之又玄的味道。 有人说必要,有人说不必要,于是就有人无所适从了。 从粗浅的商业角度来说,重复造轮子是十分不必要的,作为赶场者,要的...
  • index.html <!doctype html> <html lang="zh-Hans"> <head>... content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 1.需求分析 用例图,状态分析 2.UI设计 我们用SKetch进行ui的设计。可以利用symbol来绑定关联等详细操作就不赘述了,设计效果如下图 3.项目初始化 1.先在github上建立gulu仓库,本地电脑创建项目,关联到远程仓库 ...
  • 要对 JS,CSS,SVG 非常了解才能 UI 轮子 2. 没有需求就不要写代码,没有设计稿也不要写代码 没有设计稿就问设计要,不给就闹,把事情闹的越大越好,只要不写代码做什么都是对的 3. 单元测试是重构的前提 ...
  • 1、1年以上的前端开发人群,有 Vue.js 基础,想要针对 Vue 深入进阶 2、对 Vue3.0 感兴趣,对 Vue 源码学习、造轮子感兴趣 3、想要迅速上手 Vue3.0 用于项目开发 04 训练营上课方式及专属服务 ▶上课时间:12月25日...
  • 下面这些是我在工作中积累的一些常用的前端开源插件,这里只是罗列出来,详细的用法各个插件官网或者Gayhub都有介绍。注意:往往一个解决方案会有多个插件,需要读者根据自己的实际业务需求进行甄别选用,欢迎留言...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...D.
  • 本次工具是模仿outils,自己造轮子,还有网上收集的工具函数,进一步封装,在这里感谢outils的作者,还有好友Alex 目的:高效率完成前端业务代码 业务开发过程中,会经常用到日期格式化、url参数转对象、浏览器类型...
  • 前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,后续持续跟新中...... 开发工具  ...
  • 此文转载自:https://blog.csdn.net/clli_Chain/article/details/112307521 文章目录 一、现在要你完成一个Dialog组件,说说你设计的思路?它应该有什么功能?...一、现在要你完成一个Dialog组件,说...
  • index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">......
  • 通常而言,我们如果有稳定以及可靠的库可以用,其实是没有必要去再重新造轮子。 我们重新轮子的时候,能确保代码的稳定性吗?能确保没有BUG吗? 3、必要时使用空格 虽然在很多程序员的眼里,空格对于...
  • 点击蓝字前端真好玩关注,回复“1”加入前端进阶群与大家一起成长现在是能用什么库/框架就上什么的时代。这并没有什么不好的,因为毕竟大部分公司需要的是开发人员快速实现功能,只要实现的没问题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,119
精华内容 5,247
关键字:

前端造轮子